Update ESLint configuration and refactor (#239)

* Update ESLint configuration and refactor

* Update CHANGELOG.md

* Ignore types declarations in eslint

* Update ESLint

* Fix E2E

---------

Co-authored-by: asimonok <sashasimonok@gmail.com>

.eslintignore

@@ -12,3 +12,6 @@ dist/
 **/*.test.ts
 **/*.test.tsx
 __mocks__
+
+# Declarations
+**/*.d.ts

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 4.3.0 (IN PROGRESS)
+
+### Features / Enhancements
+
+- Update ESLint configuration and refactor (#239)
+- Update Collapse from @volkovlabs/components (#239)
+
 ## 4.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 a panel with Dynamic Text', () => {
     /**
      * Chart
      */
-    const chart = currentPanel.find(getTestIdSelector(TestIds.panel.root));
+    const chart = currentPanel.find(getTestIdSelector(TEST_IDS.panel.root));
     chart.should('be.visible');
 
     /**

package.json

@@ -38,7 +38,8 @@
     "@types/node": "^18.18.10",
     "@types/react-beautiful-dnd": "^13.1.7",
     "@types/uuid": "^9.0.7",
-    "@volkovlabs/eslint-config": "^1.1.0",
+    "@volkovlabs/components": "^1.1.0",
+    "@volkovlabs/eslint-config": "^1.2.1",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "eslint-webpack-plugin": "^4.0.1",
@@ -80,5 +81,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "4.2.0"
+  "version": "4.3.0"
 }

src/components/CustomEditor/CustomEditor.tsx

@@ -7,7 +7,7 @@ import { CodeEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } fr
 import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
 import React, { useCallback, useMemo } from 'react';
 
-import { CodeLanguage, EditorType, Format, HelpersEditorSuggestions, TestIds } from '../../constants';
+import { CodeLanguage, EditorType, Format, HELPERS_EDITOR_SUGGESTIONS, TEST_IDS } from '../../constants';
 
 /**
  * Properties
@@ -64,7 +64,7 @@ export const CustomEditor: React.FC<Props> = ({ value, onChange, context, type =
       return suggestions;
     }
 
-    return HelpersEditorSuggestions.concat(suggestions);
+    return HELPERS_EDITOR_SUGGESTIONS.concat(suggestions);
   }, [templateSrv, type]);
 
   /**
@@ -92,7 +92,7 @@ export const CustomEditor: React.FC<Props> = ({ value, onChange, context, type =
   }, [context.options.editor.language, type]);
 
   return (
-    <div data-testid={TestIds.textEditor.root}>
+    <div data-testid={TEST_IDS.textEditor.root}>
       <CodeEditor
         language={language}
         showLineNumbers={true}

src/components/CustomEditor/CutomEditor.test.tsx

@@ -3,7 +3,7 @@ import { CodeEditor, CodeEditorSuggestionItemKind } from '@grafana/ui';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { CodeLanguage, Format, HelpersEditorSuggestions, TestIds } from '../../constants';
+import { CodeLanguage, Format, HELPERS_EDITOR_SUGGESTIONS, TEST_IDS } from '../../constants';
 import { CustomEditor, HelpersEditor, StylesEditor, TextEditor } from './CustomEditor';
 
 /**
@@ -65,7 +65,7 @@ describe('Custom Editor', () => {
 
   it('Should find component', async () => {
     render(getComponent({}));
-    expect(screen.getByTestId(TestIds.textEditor.root)).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.textEditor.root)).toBeInTheDocument();
   });
 
   it('Should show mini map if value more than 100 symbols', () => {
@@ -204,7 +204,7 @@ describe('Custom Editor', () => {
         () =>
           ({
             getVariables: jest.fn().mockImplementation(() => variables),
-          } as any)
+          }) as any
       );
 
       render(<TextEditor {...props} />);
@@ -244,12 +244,12 @@ describe('Custom Editor', () => {
         () =>
           ({
             getVariables: jest.fn().mockImplementation(() => variables),
-          } as any)
+          }) as any
       );
 
       render(<HelpersEditor {...props} />);
 
-      expect(suggestionsResult).toEqual(expect.arrayContaining(HelpersEditorSuggestions));
+      expect(suggestionsResult).toEqual(expect.arrayContaining(HELPERS_EDITOR_SUGGESTIONS));
       expect(suggestionsResult).toEqual(
         expect.arrayContaining([
           {
@@ -302,7 +302,7 @@ describe('Custom Editor', () => {
         () =>
           ({
             getVariables: jest.fn().mockImplementation(() => variables),
-          } as any)
+          }) as any
       );
 
       render(<StylesEditor {...props} />);

src/components/ResourcesEditor/styles.ts → src/components/ResourcesEditor/ResourceEditor.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;