fix: Allow setting workflow input parameters in UI. Fixes #4234 (#5319)

* fix: Allow setting workflow input parameters in UI. Fixes #4234 Signed-off-by: Kenny Trytek <[email protected]> * fix: Allow setting workflow input parameters in UI. Fixes #4234 - Allow workflow input parameters as well as entrypoint parameters. Signed-off-by: Kenny Trytek <[email protected]>
argoproj · Jun 14, 2021 · 868868e · 868868e
1 parent f3fe565
commit 868868e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 17 deletions.
diff --git a/...plates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx b/...plates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
@@ -129,8 +129,8 @@ 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 || []}
+                        workflowParameters={template.spec.arguments.parameters || []}
                     />
                 </SlidingPanel>
             )}

diff --git a/...app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx b/...app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
@@ -127,8 +127,8 @@ 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 || []}
+                            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
@@ -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,25 +12,40 @@ interface Props {
     namespace: string;
     name: string;
     entrypoint: string;
-    entrypoints: string[];
-    parameters: Parameter[];
+    templates: Template[];
+    workflowParameters: Parameter[];
 }
 
 interface State {
     entrypoint: string;
+    entrypoints: string[];
     parameters: Parameter[];
+    selectedTemplate: Template;
+    templates: Template[];
     labels: string[];
     error?: Error;
 }
 
+const workflowEntrypoint = '<default>';
+
 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 defaultTemplate: Template = {
+            name: workflowEntrypoint,
+            inputs: {
+                parameters: this.props.workflowParameters
+            }
+        };
+        const state = {
+            entrypoint: workflowEntrypoint,
+            entrypoints: this.props.templates.map(t => t.name),
+            selectedTemplate: defaultTemplate,
+            parameters: this.props.workflowParameters || [],
+            templates: [defaultTemplate].concat(this.props.templates),
             labels: ['submit-from-ui=true']
         };
+        this.state = state;
     }
 
     public render() {
@@ -46,11 +61,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 +107,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
@@ -128,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
@@ -90,8 +90,8 @@ 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 || []}
+                        workflowParameters={workflowTemplate.spec.arguments.parameters || []}
                     />
                     <a onClick={() => setStage('full-editor')}>
                         Edit using full workflow options <i className='fa fa-caret-right' />