Skip to content

Commit

Permalink
feat: Always Show Workflow Parameters (argoproj#7809)
Browse files Browse the repository at this point in the history 
Signed-off-by: Kenny Trytek <[email protected]>
  • Loading branch information
@kennytrytek
kennytrytek authored Apr 5, 2022
1 parent 8c6b9fa commit af80774
Showing 1 changed file with 52 additions and 38 deletions.
90 changes: 52 additions & 38 deletions ui/src/app/workflows/components/submit-workflow-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import {Select, Tooltip} from 'argo-ui';
import * as React from 'react';
import {Parameter, Template, Workflow} from '../../../models';
import {uiUrl} from '../../shared/base';
import {ErrorNotice} from '../../shared/components/error-notice';
import {services} from '../../shared/services';

import {Select, Tooltip} from 'argo-ui';
import {TagsInput} from '../../shared/components/tags-input/tags-input';
import {services} from '../../shared/services';

interface Props {
kind: string;
Expand All @@ -20,6 +19,7 @@ interface State {
entrypoint: string;
entrypoints: string[];
parameters: Parameter[];
workflowParameters: Parameter[];
selectedTemplate: Template;
templates: Template[];
labels: string[];
Expand All @@ -28,21 +28,23 @@ interface State {
}

const workflowEntrypoint = '<default>';
type ParamSelector = 'parameters' | 'workflowParameters';

export class SubmitWorkflowPanel extends React.Component<Props, State> {
constructor(props: any) {
super(props);
const defaultTemplate: Template = {
name: workflowEntrypoint,
inputs: {
parameters: this.props.workflowParameters
parameters: []
}
};
const state = {
const state: State = {
entrypoint: workflowEntrypoint,
entrypoints: this.props.templates.map(t => t.name),
selectedTemplate: defaultTemplate,
parameters: this.props.workflowParameters || [],
parameters: [] as Parameter[],
workflowParameters: JSON.parse(JSON.stringify(this.props.workflowParameters)),
templates: [defaultTemplate].concat(this.props.templates),
labels: ['submit-from-ui=true'],
isSubmitting: false
Expand Down Expand Up @@ -79,25 +81,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} style={{marginBottom: 14}}>
<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}}>
Expand All @@ -123,7 +115,7 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
return null;
}

private displaySelectFieldForEnumValues(parameter: Parameter) {
private displaySelectFieldForEnumValues(parameter: Parameter, parameterStateName: ParamSelector) {
return (
<Select
key={parameter.name}
Expand All @@ -133,36 +125,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 update = {} as State;
update[parameterStateName] = this.state[parameterStateName].map(p => ({
name: p.name,
value: p.name === parameter.name ? event.value : this.getValue(p),
enum: p.enum
}));
this.setState(update);
}}
/>
);
}

private displayInputFieldForSingleValue(parameter: Parameter) {
private displayInputFieldForSingleValue(parameter: Parameter, parameterStateName: ParamSelector) {
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 update = {} as State;
update[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(update);
}}
/>
);
}

private renderParameters(parameters: Parameter[], parameterStateName: ParamSelector) {
return (
<>
{parameters.map((parameter, index) => (
<div key={parameter.name + '_' + index} style={{marginBottom: 14}}>
<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;
Expand All @@ -176,7 +187,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}`)))
Expand Down

0 comments on commit af80774

Please sign in to comment.