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

Signed-off-by: Sairam Arunachalam <sair.aruna@gmail.com>

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

@@ -0,0 +1,32 @@
+import {createBrowserHistory, createPath} 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();
+        const path = createPath({pathname: '/workflows', search: '?parameters[key1]=value1&parameters[key2]=value2'});
+        history.location.search = path;
+        const result = getWorkflowParametersFromQuery(history);
+        expect(result).toEqual({
+            key1: 'value1',
+            key2: 'value2'
+        });
+    });
+
+    it('should only return the parameters provided in the URL', () => {
+        const history = createBrowserHistory();
+        const path = createPath({pathname: '/workflows', search: '?parameters[key1]=value1&parameters[key2]=value2&test=123'});
+        history.location.search = path;
+        const result = getWorkflowParametersFromQuery(history);
+        expect(result).toEqual({
+            key1: 'value1',
+            key2: 'value2'
+        });
+    });
+});

ui/src/app/shared/get_workflow_params.ts

@@ -1,14 +1,8 @@
 import {History} from 'history';
-/**
- * Method to extract a key from query parameter. The query parameter will be of the following format
- * ?parameters[key]=value.
- * This method will extract the key from the query parameter.
- * @param inputString
- * @returns
- */
+
 function extractKey(inputString: string): string | null {
     // Use regular expression to match the key within square brackets
-    const match = inputString.match(/parameters\[(.*?)\]/);
+    const match = inputString.match(/^parameters\[(.*?)\]$/);
 
     // If a match is found, return the captured key
     if (match) {
@@ -20,7 +14,6 @@ function extractKey(inputString: string): string | null {
 }
 /**
  * Returns the workflow parameters from the query parameters.
- * @returns {}
  */
 export function getWorkflowParametersFromQuery(history: History): {[key: string]: string} {
     const queryParams = new URLSearchParams(history.location.search);

ui/src/app/workflows/components/submit-workflow-panel.tsx

@@ -41,14 +41,10 @@ export function SubmitWorkflowPanel(props: Props) {
     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;
-        });
+        const updatedParams = workflowParameters.map(param => ({
+            name: param.name,
+            value: templatePropertiesInQuery[param.name] || param.value
+        }));
         setWorkflowParameters(updatedParams);
     }, [props.history, setWorkflowParameters]);
 

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

@@ -31,7 +31,6 @@ import {WorkflowsToolbar} from '../workflows-toolbar/workflows-toolbar';
 import './workflows-list.scss';
 import useTimestamp, {TIMESTAMP_KEYS} from '../../../shared/use-timestamp';
 import {TimestampSwitch} from '../../../shared/components/timestamp';
-import {getWorkflowParametersFromQuery} from '../../../shared/get_workflow_params';
 
 interface WorkflowListRenderOptions {
     paginationLimit: number;
@@ -127,7 +126,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) {
@@ -137,17 +136,6 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
             params.append('limit', pagination.limit.toString());
         }
 
-        // Add any workflow parameters to the query
-        const workflowProperties = getWorkflowParametersFromQuery(history);
-
-        Object.keys(workflowProperties).forEach(key => {
-            params.append(`parameters[${key}]`, workflowProperties[key]);
-        });
-
-        // Add the sidePanel query parameter if it exists
-        params.append('sidePanel', getSidePanel());
-        params.append('template', queryParams.get('template'));
-
         history.push(historyUrl('workflows' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {namespace, extraSearchParams: params}));
     }, [namespace, phases.toString(), labels.toString(), pagination.limit, pagination.offset]); // referential equality, so use values, not refs