refactor(deps): migrate from deprecated tslint to eslint

docs/static-code-analysis.md

@@ -2,7 +2,7 @@
 
 We use the following static code analysis tools:
 
-* `golangci-lint` and `tslint` for compile time linting.
-* [Snyk](https://app.snyk.io/org/argoproj/projects) for image scanning.
+* `golangci-lint` and `eslint` for compile time linting.
+* [Snyk](https://app.snyk.io/org/argoproj/projects) for dependency and image scanning (SCA).
 
 These are at least run daily or on each pull request.

ui/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react",
+        "prettier"
+    ],
+    "rules": {
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-non-null-assertion": "off"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}

ui/package.json

@@ -8,7 +8,7 @@
     "scripts": {
         "build": "rm -Rf dist && NODE_OPTIONS='--openssl-legacy-provider' NODE_ENV=production webpack --mode production --config ./src/app/webpack.config.js",
         "start": "NODE_OPTIONS='--no-experimental-fetch --openssl-legacy-provider' webpack-dev-server --config ./src/app/webpack.config.js",
-        "lint": "tslint --fix -p ./src/app",
+        "lint": "eslint --fix ./src/app",
         "test": "jest",
         "deduplicate": "yarn-deduplicate -s fewer yarn.lock"
     },
@@ -35,7 +35,6 @@
         "react-monaco-editor": "^0.50.1",
         "react-router-dom": "^4.2.2",
         "superagent": "^8.1.2",
-        "superagent-promise": "^1.1.0",
         "swagger-ui-react": "^4.19.1"
     },
     "devDependencies": {
@@ -59,9 +58,15 @@
         "@types/superagent": "^4.1.22",
         "@types/swagger-ui-react": "^4.11.0",
         "@types/uuid": "^9.0.7",
+        "@typescript-eslint/eslint-plugin": "^6.10.0",
+        "@typescript-eslint/parser": "^6.10.0",
         "babel-jest": "^29.6.4",
         "babel-loader": "^9.1.3",
         "copy-webpack-plugin": "^11.0.0",
+        "eslint": "^8.53.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^3.4.1",
+        "eslint-plugin-react": "^7.33.2",
         "html-webpack-plugin": "^5.5.3",
         "jest": "^26.6.3",
         "monaco-editor-webpack-plugin": "^7.1.0",
@@ -75,10 +80,6 @@
         "ts-jest": "^26.4.4",
         "ts-loader": "^9.5.1",
         "ts-node": "^9.1.1",
-        "tslint": "^5.20.1",
-        "tslint-config-prettier": "^1.18.0",
-        "tslint-plugin-prettier": "^2.3.0",
-        "tslint-react": "^3.4.0",
         "typescript": "^4.6.4",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx

@@ -16,7 +16,7 @@ import {Utils} from '../../../shared/utils';
 import {SubmitWorkflowPanel} from '../../../workflows/components/submit-workflow-panel';
 import {ClusterWorkflowTemplateEditor} from '../cluster-workflow-template-editor';
 
-require('../../../workflows/components/workflow-details/workflow-details.scss');
+import '../../../workflows/components/workflow-details/workflow-details.scss';
 
 export function ClusterWorkflowTemplateDetails({history, location, match}: RouteComponentProps<any>) {
     // boiler-plate

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-list/cluster-workflow-template-list.tsx

@@ -17,7 +17,8 @@ import {useQueryParams} from '../../../shared/use-query-params';
 import {Footnote} from '../../../shared/footnote';
 import {services} from '../../../shared/services';
 import {ClusterWorkflowTemplateCreator} from '../cluster-workflow-template-creator';
-require('./cluster-workflow-template-list.scss');
+
+import './cluster-workflow-template-list.scss';
 
 export function ClusterWorkflowTemplateList({history, location}: RouteComponentProps<any>) {
     const {navigation} = useContext(Context);

ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.tsx

@@ -18,8 +18,8 @@ import {WidgetGallery} from '../../../widgets/widget-gallery';
 import {WorkflowsRow} from '../../../workflows/components/workflows-row/workflows-row';
 import {CronWorkflowEditor} from '../cron-workflow-editor';
 
-require('../../../workflows/components/workflow-details/workflow-details.scss');
-require('./cron-workflow-details.scss');
+import '../../../workflows/components/workflow-details/workflow-details.scss';
+import './cron-workflow-details.scss';
 
 export function CronWorkflowDetails({match, location, history}: RouteComponentProps<any>) {
     // boiler-plate

ui/src/app/cron-workflows/components/cron-workflow-filters/cron-workflow-filters.tsx

@@ -5,7 +5,7 @@ import {CheckboxFilter} from '../../../shared/components/checkbox-filter/checkbo
 import {NamespaceFilter} from '../../../shared/components/namespace-filter';
 import {TagsInput} from '../../../shared/components/tags-input/tags-input';
 
-require('./cron-workflow-filters.scss');
+import './cron-workflow-filters.scss';
 
 interface WorkflowFilterProps {
     cronWorkflows: models.WorkflowTemplate[];

ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx

@@ -22,7 +22,7 @@ import {CronWorkflowCreator} from '../cron-workflow-creator';
 import {CronWorkflowFilters} from '../cron-workflow-filters/cron-workflow-filters';
 import {PrettySchedule} from '../pretty-schedule';
 
-require('./cron-workflow-list.scss');
+import './cron-workflow-list.scss';
 
 const learnMore = <a href='https://argoproj.github.io/argo-workflows/cron-workflows/'>Learn more</a>;
 

ui/src/app/event-flow/components/event-flow-details/build-graph.ts

@@ -10,15 +10,15 @@ function status(r: {status?: {conditions?: Condition[]}}) {
     if (!r.status || !r.status.conditions) {
         return '';
     }
-    if (!!r.status.conditions.find(c => c.status === 'False')) {
+    if (r.status.conditions.find(c => c.status === 'False')) {
         return 'Failed';
     }
-    return !!r.status.conditions.find(c => c.status !== 'True') ? 'Pending' : 'Ready';
+    return r.status.conditions.find(c => c.status !== 'True') ? 'Pending' : 'Ready';
 }
 
 const numNodesToHide = 2;
 export function buildGraph(eventSources: EventSource[], sensors: Sensor[], workflows: Workflow[], flow: {[p: string]: {count: number; timeout?: any}}, expanded: boolean) {
-    const edgeLabel = (id: Node, label?: string) => (!!flow[id] ? (label || '') + ' (' + flow[id].count + ')' : label);
+    const edgeLabel = (id: Node, label?: string) => (flow[id] ? (label || '') + ' (' + flow[id].count + ')' : label);
     const edgeClassNames = (id: Node) => (!!flow[id] && flow[id].timeout ? 'flow' : '');
     const graph = new Graph();
 

ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx

@@ -32,7 +32,7 @@ import {buildGraph} from './build-graph';
 import {genres} from './genres';
 import {ID} from './id';
 
-require('./event-flow-page.scss');
+import './event-flow-page.scss';
 
 export function EventFlowPage({history, location, match}: RouteComponentProps<any>) {
     // boiler-plate

ui/src/app/event-sources/components/event-source-editor.tsx

@@ -7,7 +7,6 @@ import {ObjectEditor} from '../../shared/components/object-editor/object-editor'
 
 export function EventSourceEditor({
     onChange,
-    onError,
     onTabSelected,
     selectedTabKey,
     eventSource

ui/src/app/event-sources/components/event-source-list/event-source-list.tsx

@@ -141,7 +141,7 @@ export function EventSourceList({match, location, history}: RouteComponentProps<
                                 </div>
                                 <div className='columns small-2'>
                                     <div
-                                        onClick={e => {
+                                        onClick={() => {
                                             setSelectedNode(`${es.metadata.namespace}/event-sources/${es.metadata.name}`);
                                         }}>
                                         <i className='fa fa-bars' />

ui/src/app/event-sources/components/event-source-log-viewer.tsx

@@ -47,7 +47,6 @@ export function EventSourceLogsViewer({
         return () => subscription.unsubscribe();
     }, [namespace, eventSource, selectedEvent]);
 
-    // @ts-ignore
     return (
         <div>
             <div className='row'>
@@ -68,9 +67,9 @@ export function EventSourceLogsViewer({
                         </div>
                         {!!eventSource &&
                             Object.entries(eventSource.spec).map(([type, value]) => (
-                                <div>
+                                <div key={type}>
                                     <span title={type}>&nbsp;{type}</span>
-                                    {Object.entries(value).map(([name, eventValue]) => (
+                                    {Object.entries(value).map(([name]) => (
                                         <div
                                             key={`${type}-${name}`}
                                             onClick={() => {

ui/src/app/help/components/help.tsx

@@ -1,8 +1,10 @@
 import {Page} from 'argo-ui';
 import * as React from 'react';
+
 import {uiUrl} from '../../shared/base';
 import {useCollectEvent} from '../../shared/components/use-collect-event';
-require('./help.scss');
+
+import './help.scss';
 
 export function Help() {
     useCollectEvent('openedHelp');
@@ -13,10 +15,10 @@ export function Help() {
                     <div className='help-box'>
                         <div className='help-box__ico help-box__ico--manual' />
                         <h3>Documentation</h3>
-                        <a href='https://argoproj.github.io/argo-workflows' target='_blank' className='help-box__link'>
+                        <a href='https://argoproj.github.io/argo-workflows' target='_blank' className='help-box__link' rel='noreferrer'>
                             Online Help
                         </a>
-                        <a className='help-box__link' target='_blank' href={uiUrl('apidocs')}>
+                        <a className='help-box__link' target='_blank' href={uiUrl('apidocs')} rel='noreferrer'>
                             API Docs
                         </a>
                     </div>
@@ -25,7 +27,7 @@ export function Help() {
                     <div className='help-box'>
                         <div className='help-box__ico help-box__ico--email' />
                         <h3>Contact</h3>
-                        <a className='help-box__link' target='_blank' href='https://argoproj.github.io/community/join-slack/'>
+                        <a className='help-box__link' target='_blank' href='https://argoproj.github.io/community/join-slack/' rel='noreferrer'>
                             Slack
                         </a>
                     </div>
@@ -34,7 +36,7 @@ export function Help() {
                     <div className='help-box'>
                         <div className='help-box__ico help-box__ico--download' />
                         <h3>Argo CLI</h3>
-                        <a className='help-box__link' target='_blank' href='https://github.com/argoproj/argo-workflows/releases/latest'>
+                        <a className='help-box__link' target='_blank' href='https://github.com/argoproj/argo-workflows/releases/latest' rel='noreferrer'>
                             Releases
                         </a>
                     </div>

ui/src/app/index.tsx

@@ -7,7 +7,7 @@ ReactDOM.render(<App />, document.getElementById('app'));
 const mdl = module as any;
 if (mdl.hot) {
     mdl.hot.accept('./app.tsx', () => {
-        const UpdatedApp = require('./app.tsx').App;
+        const UpdatedApp = require('./app.tsx').App; // eslint-disable-line @typescript-eslint/no-var-requires
         ReactDOM.render(<UpdatedApp />, document.getElementById('app'));
     });
 }

ui/src/app/login/components/login.tsx

@@ -1,9 +1,10 @@
 import {Page} from 'argo-ui';
 import * as React from 'react';
+
 import {uiUrl, uiUrlWithParams} from '../../shared/base';
 import {useCollectEvent} from '../../shared/components/use-collect-event';
 
-require('./login.scss');
+import './login.scss';
 
 function logout() {
     document.cookie = 'authorization=;Max-Age=0';

ui/src/app/modals/feedback/feedback-modal.tsx

@@ -4,11 +4,11 @@ import {BigButton} from '../../shared/components/big-button';
 import {Modal} from '../../shared/components/modal/modal';
 import {SurveyButton} from '../../shared/components/survey-button';
 
-export const FeedbackModal = ({dismiss}: {dismiss: () => void}) => {
+export function FeedbackModal({dismiss}: {dismiss: () => void}) {
     const [choice, setChoice] = useState(0);
     return (
         <Modal dismiss={dismiss}>
-            <h3 style={{textAlign: 'center'}}>How's it going so far?</h3>
+            <h3 style={{textAlign: 'center'}}>How&apos;s it going so far?</h3>
             <div style={{textAlign: 'center'}}>
                 <BigButton icon='smile-beam' title='Great' onClick={() => setChoice(1)} />
                 <BigButton icon='frown-open' title='Not so good' href='#' onClick={() => setChoice(2)} />
@@ -20,4 +20,4 @@ export const FeedbackModal = ({dismiss}: {dismiss: () => void}) => {
             )}
         </Modal>
     );
-};
+}

ui/src/app/modals/first-time-user/first-time-user-modal.tsx

@@ -11,7 +11,7 @@ import {SurveyButton} from '../../shared/components/survey-button';
  */
 export const FirstTimeUserModal = ({dismiss}: {dismiss: () => void}) => (
     <Modal dismiss={dismiss}>
-        <h3 style={{textAlign: 'center'}}>Tell us what you want to use Argo for - we'll tell you how to do it. </h3>
+        <h3 style={{textAlign: 'center'}}>Tell us what you want to use Argo for - we&apos;ll tell you how to do it. </h3>
         <div style={{textAlign: 'center'}}>
             {[
                 {key: 'machine-learning', icon: 'brain', title: 'Machine Learning'},