From 2f1d9651efb612e1fa3f5e2149f2be7b5ef16618 Mon Sep 17 00:00:00 2001
From: Kenny Trytek <kenneth.g.trytek@gmail.com>
Date: Sat, 6 Mar 2021 22:30:35 -0600
Subject: [PATCH 1/2] fix: Allow setting workflow input parameters in UI. Fixes
 #4234

Signed-off-by: Kenny Trytek <kenneth.g.trytek@gmail.com>
---
 .../cluster-workflow-template-details.tsx     |  3 +-
 .../workflow-template-details.tsx             |  3 +-
 .../components/submit-workflow-panel.tsx      | 42 ++++++++++++++-----
 .../workflows/components/workflow-creator.tsx |  3 +-
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx b/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
index b1cb30e6008a..213847f2ffc8 100644
--- a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
+++ b/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
@@ -129,8 +129,7 @@ export const ClusterWorkflowTemplateDetails = ({history, location, match}: Route
                         namespace={namespace}
                         name={template.metadata.name}
                         entrypoint={template.spec.entrypoint}
-                        entrypoints={(template.spec.templates || []).map(t => t.name)}
-                        parameters={template.spec.arguments.parameters || []}
+                        templates={template.spec.templates || []}
                     />
                 </SlidingPanel>
             )}
