chore(eslint): Migrate eslint to the new flat configuration format

eslint.config.js

@@ -0,0 +1,83 @@
+const eslintTypeScriptParser = require("@typescript-eslint/parser");
+const eslintTypeScriptPlugin = require("@typescript-eslint/eslint-plugin");
+const eslintPluginReactHooks = require("eslint-plugin-react-hooks");
+const eslintPluginReact = require("eslint-plugin-react");
+const eslintPluginImport = require("eslint-plugin-import");
+const eslintPluginUnusedImports = require("eslint-plugin-unused-imports");
+const prettier = require("prettier");
+
+module.exports = [{
+    ignores: ['src/mirage/', '**/node_modules/'],
+  },
+  {
+    files: ['**/*.{ts,tsx,js}'],
+    languageOptions: {
+      // tells eslint to use the TypeScript parser
+      parser: eslintTypeScriptParser,
+      // tell the TypeScript parser that we want to use JSX syntax
+      parserOptions: {
+        "tsx": true,
+        "jsx": true,
+        "js": true,
+        "useJSXTextNode": true,
+        "project": "./tsconfig.json",
+        "tsconfigRootDir": "."
+      },
+      globals: {
+        "window": "readonly",
+        "describe": "readonly",
+        "test": "readonly",
+        "expect": "readonly",
+        "it": "readonly",
+        "process": "readonly",
+        "document": "readonly"
+      },
+    },
+    settings: {
+      "react": {
+        "version": "detect"
+      }
+    },
+    // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
+    plugins: {
+      "@typescript-eslint": eslintTypeScriptPlugin,
+      "react-hooks": eslintPluginReactHooks,
+      "react": eslintPluginReact,
+      "eslint-plugin-react-hooks": eslintPluginReactHooks,
+      "unused-imports": eslintPluginUnusedImports,
+      "import": eslintPluginImport,
+      "prettier": prettier
+    },
+    rules: {
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/no-empty-interface": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/triple-slash-reference": ["error", { "lib": "always", "path": "always", "types": "prefer-import" }],
+      "import/extensions": "off",
+      "import/no-cycle": "warn",
+      "import/no-named-as-default": "off",
+      "import/no-unresolved": "off",
+      "import/order": ["warn", {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }],
+      "no-console": ["error", {
+        "allow": ["warn", "error"]
+      }],
+      "prettier/prettier": "off",
+      "react/prop-types": "off",
+      "react/jsx-uses-react": "warn",
+      "react/jsx-uses-vars": "warn",
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "error",
+      "unused-imports/no-unused-imports": "warn",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+      ]
+   }
+  }];

package.json

@@ -16,8 +16,8 @@
     "test": "jest --maxWorkers=50% --coverage=true",
     "test:ci": "jest --maxWorkers=50%",
     "eslint": "yarn eslint:check",
-    "eslint:check": "eslint --cache --ext .ts,.tsx,.js ./src/",
-    "eslint:apply": "eslint --cache --ext .ts,.tsx,.js --fix ./src/",
+    "eslint:check": "eslint './src/**/*.{ts,tsx,js}'",
+    "eslint:apply": "eslint --fix './src/**/*.{ts,tsx,js}'",
     "itest:preview": "HEADLESS_BROWSER=true concurrently -c 'auto' 'yarn:start:dev:preview --no-open' 'yarn:itest' --kill-others --success first",
     "itest": "wait-on -l --httpTimeout 120000 -d 5000 http://localhost:9091 && jest --testMatch='**/itest/**/*.test.(ts|tsx)'",
     "license:check": "license-check-and-add check -f license-config.json",
@@ -49,7 +49,7 @@
     "concurrently": "^8.2.2",
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^8.34.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",

src/app/SecurityPanel/ImportCertificate.tsx

@@ -37,8 +37,8 @@ import {
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { SecurityCard } from './types';
 import { tap } from 'rxjs/operators';
+import { SecurityCard } from './types';
 
 export const CertificateImport: React.FC = () => {
   const context = React.useContext(ServiceContext);