From 9b26bd8f08a4893bd05777bddc72ab1a90eb49e0 Mon Sep 17 00:00:00 2001
From: "toyamagu2021@gmail.com" <toyamagu2021@gmail.com>
Date: Sun, 14 May 2023 13:43:34 +0900
Subject: [PATCH] feat: UI Resubmit [archived] workflows with parameter (#4662)

Signed-off-by: toyamagu2021@gmail.com <toyamagu2021@gmail.com>
---
 .../archived-workflow-details.tsx             | 19 +---
 .../parameters-input/parameters-input.tsx     | 80 ++++++++++++++++
 .../services/archived-workflows-service.ts    |  5 +-
 .../app/shared/services/workflows-service.ts  |  8 +-
 ui/src/app/shared/utils.ts                    | 10 +-
 ui/src/app/shared/workflow-operations-map.ts  |  2 +-
 .../components/resubmit-workflow-panel.tsx    | 94 +++++++++++++++++++
 .../components/submit-workflow-panel.tsx      | 82 ++--------------
 .../workflow-details/workflow-details.tsx     | 34 ++++---
 ui/src/models/resubmit-opts.ts                |  4 +
 10 files changed, 229 insertions(+), 109 deletions(-)
 create mode 100644 ui/src/app/shared/components/parameters-input/parameters-input.tsx
 create mode 100644 ui/src/app/workflows/components/resubmit-workflow-panel.tsx
 create mode 100644 ui/src/models/resubmit-opts.ts

diff --git a/ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx b/ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx
index d88a98b6646d..34dc897911d6 100644
--- a/ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx
+++ b/ui/src/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx
@@ -17,6 +17,7 @@ import {WorkflowArtifacts} from '../../../workflows/components/workflow-artifact
 import {ANNOTATION_KEY_POD_NAME_VERSION} from '../../../shared/annotations';
 import {getPodName, getTemplateNameFromNode} from '../../../shared/pod-name';
 import {getResolvedTemplates} from '../../../shared/template-resolution';
+import {ResubmitWorkflowPanel} from '../../../workflows/components/resubmit-workflow-panel';
 import {ArtifactPanel} from '../../../workflows/components/workflow-details/artifact-panel';
 import {WorkflowResourcePanel} from '../../../workflows/components/workflow-details/workflow-resource-panel';
 import {WorkflowLogsViewer} from '../../../workflows/components/workflow-logs-viewer/workflow-logs-viewer';
@@ -170,6 +171,7 @@ export const ArchivedWorkflowDetails = ({history, location, match}: RouteCompone
                 <SlidingPanel isShown={!!sidePanel} onClose={() => setSidePanel(null)}>
                     {sidePanel === 'yaml' && <WorkflowYamlViewer workflow={workflow} selectedNode={node} />}
                     {sidePanel === 'logs' && <WorkflowLogsViewer workflow={workflow} initialPodName={podName()} nodeId={nodeId} container={container} archived={true} />}
+                    {sidePanel === 'resubmit' && <ResubmitWorkflowPanel workflow={workflow} workflowParameters={workflow.spec.arguments.parameters || []} />}
                 </SlidingPanel>
             </>
         );
@@ -192,21 +194,6 @@ export const ArchivedWorkflowDetails = ({history, location, match}: RouteCompone
             });
     };
 