diff --git a/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx b/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
index 9845f7b18655..e99f982f4526 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
@@ -127,8 +127,7 @@ export const WorkflowTemplateDetails = ({history, location, match}: RouteCompone
                             namespace={namespace}
                             name={name}
                             entrypoint={template.spec.entrypoint}
-                            entrypoints={(template.spec.templates || []).map(t => t.name)}
-                            parameters={template.spec.arguments.parameters || []}
+                            templates={template.spec.templates || []}
                         />
                     )}
                     {sidePanel === 'share' && <WidgetGallery namespace={namespace} label={'workflows.argoproj.io/workflow-template=' + name} />}
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 61f3201ae2c2..a443fbddaa14 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Parameter, Workflow} from '../../../models';
+import {Parameter, Template, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {services} from '../../shared/services';
@@ -12,13 +12,15 @@ interface Props {
     namespace: string;
     name: string;
     entrypoint: string;
-    entrypoints: string[];
-    parameters: Parameter[];
+    templates: Template[];
 }
 
 interface State {
     entrypoint: string;
+    entrypoints: string[];
     parameters: Parameter[];
+    selectedTemplate: Template;
+    templates: Template[];
     labels: string[];
     error?: Error;
 }
@@ -26,11 +28,15 @@ interface State {
 export class SubmitWorkflowPanel extends React.Component<Props, State> {
     constructor(props: any) {
         super(props);
-        this.state = {
-            entrypoint: this.props.entrypoint || (this.props.entrypoints.length > 0 && this.props.entrypoints[0]),
-            parameters: this.props.parameters || [],
+        const state = {
+            entrypoint: this.props.entrypoint || (this.props.templates.length > 0 && this.props.templates[0].name),
+            entrypoints: this.props.templates.map(t => t.name),
+            selectedTemplate: this.props.templates.length > 0 && this.props.templates[0],
+            parameters: (this.props.templates.length > 0 && this.props.templates[0].inputs.parameters) || [],
+            templates: this.props.templates,
             labels: ['submit-from-ui=true']
         };
+        this.state = state;
     }
 
     public render() {
@@ -46,11 +52,18 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
                         <label>Entrypoint</label>
                         <Select
                             value={this.state.entrypoint}
-                            options={this.props.entrypoints.map((value, index) => ({
-                                value,
-                                title: value
+                            options={this.state.templates.map(t => ({
+                                value: t.name,
+                                title: t.name
                             }))}
-                            onChange={selected => this.setState({entrypoint: selected.value})}
+                            onChange={selected => {
+                                const selectedTemplate = this.getSelectedTemplate(selected.value);
+                                this.setState({
+                                    entrypoint: selected.value,
+                                    selectedTemplate,
+                                    parameters: (selectedTemplate && selectedTemplate.inputs.parameters) || []
+                                });
+                            }}
                         />
                     </div>
                     <div key='parameters' style={{marginBottom: 25}}>
@@ -85,6 +98,15 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
         );
     }
 
+    private getSelectedTemplate(entrypoint: string): Template {
+        for (const t of this.state.templates) {
+            if (t.name === entrypoint) {
+                return t;
+            }
+        }
+        return null;
+    }
+
     private displaySelectFieldForEnumValues(parameter: Parameter) {
         return (
             <Select
diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
index 300cd8f73bc2..7d3e29a8832b 100644
--- a/ui/src/app/workflows/components/workflow-creator.tsx
+++ b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -90,8 +90,7 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
                         namespace={workflowTemplate.metadata.namespace}
                         name={workflowTemplate.metadata.name}
                         entrypoint={workflowTemplate.spec.entrypoint}
-                        entrypoints={(workflowTemplate.spec.templates || []).map(t => t.name)}
-                        parameters={workflowTemplate.spec.arguments.parameters || []}
+                        templates={workflowTemplate.spec.templates || []}
                     />
                     <a onClick={() => setStage('full-editor')}>
                         Edit using full workflow options <i className='fa fa-caret-right' />

From e1e45ab1639038b97d069b5c95a4410453af1113 Mon Sep 17 00:00:00 2001
From: Kenny Trytek <kenneth.g.trytek@gmail.com>
Date: Sun, 13 Jun 2021 22:03:06 -0500
Subject: [PATCH 2/2] fix: Allow setting workflow input parameters in UI. Fixes
 #4234

 - Allow workflow input parameters as well as entrypoint parameters.

Signed-off-by: Kenny Trytek <kenneth.g.trytek@gmail.com>
---
 .../cluster-workflow-template-details.tsx     |  1 +
 .../workflow-template-details.tsx             |  1 +
 .../components/submit-workflow-panel.tsx      | 19 ++++++++++++++-----
 .../workflows/components/workflow-creator.tsx |  1 +
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx b/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
index 213847f2ffc8..773c78205580 100644
--- a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
+++ b/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
@@ -130,6 +130,7 @@ export const ClusterWorkflowTemplateDetails = ({history, location, match}: Route
                         name={template.metadata.name}
                         entrypoint={template.spec.entrypoint}
                         templates={template.spec.templates || []}
+                        workflowParameters={template.spec.arguments.parameters || []}
                     />
                 </SlidingPanel>
             )}
diff --git a/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx b/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
index e99f982f4526..2cf0b3b81129 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
@@ -128,6 +128,7 @@ export const WorkflowTemplateDetails = ({history, location, match}: RouteCompone
                             name={name}
                             entrypoint={template.spec.entrypoint}
                             templates={template.spec.templates || []}
+                            workflowParameters={template.spec.arguments.parameters || []}
                         />
                     )}
                     {sidePanel === 'share' && <WidgetGallery namespace={namespace} label={'workflows.argoproj.io/workflow-template=' + name} />}
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index a443fbddaa14..0be9c2dfbbe6 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -13,6 +13,7 @@ interface Props {
     name: string;
     entrypoint: string;
     templates: Template[];
+    workflowParameters: Parameter[];
 }
 
 interface State {
@@ -25,15 +26,23 @@ interface State {
     error?: Error;
 }
 
+const workflowEntrypoint = '<default>';
+
 export class SubmitWorkflowPanel extends React.Component<Props, State> {
     constructor(props: any) {
         super(props);
+        const defaultTemplate: Template = {
+            name: workflowEntrypoint,
+            inputs: {
+                parameters: this.props.workflowParameters
+            }
+        };
         const state = {
-            entrypoint: this.props.entrypoint || (this.props.templates.length > 0 && this.props.templates[0].name),
+            entrypoint: workflowEntrypoint,
             entrypoints: this.props.templates.map(t => t.name),
-            selectedTemplate: this.props.templates.length > 0 && this.props.templates[0],
-            parameters: (this.props.templates.length > 0 && this.props.templates[0].inputs.parameters) || [],
-            templates: this.props.templates,
+            selectedTemplate: defaultTemplate,
+            parameters: this.props.workflowParameters || [],
+            templates: [defaultTemplate].concat(this.props.templates),
             labels: ['submit-from-ui=true']
         };
         this.state = state;
@@ -150,7 +159,7 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
     private submit() {
         services.workflows
             .submit(this.props.kind, this.props.name, this.props.namespace, {
-                entryPoint: this.state.entrypoint,
+                entryPoint: this.state.entrypoint === workflowEntrypoint ? null : this.state.entrypoint,
                 parameters: this.state.parameters.map(p => p.name + '=' + p.value),
                 labels: this.state.labels.join(',')
             })
diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
index 7d3e29a8832b..fda7a7a8995d 100644
--- a/ui/src/app/workflows/components/workflow-creator.tsx
+++ b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -91,6 +91,7 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
                         name={workflowTemplate.metadata.name}
                         entrypoint={workflowTemplate.spec.entrypoint}
                         templates={workflowTemplate.spec.templates || []}
+                        workflowParameters={workflowTemplate.spec.arguments.parameters || []}
                     />
                     <a onClick={() => setStage('full-editor')}>
                         Edit using full workflow options <i className='fa fa-caret-right' />