From 92a30f2b60d7fc1ef84cba3eb57630266ad3910c Mon Sep 17 00:00:00 2001
From: Yusuke Shinoda <51753414+tetora1053@users.noreply.github.com>
Date: Sat, 16 Sep 2023 03:42:13 +0900
Subject: [PATCH] refactor(ui): workflow panel components from class to
 functional (#11803)

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 .../components/resubmit-workflow-panel.tsx    | 155 ++++++--------
 .../components/retry-workflow-panel.tsx       | 172 +++++++---------
 .../components/submit-workflow-panel.tsx      | 193 ++++++++----------
 3 files changed, 228 insertions(+), 292 deletions(-)

diff --git a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
index e6604f467bb6..a23476de06b1 100644
--- a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
@@ -1,5 +1,5 @@
 import {Checkbox} from 'argo-ui';
-import * as React from 'react';
+import React, {useState} from 'react';
 import {Parameter, ResubmitOpts, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -12,103 +12,82 @@ interface Props {
     isArchived: boolean;
 }
 
-interface State {
-    overrideParameters: boolean;
-    workflowParameters: Parameter[];
-    memoized: boolean;
-    error?: Error;
-    isSubmitting: boolean;
-}
+export function ResubmitWorkflowPanel(props: Props) {
+    const [overrideParameters, setOverrideParameters] = useState(false);
+    const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflow.spec.arguments.parameters || [])));
+    const [memoized, setMemoized] = useState(false);
+    const [error, setError] = useState<Error>();
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
-export class ResubmitWorkflowPanel extends React.Component<Props, State> {
-    constructor(props: any) {
-        super(props);
-        const state: State = {
-            workflowParameters: JSON.parse(JSON.stringify(this.props.workflow.spec.arguments.parameters || [])),
-            memoized: false,
-            isSubmitting: false,
-            overrideParameters: false
+    async function submit() {
+        setIsSubmitting(true);
+        const parameters: ResubmitOpts['parameters'] = overrideParameters
+            ? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
+            : [];
+        const opts: ResubmitOpts = {
+            parameters,
+            memoized
         };
-        this.state = state;
+
+        try {
+            const submitted = props.isArchived
+                ? await services.workflows.resubmitArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
+                : await services.workflows.resubmit(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
+            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+        } catch (err) {
+            setError(err);
+            setIsSubmitting(false);
+        }
     }
 
-    public render() {
-        return (
-            <>
-                <h4>Resubmit Workflow</h4>
-                <h5>
-                    {this.props.workflow.metadata.namespace}/{this.props.workflow.metadata.name}
-                </h5>
-                {this.state.error && <ErrorNotice error={this.state.error} />}
-                <div className='white-box'>
-                    <div key='override-parameters' style={{marginBottom: 25}}>
-                        <label>Override Parameters</label>
-                        <div className='columns small-9'>
-                            <Checkbox checked={this.state.overrideParameters} onChange={overrideParameters => this.setState({overrideParameters})} />
-                        </div>
+    return (
+        <>
+            <h4>Resubmit Workflow</h4>
+            <h5>
+                {props.workflow.metadata.namespace}/{props.workflow.metadata.name}
+            </h5>
+            {error && <ErrorNotice error={error} />}
+            <div className='white-box'>
+                <div key='override-parameters' style={{marginBottom: 25}}>
+                    <label>Override Parameters</label>
+                    <div className='columns small-9'>
+                        <Checkbox checked={overrideParameters} onChange={setOverrideParameters} />
                     </div>
+                </div>
 
-                    {this.state.overrideParameters && (
-                        <div key='parameters' style={{marginBottom: 25}}>
-                            <label>Parameters</label>
-                            {this.state.workflowParameters.length > 0 && (
-                                <ParametersInput parameters={this.state.workflowParameters} onChange={workflowParameters => this.setState({workflowParameters})} />
-                            )}
-                            {this.state.workflowParameters.length === 0 ? (
-                                <>
-                                    <br />
-                                    <label>No parameters</label>
-                                </>
-                            ) : (
-                                <></>
-                            )}
-                        </div>
-                    )}
-
-                    <div key='memoized' style={{marginBottom: 25}}>
-                        <label>Memoized</label>
-                        <div className='columns small-9'>
-                            <Checkbox checked={this.state.memoized} onChange={memoized => this.setState({memoized})} />
-                        </div>
+                {overrideParameters && (
+                    <div key='parameters' style={{marginBottom: 25}}>
+                        <label>Parameters</label>
+                        {workflowParameters.length > 0 && <ParametersInput parameters={workflowParameters} onChange={setWorkflowParameters} />}
+                        {workflowParameters.length === 0 && (
+                            <>
+                                <br />
+                                <label>No parameters</label>
+                            </>
+                        )}
                     </div>
+                )}
 
-                    {this.state.overrideParameters && this.state.memoized && (
-                        <div key='warning-override-with-memoized'>
-                            <i className='fa fa-exclamation-triangle' style={{color: '#f4c030'}} />
-                            Overriding parameters on memoized submitted workflows may have unexpected results.
-                        </div>
-                    )}
-
-                    <div key='resubmit'>
-                        <button onClick={() => this.submit()} className='argo-button argo-button--base' disabled={this.state.isSubmitting}>
-                            <i className='fa fa-plus' /> {this.state.isSubmitting ? 'Loading...' : 'Resubmit'}
-                        </button>
+                <div key='memoized' style={{marginBottom: 25}}>
+                    <label>Memoized</label>
+                    <div className='columns small-9'>
+                        <Checkbox checked={memoized} onChange={setMemoized} />
                     </div>
                 </div>
-            </>
-        );
-    }
 
-    private submit() {
-        this.setState({isSubmitting: true});
-        const parameters: ResubmitOpts['parameters'] = this.state.overrideParameters
-            ? [...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
-            : [];
-        const opts: ResubmitOpts = {
-            parameters,
-            memoized: this.state.memoized
-        };
+                {overrideParameters && memoized && (
+                    <div key='warning-override-with-memoized'>
+                        <i className='fa fa-exclamation-triangle' style={{color: '#f4c030'}} />
+                        Overriding parameters on memoized submitted workflows may have unexpected results.
+                    </div>
+                )}
 
-        if (!this.props.isArchived) {
-            services.workflows
-                .resubmit(this.props.workflow.metadata.name, this.props.workflow.metadata.namespace, opts)
-                .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
-                .catch(error => this.setState({error, isSubmitting: false}));
-        } else {
-            services.workflows
-                .resubmitArchived(this.props.workflow.metadata.uid, this.props.workflow.metadata.namespace, opts)
-                .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
-                .catch(error => this.setState({error, isSubmitting: false}));
-        }
-    }
+                <div key='resubmit'>
+                    <button onClick={submit} className='argo-button argo-button--base' disabled={isSubmitting}>
+                        <i className='fa fa-plus' /> {isSubmitting ? 'Loading...' : 'Resubmit'}
+                    </button>
+                </div>
+            </div>
+        </>
+    );
 }
diff --git a/ui/src/app/workflows/components/retry-workflow-panel.tsx b/ui/src/app/workflows/components/retry-workflow-panel.tsx
index 678088075a74..fe71c59bf3bc 100644
--- a/ui/src/app/workflows/components/retry-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/retry-workflow-panel.tsx
@@ -1,5 +1,5 @@
 import {Checkbox} from 'argo-ui';
-import * as React from 'react';
+import React, {useState} from 'react';
 import {Parameter, RetryOpts, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -12,112 +12,94 @@ interface Props {
     isArchived: boolean;
 }
 
-interface State {
-    overrideParameters: boolean;
-    restartSuccessful: boolean;
-    workflowParameters: Parameter[];
-    nodeFieldSelector: string;
-    error?: Error;
-    isSubmitting: boolean;
-}
+export function RetryWorkflowPanel(props: Props) {
+    const [overrideParameters, setOverrideParameters] = useState(false);
+    const [restartSuccessful, setRestartSuccessful] = useState(false);
+    const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflow.spec.arguments.parameters || [])));
+    const [nodeFieldSelector, setNodeFieldSelector] = useState('');
+    const [error, setError] = useState<Error>();
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
-export class RetryWorkflowPanel extends React.Component<Props, State> {
-    constructor(props: any) {
-        super(props);
-        const state: State = {
-            workflowParameters: JSON.parse(JSON.stringify(this.props.workflow.spec.arguments.parameters || [])),
-            isSubmitting: false,
-            overrideParameters: false,
-            nodeFieldSelector: '',
-            restartSuccessful: false
+    async function submit() {
+        setIsSubmitting(true);
+        const parameters: RetryOpts['parameters'] = overrideParameters
+            ? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
+            : [];
+        const opts: RetryOpts = {
+            parameters,
+            restartSuccessful,
+            nodeFieldSelector
         };
-        this.state = state;
+
+        try {
+            const submitted = props.isArchived
+                ? await services.workflows.retryArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
+                : await services.workflows.retry(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
+            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+        } catch (err) {
+            setError(err);
+            setIsSubmitting(false);
+        }
     }
 
-    public render() {
-        return (
-            <>
-                <h4>Retry Workflow</h4>
-                <h5>
-                    {this.props.workflow.metadata.namespace}/{this.props.workflow.metadata.name}
-                </h5>
+    return (
+        <>
+            <h4>Retry Workflow</h4>
+            <h5>
+                {props.workflow.metadata.namespace}/{props.workflow.metadata.name}
+            </h5>
 
-                {this.state.error && <ErrorNotice error={this.state.error} />}
-                <div className='white-box'>
-                    <div key='override-parameters' style={{marginBottom: 25}}>
-                        <label>Override Parameters</label>
-                        <div className='columns small-9'>
-                            <Checkbox checked={this.state.overrideParameters} onChange={overrideParameters => this.setState({overrideParameters})} />
-                        </div>
+            {error && <ErrorNotice error={error} />}
+            <div className='white-box'>
+                {/* Override Parameters */}
+                <div key='override-parameters' style={{marginBottom: 25}}>
+                    <label>Override Parameters</label>
+                    <div className='columns small-9'>
+                        <Checkbox checked={overrideParameters} onChange={setOverrideParameters} />
                     </div>
+                </div>
 
-                    {this.state.overrideParameters && (
-                        <div key='parameters' style={{marginBottom: 25}}>
-                            <label>Parameters</label>
-                            {this.state.workflowParameters.length > 0 && (
-                                <ParametersInput parameters={this.state.workflowParameters} onChange={workflowParameters => this.setState({workflowParameters})} />
-                            )}
-                            {this.state.workflowParameters.length === 0 ? (
-                                <>
-                                    <br />
-                                    <label>No parameters</label>
-                                </>
-                            ) : (
-                                <></>
-                            )}
-                        </div>
-                    )}
+                {overrideParameters && (
+                    <div key='parameters' style={{marginBottom: 25}}>
+                        <label>Parameters</label>
+                        {workflowParameters.length > 0 ? (
+                            <ParametersInput parameters={workflowParameters} onChange={setWorkflowParameters} />
+                        ) : (
+                            <>
+                                <br />
+                                <label>No parameters</label>
+                            </>
+                        )}
+                    </div>
+                )}
 
-                    <div key='restart-successful' style={{marginBottom: 25}}>
-                        <label>Restart Successful</label>
-                        <div className='columns small-9'>
-                            <Checkbox checked={this.state.restartSuccessful} onChange={restartSuccessful => this.setState({restartSuccessful})} />
-                        </div>
+                {/* Restart Successful */}
+                <div key='restart-successful' style={{marginBottom: 25}}>
+                    <label>Restart Successful</label>
+                    <div className='columns small-9'>
+                        <Checkbox checked={restartSuccessful} onChange={setRestartSuccessful} />
                     </div>
+                </div>
 
-                    {this.state.restartSuccessful && (
-                        <div key='node-field-selector' style={{marginBottom: 25}}>
-                            <label>
-                                Node Field Selector to restart nodes. <a href='https://argoproj.github.io/argo-workflows/node-field-selector/'>See document</a>.
-                            </label>
+                {restartSuccessful && (
+                    <div key='node-field-selector' style={{marginBottom: 25}}>
+                        <label>
+                            Node Field Selector to restart nodes. <a href='https://argoproj.github.io/argo-workflows/node-field-selector/'>See document</a>.
+                        </label>
 
-                            <div className='columns small-9'>
-                                <textarea className='argo-field' value={this.state.nodeFieldSelector} onChange={e => this.setState({nodeFieldSelector: e.target.value})} />
-                            </div>
+                        <div className='columns small-9'>
+                            <textarea className='argo-field' value={nodeFieldSelector} onChange={e => setNodeFieldSelector(e.target.value)} />
                         </div>
-                    )}
-
-                    <div key='retry'>
-                        <button onClick={() => this.submit()} className='argo-button argo-button--base' disabled={this.state.isSubmitting}>
-                            <i className='fa fa-plus' /> {this.state.isSubmitting ? 'Loading...' : 'Retry'}
-                        </button>
                     </div>
-                </div>
-            </>
-        );
-    }
+                )}
 
-    private submit() {
-        this.setState({isSubmitting: true});
-        const parameters: RetryOpts['parameters'] = this.state.overrideParameters
-            ? [...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
-            : [];
-        const opts: RetryOpts = {
-            parameters,
-            restartSuccessful: this.state.restartSuccessful,
-            nodeFieldSelector: this.state.nodeFieldSelector
-        };
-
-        if (!this.props.isArchived) {
-            services.workflows
-                .retry(this.props.workflow.metadata.name, this.props.workflow.metadata.namespace, opts)
-                .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
-                .catch(error => this.setState({error, isSubmitting: false}));
-        } else {
-            services.workflows
-                .retryArchived(this.props.workflow.metadata.uid, this.props.workflow.metadata.namespace, opts)
-                .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
-                .catch(error => this.setState({error, isSubmitting: false}));
-        }
-    }
+                {/* Retry button */}
+                <div key='retry'>
+                    <button onClick={submit} className='argo-button argo-button--base' disabled={isSubmitting}>
+                        <i className='fa fa-plus' /> {isSubmitting ? 'Loading...' : 'Retry'}
+                    </button>
+                </div>
+            </div>
+        </>
+    );
 }
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index cda87d36b7c7..90fd2bd31df8 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,6 +1,6 @@
 import {Select} from 'argo-ui';
-import * as React from 'react';
-import {Parameter, Template, Workflow} from '../../../models';
+import React, {useMemo, useState} from 'react';
+import {Parameter, Template} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {ParametersInput} from '../../shared/components/parameters-input/parameters-input';
@@ -17,119 +17,94 @@ interface Props {
     workflowParameters: Parameter[];
 }
 
-interface State {
-    entrypoint: string;
-    entrypoints: string[];
-    parameters: Parameter[];
-    workflowParameters: Parameter[];
-    selectedTemplate: Template;
-    templates: Template[];
-    labels: string[];
-    error?: Error;
-    isSubmitting: boolean;
-}
-
 const workflowEntrypoint = '<default>';
-
-export class SubmitWorkflowPanel extends React.Component<Props, State> {
-    constructor(props: any) {
-        super(props);
-        const defaultTemplate: Template = {
-            name: workflowEntrypoint,
-            inputs: {
-                parameters: []
-            }
-        };
-        const state: State = {
-            entrypoint: workflowEntrypoint,
-            entrypoints: this.props.templates.map(t => t.name),
-            selectedTemplate: defaultTemplate,
-            parameters: [] as Parameter[],
-            workflowParameters: JSON.parse(JSON.stringify(this.props.workflowParameters)),
-            templates: [defaultTemplate].concat(this.props.templates),
-            labels: ['submit-from-ui=true'],
-            isSubmitting: false
-        };
-        this.state = state;
+const defaultTemplate: Template = {
+    name: workflowEntrypoint,
+    inputs: {
+        parameters: []
     }
+};
 
-    public render() {
-        return (
-            <>
-                <h4>Submit Workflow</h4>
-                <h5>
-                    {this.props.namespace}/{this.props.name}
-                </h5>
-                {this.state.error && <ErrorNotice error={this.state.error} />}
-                <div className='white-box'>
-                    <div key='entrypoint' title='Entrypoint' style={{marginBottom: 25}}>
-                        <label>Entrypoint</label>
-                        <Select
-                            value={this.state.entrypoint}
-                            options={this.state.templates.map(t => ({
-                                value: t.name,
-                                title: t.name
-                            }))}
-                            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}}>
-                        <label>Parameters</label>
-                        {this.state.workflowParameters.length > 0 && (
-                            <ParametersInput parameters={this.state.workflowParameters} onChange={workflowParameters => this.setState({workflowParameters})} />
-                        )}
-                        {this.state.parameters.length > 0 && <ParametersInput parameters={this.state.parameters} onChange={parameters => this.setState({parameters})} />}
-                        {this.state.workflowParameters.length === 0 && this.state.parameters.length === 0 ? (
-                            <>
-                                <br />
-                                <label>No parameters</label>
-                            </>
-                        ) : (
-                            <></>
-                        )}
-                    </div>
-                    <div key='labels' style={{marginBottom: 25}}>
-                        <label>Labels</label>
-                        <TagsInput tags={this.state.labels} onChange={labels => this.setState({labels})} />
-                    </div>
-                    <div key='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>
-            </>
-        );
-    }
+export function SubmitWorkflowPanel(props: Props) {
+    const [entrypoint, setEntrypoint] = useState(workflowEntrypoint);
+    const [parameters, setParameters] = useState<Parameter[]>([]);
+    const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflowParameters)));
+    const [labels, setLabels] = useState(['submit-from-ui=true']);
+    const [error, setError] = useState<Error>();
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
-    private getSelectedTemplate(entrypoint: string): Template {
-        for (const t of this.state.templates) {
-            if (t.name === entrypoint) {
-                return t;
-            }
-        }
-        return null;
-    }
+    const templates = useMemo(() => {
+        return [defaultTemplate].concat(props.templates);
+    }, [props.templates]);
+
+    const templateOptions = useMemo(() => {
+        return templates.map(t => ({
+            value: t.name,
+            title: t.name
+        }));
+    }, [templates]);
 
-    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,
+    async function submit() {
+        setIsSubmitting(true);
+        try {
+            const submitted = await services.workflows.submit(props.kind, props.name, props.namespace, {
+                entryPoint: entrypoint === workflowEntrypoint ? null : entrypoint,
                 parameters: [
-                    ...this.state.workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p)),
-                    ...this.state.parameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))
+                    ...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p)),
+                    ...parameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(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, isSubmitting: false}));
+                labels: labels.join(',')
+            });
+            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+        } catch (err) {
+            setError(err);
+            setIsSubmitting(false);
+        }
     }
