From 67abb6aae4e9637bcd13db741050407795c27f9d Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Tue, 12 Sep 2023 09:10:51 +0900
Subject: [PATCH 01/10] refactor(ui): workflow panel components from class to
 functional

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 .../components/resubmit-workflow-panel.tsx    | 166 ++++++++--------
 .../components/retry-workflow-panel.tsx       | 178 ++++++++---------
 .../components/submit-workflow-panel.tsx      | 187 ++++++++----------
 3 files changed, 241 insertions(+), 290 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..3e4093678751 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,93 @@ 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
+    const 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;
-    }
 
-    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>
-                    </div>
+        const handleSuccess = (submitted: Workflow) => {
+            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+        };
 
-                    {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>
-                    )}
+        const handleError = (err: Error) => {
+            setError(err);
+            setIsSubmitting(false);
+        };
+
+        if (!props.isArchived) {
+            services.workflows
+                .resubmit(props.workflow.metadata.name, props.workflow.metadata.namespace, opts)
+                .then(handleSuccess)
+                .catch(handleError);
+        } else {
+            services.workflows
+                .resubmitArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
+                .then(handleSuccess)
+                .catch(handleError);
+        }
+    };
 
-                    <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>
+    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 && 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>
-                    )}
+                {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>
+                )}
 
-                    <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..5943c58a89c3 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,98 @@ 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<boolean>(false);
+    const [restartSuccessful, setRestartSuccessful] = useState<boolean>(false);
+    const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflow.spec.arguments.parameters || [])));
+    const [nodeFieldSelector, setNodeFieldSelector] = useState<string>('');
+    const [error, setError] = useState<Error>();
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(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
+    const 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;
-    }
 
