argoproj · terrytangyuan · Nov 30, 2023 · Nov 8, 2023 · Nov 8, 2023
diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -1,9 +1,11 @@
 {
+  "arrowParens": "avoid",
   "bracketSpacing": false,
   "jsxSingleQuote": true,
+  "jsxBracketSameLine": true,
   "printWidth": 180,
+  "quoteProps": "consistent",
   "singleQuote": true,
   "tabWidth": 4,
-  "jsxBracketSameLine": true,
-  "quoteProps": "consistent"
+  "trailingComma": "none"
 }
diff --git a/ui/package.json b/ui/package.json
@@ -65,12 +65,12 @@
         "copy-webpack-plugin": "^11.0.0",
         "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-prettier": "^3.4.1",
+        "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-react": "^7.33.2",
         "html-webpack-plugin": "^5.5.3",
         "jest": "^26.6.3",
         "monaco-editor-webpack-plugin": "^7.1.0",
-        "prettier": "^1.19.1",
+        "prettier": "^3.0.3",
         "raw-loader": "^4.0.2",
         "react-hot-loader": "^4.13.1",
         "sass": "^1.69.5",

diff --git a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-creator.tsx b/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-creator.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useState} from 'react';
+
 import {ClusterWorkflowTemplate} from '../../../models';
 import {Button} from '../../shared/components/button';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -18,11 +19,13 @@ export function ClusterWorkflowTemplateCreator({onCreate}: {onCreate: (workflow:
                 <UploadButton onUpload={setTemplate} onError={setError} />
                 <Button
                     icon='plus'
-                    onClick={() => {
-                        services.clusterWorkflowTemplate
-                            .create(template)
-                            .then(onCreate)
-                            .catch(setError);
+                    onClick={async () => {
+                        try {
+                            const newTemplate = await services.clusterWorkflowTemplate.create(template);
+                            onCreate(newTemplate);
+                        } catch (err) {
+                            setError(err);
+                        }
                     }}>
                     Create
                 </Button>

diff --git a/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx b/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useState} from 'react';
+
 import {CronWorkflow} from '../../../models';
 import {Button} from '../../shared/components/button';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -19,11 +20,13 @@ export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; o
                 <UploadButton onUpload={setCronWorkflow} onError={setError} />
                 <Button
                     icon='plus'
-                    onClick={() => {
-                        services.cronWorkflows
-                            .create(cronWorkflow, Utils.getNamespaceWithDefault(cronWorkflow.metadata.namespace))
-                            .then(onCreate)
-                            .catch(setError);
+                    onClick={async () => {
+                        try {
+                            const newCronWorkflow = await services.cronWorkflows.create(cronWorkflow, Utils.getNamespaceWithDefault(cronWorkflow.metadata.namespace));
+                            onCreate(newCronWorkflow);
+                        } catch (err) {
+                            setError(err);
+                        }
                     }}>
                     Create
                 </Button>

diff --git a/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx b/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx
@@ -325,9 +325,11 @@ export function EventFlowPage({history, location, match}: RouteComponentProps<an
                                                 source={{
                                                     key: 'logs',
                                                     loadLogs: () =>
-                                                        ((selected.kind === 'Sensor'
-                                                            ? services.sensor.sensorsLogs(namespace, selected.name, selected.key, '', 50)
-                                                            : services.eventSource.eventSourcesLogs(namespace, selected.name, '', selected.key, '', 50)) as Observable<any>).pipe(
+                                                        (
+                                                            (selected.kind === 'Sensor'
+                                                                ? services.sensor.sensorsLogs(namespace, selected.name, selected.key, '', 50)
+                                                                : services.eventSource.eventSourcesLogs(namespace, selected.name, '', selected.key, '', 50)) as Observable<any>
+                                                        ).pipe(
                                                             filter(e => !!e),
                                                             map(
                                                                 e =>

diff --git a/ui/src/app/event-sources/components/event-source-creator.tsx b/ui/src/app/event-sources/components/event-source-creator.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useState} from 'react';
+
 import {EventSource} from '../../../models';
 import {Button} from '../../shared/components/button';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -18,11 +19,13 @@ export function EventSourceCreator({onCreate, namespace}: {namespace: string; on
                 <UploadButton onUpload={setEventSource} onError={setError} />
                 <Button
                     icon='plus'
-                    onClick={() => {
-                        services.eventSource
-                            .create(eventSource, Utils.getNamespaceWithDefault(eventSource.metadata.namespace))
-                            .then(onCreate)
-                            .catch(setError);
+                    onClick={async () => {
+                        try {
+                            const newEventSource = await services.eventSource.create(eventSource, Utils.getNamespaceWithDefault(eventSource.metadata.namespace));
+                            onCreate(newEventSource);
+                        } catch (err) {
+                            setError(err);
+                        }
                     }}>
                     Create
                 </Button>

diff --git a/ui/src/app/sensors/components/sensor-creator.tsx b/ui/src/app/sensors/components/sensor-creator.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useState} from 'react';
+
 import {Sensor} from '../../../models';
 import {Button} from '../../shared/components/button';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -9,7 +10,7 @@ import {services} from '../../shared/services';
 import {Utils} from '../../shared/utils';
 import {SensorEditor} from './sensor-editor';
 
-export const SensorCreator = ({namespace, onCreate}: {namespace: string; onCreate: (sensor: Sensor) => void}) => {
+export function SensorCreator({namespace, onCreate}: {namespace: string; onCreate: (sensor: Sensor) => void}) {
     const [sensor, setSensor] = useState<Sensor>(exampleSensor(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
@@ -18,11 +19,13 @@ export const SensorCreator = ({namespace, onCreate}: {namespace: string; onCreat
                 <UploadButton onUpload={setSensor} onError={setError} />
                 <Button
                     icon='plus'
-                    onClick={() => {
-                        services.sensor
-                            .create(sensor, Utils.getNamespaceWithDefault(sensor.metadata.namespace))
-                            .then(onCreate)
-                            .catch(setError);
+                    onClick={async () => {
+                        try {
+                            const newSensor = await services.sensor.create(sensor, Utils.getNamespaceWithDefault(sensor.metadata.namespace));
+                            onCreate(newSensor);
+                        } catch (err) {
+                            setError(err);
+                        }
                     }}>
                     Create
                 </Button>
@@ -36,4 +39,4 @@ export const SensorCreator = ({namespace, onCreate}: {namespace: string; onCreat
             </p>
         </>
     );
-};
+}
diff --git a/ui/src/app/shared/artifacts.ts b/ui/src/app/shared/artifacts.ts
@@ -16,10 +16,7 @@ export const nodeArtifacts = (node: NodeStatus, ar: ArtifactRepository) =>
         .map(a => ({
             ...a,
             // trim trailing slash to get the correct filename for a directory
-            filename: a.key
-                .replace(/\/$/, '')
-                .split('/')
-                .pop()
+            filename: a.key.replace(/\/$/, '').split('/').pop()
         }));
 
 export const artifactURN = <A extends Artifact>(a: A, ar: ArtifactRepository) => {

diff --git a/ui/src/app/shared/components/editors/workflow-parameters-editor.tsx b/ui/src/app/shared/components/editors/workflow-parameters-editor.tsx
@@ -9,10 +9,13 @@ export const WorkflowParametersEditor = <T extends WorkflowSpec>(props: {value:
         props.value.arguments.parameters &&
         props.value.arguments.parameters
             .map(param => [param.name, param.value])
-            .reduce((obj, [key, val]) => {
-                obj[key] = val;
-                return obj;
-            }, {} as {[key: string]: string});
+            .reduce(
+                (obj, [key, val]) => {
+                    obj[key] = val;
+                    return obj;
+                },
+                {} as {[key: string]: string}
+            );
 
     return (
         <>
@@ -29,7 +32,7 @@ export const WorkflowParametersEditor = <T extends WorkflowSpec>(props: {value:
                                 ({
                                     name: k,
                                     value: v
-                                } as Parameter)
+                                }) as Parameter
                         );
                         props.onChange(props.value);
                     }}

diff --git a/ui/src/app/shared/cron.tsx b/ui/src/app/shared/cron.tsx
@@ -3,10 +3,7 @@ import parser from 'cron-parser';
 export function getNextScheduledTime(schedule: string, tz: string): Date {
     let out: Date;
     try {
-        out = parser
-            .parseExpression(schedule, {utc: !tz, tz})
-            .next()
-            .toDate();
+        out = parser.parseExpression(schedule, {utc: !tz, tz}).next().toDate();
     } catch (e) {
         // Do nothing
     }

diff --git a/ui/src/app/shared/services/workflows-service.ts b/ui/src/app/shared/services/workflows-service.ts
@@ -245,7 +245,7 @@ export const WorkflowsService = {
                 return from(requests.get(this.getArtifactLogsPath(workflow, nodeId, container, archived)));
             }),
             mergeMap(r => r.text.split('\n')),
-            map(content => ({content, podName: workflow.status.nodes[nodeId].displayName} as LogEntry)),
+            map(content => ({content, podName: workflow.status.nodes[nodeId].displayName}) as LogEntry),
             filter(x => !!x.content.match(grep))
         );
     },

diff --git a/ui/src/app/workflow-templates/components/workflow-template-creator.tsx b/ui/src/app/workflow-templates/components/workflow-template-creator.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useState} from 'react';
+
 import {WorkflowTemplate} from '../../../models';
 import {Button} from '../../shared/components/button';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -19,11 +20,13 @@ export function WorkflowTemplateCreator({namespace, onCreate}: {namespace: strin
                 <UploadButton onUpload={setTemplate} onError={setError} />
                 <Button
                     icon='plus'
-                    onClick={() => {
-                        services.workflowTemplate
-                            .create(template, Utils.getNamespaceWithDefault(template.metadata.namespace))
-                            .then(onCreate)
-                            .catch(setError);
+                    onClick={async () => {
+                        try {
+                            const newTemplate = await services.workflowTemplate.create(template, Utils.getNamespaceWithDefault(template.metadata.namespace));
+                            onCreate(newTemplate);
+                        } catch (err) {
+                            setError(err);
+                        }
                     }}>
                     Create
                 </Button>

diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -1,6 +1,7 @@
 import {Select} from 'argo-ui/src/components/select/select';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
+
 import {Workflow, WorkflowTemplate} from '../../../models';
 import {Button} from '../../shared/components/button';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -105,11 +106,13 @@ export function WorkflowCreator({namespace, onCreate}: {namespace: string; onCre
                         <UploadButton onUpload={setWorkflow} onError={setError} />
                         <Button
                             icon='plus'
-                            onClick={() => {
-                                services.workflows
-                                    .create(workflow, Utils.getNamespaceWithDefault(workflow.metadata.namespace))
-                                    .then(onCreate)
-                                    .catch(setError);
+                            onClick={async () => {
+                                try {
+                                    const newWorkflow = await services.workflows.create(workflow, Utils.getNamespaceWithDefault(workflow.metadata.namespace));
+                                    onCreate(newWorkflow);
+                                } catch (err) {
+                                    setError(err);
+                                }
                             }}>
                             Create
                         </Button>

diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -485,9 +485,7 @@ export function WorkflowDetails({history, location, match}: RouteComponentProps<
                 return;
             }
 
-            updateOutputParametersForNodeIfRequired()
-                .then(resumeNode)
-                .catch(setError);
+            updateOutputParametersForNodeIfRequired().then(resumeNode).catch(setError);
         });
     }
 

diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -321,9 +321,7 @@ function EnvVar(props: {env: models.kubernetes.EnvVar}) {
             </Tooltip>
             {secret.name}/{secret.key}
         </>
-    ) : (
-        undefined
-    );
+    ) : undefined;
 
     return (
         <pre key={env.name}>

diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -115,7 +115,7 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
     // save history and localStorage
     useEffect(() => {
         // add empty selectedPhases + selectedLabels for forward-compat w/ old version: previous code relies on them existing, so if you move up a version and back down, it breaks
-        const options = ({selectedPhases: [], selectedLabels: []} as unknown) as WorkflowListRenderOptions;
+        const options = {selectedPhases: [], selectedLabels: []} as unknown as WorkflowListRenderOptions;
         options.phases = phases;
         options.labels = labels;
         if (pagination.limit) {