fix(ui): refactor code. Fixes argoproj#1214

Signed-off-by: Sairam Arunachalam <sair.aruna@gmail.com>
sairam91 · Oct 16, 2024 · e8ec0aa · e8ec0aa
1 parent fc1c45d
commit e8ec0aa
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 51 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,4 @@
+import {History} from 'history';
 /**
  * Method to extract a key from query parameter. The query parameter will be of the following format
  * ?parameters[key]=value.
@@ -17,9 +18,12 @@ function extractKey(inputString: string): string | null {
     // If no match is found, return null or an empty string
     return null; // Or return '';
 }
-
-export function getWorkflowParametersFromQuery(): {[key: string]: string} {
-    const queryParams = new URLSearchParams(location.search);
+/**
+ * Returns the workflow parameters from the query parameters.
+ * @returns {}
+ */
+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()) {

diff --git a/ui/src/app/workflow-templates/workflow-template-details.tsx b/ui/src/app/workflow-templates/workflow-template-details.tsx
@@ -142,6 +142,7 @@ export function WorkflowTemplateDetails({history, location, match}: RouteCompone
                             kind='WorkflowTemplate'
                             namespace={namespace}
                             name={name}
+                            history={history}
                             entrypoint={template.spec.entrypoint}
                             templates={template.spec.templates || []}
                             workflowParameters={template.spec.arguments.parameters || []}

diff --git 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/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';
@@ -8,6 +8,8 @@ import {ErrorNotice} from '../../shared/components/error-notice';
 import {getValueFromParameter, ParametersInput} from '../../shared/components/parameters-input';
 import {TagsInput} from '../../shared/components/tags-input/tags-input';
 import {services} from '../../shared/services';
+import {getWorkflowParametersFromQuery} from '../../shared/get_workflow_params';
+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>';
@@ -35,6 +38,20 @@ export function SubmitWorkflowPanel(props: Props) {
     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);
     }, [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 * as React from 'react';
 import {useEffect, useState} from 'react';
+import {History} from 'history';
 
-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,13 @@ 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 +63,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 +99,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,8 +138,8 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
         }
 
         // Add any workflow parameters to the query
-        const workflowProperties = getWorkflowParametersFromQuery();
-        console.log(workflowProperties);
+        const workflowProperties = getWorkflowParametersFromQuery(history);
+
         Object.keys(workflowProperties).forEach(key => {
             params.append(`parameters[${key}]`, workflowProperties[key]);
         });
@@ -363,6 +363,7 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
                 {getSidePanel() === 'submit-new-workflow' && (
                     <WorkflowCreator
                         namespace={nsUtils.getNamespaceWithDefault(namespace)}
+                        history={history}
                         onCreate={wf => navigation.goto(uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`))}
                     />
                 )}