chore(ui-dev): migrate tslint to eslint (argoproj#11652) (argoproj#18079)

* feat(ui): setup eslint

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

* chore(ui): update `lint:fix` command

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

* fix(ui-lint): run `yarn lint:fix`

> solve remaining manually

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

* chore(ui): remove tslint from `ui`

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

* chore(docs-ui): add docs for VSCode configuration eslint

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

* chore(ui): prettier set `trailingComma` to `none`

> prettier config default is changed after version bump - https://prettier.io/docs/en/options.html#trailing-commas

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

---------

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

Author: Marvin9

docs/developer-guide/static-code-analysis.md

@@ -2,7 +2,7 @@
 
 We use the following static code analysis tools:
 
-* golangci-lint and tslint for compile time linting
+* golangci-lint and eslint for compile time linting
 * [codecov.io](https://codecov.io/gh/argoproj/argo-cd) - for code coverage
 * [snyk.io](https://app.snyk.io/org/argoproj/projects) - for image scanning
 * [sonarcloud.io](https://sonarcloud.io/organizations/argoproj/projects) - for code scans and security alerts

ui/.prettierrc

@@ -6,5 +6,6 @@
   "tabWidth": 4,
   "jsxBracketSameLine": true,
   "quoteProps": "consistent",
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "trailingComma": "none"
 }

ui/README.md

@@ -22,4 +22,25 @@ Make sure your code passes the lint checks:
 
 ```
 yarn lint --fix
-```
+```
+
+If you are using VSCode, add this configuration to `.vscode/settings.json` in the root of this repository to identify and fix lint issues automatically before you save file.
+
+Install [Eslint Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) in VSCode.
+
+`.vscode/settings.json`
+```json
+{
+  "eslint.format.enable": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "always"
+    },
+    "eslint.workingDirectories": [
+        {
+            "directory": "./ui",
+            "!cwd": false
+        }
+    ],
+    "eslint.experimental.useFlatConfig": true
+}
+```

ui/eslint.config.mjs

@@ -0,0 +1,37 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+
+export default [
+    {languageOptions: {globals: globals.browser}},
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        rules: {
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/ban-types': 'off',
+            '@typescript-eslint/no-var-requires': 'off'
+        }
+    },
+    {
+        settings: {
+            react: {
+                version: 'detect'
+            }
+        },
+        ...pluginReactConfig,
+        rules: {
+            'react/display-name': 'off',
+            'react/no-string-refs': 'off'
+        }
+    },
+    eslintPluginPrettierRecommended,
+    {
+        files: ['./src/**/*.{ts,tsx}']
+    },
+    {
+        ignores: ['dist', 'assets', '**/*.config.js', '__mocks__', 'coverage', '**/*.test.{ts,tsx}']
+    }
+];

ui/package.json

@@ -6,8 +6,8 @@
     "start": "webpack-dev-server --config ./src/app/webpack.config.js --mode development",
     "docker": "./scripts/build_docker.sh",
     "build": "find ./dist -type f -not -name gitkeep -delete && webpack --config ./src/app/webpack.config.js --mode production",
-    "lint": "tsc --noEmit --project ./src/app && tslint -p ./src/app",
-    "lint:fix": "tslint -p ./src/app --fix",
+    "lint": "tsc --noEmit --project ./src/app && eslint",
+    "lint:fix": "eslint --fix",
     "test": "jest"
   },
   "dependencies": {
@@ -69,6 +69,7 @@
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.7.2",
+    "@eslint/js": "^9.1.1",
     "@types/classnames": "^2.2.3",
     "@types/cookie": "^0.5.1",
     "@types/dagre": "^0.7.40",
@@ -96,14 +97,19 @@
     "codecov": "^3.8.3",
     "copy-webpack-plugin": "^6.1.1",
     "esbuild-loader": "^2.18.0",
+    "eslint": "^9.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "globals": "^15.1.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-junit": "^6.4.0",
     "jest-transform-css": "^2.0.0",
     "monaco-editor-webpack-plugin": "^7.0.0",
     "postcss": "^8.4.38",
-    "prettier": "1.19",
+    "prettier": "^3.2.5",
     "raw-loader": "^0.5.1",
     "react-test-renderer": "16.8.3",
     "sass": "^1.49.9",
@@ -112,11 +118,8 @@
     "style-loader": "^0.20.1",
     "ts-jest": "^27.1.3",
     "ts-node": "10.9.1",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-plugin-prettier": "^2.0.1",
-    "tslint-react": "^5.0.0",
     "typescript": "^4.9.5",
+    "typescript-eslint": "^7.8.0",
     "webpack": "^5.84.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",

ui/src/app/app.tsx

@@ -98,10 +98,7 @@ requests.onError.subscribe(async err => {
         }
         // Query for basehref and remove trailing /.
         // If basehref is the default `/` it will become an empty string.
-        const basehref = document
-            .querySelector('head > base')
-            .getAttribute('href')
-            .replace(/\/$/, '');
+        const basehref = document.querySelector('head > base').getAttribute('href').replace(/\/$/, '');
         if (isSSO) {
             window.location.href = `${basehref}/auth/login?return_url=${encodeURIComponent(location.href)}`;
         } else {

ui/src/app/applications/components/application-create-panel/application-create-panel.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-prototype-builtins */
 import {AutocompleteField, Checkbox, DataLoader, DropDownMenu, FormField, HelpIcon, Select} from 'argo-ui';
 import * as deepMerge from 'deepmerge';
 import * as React from 'react';

ui/src/app/applications/components/application-details/application-resource-list.tsx

@@ -6,7 +6,6 @@ import {ResourceIcon} from '../resource-icon';
 import {ResourceLabel} from '../resource-label';
 import {ComparisonStatusIcon, HealthStatusIcon, nodeKey, createdOrNodeKey} from '../utils';
 import {Consumer} from '../../../shared/context';
-import * as _ from 'lodash';
 import Moment from 'react-moment';
 import {format} from 'date-fns';
 import {ResourceNode, ResourceRef} from '../../../shared/models';

ui/src/app/applications/components/application-parameters/application-parameters.tsx

@@ -250,8 +250,10 @@ export const ApplicationParameters = (props: {
                         if (params) {
                             for (const param of params) {
                                 if (param.map && param.array) {
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                     // @ts-ignore
                                     param.map = param.array.reduce((acc, {name, value}) => {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                         // @ts-ignore
                                         acc[name] = value;
                                         return acc;
@@ -322,6 +324,7 @@ function gatherDetails(
     setAppParamsDeletedState: any
 ): EditablePanelItem[] {
     const hasMultipleSources = app.spec.sources && app.spec.sources.length > 0;
+    // eslint-disable-next-line no-prototype-builtins
     const isHelm = source.hasOwnProperty('chart');
     if (hasMultipleSources) {
         attributes.push({

ui/src/app/applications/components/application-parameters/kustomize-image.test.ts

@@ -1,4 +1,4 @@
-import { format, parse } from './kustomize-image';
+import {format, parse} from './kustomize-image';
 
 test('parse image version override', () => {
     const image = parse('foo/bar:v1.0.0');
@@ -8,7 +8,7 @@ test('parse image version override', () => {
 });
 
 test('format image version override', () => {
-    const formatted = format({ name: 'foo/bar', newTag: 'v1.0.0' });
+    const formatted = format({name: 'foo/bar', newTag: 'v1.0.0'});
     expect(formatted).toBe('foo/bar:v1.0.0');
 });
 
@@ -21,7 +21,7 @@ test('parse image name override', () => {
 });
 
 test('format image name override', () => {
-    const formatted = format({ name: 'foo/bar', newTag: 'v1.0.0', newName: 'foo/bar1' });
+    const formatted = format({name: 'foo/bar', newTag: 'v1.0.0', newName: 'foo/bar1'});
     expect(formatted).toBe('foo/bar=foo/bar1:v1.0.0');
 });
 
@@ -33,6 +33,6 @@ test('parse image digest override', () => {
 });
 
 test('format image digest override', () => {
-    const formatted = format({ name: 'foo/bar', digest: 'sha:123' });
+    const formatted = format({name: 'foo/bar', digest: 'sha:123'});
     expect(formatted).toBe('foo/bar@sha:123');
 });

ui/src/app/applications/components/application-pod-view/pod-view.tsx

@@ -145,9 +145,7 @@ export class PodView extends React.Component<PodViewProps> {
                                                                     </Moment>
                                                                 </div>
                                                             ) : null}
-                                                            {group.info?.map(infoItem => (
-                                                                <div key={infoItem.name}>{infoItem.value}</div>
-                                                            ))}
+                                                            {group.info?.map(infoItem => <div key={infoItem.name}>{infoItem.value}</div>)}
                                                         </div>
                                                     )}
                                                 </div>