-    const resubmitArchivedWorkflow = () => {
-        if (!confirm('Are you sure you want to resubmit this archived workflow?')) {
-            return;
-        }
-        services.archivedWorkflows
-            .resubmit(workflow.metadata.uid, workflow.metadata.namespace)
-            .then(newWorkflow => (document.location.href = uiUrl(`workflows/${newWorkflow.metadata.namespace}/${newWorkflow.metadata.name}`)))
-            .catch(e => {
-                ctx.notifications.show({
-                    content: 'Failed to resubmit archived workflow ' + e,
-                    type: NotificationType.Error
-                });
-            });
-    };
-
     const retryArchivedWorkflow = () => {
         if (!confirm('Are you sure you want to retry this archived workflow?')) {
             return;
@@ -255,7 +242,7 @@ export const ArchivedWorkflowDetails = ({history, location, match}: RouteCompone
             title: 'Resubmit',
             iconClassName: 'fa fa-plus-circle',
             disabled: false,
-            action: () => resubmitArchivedWorkflow()
+            action: () => setSidePanel('resubmit')
         },
         {
             title: 'Delete',
diff --git a/ui/src/app/shared/components/parameters-input/parameters-input.tsx b/ui/src/app/shared/components/parameters-input/parameters-input.tsx
new file mode 100644
index 000000000000..cfde6fa07ccd
--- /dev/null
+++ b/ui/src/app/shared/components/parameters-input/parameters-input.tsx
@@ -0,0 +1,80 @@
+import {Select, Tooltip} from 'argo-ui';
+import * as React from 'react';
+import {Parameter} from '../../../../models';
+import {Utils} from '../../utils';
+
+interface ParametersInputProps {
+    parameters: Parameter[];
+    onChange?: (parameters: Parameter[]) => void;
+}
+
+export class ParametersInput extends React.Component<ParametersInputProps, {parameters: Parameter[]}> {
+    constructor(props: ParametersInputProps) {
+        super(props);
+        this.state = {parameters: props.parameters || []};
+    }
+
+    public render() {
+        return (
+            <>
+                {this.props.parameters.map((parameter, index) => (
+                    <div key={parameter.name + '_' + index} style={{marginBottom: 14}}>
+                        <label>{parameter.name}</label>
+                        {parameter.description && (
+                            <Tooltip content={parameter.description}>
+                                <i className='fa fa-question-circle' style={{marginLeft: 4}} />
+                            </Tooltip>
+                        )}
+                        {(parameter.enum && this.displaySelectFieldForEnumValues(parameter)) || this.displayInputFieldForSingleValue(parameter)}
+                    </div>
+                ))}
+            </>
+        );
+    }
+
+    private displaySelectFieldForEnumValues(parameter: Parameter) {
+        return (
+            <Select
+                key={parameter.name}
+                value={Utils.getValueFromParameter(parameter)}
+                options={parameter.enum.map(value => ({
+                    value,
+                    title: value
+                }))}
+                onChange={e => {
+                    const newParameters: Parameter[] = this.state.parameters.map(p => ({
+                        name: p.name,
+                        value: p.name === parameter.name ? e.value : Utils.getValueFromParameter(p),
+                        enum: p.enum
+                    }));
+                    this.setState({parameters: newParameters});
+                    this.onParametersChange(newParameters);
+                }}
+            />
+        );
+    }
+
+    private displayInputFieldForSingleValue(parameter: Parameter) {
+        return (
+            <textarea
+                className='argo-field'
+                value={Utils.getValueFromParameter(parameter)}
+                onChange={e => {
+                    const newParameters: Parameter[] = this.state.parameters.map(p => ({
+                        name: p.name,
+                        value: p.name === parameter.name ? e.target.value : Utils.getValueFromParameter(p),
+                        enum: p.enum
+                    }));
+                    this.setState({parameters: newParameters});
+                    this.onParametersChange(newParameters);
+                }}
+            />
+        );
+    }
+
+    private onParametersChange(parameters: Parameter[]) {
+        if (this.props.onChange) {
+            this.props.onChange(parameters);
+        }
+    }
+}
diff --git a/ui/src/app/shared/services/archived-workflows-service.ts b/ui/src/app/shared/services/archived-workflows-service.ts
index ecda26a10c27..b11d819ee043 100644
--- a/ui/src/app/shared/services/archived-workflows-service.ts
+++ b/ui/src/app/shared/services/archived-workflows-service.ts
@@ -1,4 +1,5 @@
 import * as models from '../../../models';
+import {ResubmitOpts} from '../../../models/resubmit-opts';
 import {Pagination} from '../pagination';
 import {Utils} from '../utils';
 import requests from './requests';
@@ -47,10 +48,10 @@ export const ArchivedWorkflowsService = {
         return (await requests.get(url)).body as models.Labels;
     },
 
-    resubmit(uid: string, namespace: string) {
+    resubmit(uid: string, namespace: string, opts?: ResubmitOpts) {
         return requests
             .put(`api/v1/archived-workflows/${uid}/resubmit`)
-            .send({namespace})
+            .send({namespace, ...opts})
             .then(res => res.body as models.Workflow);
     },
 
diff --git a/ui/src/app/shared/services/workflows-service.ts b/ui/src/app/shared/services/workflows-service.ts
index 9900a10920fa..af707dd77bce 100644
--- a/ui/src/app/shared/services/workflows-service.ts
+++ b/ui/src/app/shared/services/workflows-service.ts
@@ -2,6 +2,7 @@ import {EMPTY, from, Observable, of} from 'rxjs';
 import {catchError, filter, map, mergeMap, switchMap} from 'rxjs/operators';
 import * as models from '../../../models';
 import {Event, LogEntry, NodeStatus, Workflow, WorkflowList, WorkflowPhase} from '../../../models';
+import {ResubmitOpts} from '../../../models/resubmit-opts';
 import {SubmitOpts} from '../../../models/submit-opts';
 import {uiUrl} from '../base';
 import {Pagination} from '../pagination';
@@ -117,8 +118,11 @@ export const WorkflowsService = {
         return requests.put(`api/v1/workflows/${namespace}/${name}/retry`).then(res => res.body as Workflow);
     },
 
-    resubmit(name: string, namespace: string) {
-        return requests.put(`api/v1/workflows/${namespace}/${name}/resubmit`).then(res => res.body as Workflow);
+    resubmit(name: string, namespace: string, opts?: ResubmitOpts) {
+        return requests
+            .put(`api/v1/workflows/${namespace}/${name}/resubmit`)
+            .send(opts)
+            .then(res => res.body as Workflow);
     },
 
     suspend(name: string, namespace: string) {
diff --git a/ui/src/app/shared/utils.ts b/ui/src/app/shared/utils.ts
index 18aabf00f2d8..f9a113b090e1 100644
--- a/ui/src/app/shared/utils.ts
+++ b/ui/src/app/shared/utils.ts
@@ -1,5 +1,5 @@
 import * as models from '../../models';
-import {NODE_PHASE} from '../../models';
+import {NODE_PHASE, Parameter} from '../../models';
 import {Pagination} from './pagination';
 
 const managedNamespaceKey = 'managedNamespace';
@@ -190,5 +190,13 @@ export const Utils = {
             labelSelector += labels.join(',');
         }
         return labelSelector;
+    },
+
+    getValueFromParameter(p: Parameter) {
+        if (p.value === undefined) {
+            return p.default;
+        } else {
+            return p.value;
+        }
     }
 };
diff --git a/ui/src/app/shared/workflow-operations-map.ts b/ui/src/app/shared/workflow-operations-map.ts
index 665b32600d8f..045cdffbb7c6 100644
--- a/ui/src/app/shared/workflow-operations-map.ts
+++ b/ui/src/app/shared/workflow-operations-map.ts
@@ -36,7 +36,7 @@ export const WorkflowOperationsMap: WorkflowOperations = {
         title: 'RESUBMIT',
         iconClassName: 'fa fa-plus-circle',
         disabled: () => false,
-        action: (wf: Workflow) => services.workflows.resubmit(wf.metadata.name, wf.metadata.namespace)
+        action: (wf: Workflow) => services.workflows.resubmit(wf.metadata.name, wf.metadata.namespace, null)
     },
     SUSPEND: {
         title: 'SUSPEND',
diff --git a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
new file mode 100644
index 000000000000..4caacbecce6b
--- /dev/null
+++ b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
@@ -0,0 +1,94 @@
+import {Checkbox} from 'argo-ui';
+import * as React from 'react';
+import {Parameter, Workflow} from '../../../models';
+import {uiUrl} from '../../shared/base';
+import {ErrorNotice} from '../../shared/components/error-notice';
+import {ParametersInput} from '../../shared/components/parameters-input/parameters-input';
+import {services} from '../../shared/services';
+import {Utils} from '../../shared/utils';
+
+interface Props {
+    workflow: Workflow;
+    workflowParameters: Parameter[];
+    isArchived?: boolean;
+}
+
+interface State {
+    workflowParameters: Parameter[];
+    memoized: boolean;
+    error?: Error;
+    isSubmitting: boolean;
+}
+
+export class ResubmitWorkflowPanel extends React.Component<Props, State> {
+    constructor(props: any) {
+        super(props);
+        const state: State = {
+            workflowParameters: JSON.parse(JSON.stringify(this.props.workflowParameters)),
+            memoized: false,
+            isSubmitting: false
+        };
+        this.state = state;
+    }
+
+    public render() {
+        return (
+            <>
+                <h4>Submit Workflow</h4>
+                <h5>
+                    {this.props.workflow.metadata.namespace}/{this.props.workflow.metadata.name}
+                </h5>
+                {this.state.error && <ErrorNotice error={this.state.error} />}
+                <div className='white-box'>
+                    <div key='parameters' style={{marginBottom: 25}}>
+                        <label>Parameters</label>
+                        {this.state.workflowParameters.length > 0 && (
+                            <ParametersInput parameters={this.state.workflowParameters} onChange={workflowParameters => this.setState({workflowParameters})} />
+                        )}
+                        {this.state.workflowParameters.length === 0 ? (
+                            <>
+                                <br />
+                                <label>No parameters</label>
+                            </>
+                        ) : (
+                            <></>
+                        )}
+                    </div>
+
+                    <div key='memorized' style={{marginBottom: 25}}>
+                        <label>Memorized</label>
+                        <div className='columns small-9'>
+                            <Checkbox checked={this.state.memoized} onChange={memoized => this.setState({memoized})} />
+                        </div>
+                    </div>
+
+                    <div key='resubmit'>
+                        <button onClick={() => this.submit()} className='argo-button argo-button--base' disabled={this.state.isSubmitting}>
+                            <i className='fa fa-plus' /> {this.state.isSubmitting ? 'Loading...' : 'Resubmit'}
+                        </button>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    private submit() {
+        this.setState({isSubmitting: true});
+        if (!this.props.isArchived) {
+            services.workflows
+                .resubmit(this.props.workflow.metadata.name, this.props.workflow.metadata.namespace, {
+                    parameters: [
+                        ...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))
+                    ],
+                    memoized: this.state.memoized
+                })
+                .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
+                .catch(error => this.setState({error, isSubmitting: false}));
+        } else {
+            services.archivedWorkflows
+                .resubmit(this.props.workflow.metadata.uid, this.props.workflow.metadata.namespace)
+                .then(newWorkflow => (document.location.href = uiUrl(`workflows/${newWorkflow.metadata.namespace}/${newWorkflow.metadata.name}`)))
+                .catch(error => this.setState({error, isSubmitting: false}));
+        }
+    }
+}
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index f0776380c156..cda87d36b7c7 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,10 +1,12 @@
-import {Select, Tooltip} from 'argo-ui';
+import {Select} from 'argo-ui';
 import * as React from 'react';
 import {Parameter, Template, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
+import {ParametersInput} from '../../shared/components/parameters-input/parameters-input';
 import {TagsInput} from '../../shared/components/tags-input/tags-input';
 import {services} from '../../shared/services';
+import {Utils} from '../../shared/utils';
 
 interface Props {
     kind: string;
@@ -28,7 +30,6 @@ interface State {
 }
 
 const workflowEntrypoint = '<default>';
-type ParamSelector = 'parameters' | 'workflowParameters';
 
 export class SubmitWorkflowPanel extends React.Component<Props, State> {
     constructor(props: any) {
@@ -81,8 +82,10 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
                     </div>
                     <div key='parameters' style={{marginBottom: 25}}>
                         <label>Parameters</label>
-                        {this.state.workflowParameters.length > 0 && this.renderParameters(this.state.workflowParameters, 'workflowParameters')}
-                        {this.state.parameters.length > 0 && this.renderParameters(this.state.parameters, 'parameters')}
+                        {this.state.workflowParameters.length > 0 && (
+                            <ParametersInput parameters={this.state.workflowParameters} onChange={workflowParameters => this.setState({workflowParameters})} />
+                        )}
+                        {this.state.parameters.length > 0 && <ParametersInput parameters={this.state.parameters} onChange={parameters => this.setState({parameters})} />}
                         {this.state.workflowParameters.length === 0 && this.state.parameters.length === 0 ? (
                             <>
                                 <br />
@@ -115,81 +118,14 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
         return null;
     }
 
-    private displaySelectFieldForEnumValues(parameter: Parameter, parameterStateName: ParamSelector) {
-        return (
-            <Select
-                key={parameter.name}
-                value={this.getValue(parameter)}
-                options={parameter.enum.map(value => ({
-                    value,
-                    title: value
-                }))}
-                onChange={event => {
-                    const update = {} as State;
-                    update[parameterStateName] = this.state[parameterStateName].map(p => ({
-                        name: p.name,
-                        value: p.name === parameter.name ? event.value : this.getValue(p),
-                        enum: p.enum
-                    }));
-                    this.setState(update);
-                }}
-            />
-        );
-    }
-
-    private displayInputFieldForSingleValue(parameter: Parameter, parameterStateName: ParamSelector) {
-        return (
-            <textarea
-                className='argo-field'
-                value={this.getValue(parameter)}
-                onChange={event => {
-                    const update = {} as State;
-                    update[parameterStateName] = this.state[parameterStateName].map(p => ({
-                        name: p.name,
-                        value: p.name === parameter.name ? event.target.value : this.getValue(p),
-                        enum: p.enum
-                    }));
-                    this.setState(update);
-                }}
-            />
-        );
-    }
-
-    private renderParameters(parameters: Parameter[], parameterStateName: ParamSelector) {
-        return (
-            <>
-                {parameters.map((parameter, index) => (
-                    <div key={parameter.name + '_' + index} style={{marginBottom: 14}}>
-                        <label>{parameter.name}</label>
-                        {parameter.description && (
-                            <Tooltip content={parameter.description}>
-                                <i className='fa fa-question-circle' style={{marginLeft: 4}} />
-                            </Tooltip>
-                        )}
-                        {(parameter.enum && this.displaySelectFieldForEnumValues(parameter, parameterStateName)) ||
-                            this.displayInputFieldForSingleValue(parameter, parameterStateName)}
-                    </div>
-                ))}
-            </>
-        );
-    }
-
-    private getValue(p: Parameter) {
-        if (p.value === undefined) {
-            return p.default;
-        } else {
-            return p.value;
-        }
-    }
-
     private submit() {
         this.setState({isSubmitting: true});
         services.workflows
             .submit(this.props.kind, this.props.name, this.props.namespace, {
                 entryPoint: this.state.entrypoint === workflowEntrypoint ? null : this.state.entrypoint,
                 parameters: [
-                    ...this.state.workflowParameters.filter(p => this.getValue(p) !== undefined).map(p => p.name + '=' + this.getValue(p)),
-                    ...this.state.parameters.filter(p => this.getValue(p) !== undefined).map(p => p.name + '=' + this.getValue(p))
+                    ...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p)),
+                    ...this.state.parameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))
                 ],
                 labels: this.state.labels.join(',')
             })
diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
index f61bdce5011d..b093e0ff7c25 100644
--- a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
+++ b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -26,6 +26,7 @@ import * as Operations from '../../../shared/workflow-operations-map';
 import {WorkflowOperations} from '../../../shared/workflow-operations-map';
 import {WidgetGallery} from '../../../widgets/widget-gallery';
 import {EventsPanel} from '../events-panel';
+import {ResubmitWorkflowPanel} from '../resubmit-workflow-panel';
 import {WorkflowArtifacts} from '../workflow-artifacts';
 import {WorkflowLogsViewer} from '../workflow-logs-viewer/workflow-logs-viewer';
 import {WorkflowNodeInfo} from '../workflow-node-info/workflow-node-info';
@@ -147,20 +148,24 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
                     title: workflowOperation.title.charAt(0).toUpperCase() + workflowOperation.title.slice(1),
                     iconClassName: workflowOperation.iconClassName,
                     action: () => {
-                        popup.confirm('Confirm', `Are you sure you want to ${workflowOperation.title.toLowerCase()} this workflow?`).then(yes => {
-                            if (yes) {
-                                workflowOperation
-                                    .action(workflow)
-                                    .then((wf: Workflow) => {
-                                        if (workflowOperation.title === 'DELETE') {
-                                            navigation.goto(uiUrl(`workflows/${workflow.metadata.namespace}`));
-                                        } else {
-                                            setName(wf.metadata.name);
-                                        }
-                                    })
-                                    .catch(setError);
-                            }
-                        });
+                        if (actionName !== 'RESUBMIT') {
+                            popup.confirm('Confirm', `Are you sure you want to ${workflowOperation.title.toLowerCase()} this workflow?`).then(yes => {
+                                if (yes) {
+                                    workflowOperation
+                                        .action(workflow)
+                                        .then((wf: Workflow) => {
+                                            if (workflowOperation.title === 'DELETE') {
+                                                navigation.goto(uiUrl(`workflows/${workflow.metadata.namespace}`));
+                                            } else {
+                                                setName(wf.metadata.name);
+                                            }
+                                        })
+                                        .catch(setError);
+                                }
+                            });
+                        } else {
+                            setSidePanel('resubmit');
+                        }
                     }
                 };
             });
@@ -479,6 +484,7 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
                     {parsedSidePanel.type === 'events' && <EventsPanel namespace={namespace} kind='Pod' name={podName} />}
                     {parsedSidePanel.type === 'share' && <WidgetGallery namespace={namespace} name={name} />}
                     {parsedSidePanel.type === 'yaml' && <WorkflowYamlViewer workflow={workflow} selectedNode={selectedNode} />}
+                    {parsedSidePanel.type === 'resubmit' && <ResubmitWorkflowPanel workflow={workflow} workflowParameters={workflow.spec.arguments.parameters || []} />}
                     {!parsedSidePanel}
                 </SlidingPanel>
             )}
diff --git a/ui/src/models/resubmit-opts.ts b/ui/src/models/resubmit-opts.ts
new file mode 100644
index 000000000000..b4795c14a70e
--- /dev/null
+++ b/ui/src/models/resubmit-opts.ts
@@ -0,0 +1,4 @@
+export interface ResubmitOpts {
+    parameters?: string[];
+    memoized?: boolean;
+}