add eslint rules and run lint:fix(#445)

Author: arturminchukov

.gitignore

@@ -36,6 +36,7 @@ packages/lezer-metricsql/src/parser.terms.js
 .vscode
 .npm
 .eslintcache
+tsconfig.tsbuildinfo
 
 # Cypress
 cypress/report.json

eslint.config.mjs

@@ -1,5 +1,5 @@
 import stylistic from '@stylistic/eslint-plugin';
-import { defineConfig } from 'eslint/config';
+import {defineConfig} from 'eslint/config';
 import grafanaEslintConfig from '@grafana/eslint-config/flat.js';
 import react from 'eslint-plugin-react';
 import jest from 'eslint-plugin-jest';
@@ -8,136 +8,138 @@ import deprecation from 'eslint-plugin-deprecation';
 import prettier from 'eslint-config-prettier';
 import unusedImports from "eslint-plugin-unused-imports";
 import * as emotionPlugin from '@emotion/eslint-plugin';
-import { fixupPluginRules } from "@eslint/compat";
+import {fixupPluginRules} from "@eslint/compat";
 import importPlugin from 'eslint-plugin-import';
 
 export default defineConfig([
-      grafanaEslintConfig,
-      prettier,
-      {
-        ignores: [
-          '**/node_modules/**',
-          '**/dist/**',
-          '**/build/**',
-          '**/coverage/**',
-          '**/.yarn/**',
-          '**/.cache/**',
-          '**/.config/**',
-          '**/vendor/**',
-          '**/pkg/**',
-          '**/plugins/**',
-          '**/bin/**',
-          '**/*.min.js',
-          '**/packages/**',
-          '.prettierrc.js',
-          'webpack.config.ts',
-          'jest.config.js',
-          'jest-setup.js',
-        ],
-      },
-      {
-        files: ['**/*.{ts,tsx,js,jsx}'],
-        plugins: {
-          'react': react,
-          'jest': jest,
-          'lodash': lodash,
-          'deprecation': deprecation,
-          'unused-imports': unusedImports,
-          '@emotion': fixupPluginRules(emotionPlugin),
-          'import': importPlugin,
-          '@stylistic': stylistic,
-        },
-        languageOptions: {
-          parserOptions: {
-            ecmaVersion: 'latest',
-            sourceType: 'module',
-            ecmaFeatures: {
-              jsx: true,
-            },
-            project: './tsconfig.json',
-          },
-          globals: {
-            // Browser globals
-            window: 'readonly',
-            document: 'readonly',
-            navigator: 'readonly',
-            console: 'readonly',
-            // Node globals
-            process: 'readonly',
-            __dirname: 'readonly',
-            __filename: 'readonly',
-            module: 'readonly',
-            require: 'readonly',
-          },
+  grafanaEslintConfig,
+  prettier,
+  {
+    ignores: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/build/**',
+      '**/coverage/**',
+      '**/.yarn/**',
+      '**/.cache/**',
+      '**/.config/**',
+      '**/vendor/**',
+      '**/pkg/**',
+      '**/plugins/**',
+      '**/bin/**',
+      '**/*.min.js',
+      '**/packages/**',
+      '.prettierrc.js',
+      'webpack.config.ts',
+      'jest.config.js',
+      'jest-setup.js',
+    ],
+  },
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    plugins: {
+      'react': react,
+      'jest': jest,
+      'lodash': lodash,
+      'deprecation': deprecation,
+      'unused-imports': unusedImports,
+      '@emotion': fixupPluginRules(emotionPlugin),
+      'import': importPlugin,
+      '@stylistic': stylistic,
+    },
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
         },
+        project: './tsconfig.json',
+      },
+      globals: {
+        // Browser globals
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        console: 'readonly',
+        // Node globals
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+      },
+    },
 
 
-        rules: {
-          'react-hooks/rules-of-hooks': 'error',
-          'react-hooks/exhaustive-deps': 'warn',
-          '@typescript-eslint/no-explicit-any': 'warn',
-          "unused-imports/no-unused-imports": "error",
-          '@typescript-eslint/no-unused-vars': ['warn', {
-            argsIgnorePattern: '^_',
-            varsIgnorePattern: '^_'
-          }],
-          'no-console': ['warn', { allow: ['warn', 'error'] }],
-          "react/prop-types": "off",
-          "@emotion/jsx-import": "error",
-          "object-curly-spacing": [2, "always"],
-          "lodash/import-scope": [2, "member"],
-          "jest/no-focused-tests": "error",
-          "@typescript-eslint/array-type": 0,
-          "no-useless-escape": 0,
-          "no-prototype-builtins": 0,
-          '@stylistic/indent': ['error', 2, {
-            'SwitchCase': 1,
-            'FunctionDeclaration': { 'parameters': 'first' },
-            'FunctionExpression': { 'parameters': 'first' },
-            'CallExpression': { 'arguments': 1 },
-            'ObjectExpression': 'first',
-            'ignoredNodes': [
-              'TSTypeAnnotation *',
-            ],
-          }],
-          '@stylistic/jsx-max-props-per-line': ['error', {
-            maximum: 1,
-            when: 'multiline'
-          }],
-          '@stylistic/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
-          '@stylistic/jsx-closing-bracket-location': ['error', 'tag-aligned'],
-          "import/order": [
-            "error",
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      "unused-imports/no-unused-imports": "error",
+      '@typescript-eslint/no-unused-vars': ['warn', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_'
+      }],
+      'no-console': ['warn', {allow: ['warn', 'error']}],
+      "react/prop-types": "off",
+      "@emotion/jsx-import": "error",
+      "object-curly-spacing": [2, "always"],
+      "lodash/import-scope": [2, "member"],
+      "jest/no-focused-tests": "error",
+      "@typescript-eslint/array-type": 0,
+      "no-useless-escape": 0,
+      "no-prototype-builtins": 0,
+      '@stylistic/indent': ['error', 2, {
+        'SwitchCase': 1,
+        'FunctionDeclaration': {'parameters': 'first'},
+        'FunctionExpression': {'parameters': 'first'},
+        'CallExpression': {'arguments': 1},
+        'ObjectExpression': 'first',
+        'ignoredNodes': [
+          'TSTypeAnnotation *',
+        ],
+      }],
+      '@stylistic/jsx-max-props-per-line': ['error', {
+        maximum: 1,
+        when: 'multiline'
+      }],
+      '@stylistic/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+      '@stylistic/jsx-closing-bracket-location': ['error', 'tag-aligned'],
+      "import/order": [
+        "error",
+        {
+          "groups": [["builtin", "external"], "internal", "parent", "sibling", "index"],
+          'pathGroups': [
             {
-              "groups": [["builtin", "external"], "internal", "parent", "sibling", "index"],
-              'pathGroups': [
-                {
-                  pattern: '@grafana/**',
-                  group: 'external',
-                  position: 'after'
-                }
-              ],
-              'pathGroupsExcludedImportTypes': ['react', 'react-dom'],
-              "newlines-between": "always",
-              "alphabetize": { "order": "asc" }
+              pattern: '@grafana/**',
+              group: 'external',
+              position: 'after'
             }
           ],
+          'pathGroupsExcludedImportTypes': ['react', 'react-dom'],
+          "newlines-between": "always",
+          "alphabetize": {"order": "asc"}
+        }
+      ],
+      'react/jsx-tag-spacing': ['error', {beforeSelfClosing: 'always'}],
+      'jsx-quotes': ['error', 'prefer-single'],
+      quotes: ['error', 'single', {avoidEscape: true}],
 
-          // Use typescript's no-redeclare for compatibility with overrides
-          "no-redeclare": "off",
-          "@typescript-eslint/no-redeclare": ["error"]
-        },
-      },
+      // Use typescript's no-redeclare for compatibility with overrides
+      "no-redeclare": "off",
+      "@typescript-eslint/no-redeclare": ["error"]
+    },
+  },
 