-    public render() {
-        return (
-            <>
-                <h4>Retry Workflow</h4>
-                <h5>
-                    {this.props.workflow.metadata.namespace}/{this.props.workflow.metadata.name}
-                </h5>
+        const process = props.isArchived
+            ? services.workflows.retryArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
+            : services.workflows.retry(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
 
-                {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>
-                    </div>
+        process
+            .then((submitted: Workflow) => {
+                document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+                setIsSubmitting(false);
+            })
+            .catch(err => {
+                setError(err);
+                setIsSubmitting(false);
+            });
+    };
 
-                    {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>
-                    )}
+    return (
+        <>
+            <h4>Retry Workflow</h4>
+            <h5>
+                {props.workflow.metadata.namespace}/{props.workflow.metadata.name}
+            </h5>
 
-                    <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>
+            {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.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>
-                    )}
+                {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='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>
+                {/* 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>
-            </>
-        );
-    }
 
-    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
-        };
+                {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>
 
-        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}));
-        }
-    }
+                        <div className='columns small-9'>
+                            <textarea className='argo-field' value={nodeFieldSelector} onChange={e => setNodeFieldSelector(e.target.value)} />
+                        </div>
+                    </div>
+                )}
+
+                {/* 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..1b39094499aa 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,5 +1,5 @@
 import {Select} from 'argo-ui';
-import * as React from 'react';
+import React, {useState} from 'react';
 import {Parameter, Template, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -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;
-    }
+export function SubmitWorkflowPanel(props: Props) {
+    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>
-            </>
-        );
-    }
+    const [entrypoint, setEntrypoint] = useState<string>(workflowEntrypoint);
+    const [selectedTemplate, setSelectedTemplate] = useState<Template>(defaultTemplate);
+    const [parameters, setParameters] = useState<Parameter[]>([]);
+    const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflowParameters)));
+    const [templates] = useState<Template[]>([defaultTemplate].concat(props.templates));
+    const [labels, setLabels] = useState<string[]>(['submit-from-ui=true']);
+    const [error, setError] = useState<Error>();
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
-    private getSelectedTemplate(entrypoint: string): Template {
-        for (const t of this.state.templates) {
-            if (t.name === entrypoint) {
-                return t;
-            }
-        }
-        return null;
-    }
+    const getSelectedTemplate = (name: string): Template | null => {
+        return templates.find(t => t.name === name) || null;
+    };
 
-    private submit() {
-        this.setState({isSubmitting: true});
+    const submit = () => {
+        setIsSubmitting(true);
         services.workflows
-            .submit(this.props.kind, this.props.name, this.props.namespace, {
-                entryPoint: this.state.entrypoint === workflowEntrypoint ? null : this.state.entrypoint,
+            .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(',')
+                labels: labels.join(',')
             })
             .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
-            .catch(error => this.setState({error, isSubmitting: false}));
-    }
+            .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={templates.map(t => ({
+                            value: t.name,
+                            title: t.name
+                        }))}
+                        onChange={selected => {
+                            const selectedTemp = getSelectedTemplate(selected.value);
+                            setEntrypoint(selected.value);
+                            setSelectedTemplate(selectedTemp || defaultTemplate);
+                            setParameters((selectedTemp && 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>
+        </>
+    );
 }

From 9db7933a1e818e37b1b2063f1f9110bc71a7b149 Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Tue, 12 Sep 2023 13:04:59 +0900
Subject: [PATCH 02/10] fix: remove a state just set but not used

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 ui/src/app/workflows/components/submit-workflow-panel.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 1b39094499aa..0c6276d56e70 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -28,7 +28,6 @@ export function SubmitWorkflowPanel(props: Props) {
     };
 
     const [entrypoint, setEntrypoint] = useState<string>(workflowEntrypoint);
-    const [selectedTemplate, setSelectedTemplate] = useState<Template>(defaultTemplate);
     const [parameters, setParameters] = useState<Parameter[]>([]);
     const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflowParameters)));
     const [templates] = useState<Template[]>([defaultTemplate].concat(props.templates));
@@ -77,7 +76,6 @@ export function SubmitWorkflowPanel(props: Props) {
                         onChange={selected => {
                             const selectedTemp = getSelectedTemplate(selected.value);
                             setEntrypoint(selected.value);
-                            setSelectedTemplate(selectedTemp || defaultTemplate);
                             setParameters((selectedTemp && selectedTemp.inputs.parameters) || []);
                         }}
                     />

From 3829568e673d3107f1db0b0cd2b1e1c8accb8ed3 Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Wed, 13 Sep 2023 21:35:37 +0900
Subject: [PATCH 03/10] refactor: from anonymous function to named function

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 .../workflows/components/resubmit-workflow-panel.tsx | 12 ++++++------
 .../workflows/components/retry-workflow-panel.tsx    |  4 ++--
 .../workflows/components/submit-workflow-panel.tsx   |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
index 3e4093678751..0b949780cfbe 100644
--- a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
@@ -19,7 +19,7 @@ export function ResubmitWorkflowPanel(props: Props) {
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const submit = () => {
+    function submit() {
         setIsSubmitting(true);
         const parameters: ResubmitOpts['parameters'] = overrideParameters
             ? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
@@ -29,14 +29,14 @@ export function ResubmitWorkflowPanel(props: Props) {
             memoized
         };
 
-        const handleSuccess = (submitted: Workflow) => {
+        function handleSuccess(submitted: Workflow) {
             document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
-        };
+        }
 
-        const handleError = (err: Error) => {
+        function handleError(err: Error) {
             setError(err);
             setIsSubmitting(false);
-        };
+        }
 
         if (!props.isArchived) {
             services.workflows
@@ -49,7 +49,7 @@ export function ResubmitWorkflowPanel(props: Props) {
                 .then(handleSuccess)
                 .catch(handleError);
         }
-    };
+    }
 
     return (
         <>
diff --git a/ui/src/app/workflows/components/retry-workflow-panel.tsx b/ui/src/app/workflows/components/retry-workflow-panel.tsx
index 5943c58a89c3..e0957292fe17 100644
--- a/ui/src/app/workflows/components/retry-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/retry-workflow-panel.tsx
@@ -20,7 +20,7 @@ export function RetryWorkflowPanel(props: Props) {
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
-    const submit = () => {
+    function submit() {
         setIsSubmitting(true);
         const parameters: RetryOpts['parameters'] = overrideParameters
             ? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
@@ -44,7 +44,7 @@ export function RetryWorkflowPanel(props: Props) {
                 setError(err);
                 setIsSubmitting(false);
             });
-    };
+    }
 
     return (
         <>
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 0c6276d56e70..4367b0dfc28e 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -39,7 +39,7 @@ export function SubmitWorkflowPanel(props: Props) {
         return templates.find(t => t.name === name) || null;
     };
 
-    const submit = () => {
+    function submit() {
         setIsSubmitting(true);
         services.workflows
             .submit(props.kind, props.name, props.namespace, {
@@ -55,7 +55,7 @@ export function SubmitWorkflowPanel(props: Props) {
                 setError(err);
                 setIsSubmitting(false);
             });
-    };
+    }
 
     return (
         <>

From 6737c3b886ac957e1829de0d557f8cdd31b04e10 Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Wed, 13 Sep 2023 22:01:56 +0900
Subject: [PATCH 04/10] refactor: from anonymous function to named function

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 ui/src/app/workflows/components/submit-workflow-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 4367b0dfc28e..9aa3781035ad 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -35,9 +35,9 @@ export function SubmitWorkflowPanel(props: Props) {
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
-    const getSelectedTemplate = (name: string): Template | null => {
+    function getSelectedTemplate(name: string): Template | null {
         return templates.find(t => t.name === name) || null;
-    };
+    }
 
     function submit() {
         setIsSubmitting(true);

From 9e1fd4653962671f0963fc6d797f24679fe1b3be Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Wed, 13 Sep 2023 22:09:53 +0900
Subject: [PATCH 05/10] refactor: remove type annotations for primitives

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 ui/src/app/workflows/components/retry-workflow-panel.tsx  | 8 ++++----
 ui/src/app/workflows/components/submit-workflow-panel.tsx | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/src/app/workflows/components/retry-workflow-panel.tsx b/ui/src/app/workflows/components/retry-workflow-panel.tsx
index e0957292fe17..49d31bf68799 100644
--- a/ui/src/app/workflows/components/retry-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/retry-workflow-panel.tsx
@@ -13,12 +13,12 @@ interface Props {
 }
 
 export function RetryWorkflowPanel(props: Props) {
-    const [overrideParameters, setOverrideParameters] = useState<boolean>(false);
-    const [restartSuccessful, setRestartSuccessful] = useState<boolean>(false);
+    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<string>('');
+    const [nodeFieldSelector, setNodeFieldSelector] = useState('');
     const [error, setError] = useState<Error>();
-    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
     function submit() {
         setIsSubmitting(true);
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 9aa3781035ad..4de31b256a44 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -27,13 +27,13 @@ export function SubmitWorkflowPanel(props: Props) {
         }
     };
 
-    const [entrypoint, setEntrypoint] = useState<string>(workflowEntrypoint);
+    const [entrypoint, setEntrypoint] = useState(workflowEntrypoint);
     const [parameters, setParameters] = useState<Parameter[]>([]);
     const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflowParameters)));
     const [templates] = useState<Template[]>([defaultTemplate].concat(props.templates));
-    const [labels, setLabels] = useState<string[]>(['submit-from-ui=true']);
+    const [labels, setLabels] = useState(['submit-from-ui=true']);
     const [error, setError] = useState<Error>();
-    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
     function getSelectedTemplate(name: string): Template | null {
         return templates.find(t => t.name === name) || null;

From 48e214d872ee0267ee1867e7fa4107b803e7e544 Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Wed, 13 Sep 2023 23:20:49 +0900
Subject: [PATCH 06/10] refactor: use async/await instead of chaining promise
 callbacks

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 .../components/resubmit-workflow-panel.tsx    | 23 +++++-------------
 .../components/retry-workflow-panel.tsx       | 24 ++++++++-----------
 .../components/submit-workflow-panel.tsx      | 18 +++++++-------
 3 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
index 0b949780cfbe..a23476de06b1 100644
--- a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
@@ -19,7 +19,7 @@ export function ResubmitWorkflowPanel(props: Props) {
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    function submit() {
+    async function submit() {
         setIsSubmitting(true);
         const parameters: ResubmitOpts['parameters'] = overrideParameters
             ? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
@@ -29,26 +29,15 @@ export function ResubmitWorkflowPanel(props: Props) {
             memoized
         };
 
-        function handleSuccess(submitted: Workflow) {
+        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}`);
-        }
-
-        function handleError(err: Error) {
+        } catch (err) {
             setError(err);
             setIsSubmitting(false);
         }
-
-        if (!props.isArchived) {
-            services.workflows
-                .resubmit(props.workflow.metadata.name, props.workflow.metadata.namespace, opts)
-                .then(handleSuccess)
-                .catch(handleError);
-        } else {
-            services.workflows
-                .resubmitArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
-                .then(handleSuccess)
-                .catch(handleError);
-        }
     }
 
     return (
diff --git a/ui/src/app/workflows/components/retry-workflow-panel.tsx b/ui/src/app/workflows/components/retry-workflow-panel.tsx
index 49d31bf68799..fe71c59bf3bc 100644
--- a/ui/src/app/workflows/components/retry-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/retry-workflow-panel.tsx
@@ -20,7 +20,7 @@ export function RetryWorkflowPanel(props: Props) {
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    function submit() {
+    async function submit() {
         setIsSubmitting(true);
         const parameters: RetryOpts['parameters'] = overrideParameters
             ? [...workflowParameters.filter(p => Utils.getValueFromParameter(p) !== undefined).map(p => p.name + '=' + Utils.getValueFromParameter(p))]
@@ -31,19 +31,15 @@ export function RetryWorkflowPanel(props: Props) {
             nodeFieldSelector
         };
 
-        const process = props.isArchived
-            ? services.workflows.retryArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
-            : services.workflows.retry(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
-
-        process
-            .then((submitted: Workflow) => {
-                document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
-                setIsSubmitting(false);
-            })
-            .catch(err => {
-                setError(err);
-                setIsSubmitting(false);
-            });
+        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);
+        }
     }
 
     return (
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 4de31b256a44..c669fa211a7f 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 React, {useState} from 'react';
-import {Parameter, Template, Workflow} from '../../../models';
+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';
@@ -39,22 +39,22 @@ export function SubmitWorkflowPanel(props: Props) {
         return templates.find(t => t.name === name) || null;
     }
 
-    function submit() {
+    async function submit() {
         setIsSubmitting(true);
-        services.workflows
-            .submit(props.kind, props.name, props.namespace, {
+        try {
+            const submitted = await services.workflows.submit(props.kind, props.name, props.namespace, {
                 entryPoint: entrypoint === workflowEntrypoint ? null : entrypoint,
                 parameters: [
                     ...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: labels.join(',')
-            })
-            .then((submitted: Workflow) => (document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`)))
-            .catch(err => {
-                setError(err);
-                setIsSubmitting(false);
             });
+            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+        } catch (err) {
+            setError(err);
+            setIsSubmitting(false);
+        }
     }
 
     return (

From eb59c262d1a694bae1878a93361b591ee67e829b Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Thu, 14 Sep 2023 00:24:19 +0900
Subject: [PATCH 07/10] refactor: use optional chanining instead of &&

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 ui/src/app/workflows/components/submit-workflow-panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index c669fa211a7f..167d89dfe32a 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -76,7 +76,7 @@ export function SubmitWorkflowPanel(props: Props) {
                         onChange={selected => {
                             const selectedTemp = getSelectedTemplate(selected.value);
                             setEntrypoint(selected.value);
-                            setParameters((selectedTemp && selectedTemp.inputs.parameters) || []);
+                            setParameters(selectedTemp?.inputs?.parameters || []);
                         }}
                     />
                 </div>

From 6634c0ad50a1b2abb015917b8b9e7a58dcc9a407 Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Thu, 14 Sep 2023 01:17:06 +0900
Subject: [PATCH 08/10] refactor: memoize templateOptions in entrypoint select
 options

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 .../components/submit-workflow-panel.tsx      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 167d89dfe32a..85306a0d3953 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,5 +1,5 @@
 import {Select} from 'argo-ui';
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {Parameter, Template} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
@@ -30,14 +30,17 @@ 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 [templates] = useState<Template[]>([defaultTemplate].concat(props.templates));
     const [labels, setLabels] = useState(['submit-from-ui=true']);
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    function getSelectedTemplate(name: string): Template | null {
-        return templates.find(t => t.name === name) || null;
-    }
+    const templates = [defaultTemplate].concat(props.templates);
+    const templateOptions = useMemo(() => {
+        return templates.map(t => ({
+            value: t.name,
+            title: t.name
+        }));
+    }, [templates]);
 
     async function submit() {
         setIsSubmitting(true);
@@ -69,12 +72,9 @@ export function SubmitWorkflowPanel(props: Props) {
                     <label>Entrypoint</label>
                     <Select
                         value={entrypoint}
-                        options={templates.map(t => ({
-                            value: t.name,
-                            title: t.name
-                        }))}
+                        options={templateOptions}
                         onChange={selected => {
-                            const selectedTemp = getSelectedTemplate(selected.value);
+                            const selectedTemp = templates.find(t => t.name === selected.value);
                             setEntrypoint(selected.value);
                             setParameters(selectedTemp?.inputs?.parameters || []);
                         }}

From 0e47525e2e60ba6f6c54977b156c1a2a4977d737 Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Thu, 14 Sep 2023 09:23:24 +0900
Subject: [PATCH 09/10] refactor: hoist up static variable out of component

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 .../workflows/components/submit-workflow-panel.tsx  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index 85306a0d3953..d79a3bb71fed 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -18,15 +18,14 @@ interface Props {
 }
 
 const workflowEntrypoint = '<default>';
+const defaultTemplate: Template = {
+    name: workflowEntrypoint,
+    inputs: {
+        parameters: []
+    }
+};
 
 export function SubmitWorkflowPanel(props: Props) {
-    const defaultTemplate: Template = {
-        name: workflowEntrypoint,
-        inputs: {
-            parameters: []
-        }
-    };
-
     const [entrypoint, setEntrypoint] = useState(workflowEntrypoint);
     const [parameters, setParameters] = useState<Parameter[]>([]);
     const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflowParameters)));

From 106027af6a09dc2b6841e569d388bbdfd65c991e Mon Sep 17 00:00:00 2001
From: tetora1053 <tetora1053@gmail.com>
Date: Sat, 16 Sep 2023 02:29:04 +0900
Subject: [PATCH 10/10] fix: variables memoization

Signed-off-by: tetora1053 <tetora1053@gmail.com>
---
 ui/src/app/workflows/components/submit-workflow-panel.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index d79a3bb71fed..90fd2bd31df8 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -33,7 +33,10 @@ export function SubmitWorkflowPanel(props: Props) {
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const templates = [defaultTemplate].concat(props.templates);
+    const templates = useMemo(() => {
+        return [defaultTemplate].concat(props.templates);
+    }, [props.templates]);
+
     const templateOptions = useMemo(() => {
         return templates.map(t => ({
             value: t.name,