From 2177c0a24ac3feb97752b2c920fc29dbf56b3961 Mon Sep 17 00:00:00 2001
From: "toyamagu2021@gmail.com" <toyamagu2021@gmail.com>
Date: Sat, 20 May 2023 15:07:21 +0900
Subject: [PATCH] feat: add override checkbox and some minor changes

Signed-off-by: toyamagu2021@gmail.com <toyamagu2021@gmail.com>
---
 .../archived-workflow-details.tsx             |  2 +-
 .../components/resubmit-workflow-panel.tsx    | 72 ++++++++++++-------
 .../workflow-details/workflow-details.tsx     |  2 +-
 ui/src/models/index.ts                        |  1 +
 4 files changed, 50 insertions(+), 27 deletions(-)

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 34dc897911d6..5f53ca43ce1e 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
@@ -171,7 +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 || []} />}
+                    {sidePanel === 'resubmit' && <ResubmitWorkflowPanel workflow={workflow} archived={true} />}
                 </SlidingPanel>
             </>
         );
diff --git a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
index 7ed921a176a0..3508ada91e93 100644
--- a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
@@ -1,6 +1,6 @@
 import {Checkbox} from 'argo-ui';
 import * as React from 'react';
-import {Parameter, Workflow} from '../../../models';
+import {Parameter, ResubmitOpts, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {ParametersInput} from '../../shared/components/parameters-input/parameters-input';
@@ -9,11 +9,11 @@ import {Utils} from '../../shared/utils';
 
 interface Props {
     workflow: Workflow;
-    workflowParameters: Parameter[];
-    isArchived?: boolean;
+    archived?: boolean;
 }
 
 interface State {
+    overrideParameters: boolean;
     workflowParameters: Parameter[];
     memoized: boolean;
     error?: Error;
@@ -24,9 +24,10 @@ export class ResubmitWorkflowPanel extends React.Component<Props, State> {
     constructor(props: any) {
         super(props);
         const state: State = {
-            workflowParameters: JSON.parse(JSON.stringify(this.props.workflowParameters)),
+            workflowParameters: JSON.parse(JSON.stringify(this.props.workflow.spec.arguments.parameters || [])),
             memoized: false,
-            isSubmitting: false
+            isSubmitting: false,
+            overrideParameters: false
         };
         this.state = state;
     }
@@ -34,34 +35,50 @@ export class ResubmitWorkflowPanel extends React.Component<Props, State> {
     public render() {
         return (
             <>
-                <h4>Submit Workflow</h4>
+                <h4>Resubmit 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 key='override-parameters' style={{marginBottom: 25}}>
+                        <label>Override Parameters</label>
+                        <div className='columns small-9'>
+                            <Checkbox checked={this.state.overrideParameters} onChange={overrideParameters => this.setState({overrideParameters})} />
+                        </div>
                     </div>
 
+                    {this.state.overrideParameters && (
+                        <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='memoized' style={{marginBottom: 25}}>
-                        <label>Memorized</label>
+                        <label>Memoized</label>
                         <div className='columns small-9'>
                             <Checkbox checked={this.state.memoized} onChange={memoized => this.setState({memoized})} />
                         </div>
                     </div>
 
+                    {this.state.overrideParameters && this.state.memoized && (
+                        <div key='warning-override-with-memoized'>
+                            <i className='fa fa-exclamation-triangle' style={{color: '#f4c030'}} />
+                            Overriding parameters on memoized submitted workflows may have unexpected results.
+                        </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'}
@@ -74,19 +91,24 @@ export class ResubmitWorkflowPanel extends React.Component<Props, State> {
 
     private submit() {
         this.setState({isSubmitting: true});
-        if (!this.props.isArchived) {
+        const parameters: ResubmitOpts['parameters'] = this.state.overrideParameters
+            ? [...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
+            : [];
+
+        if (!this.props.archived) {
             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))
-                    ],
+                    parameters,
                     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)
+                .resubmit(this.props.workflow.metadata.uid, this.props.workflow.metadata.namespace, {
+                    parameters,
+                    memoized: this.state.memoized
+                })
                 .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/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
index b093e0ff7c25..6a538b08927b 100644
--- a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
+++ b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -484,7 +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.type === 'resubmit' && <ResubmitWorkflowPanel workflow={workflow} />}
                     {!parsedSidePanel}
                 </SlidingPanel>
             )}
diff --git a/ui/src/models/index.ts b/ui/src/models/index.ts
index ac16d9625c31..aede5b223aa1 100644
--- a/ui/src/models/index.ts
+++ b/ui/src/models/index.ts
@@ -5,6 +5,7 @@ export * from './workflows';
 export * from './workflow-templates';
 export * from './cron-workflows';
 export * from './cluster-workflow-templates';
+export * from './resubmit-opts';
 export {EventSource} from './event-source';
 export {Sensor, SensorList} from './sensor';
 export {models as kubernetes} from 'argo-ui';