feat: submit workflow make button disable after clicking (#7340)

Signed-off-by: krrrr38 <[email protected]>

ui/src/app/workflows/components/submit-workflow-panel.tsx

@@ -24,6 +24,7 @@ interface State {
  templates: Template[];
  labels: string[];
  error?: Error;
+ isSubmitting: boolean;
 }
 
 const workflowEntrypoint = '<default>';
@@ -43,7 +44,8 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
  selectedTemplate: defaultTemplate,
  parameters: this.props.workflowParameters || [],
  templates: [defaultTemplate].concat(this.props.templates),
- labels: ['submit-from-ui=true']
+ labels: ['submit-from-ui=true'],
+ isSubmitting: false
  };
  this.state = state;
  }
@@ -98,8 +100,8 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
  <TagsInput tags={this.state.labels} onChange={labels => this.setState({labels})} />
  </div>
  <div key='submit'>
- <button onClick={() => this.submit()} className='argo-button argo-button--base'>
- <i className='fa fa-plus' /> Submit
+ <button onClick={() => this.submit()} className='argo-button argo-button--base' disabled={this.state.isSubmitting}>
+ <i className='fa fa-plus' /> {this.state.isSubmitting ? 'Loading...' : 'Submit'}
  </button>
  </div>
  </div>
@@ -165,13 +167,14 @@ export class SubmitWorkflowPanel extends React.Component<Props, State> {
  }
 
  private submit() {
+ this.setState({isSubmitting: true});
  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)),
  labels: this.state.labels.join(',')
  })
  .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
- .catch(error => this.setState({error}));
+ .catch(error => this.setState({error, isSubmitting: false}));
  }
 }