Update ESLint configuration and refactor

.eslintignore

@@ -13,6 +13,4 @@ websocket/
 timescale/
 
 # Tests
-**/*.test.ts
-**/*.test.tsx
 __mocks__

.eslintrc

@@ -5,5 +5,13 @@
     "ecmaVersion": "latest",
     "project": "./tsconfig.json",
     "sourceType": "module"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.tsx", "**/*.test.ts"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
 }

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 2.3.0 (IN PROGRESS)
+
+### Features / Enhancements
+
+- Add clean table state on tab change (#101)
+- Update ESLint configuration and refactor (#102)
+
 ## 2.2.0 (2023-11-20)
 
 ### Features / Enhancements

cypress/integration/01-view-panel.test.ts

@@ -1,5 +1,5 @@
 import { e2e } from '@grafana/e2e';
-import { TestIds } from '../../src/constants';
+import { TEST_IDS } from '../../src/constants';
 
 /**
  * Dashboard
@@ -29,7 +29,7 @@ describe('Viewing an Variable panel', () => {
     /**
      * Root
      */
-    const chart = currentPanel.find(getTestIdSelector(TestIds.tableView.root));
+    const chart = currentPanel.find(getTestIdSelector(TEST_IDS.tableView.root));
     chart.should('be.visible');
 
     /**

package.json

@@ -7,6 +7,7 @@
     "@grafana/ui": "^10.2.1",
     "@tanstack/react-table": "8.9.3",
     "@tanstack/react-virtual": "3.0.0-beta.60",
+    "@volkovlabs/components": "^1.1.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
@@ -29,7 +30,7 @@
     "@types/node": "^18.18.10",
     "@types/react-beautiful-dnd": "^13.1.7",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@volkovlabs/eslint-config": "^1.1.0",
+    "@volkovlabs/eslint-config": "^1.2.1",
     "@volkovlabs/jest-selectors": "^1.2.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
@@ -75,5 +76,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "2.2.0"
+  "version": "2.3.0"
 }

src/components/ButtonView/styles.ts → src/components/ButtonView/ButtonView.styles.ts

@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 /**
  * Styles
  */
-export const Styles = (theme: GrafanaTheme2) => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     root: css`
       display: flex;

src/components/ButtonView/ButtonView.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { getJestSelectors } from '@volkovlabs/jest-selectors';
 import React from 'react';
 
-import { AllValue, AllValueParameter, TestIds } from '../../constants';
+import { ALL_VALUE, ALL_VALUE_PARAMETER, TEST_IDS } from '../../constants';
 import { useRuntimeVariables } from '../../hooks';
 import { VariableType } from '../../types';
 import { selectVariableValues } from '../../utils';
@@ -36,7 +36,7 @@ describe('ButtonView', () => {
   /**
    * Selectors
    */
-  const getSelectors = getJestSelectors(TestIds.buttonView);
+  const getSelectors = getJestSelectors(TEST_IDS.buttonView);
   const selectors = getSelectors(screen);
 
   /**
@@ -77,8 +77,8 @@ describe('ButtonView', () => {
     type: VariableType.CUSTOM,
     options: [
       {
-        text: AllValue,
-        value: AllValueParameter,
+        text: ALL_VALUE,
+        value: ALL_VALUE_PARAMETER,
         selected: false,
       },
       {
@@ -164,7 +164,7 @@ describe('ButtonView', () => {
       })
     );
 
-    expect(selectors.item(false, AllValue)).toBeInTheDocument();
+    expect(selectors.item(false, ALL_VALUE)).toBeInTheDocument();
     expect(selectors.item(false, 'device1')).toBeInTheDocument();
     expect(selectors.item(false, 'device2')).toBeInTheDocument();
   });
@@ -207,7 +207,7 @@ describe('ButtonView', () => {
     /**
      * All should be selected
      */
-    expect(selectVariableValues).toHaveBeenCalledWith([AllValueParameter], variable);
+    expect(selectVariableValues).toHaveBeenCalledWith([ALL_VALUE_PARAMETER], variable);
   });
 
   it('Should work if no status color', () => {

src/components/ButtonView/ButtonView.tsx

@@ -3,11 +3,11 @@ import { EventBus, PanelData } from '@grafana/data';
 import { Alert, Button, useStyles2, useTheme2 } from '@grafana/ui';
 import React, { useMemo } from 'react';
 
-import { AllValue, AllValueParameter, TestIds } from '../../constants';
+import { ALL_VALUE, ALL_VALUE_PARAMETER, TEST_IDS } from '../../constants';
 import { useRuntimeVariables, useStatus } from '../../hooks';
 import { PanelOptions } from '../../types';
 import { isVariableWithOptions, updateVariableOptions } from '../../utils';
-import { Styles } from './styles';
+import { getStyles } from './ButtonView.styles';
 
 /**
  * Properties
@@ -40,7 +40,7 @@ export const ButtonView: React.FC<Props> = ({
   /**
    * Styles and Theme
    */
-  const styles = useStyles2(Styles);
+  const styles = useStyles2(getStyles);
   const theme = useTheme2();
 
   /**
@@ -68,7 +68,7 @@ export const ButtonView: React.FC<Props> = ({
    */
   if (!variable) {
     return (
-      <Alert severity="info" title="Variable" data-testid={TestIds.buttonView.noVariableMessage}>
+      <Alert severity="info" title="Variable" data-testid={TEST_IDS.buttonView.noVariableMessage}>
         Variable is not selected.
       </Alert>
     );
@@ -80,7 +80,7 @@ export const ButtonView: React.FC<Props> = ({
   const options = isVariableWithOptions(variable) && variable.options.length;
   if (!options) {
     return (
-      <Alert severity="info" title="Variable" data-testid={TestIds.buttonView.noOptionsMessage}>
+      <Alert severity="info" title="Variable" data-testid={TEST_IDS.buttonView.noOptionsMessage}>
         Options are not available.
       </Alert>
     );
@@ -94,10 +94,10 @@ export const ButtonView: React.FC<Props> = ({
           padding: ${padding}px;
         `
       )}
-      data-testid={TestIds.buttonView.root}
+      data-testid={TEST_IDS.buttonView.root}
     >
       {variable.options.map((option) => {
-        const value = option.value === AllValueParameter ? AllValue : option.value;
+        const value = option.value === ALL_VALUE_PARAMETER ? ALL_VALUE : option.value;
         const status = getStatus(value);
         const backgroundColor = option.selected
           ? status.exist
@@ -132,7 +132,7 @@ export const ButtonView: React.FC<Props> = ({
                 value,
               });
             }}
-            data-testid={TestIds.buttonView.item(value)}
+            data-testid={TEST_IDS.buttonView.item(value)}
           >
             {option.text.toString()}
           </Button>