From 46c350315cde799795c4716ddf641be7520fd9a6 Mon Sep 17 00:00:00 2001 From: Sairam Arunachalam Date: Wed, 16 Oct 2024 15:41:43 -0700 Subject: [PATCH] fix(ui): refactor code. Fixes #1214 Signed-off-by: Sairam Arunachalam --- ui/src/app/shared/get_workflow_params.test.ts | 32 +++++++++++++++++++ ui/src/app/shared/get_workflow_params.ts | 11 ++----- .../components/submit-workflow-panel.tsx | 12 +++---- .../workflows-list/workflows-list.tsx | 14 +------- 4 files changed, 39 insertions(+), 30 deletions(-) create mode 100644 ui/src/app/shared/get_workflow_params.test.ts diff --git a/ui/src/app/shared/get_workflow_params.test.ts b/ui/src/app/shared/get_workflow_params.test.ts new file mode 100644 index 000000000000..d5d7341950fe --- /dev/null +++ b/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¶meters[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¶meters[key2]=value2&test=123'}); + history.location.search = path; + const result = getWorkflowParametersFromQuery(history); + expect(result).toEqual({ + key1: 'value1', + key2: 'value2' + }); + }); +}); diff --git a/ui/src/app/shared/get_workflow_params.ts b/ui/src/app/shared/get_workflow_params.ts index 10e65230b518..9df9a15325d8 100644 --- a/ui/src/app/shared/get_workflow_params.ts +++ b/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); diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx index 5ebe90c26320..6b56689339cf 100644 --- a/ui/src/app/workflows/components/submit-workflow-panel.tsx +++ b/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]); diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx index 99eb048473c0..7c2d0fa27901 100644 --- a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx +++ b/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 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 { - 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