fix(ui): cleanup and react to history properly

Signed-off-by: Mason Malone <mmalone@adobe.com>
MasonM · Oct 16, 2024 · d2c11c8 · d2c11c8
1 parent fc1c45d
commit d2c11c8
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 50 deletions.
diff --git a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx
@@ -150,6 +150,7 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
                         entrypoint={template.spec.entrypoint}
                         templates={template.spec.templates || []}
                         workflowParameters={template.spec.arguments.parameters || []}
+                        history={history}
                     />
                 </SlidingPanel>
             )}

diff --git a/ui/src/app/shared/get_workflow_params.ts b/ui/src/app/shared/get_workflow_params.ts
@@ -1,3 +1,5 @@
+import {History} from 'history';
+
 /**
  * Method to extract a key from query parameter. The query parameter will be of the following format
  * ?parameters[key]=value.
@@ -18,9 +20,8 @@ function extractKey(inputString: string): string | null {
     return null; // Or return '';
 }
 
-export function getWorkflowParametersFromQuery(): {[key: string]: string} {
-    const queryParams = new URLSearchParams(location.search);
-
+export function getWorkflowParametersFromQuery(history: History): {[key: string]: string} {
+    const queryParams = new URLSearchParams(history.location.search);
     const parameters: {[key: string]: string} = {};
     for (const [key, value] of queryParams.entries()) {
         const q = extractKey(key);

diff --git a/ui/src/app/workflow-templates/workflow-template-details.tsx b/ui/src/app/workflow-templates/workflow-template-details.tsx
@@ -145,6 +145,7 @@ export function WorkflowTemplateDetails({history, location, match}: RouteCompone
                             entrypoint={template.spec.entrypoint}
                             templates={template.spec.templates || []}
                             workflowParameters={template.spec.arguments.parameters || []}
+                            history={history}
                         />
                     )}
                     {sidePanel === 'share' && <WidgetGallery namespace={namespace} label={'workflows.argoproj.io/workflow-template=' + name} />}

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,13 +1,15 @@
 import {Select} from 'argo-ui/src/components/select/select';
-import React, {useContext, useMemo, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useState} from 'react';
 
 import {Parameter, Template} from '../../../models';
 import {Context} from '../../shared/context';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
+import {getWorkflowParametersFromQuery} from '../../shared/get_workflow_params';
 import {getValueFromParameter, ParametersInput} from '../../shared/components/parameters-input';
 import {TagsInput} from '../../shared/components/tags-input/tags-input';
 import {services} from '../../shared/services';
+import {History} from 'history';
 
 interface Props {
     kind: string;
@@ -16,6 +18,7 @@ interface Props {
     entrypoint: string;
     templates: Template[];
     workflowParameters: Parameter[];
+    history: History;
 }
 
 const workflowEntrypoint = '<default>';
@@ -34,6 +37,20 @@ export function SubmitWorkflowPanel(props: Props) {
     const [labels, setLabels] = useState(['submit-from-ui=true']);
     const [error, setError] = useState<Error>();
     const [isSubmitting, setIsSubmitting] = useState(false);
+    useEffect(() => {
+        const templatePropertiesInQuery = getWorkflowParametersFromQuery(props.history);
+        // Get the user arguments from the query params
+        const updatedParams = workflowParameters.map(param => {
+            const queryValue = templatePropertiesInQuery[param.name];
+            const p: Parameter = {
+                name: param.name,
+                value: queryValue || param.value
+            };
+            return p;
+        });
+
+        setWorkflowParameters(updatedParams);
+    }, [props.history, setWorkflowParameters]);
 
     const templates = useMemo(() => {
         return [defaultTemplate].concat(props.templates);

diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -1,13 +1,13 @@
 import {Select} from 'argo-ui/src/components/select/select';
+import {History} from 'history';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 
-import {Parameter, Workflow, WorkflowTemplate} from '../../../models';
+import {Workflow, WorkflowTemplate} from '../../../models';
 import {Button} from '../../shared/components/button';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {ExampleManifests} from '../../shared/components/example-manifests';
 import {UploadButton} from '../../shared/components/upload-button';
-import {getWorkflowParametersFromQuery} from '../../shared/get_workflow_params';
 import {exampleWorkflow} from '../../shared/examples';
 import {services} from '../../shared/services';
 import * as nsUtils from '../../shared/namespaces';
@@ -16,14 +16,12 @@ import {WorkflowEditor} from './workflow-editor';
 
 type Stage = 'choose-method' | 'submit-workflow' | 'full-editor';
 
-export function WorkflowCreator({namespace, onCreate}: {namespace: string; onCreate: (workflow: Workflow) => void}) {
+export function WorkflowCreator({namespace, onCreate, history}: {namespace: string; onCreate: (workflow: Workflow) => void, history: History}) {
     const [workflowTemplates, setWorkflowTemplates] = useState<WorkflowTemplate[]>();
     const [workflowTemplate, setWorkflowTemplate] = useState<WorkflowTemplate>();
     const [stage, setStage] = useState<Stage>('choose-method');
     const [workflow, setWorkflow] = useState<Workflow>();
     const [error, setError] = useState<Error>();
-    const queryParams = new URLSearchParams(location.search);
-    const template = queryParams.get('template');
     useEffect(() => {
         services.workflowTemplate
             .list(namespace, [])
@@ -64,46 +62,10 @@ export function WorkflowCreator({namespace, onCreate}: {namespace: string; onCre
     }, [workflowTemplate]);
 
     useEffect(() => {
-        if (template != null && workflowTemplates) {
-            // Fetch matching template from the list of templates
-            const workflowTemplate = workflowTemplates.find(tmpl => tmpl.metadata.name === template);
-            // If we have a matching template set default values.
-            if (workflowTemplate) {
-                setWorkflowTemplate(workflowTemplate);
-
-                const templatePropertiesInQuery = getWorkflowParametersFromQuery();
-                // Get the user arguments from the query params
-                const updatedParams = workflowTemplate.spec.arguments.parameters.map(param => {
-                    const queryValue = templatePropertiesInQuery[param.name];
-                    const p: Parameter = {
-                        name: param.name,
-                        value: queryValue || param.value
-                    };
-                    return p;
-                });
-
-                workflowTemplate.spec.arguments.parameters = updatedParams;
-
-                setWorkflow({
-                    metadata: {
-                        generateName: workflowTemplate.metadata.name + '-',
-                        namespace,
-                        labels: {
-                            'workflows.argoproj.io/workflow-template': workflowTemplate.metadata.name,
-                            'submit-from-ui': 'true'
-                        }
-                    },
-                    spec: {
-                        entrypoint: workflowTemplate.spec.entrypoint,
-                        arguments: {
-                            ...workflowTemplate.spec.arguments,
-                            parameters: updatedParams
-                        }
-                    }
-                });
-            }
-        }
-    }, [template, workflowTemplates]);
+        const queryParams = new URLSearchParams(history.location.search);
+        const template = queryParams.get('template');
+        setWorkflowTemplate((workflowTemplates || []).find(tpl => tpl.metadata.name === template));
+    }, [workflowTemplates, setWorkflowTemplate, history]);
 
     return (
         <>
@@ -136,6 +98,7 @@ export function WorkflowCreator({namespace, onCreate}: {namespace: string; onCre
                         entrypoint={workflowTemplate.spec.entrypoint}
                         templates={workflowTemplate.spec.templates || []}
                         workflowParameters={workflowTemplate.spec.arguments.parameters || []}
+                        history={history}
                     />
                     <a onClick={() => setStage('full-editor')}>
                         Edit using full workflow options <i className='fa fa-caret-right' />

diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -138,7 +138,7 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
         }
 
         // Add any workflow parameters to the query
-        const workflowProperties = getWorkflowParametersFromQuery();
+        const workflowProperties = getWorkflowParametersFromQuery(history);
         console.log(workflowProperties);
         Object.keys(workflowProperties).forEach(key => {
             params.append(`parameters[${key}]`, workflowProperties[key]);
@@ -364,6 +364,7 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
                     <WorkflowCreator
                         namespace={nsUtils.getNamespaceWithDefault(namespace)}
                         onCreate={wf => navigation.goto(uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`))}
+                        history={history}
                     />
                 )}
             </SlidingPanel>