fixed lint errors

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintignore

@@ -0,0 +1 @@
+src/copiedFromConsole

.eslintrc.js

@@ -0,0 +1,95 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: "2020",
+    sourceType: "module",
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+  },
+  plugins: ["@typescript-eslint", "react", "react-hooks", "import"],
+  rules: {
+    eqeqeq: ["error", "always"],
+    indent: "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: "typeLike",
+        format: ["PascalCase"],
+      },
+      // Allowing for React components definitions
+      {
+        selector: "function",
+        format: ["PascalCase", "camelCase"],
+      },
+    ],
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        types: {
+          "{}": {
+            message: "Use Record<string, unknown> instead",
+            fixWith: "Record<string, unknown>",
+          },
+        },
+      },
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "react-i18next",
+            importNames: ["useTranslation"],
+            message:
+              "Please use useTranslation from src/hooks/useNodeHealthCheckTranslation.ts instead",
+          },
+        ],
+      },
+    ],
+    "@typescript-eslint/no-explicit-any": [
+      "warn",
+      {
+        fixToUnknown: true,
+      },
+    ],
+    "@typescript-eslint/no-unsafe-assignment": "warn",
+    "@typescript-eslint/no-misused-promises": "warn",
+    "@typescript-eslint/no-unsafe-call": "warn",
+    "@typescript-eslint/no-unsafe-argument": "warn",
+    "@typescript-eslint/no-unsafe-member-access": "warn",
+    "@typescript-eslint/no-unsafe-return": "warn",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/restrict-template-expressions": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "react/self-closing-comp": "error",
+    "react/no-unescaped-entities": [
+      "error",
+      {
+        forbid: [">", "}"],
+      },
+    ],
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  ignorePatterns: [".eslintrc.js"],
+};

.github/workflows/pre-submit.yaml

@@ -17,5 +17,9 @@ jobs:
       with:
         fetch-depth: 0
 
+    - name: Lint
+      run: make lint
+
     - name: Test container build
       run: make docker-build
+

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.stylelintrc.yaml

@@ -0,0 +1,20 @@
+extends:
+  - stylelint-config-standard
+  - stylelint-config-prettier
+rules:
+  # Disallow color names and hex colors as these don't work well with dark mode.
+  # Use PF global variables instead:
+  # https://patternfly-react-main.surge.sh/developer-resources/global-css-variables#global-css-variables
+  color-named: never
+  color-no-hex: true
+  # PatternFly CSS vars don't conform to stylelint's regex. Disable this rule.
+  custom-property-pattern: null
+  # Disable the standard rule to allow BEM-style classnames with underscores.
+  selector-class-pattern: null
+  # Plugins should avoid naked element selectors like `table` and `li` since
+  # this can impact layout of existing pages in console.
+  selector-max-type:
+    - 0
+    - ignore:
+        - compounded
+        - descendant

.vscode/settings.json

@@ -21,31 +21,23 @@
   "[graphql]": {
     "editor.formatOnSave": true
   },
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "json"
-  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "json"],
   "javascript.validate.enable": false,
   "typescript.tsdk": "node_modules/typescript/lib",
   "search.exclude": {
     "**/node_modules": true,
     "**/bower_components": true,
     "**/.cache-loader": true,
     "**/dist": true,
-    "**/.yarn/releases/**": true,
-    "**/.history": true
+    "**/.yarn/releases/**": true
   },
   "files.exclude": {
     "**/.git": true,
     "**/.svn": true,
     "**/.hg": true,
     "**/CVS": true,
     "**/.DS_Store": true,
-    "**/.cache-loader": true,
-    "**/.history": true
+    "**/.cache-loader": true
   },
   "files.watcherExclude": {
     "**/.git/objects/**": true,
@@ -54,8 +46,7 @@
     "**/.hg/store/**": true,
     "**/bower_components": true,
     "**/.cache-loader": true,
-    "**dist": true,
-    "**/.history": true
+    "**dist": true
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
@@ -64,7 +55,8 @@
     "comments": "on",
     "strings": "on",
     "other": "on"
-  }
+  },
+  "typescript.preferences.importModuleSpecifier": "relative"
   // TODO support prettier + stylelint
   // "prettier.stylelintIntegration": true,
   // "css.validate": false,

Makefile

@@ -20,6 +20,11 @@ export IMAGE_TAG
 # Image pullspec to use for all building/pushing image targets
 IMG ?= $(IMAGE_REGISTRY)/node-remediation-console:$(IMAGE_TAG)
 
+# Push the docker image
+.PHONY: lint
+lint:
+	yarn install && yarn lint
+
 # Build the docker image
 .PHONY: docker-build
 docker-build:

cypress/Routing.ts

@@ -9,7 +9,9 @@ const gotoNewNodeHealthCheck = () => {
   EditorPage.validatePluginLoaded();
 };
 
-const gotoNodeHealthCheckListPage = (options?: Object) => {
+const gotoNodeHealthCheckListPage = (
+  options?: Partial<Cypress.VisitOptions>
+) => {
   cy.visit(root, options);
   TablePage.validatePluginLoaded();
 };

cypress/e2e/features/NHCTable.cy.ts

@@ -1,4 +1,3 @@
-import exp = require("constants");
 import { gotoNodeHealthCheckListPage } from "../../Routing";
 import {
   DeleteNHC,
@@ -7,11 +6,10 @@ import {
   UnpauseNHC,
 } from "../../views/ActionsView";
 import * as NHCTableView from "../../views/NHCTableView";
-import _ = require("lodash");
 import { validateInEditor } from "../../views/EditorView";
 
 describe("test NodeHealthCheck list view", () => {
-  let expectedRows = [
+  const expectedRows = [
     {
       name: "nhc0",
       status: "Disabled",

cypress/e2e/features/RemediatorFields.cy.ts

@@ -1,12 +1,9 @@
-import * as EditorView from "../../views/EditorView";
 import * as Routing from "../../Routing";
 import {
   selectOtherRemediator,
   setOtherRemediatorData,
   validateOtherRemediatorData,
   selectSNRRemediator,
-  selectSNRStrategy,
-  validateSNRStrategy,
 } from "../../views/FormView/RemediatorView";
 
 describe("Remediator field", () => {