-      {
-        files: ['**/*.test.{ts,tsx,js,jsx}', '**/__tests__/**'],
-        plugins: {
-          jest,
-        },
-        rules: {
-          ...jest.configs.recommended.rules,
-          '@typescript-eslint/no-explicit-any': 'off',
-        },
-      },
-    ]
-);
+  {
+    files: ['**/*.test.{ts,tsx,js,jsx}', '**/__tests__/**'],
+    plugins: {
+      jest,
+    },
+    rules: {
+      ...jest.configs.recommended.rules,
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+]);

package.json

@@ -11,7 +11,7 @@
     "test:coverage": "jest --collectCoverage",
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
     "lint": "eslint --cache .",
-    "lint:fix": "yarn run lint --fix && prettier --write --list-different .",
+    "lint:fix": "yarn run lint --fix",
     "server": "docker compose up --build",
     "preinstall": "cd packages/lezer-metricsql && yarn install && cd ../..",
     "postinstall": "yarn upgrade lezer-metricsql",

src/components/Annotations/AnnotationQueryEditor.tsx

@@ -6,7 +6,7 @@ import { AutoSizeInput, LegacyForms } from '@grafana/ui';
 const { Input } = LegacyForms;
 import { PromQueryCodeEditor } from '../../querybuilder/components/PromQueryCodeEditor';
 import { PromQuery } from '../../types';
