Update ESLint configuration and refactoring

.config/.eslintrc

@@ -4,7 +4,7 @@
  * In order to extend the configuration follow the steps in
  * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config
  */
- {
+{
   "extends": ["@grafana/eslint-config"],
   "root": true,
   "rules": {

.config/.prettierrc.js

@@ -5,12 +5,12 @@
  */
 
 module.exports = {
-  "endOfLine": "auto",
-  "printWidth": 120,
-  "trailingComma": "es5",
-  "semi": true,
-  "jsxSingleQuote": false,
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 2
-};
+  endOfLine: 'auto',
+  printWidth: 120,
+  trailingComma: 'es5',
+  semi: true,
+  jsxSingleQuote: false,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+};

.config/webpack/utils.ts

@@ -2,11 +2,9 @@ import fs from 'fs';
 import process from 'process';
 import os from 'os';
 import path from 'path';
-import util from 'util';
 import { glob } from 'glob';
 import { SOURCE_DIR } from './constants';
 
-
 export function isWSL() {
   if (process.platform !== 'linux') {
     return false;
@@ -21,7 +19,7 @@ export function isWSL() {
   } catch {
     return false;
   }
-} 
+}
 
 export function getPackageJson() {
   return require(path.resolve(process.cwd(), 'package.json'));
@@ -40,7 +38,8 @@ export function hasReadme() {
 export async function getEntries(): Promise<Record<string, string>> {
   const pluginsJson = await glob('**/src/**/plugin.json', { absolute: true });
 
-  const plugins = await Promise.all(pluginsJson.map((pluginJson) => {
+  const plugins = await Promise.all(
+    pluginsJson.map((pluginJson) => {
       const folder = path.dirname(pluginJson);
       return glob(`${folder}/module.{ts,tsx,js,jsx}`, { absolute: true });
     })

.config/webpack/webpack.config.ts

@@ -8,12 +8,13 @@
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import LiveReloadPlugin from 'webpack-livereload-plugin';
 import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
 import { Configuration } from 'webpack';
-import LiveReloadPlugin from 'webpack-livereload-plugin';
-import { DIST_DIR, SOURCE_DIR } from './constants';
-import { getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils';
+
+import { getPackageJson, getPluginJson, hasReadme, getEntries, isWSL } from './utils';
+import { SOURCE_DIR, DIST_DIR } from './constants';
 
 const pluginJson = getPluginJson();
 

.eslintrc

@@ -1,20 +1,17 @@
 {
-  "extends": "./.config/.eslintrc",
+  "extends": ["./.config/.eslintrc", "@volkovlabs/eslint-config"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "project": "./tsconfig.json",
     "sourceType": "module"
   },
-  "plugins": ["deprecation"],
-  "rules": {
-    "deprecation/deprecation": ["error"],
-    "sort-imports": [
-      "error",
-      {
-        "ignoreCase": true,
-        "ignoreDeclarationSort": true
+  "overrides": [
+    {
+      "files": ["**/*.test.tsx", "**/*.test.ts"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
       }
-    ]
-  }
+    }
+  ]
 }

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Update to Grafana 10.1.5 (#88)
 - Update to Grafana 10.3.1 (#90)
+- Update ESLint configuration and refactoring (#91)
 
 ## 3.2.0 (2023-10-04)
 

package.json

@@ -28,6 +28,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/webpack-env": "^1.18.2",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@volkovlabs/eslint-config": "^1.2.2",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "eslint-plugin-deprecation": "^2.0.0",

src/components/App/App.test.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
 import { AppPluginMeta, PluginType } from '@grafana/data';
 import { render, screen } from '@testing-library/react';
-import { AppInfo, TestIds } from '../../constants';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { APP_INFO, TEST_IDS } from '../../constants';
 import { App } from './App';
 
 /**
@@ -41,12 +42,12 @@ describe('App', () => {
     it('Should render community page', async () => {
       render(
         <BrowserRouter>
-          <App basename={AppInfo.root} meta={meta} path={null as any} query={null as any} onNavChanged={jest.fn()} />
+          <App basename={APP_INFO.root} meta={meta} path={null as any} query={null as any} onNavChanged={jest.fn()} />
         </BrowserRouter>
       );
 
-      expect(screen.queryByTestId(TestIds.development.root)).not.toBeInTheDocument();
-      expect(screen.getByTestId(TestIds.community.root)).toBeInTheDocument();
+      expect(screen.queryByTestId(TEST_IDS.development.root)).not.toBeInTheDocument();
+      expect(screen.getByTestId(TEST_IDS.community.root)).toBeInTheDocument();
     });
   });
 

src/components/App/App.tsx

@@ -1,7 +1,8 @@
+import { AppRootProps } from '@grafana/data';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { AppRootProps } from '@grafana/data';
-import { Routes } from '../../constants';
+
+import { APP_ROUTES } from '../../constants';
 import { AppSettings } from '../../types';
 import { Community } from '../Community';
 import { Development } from '../Development';
@@ -17,7 +18,7 @@ interface Props extends AppRootProps<AppSettings> {}
 export const App: React.FC<Props> = () => {
   return (
     <Switch>
-      <Route exact path={Routes.development} component={Development} />
+      <Route exact path={APP_ROUTES.development} component={Development} />
       <Route component={Community} />
     </Switch>
   );

src/components/Community/Community.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
 import { PluginPage, PluginPageProps } from '@grafana/runtime';
-import { TestIds } from '../../constants';
+import React from 'react';
+
+import { TEST_IDS } from '../../constants';
 import {
-  ApacheECharts,
+  ApacheEcharts,
   Base64Image,
   Calendar,
   DataManipulation,
   DynamicText,
-  GrafanaAPI,
-  RSSAtom,
+  GrafanaApi,
+  RssAtom,
   Static,
   Variable,
 } from '../Plugins';
@@ -24,14 +25,14 @@ interface Props extends PluginPageProps {}
 export const Community: React.FC<Props> = () => {
   return (
     <PluginPage>
-      <div data-testid={TestIds.community.root}>
-        <ApacheECharts />
+      <div data-testid={TEST_IDS.community.root}>
+        <ApacheEcharts />
         <Base64Image />
         <Calendar />
         <DataManipulation />
         <DynamicText />
-        <GrafanaAPI />
-        <RSSAtom />
+        <GrafanaApi />
+        <RssAtom />
         <Static />
         <Variable />
       </div>

src/components/Config/Config.test.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { TestIds } from '../../constants';
+import React from 'react';
+
+import { TEST_IDS } from '../../constants';
 import { Config } from './Config';
 
 /*
@@ -23,6 +24,6 @@ describe('Config', () => {
 
     render(<Config plugin={plugin} query={null as any} />);
 
-    expect(screen.getByTestId(TestIds.config.root)).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.config.root)).toBeInTheDocument();
   });
 });

src/components/Config/Config.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import { AppPluginMeta, PluginConfigPageProps } from '@grafana/data';
 import { FieldSet } from '@grafana/ui';
-import { AppInfo, TestIds } from '../../constants';
+import React from 'react';
+
+import { APP_INFO, TEST_IDS } from '../../constants';
 import { AppSettings } from '../../types';
 
 /**
@@ -14,8 +15,8 @@ interface Props extends PluginConfigPageProps<AppPluginMeta<AppSettings>> {}
  */
 export const Config: React.FC<Props> = () => {
   return (
-    <FieldSet data-testid={TestIds.config.root}>
-      <h2>{AppInfo.name}</h2>
+    <FieldSet data-testid={TEST_IDS.config.root}>
+      <h2>{APP_INFO.name}</h2>
       <p>
         The Volkov Labs App includes Docker image and App plugin with information about Volkov Labs supported Grafana
         plugins.

src/components/Development/Development.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { PluginPage, PluginPageProps } from '@grafana/runtime';
-import { TestIds } from '../../constants';
+import React from 'react';
+
+import { TEST_IDS } from '../../constants';
 import { Balena, Environment } from '../Plugins';
 
 /**
@@ -14,7 +15,7 @@ interface Props extends PluginPageProps {}
 export const Development: React.FC<Props> = () => {
   return (
     <PluginPage>
-      <div data-testid={TestIds.development.root}>
+      <div data-testid={TEST_IDS.development.root}>
         <Balena />
         <Environment />
       </div>

src/components/Plugins/ApacheECharts.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Apache ECharts
  */
-export const ApacheECharts: React.FC = () => {
+export const ApacheEcharts: React.FC = () => {
   return (
     <Card>
       <Card.Heading>Apache ECharts Panel</Card.Heading>

src/components/Plugins/Balena.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Balena App

src/components/Plugins/Base64Image.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Base64

src/components/Plugins/Calendar.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Calendar

src/components/Plugins/DataManipulation.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Data Manipulation

src/components/Plugins/DynamicText.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Dynamic Text

src/components/Plugins/Environment.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Environment Data Source

src/components/Plugins/GrafanaAPI.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { Card, LinkButton, TagList } from '@grafana/ui';
+import React from 'react';
 
 /**
  * Grafana HTTP API
  */
-export const GrafanaAPI: React.FC = () => {
+export const GrafanaApi: React.FC = () => {
   return (
     <Card>
       <Card.Heading>Grafana HTTP API Data Source</Card.Heading>