feat(ui): prefill parameters for workflow submit form. Fixes #12124

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>
             )}

ui/src/app/shared/get_workflow_params.test.ts

@@ -0,0 +1,37 @@
+import {createBrowserHistory} from 'history';
+import {getWorkflowParametersFromQuery} from './get_workflow_params';
+
+describe('get_workflow_params', () => {
+    it('should return an empty object when there are no query parameters', () => {
+        const history = createBrowserHistory();
+        const result = getWorkflowParametersFromQuery(history);
+        expect(result).toEqual({});
+    });
+
+    it('should return the parameters provided in the URL', () => {
+        const history = createBrowserHistory();
+        history.location.search = '?parameters[key1]=value1&parameters[key2]=value2';
+        const result = getWorkflowParametersFromQuery(history);
+        expect(result).toEqual({
+            key1: 'value1',
+            key2: 'value2'
+        });
+    });
+
+    it('should not return any key value pairs which are not in parameters query ', () => {
+        const history = createBrowserHistory();
+        history.location.search = '?retryparameters[key1]=value1&retryparameters[key2]=value2';
+        const result = getWorkflowParametersFromQuery(history);
+        expect(result).toEqual({});
+    });
+
+    it('should only return the parameters provided in the URL', () => {
+        const history = createBrowserHistory();
+        history.location.search = '?parameters[key1]=value1&parameters[key2]=value2&test=123';
+        const result = getWorkflowParametersFromQuery(history);
+        expect(result).toEqual({
+            key1: 'value1',
+            key2: 'value2'
+        });
+    });
+});

ui/src/app/shared/get_workflow_params.ts

@@ -0,0 +1,30 @@
+import {History} from 'history';
+
+function extractKey(inputString: string): string | null {
+    // Use regular expression to match the key within square brackets
+    const match = inputString.match(/^parameters\[(.*?)\]$/);
+
+    // If a match is found, return the captured key
+    if (match) {
+        return match[1];
+    }
+
+    // If no match is found, return null or an empty string
+    return null; // Or return '';
+}
+/**
+ * Returns the workflow parameters from the query parameters.
+ */
+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);
+        if (q) {
+            parameters[q] = value;
+        }
+    }
+
+    return parameters;
+}

ui/src/app/shared/history.ts

@@ -6,23 +6,22 @@ import * as nsUtils from './namespaces';
  * Only "truthy" values are put into the query parameters. I.e. "falsey" values include null, undefined, false, "", 0.
  */
 export function historyUrl(path: string, params: {[key: string]: any}) {
-    const queryParams: string[] = [];
-    let extraSearchParams: URLSearchParams;
+    const queryParams = new URLSearchParams();
     Object.entries(params)
         .filter(([, v]) => v !== null)
         .forEach(([k, v]) => {
             const searchValue = '{' + k + '}';
             if (path.includes(searchValue)) {
                 path = path.replace(searchValue, v != null ? v : '');
             } else if (k === 'extraSearchParams') {
-                extraSearchParams = v;
+                (v as URLSearchParams).forEach((value, key) => queryParams.set(key, value));
             } else if (v) {
-                queryParams.push(k + '=' + v);
+                queryParams.set(k, v);
             }
             if (k === 'namespace') {
                 nsUtils.setCurrentNamespace(v);
             }
         });
-    const extraString = extraSearchParams ? '&' + extraSearchParams.toString() : '';
-    return uiUrl(path.replace(/{[^}]*}/g, '')) + '?' + queryParams.join('&') + extraString;
+
+    return uiUrl(path.replace(/{[^}]*}/g, '')) + '?' + queryParams.toString();
 }

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 || []}

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>';
@@ -28,13 +31,23 @@ const defaultTemplate: Template = {
 
 export function SubmitWorkflowPanel(props: Props) {
     const {navigation} = useContext(Context);
-    const [entrypoint, setEntrypoint] = useState(workflowEntrypoint);
+    const [entrypoint, setEntrypoint] = useState(props.entrypoint || 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);
 
+    useEffect(() => {
+        const templatePropertiesInQuery = getWorkflowParametersFromQuery(props.history);
+        // Get the user arguments from the query params
+        const updatedParams = workflowParameters.map(param => ({
+            name: param.name,
+            value: templatePropertiesInQuery[param.name] || param.value
+        }));
+        setWorkflowParameters(updatedParams);
+    }, [props.history, setWorkflowParameters]);
+
     const templates = useMemo(() => {
         return [defaultTemplate].concat(props.templates);
     }, [props.templates]);

ui/src/app/workflows/components/workflow-creator.tsx

@@ -1,6 +1,7 @@
 import {Select} from 'argo-ui/src/components/select/select';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
+import {History} from 'history';
 
 import {Workflow, WorkflowTemplate} from '../../../models';
 import {Button} from '../../shared/components/button';
@@ -15,7 +16,7 @@ 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');
@@ -61,6 +62,12 @@ export function WorkflowCreator({namespace, onCreate}: {namespace: string; onCre
         }
     }, [workflowTemplate]);
 
+    useEffect(() => {
+        const queryParams = new URLSearchParams(history.location.search);
+        const template = queryParams.get('template');
+        setWorkflowTemplate((workflowTemplates || []).find(tpl => tpl.metadata.name === template));
+    }, [workflowTemplates, setWorkflowTemplate, history]);
+
     return (
         <>
             {stage === 'choose-method' && (
@@ -92,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' />

ui/src/app/workflows/components/workflows-list/workflows-list.tsx

@@ -136,7 +136,7 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
         }
         storage.setItem('options', options, {} as WorkflowListRenderOptions);
 
-        const params = new URLSearchParams();
+        const params = new URLSearchParams(history.location.search);
         phases?.forEach(phase => params.append('phase', phase));
         labels?.forEach(label => params.append('label', label));
         if (pagination.offset) {
@@ -347,10 +347,27 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
                     )}
                 </div>
             </div>
-            <SlidingPanel isShown={!!getSidePanel()} onClose={() => navigation.goto('.', {sidePanel: null})}>
+            <SlidingPanel
+                isShown={!!getSidePanel()}
+                onClose={() => {
+                    // Remove any lingering query params
+                    const qParams: {[key: string]: string | null} = {
+                        sidePanel: null
+                    };
+                    // Remove any lingering query params
+                    for (const key of queryParams.keys()) {
+                        qParams[key] = null;
+                    }
+                    // Add back the pagination and namespace params.
+                    qParams.limit = pagination.limit.toString();
+                    qParams.offset = pagination.offset || null;
+                    qParams.namespace = namespace;
+                    navigation.goto('.', qParams);
+                }}>
                 {getSidePanel() === 'submit-new-workflow' && (
                     <WorkflowCreator
                         namespace={nsUtils.getNamespaceWithDefault(namespace)}
+                        history={history}
                         onCreate={wf => navigation.goto(uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`))}
                     />
                 )}