-import { EditorField, EditorRows, EditorRow, Space, EditorSwitch } from "../QueryEditor";
+import { EditorField, EditorRows, EditorRow, Space, EditorSwitch } from '../QueryEditor';
 import { PromQueryEditorProps } from '../types';
 
 type Props = PromQueryEditorProps & {
@@ -40,7 +40,7 @@ export function AnnotationQueryEditor(props: Props) {
       <Space v={0.5} />
       <EditorRow>
         <EditorField
-          label="Min step"
+          label='Min step'
           tooltip={
             <>
               An additional lower limit for the step parameter of the Prometheus query and for the{' '}
@@ -49,50 +49,50 @@ export function AnnotationQueryEditor(props: Props) {
           }
         >
           <AutoSizeInput
-            type="text"
-            aria-label="Set lower limit for the step parameter"
+            type='text'
+            aria-label='Set lower limit for the step parameter'
             placeholder={'auto'}
             minWidth={10}
             defaultValue={query.interval}
             onCommitChange={(ev) => handlerChangeAnnotation(ev.currentTarget.value, 'step')}
           />
         </EditorField>
         <EditorField
-          label="Title"
+          label='Title'
           tooltip={
             'Use either the name or a pattern. For example, {{instance}} is replaced with label value for the label instance.'
           }
         >
           <Input
-            type="text"
-            placeholder="{{alertname}}"
+            type='text'
+            placeholder='{{alertname}}'
             value={annotation.titleFormat}
             onChange={(ev) => handlerChangeAnnotation(ev.currentTarget.value, 'titleFormat')}
           />
         </EditorField>
-        <EditorField label="Tags">
+        <EditorField label='Tags'>
           <Input
-            type="text"
-            placeholder="label1,label2"
+            type='text'
+            placeholder='label1,label2'
             value={annotation.tagKeys}
             onChange={(ev) => handlerChangeAnnotation(ev.currentTarget.value, 'tagKeys')}
           />
         </EditorField>
         <EditorField
-          label="Text"
+          label='Text'
           tooltip={
             'Use either the name or a pattern. For example, {{instance}} is replaced with label value for the label instance.'
           }
         >
           <Input
-            type="text"
-            placeholder="{{instance}}"
+            type='text'
+            placeholder='{{instance}}'
             value={annotation.textFormat}
             onChange={(ev) => handlerChangeAnnotation(ev.currentTarget.value, 'textFormat')}
           />
         </EditorField>
         <EditorField
-          label="Series value as timestamp"
+          label='Series value as timestamp'
           tooltip={
             'The unit of timestamp is milliseconds. If the unit of the series value is seconds, multiply its range vector by 1000.'
           }

src/components/PrettifyQuery.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen, act } from '@testing-library/react';
 import React from 'react';
 
-import { BackendSrvRequest } from "@grafana/runtime";
+import { BackendSrvRequest } from '@grafana/runtime';
 
-import { PrometheusDatasource } from "../datasource";
+import { PrometheusDatasource } from '../datasource';
 
 import PrettifyQuery from './PrettifyQuery';
 
@@ -80,7 +80,7 @@ const datasource = {
   }
 } as unknown as PrometheusDatasource;
 
-describe("Prettyfied Query", () => {
+describe('Prettyfied Query', () => {
   testQueries.forEach(async ({ name, got, want }) => {
     it(`should prettify the query ${name}`, async () => {