+
+    return (
+        <>
+            <h4>Submit Workflow</h4>
+            <h5>
+                {props.namespace}/{props.name}
+            </h5>
+            {error && <ErrorNotice error={error} />}
+            <div className='white-box'>
+                <div key='entrypoint' title='Entrypoint' style={{marginBottom: 25}}>
+                    <label>Entrypoint</label>
+                    <Select
+                        value={entrypoint}
+                        options={templateOptions}
+                        onChange={selected => {
+                            const selectedTemp = templates.find(t => t.name === selected.value);
+                            setEntrypoint(selected.value);
+                            setParameters(selectedTemp?.inputs?.parameters || []);
+                        }}
+                    />
+                </div>
+                <div key='parameters' style={{marginBottom: 25}}>
+                    <label>Parameters</label>
+                    {workflowParameters.length > 0 && <ParametersInput parameters={workflowParameters} onChange={setWorkflowParameters} />}
+                    {parameters.length > 0 && <ParametersInput parameters={parameters} onChange={setParameters} />}
+                    {workflowParameters.length === 0 && parameters.length === 0 ? (
+                        <>
+                            <br />
+                            <label>No parameters</label>
+                        </>
+                    ) : (
+                        <></>
+                    )}
+                </div>
+                <div key='labels' style={{marginBottom: 25}}>
+                    <label>Labels</label>
+                    <TagsInput tags={labels} onChange={setLabels} />
+                </div>
+                <div key='submit'>
+                    <button onClick={submit} className='argo-button argo-button--base' disabled={isSubmitting}>
+                        <i className='fa fa-plus' /> {isSubmitting ? 'Loading...' : 'Submit'}
+                    </button>
+                </div>
+            </div>
+        </>
+    );
 }