Update with lint rules

VolkovLabs · Nov 23, 2023 · ba4fa06 · ba4fa06
1 parent c0d04d9
commit ba4fa06
Show file tree

Hide file tree

Showing 37 changed files with 286 additions and 270 deletions.
diff --git a/cypress/integration/01-view-panel.test.ts b/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');
 
     /**

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/components/ButtonView/styles.ts → ...omponents/ButtonView/ButtonView.styles.ts b/src/components/ButtonView/styles.ts → ...omponents/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;

diff --git a/src/components/ButtonView/ButtonView.test.tsx b/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', () => {

diff --git a/src/components/ButtonView/ButtonView.tsx b/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>

diff --git a/src/components/Collapse/Collapse.tsx b/src/components/Collapse/Collapse.tsx
@@ -1,7 +1,7 @@
 import { IconButton, useTheme2 } from '@grafana/ui';
 import React from 'react';
 
-import { Styles } from './styles';
+import { getStyles } from './styles';
 
 /**
  * Properties
@@ -59,7 +59,7 @@ export const Collapse: React.FC<Props> = ({
    * Styles and Theme
    */
   const theme = useTheme2();
-  const styles = Styles(theme);
+  const styles = getStyles(theme);
 
   return (
     <div className={styles.root}>

diff --git a/src/components/Collapse/styles.ts b/src/components/Collapse/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`
       border: 1px solid ${theme.colors.border.weak};

diff --git a/src/components/GroupsEditor/styles.ts → ...nents/GroupsEditor/GroupsEditor.styles.ts b/src/components/GroupsEditor/styles.ts → ...nents/GroupsEditor/GroupsEditor.styles.ts
@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 /**
  * Styles
  */
-export const Styles = (theme: GrafanaTheme2) => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     newGroup: css`
       margin: ${theme.spacing(2)} 0;

diff --git a/src/components/GroupsEditor/GroupsEditor.test.tsx b/src/components/GroupsEditor/GroupsEditor.test.tsx
@@ -4,7 +4,7 @@ import { getJestSelectors } from '@volkovlabs/jest-selectors';
 import React from 'react';
 import { DragDropContext, DropResult } from 'react-beautiful-dnd';
 
-import { TestIds } from '../../constants';
+import { TEST_IDS } from '../../constants';
 import { LevelsEditor } from '../LevelsEditor';
 import { GroupsEditor } from './GroupsEditor';
 
@@ -32,7 +32,7 @@ jest.mock('@grafana/ui', () => ({
  * Mock LevelsEditor
  */
 jest.mock('../LevelsEditor', () => ({
-  LevelsEditor: jest.fn(() => <div data-testid={TestIds.levelsEditor.root} />),
+  LevelsEditor: jest.fn(() => <div data-testid={TEST_IDS.levelsEditor.root} />),
 }));
 
 /**
@@ -94,15 +94,15 @@ describe('GroupsEditor', () => {
    * Selectors
    */
   const getSelectors = getJestSelectors({
-    ...TestIds.groupsEditor,
+    ...TEST_IDS.groupsEditor,
     ...InTestIds,
   });
   const selectors = getSelectors(screen);
 
   /**
    * Levels Selectors
    */
-  const getLevelsSelectors = getJestSelectors(TestIds.levelsEditor);
+  const getLevelsSelectors = getJestSelectors(TEST_IDS.levelsEditor);
   const levelsSelectors = getLevelsSelectors(screen);
 
   it('Should render groups', () => {
@@ -677,7 +677,7 @@ describe('GroupsEditor', () => {
     const onChange = jest.fn();
 
     jest.mocked(LevelsEditor).mockImplementation(({ name, onChange }) => (
-      <div data-testid={TestIds.levelsEditor.root}>
+      <div data-testid={TEST_IDS.levelsEditor.root}>
         <button
           data-testid={InTestIds.buttonLevelsUpdate}
           onClick={() =>

diff --git a/src/components/GroupsEditor/GroupsEditor.tsx b/src/components/GroupsEditor/GroupsEditor.tsx
@@ -11,12 +11,12 @@ import {
   NotDraggingStyle,
 } from 'react-beautiful-dnd';
 
-import { TestIds } from '../../constants';
+import { TEST_IDS } from '../../constants';
 import { LevelsGroup, PanelOptions } from '../../types';
 import { reorder } from '../../utils';
 import { Collapse } from '../Collapse';
 import { LevelsEditor } from '../LevelsEditor';
-import { Styles } from './styles';
+import { getStyles } from './GroupsEditor.styles';
 
 /**
  * Properties
@@ -42,7 +42,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
    * Styles and Theme
    */
   const theme = useTheme2();
-  const styles = Styles(theme);
+  const styles = getStyles(theme);
 
   /**
    * States
@@ -199,7 +199,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                       onCancelEdit();
                                     }
                                   }}
-                                  data-testid={TestIds.groupsEditor.fieldName}
+                                  data-testid={TEST_IDS.groupsEditor.fieldName}
                                 />
                               </InlineField>
                               <Button
@@ -209,7 +209,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                 icon="times"
                                 size="sm"
                                 onClick={onCancelEdit}
-                                data-testid={TestIds.groupsEditor.buttonCancelRename}
+                                data-testid={TEST_IDS.groupsEditor.buttonCancelRename}
                               />
                               <Button
                                 variant="secondary"
@@ -222,14 +222,14 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                 tooltip={
                                   isUpdatedNameValid ? '' : 'Name is empty or group with the same name already exists.'
                                 }
-                                data-testid={TestIds.groupsEditor.buttonSaveRename}
+                                data-testid={TEST_IDS.groupsEditor.buttonSaveRename}
                               />
                             </div>
                           ) : (
                             <div className={cx(styles.groupHeader, styles.groupHeaderText)}>{name}</div>
                           )
                         }
-                        headerTestId={TestIds.groupsEditor.item(name)}
+                        headerTestId={TEST_IDS.groupsEditor.item(name)}
                         actions={
                           <>
                             {editItem !== name && (
@@ -246,7 +246,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                   setEditName(name);
                                   setEditItem(name);
                                 }}
-                                data-testid={TestIds.groupsEditor.buttonStartRename}
+                                data-testid={TEST_IDS.groupsEditor.buttonStartRename}
                               />
                             )}
                             <Button
@@ -261,7 +261,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                  */
                                 onChangeItems(items.filter((item) => item.name !== name));
                               }}
-                              data-testid={TestIds.groupsEditor.buttonRemove}
+                              data-testid={TEST_IDS.groupsEditor.buttonRemove}
                             />
                             <Icon name="draggabledots" {...provided.dragHandleProps} className={styles.dragIcon} />
                           </>
@@ -281,7 +281,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
         </Droppable>
       </DragDropContext>
 
-      <InlineFieldRow className={styles.newGroup} data-testid={TestIds.groupsEditor.newItem}>
+      <InlineFieldRow className={styles.newGroup} data-testid={TEST_IDS.groupsEditor.newItem}>
         <InlineField
           label="New Group"
           grow={true}
@@ -292,15 +292,15 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
             placeholder="Unique name"
             value={newGroup}
             onChange={(event) => setNewGroup(event.currentTarget.value)}
-            data-testid={TestIds.groupsEditor.newItemName}
+            data-testid={TEST_IDS.groupsEditor.newItemName}
           />
         </InlineField>
         <Button
           icon="plus"
           title="Add Group"
           disabled={!newGroup || isNameExistsError}
           onClick={onAddNewGroup}
-          data-testid={TestIds.groupsEditor.buttonAddNew}
+          data-testid={TEST_IDS.groupsEditor.buttonAddNew}
         >
           Add
         </Button>

diff --git a/src/components/LevelsEditor/styles.ts → ...nents/LevelsEditor/LevelsEditor.styles.ts b/src/components/LevelsEditor/styles.ts → ...nents/LevelsEditor/LevelsEditor.styles.ts
@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 /**
  * Styles
  */
-export const Styles = (theme: GrafanaTheme2) => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     header: css`
       padding: ${theme.spacing(0.5, 0.5)};