Improve frontend lint settings (opendatahub-io#969)

* update config of eslint, webpack, ts, jest and dependencies

* run lint fix command to get rid of most linting errors

* manually get rid of all the warnings and errors that cannot be auto fixed

* manually add ~ alias to all previous absolute imports in frontend

* add rule to prevent else return and absolute import from src folder

* another round of lint --fix

* move mock files and change imports

* add no-console rule and disable console as needed in code

* add restriction to import from api and change the rules of using absolute path. add no-param-reassign

* add order rule and run lint fix command

* remove baseUrl from tsconfig and make corresponding changes to eslintrc

---------

Co-authored-by: Andrew Ballantyne <8126518+andrewballantyne@users.noreply.github.com>

frontend/.eslintrc

@@ -17,14 +17,17 @@
   "plugins": [
     "@typescript-eslint",
     "react-hooks",
-    "eslint-plugin-react-hooks"
+    "eslint-plugin-react-hooks",
+    "import",
+    "no-relative-import-paths",
+    "prettier"
   ],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "prettier"
   ],
   "globals": {
     "window": "readonly",
@@ -38,9 +41,34 @@
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
     }
   },
   "rules": {
+    "arrow-body-style": "error",
+    "curly": "error",
+    "camelcase": "warn",
+    "no-else-return": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": [
+              "~/api/**"
+            ],
+            "message": "Read from '~/api' instead."
+          }
+        ]
+      }
+    ],
+    "no-console": "error",
+    "no-param-reassign": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/no-var-requires": "off",
@@ -51,6 +79,39 @@
     "react-hooks/rules-of-hooks": "error",
     "import/extensions": "off",
     "import/no-unresolved": "off",
+    "import/order": [
+      "error",
+      {
+        "pathGroups": [
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "builtin"
+        ],
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "index",
+          "sibling",
+          "parent",
+          "object",
+          "unknown"
+        ]
+      }
+    ],
+    "no-relative-import-paths/no-relative-import-paths": [
+      "warn",
+      {
+        "allowSameFolder": true,
+        "rootDir": "src",
+        "prefix": "~"
+      }
+    ],
     "prettier/prettier": [
       "error",
       {
@@ -61,5 +122,22 @@
       }
     ],
     "react/prop-types": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "./src/api/**"
+      ],
+      "rules": {
+        "no-restricted-imports": [
+          "off",
+          {
+            "patterns": [
+              "~/api/**"
+            ]
+          }
+        ]
+      }
+    }
+  ]
 }

frontend/config/webpack.common.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { setupWebpackDotenvFilesForEnv } = require('./dotenv');
 
 const RELATIVE_DIRNAME = process.env._ODH_RELATIVE_DIRNAME;
@@ -178,11 +177,9 @@ module.exports = env => {
     ],
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.jsx'],
-      plugins: [
-        new TsconfigPathsPlugin({
-          configFile: path.resolve(RELATIVE_DIRNAME, './tsconfig.json')
-        })
-      ],
+      alias: {
+        "~": path.resolve(SRC_DIR)
+      },
       symlinks: false,
       cacheWithContext: false
     }

frontend/jest.config.js

@@ -30,7 +30,7 @@ module.exports = {
     '\\.(css|less|sass|scss)$': '<rootDir>/config/transform.style.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/config/transform.file.js',
-    '@app/(.*)': '<rootDir>/src/app/$1',
+    '~/(.*)': '<rootDir>/src/$1',
   },
 
   // A preset that is used as a base for Jest's configuration