feat: Always Show Workflow Parameters

- Fixes #7311 Signed-off-by: Kenny Trytek <kenneth.g.trytek@gmail.com>
argoproj · Feb 8, 2022 · 2799bc3 · 2799bc3
1 parent fb73d01
commit 2799bc3
Showing 1 changed file with 47 additions and 34 deletions.
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -35,14 +35,15 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
         const defaultTemplate: Template = {
             name: workflowEntrypoint,
             inputs: {
-                parameters: this.props.workflowParameters
+                parameters: []
             }
         };
         const state = {
             entrypoint: workflowEntrypoint,
             entrypoints: this.props.templates.map(t => t.name),
             selectedTemplate: defaultTemplate,
-            parameters: this.props.workflowParameters || [],
+            parameters: [],
+            workflowParameters: this.props.workflowParameters,
             templates: [defaultTemplate].concat(this.props.templates),
             labels: ['submit-from-ui=true'],
             isSubmitting: false
@@ -79,25 +80,15 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
                     </div>
                     <div key='parameters' style={{marginBottom: 25}}>
                         <label>Parameters</label>
-                        {this.state.parameters.length > 0 ? (
-                            <>
-                                {this.state.parameters.map((parameter, index) => (
-                                    <div key={parameter.name + '_' + index}>
-                                        <label>{parameter.name}</label>
-                                        {parameter.description && (
-                                            <Tooltip content={parameter.description}>
-                                                <i className='fa fa-question-circle' />
-                                            </Tooltip>
-                                        )}
-                                        {(parameter.enum && this.displaySelectFieldForEnumValues(parameter)) || this.displayInputFieldForSingleValue(parameter)}
-                                    </div>
-                                ))}
-                            </>
-                        ) : (
+                        {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 && this.state.parameters.length === 0 ? (
                             <>
                                 <br />
                                 <label>No parameters</label>
                             </>
+                        ) : (
+                            <></>
                         )}
                     </div>
                     <div key='labels' style={{marginBottom: 25}}>
@@ -123,7 +114,7 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
         return null;
     }
 
-    private displaySelectFieldForEnumValues(parameter: Parameter) {
+    private displaySelectFieldForEnumValues(parameter: Parameter, parameterStateName: string) {
         return (
             <Select
                 key={parameter.name}
@@ -133,36 +124,55 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
                     title: value
                 }))}
                 onChange={event => {
-                    this.setState({
-                        parameters: this.state.parameters.map(p => ({
-                            name: p.name,
-                            value: p.name === parameter.name ? event.value : this.getValue(p),
-                            enum: p.enum
-                        }))
-                    });
+                    const state = {};
+                    state[parameterStateName] = this.state[parameterStateName].map(p => ({
+                        name: p.name,
+                        value: p.name === parameter.name ? event.value : this.getValue(p),
+                        enum: p.enum
+                    }));
+                    this.setState(state);
                 }}
             />
         );
     }
 
-    private displayInputFieldForSingleValue(parameter: Parameter) {
+    private displayInputFieldForSingleValue(parameter: Parameter, parameterStateName: string) {
         return (
             <textarea
                 className='argo-field'
                 value={this.getValue(parameter)}
                 onChange={event => {
-                    this.setState({
-                        parameters: this.state.parameters.map(p => ({
-                            name: p.name,
-                            value: p.name === parameter.name ? event.target.value : this.getValue(p),
-                            enum: p.enum
-                        }))
-                    });
+                    const state = {};
+                    state[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(state);
                 }}
             />
         );
     }
 
+    private renderParameters(parameters: Parameter[], parameterStateName: string) {
+        return (
+            <>
+                {parameters.map((parameter, index) => (
+                    <div key={parameter.name + '_' + index}>
+                        <label>{parameter.name}</label>
+                        {parameter.description && (
+                            <Tooltip content={parameter.description}>
+                                <i className='fa fa-question-circle' />
+                            </Tooltip>
+                        )}
+                        {(parameter.enum && this.displaySelectFieldForEnumValues(parameter, parameterStateName)) ||
+                            this.displayInputFieldForSingleValue(parameter, parameterStateName)}
+                    </div>
+                ))}
+            </>
+        );
+    }
+
     private getValue(p: Parameter) {
         if (p.value === undefined) {
             return p.default;
@@ -176,7 +186,10 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
         services.workflows
             .submit(this.props.kind, this.props.name, this.props.namespace, {
                 entryPoint: this.state.entrypoint === workflowEntrypoint ? null : this.state.entrypoint,
-                parameters: this.state.parameters.filter(p => this.getValue(p) !== undefined).map(p => p.name + '=' + this.getValue(p)),
+                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))
+                ],
                 labels: this.state.labels.join(',')
             })
             .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))