feat(ui): Add parameter value enum support to the UI. Fixes #4192 (#4365

) Signed-off-by: basanthjenuhb <basanthjenuhb@gmail.com>
argoproj · Dec 7, 2020 · 5614700 · 5614700
1 parent 7d0f113
commit 5614700
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 18 deletions.
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -57,24 +57,11 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
                         <label>Parameters</label>
                         {this.state.parameters.length > 0 ? (
                             <>
-                                {this.state.parameters.map(parameter => (
-                                    <p key={parameter.name}>
-                                        <label>
-                                            {parameter.name}
-                                            <input
-                                                className='argo-field'
-                                                value={parameter.value}
-                                                onChange={event => {
-                                                    this.setState({
-                                                        parameters: this.state.parameters.map(p => ({
-                                                            name: p.name,
-                                                            value: p.name === parameter.name ? event.target.value : p.value
-                                                        }))
-                                                    });
-                                                }}
-                                            />
-                                        </label>
-                                    </p>
+                                {this.state.parameters.map((parameter, index) => (
+                                    <div key={parameter.name + '_' + index}>
+                                        <label>{parameter.name}</label>
+                                        {(parameter.enum && this.displaySelectFieldForEnumValues(parameter)) || this.displayInputFieldForSingleValue(parameter)}
+                                    </div>
                                 ))}
                             </>
                         ) : (
@@ -98,6 +85,46 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
         );
     }
 
+    private displaySelectFieldForEnumValues(parameter: Parameter) {
+        return (
+            <Select
+                key={parameter.name}
+                value={parameter.value}
+                options={parameter.enum.map(value => ({
+                    value,
+                    title: value
+                }))}
+                onChange={event => {
+                    this.setState({
+                        parameters: this.state.parameters.map(p => ({
+                            name: p.name,
+                            value: p.name === parameter.name ? event.value : p.value,
+                            enum: p.enum
+                        }))
+                    });
+                }}
+            />
+        );
+    }
+
+    private displayInputFieldForSingleValue(parameter: Parameter) {
+        return (
+            <input
+                className='argo-field'
+                value={parameter.value}
+                onChange={event => {
+                    this.setState({
+                        parameters: this.state.parameters.map(p => ({
+                            name: p.name,
+                            value: p.name === parameter.name ? event.target.value : p.value,
+                            enum: p.enum
+                        }))
+                    });
+                }}
+            />
+        );
+    }
+
     private submit() {
         services.workflows
             .submit(this.props.kind, this.props.name, this.props.namespace, {

diff --git a/ui/src/models/workflows.ts b/ui/src/models/workflows.ts
@@ -100,6 +100,10 @@ export interface Parameter {
      * ValueFrom is the source for the output parameter's value
      */
     valueFrom?: ValueFrom;
+    /**
+     * Enum holds a list of string values to choose from, for the actual value of the parameter
+     */
+    enum?: Array<string>;
 }
 
 /**