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

[sairam91]

Fixes #12124

Motivation

This PR adds support for developers to prefil submit workflow form by passing in the values through query parameters.

To prefil a submit workflow developers can pass in the following query parameters

sidePanel=submit-new-workflow
template=<template that the workflow should follow>
parameters[key]=value // Here the key would be the parameter for the job and value would be the value of the parameter.
You should provide the keys that are supported by the specified template

Modifications

• Updated workflow-list component
• Updated submit-workflow-panel.tsx component to default entry point if provided.
• Updated workflow-creator.tsx to read default values from query parameters.
• The workflow will be prefilled with the parameters that the template supports
• Added new shared helper function to parse query parameter of the format ?parameters[key]=value.

Verification

[MasonM]

Good start! A couple initial comments:

1. This project uses the history library, so I think (but I'm not sure) the useEffect() hooks need to incorporate it as a dependency. That means passing through the history object to the affected components. Ideally, we'd use useQueryParams() too, but when I tried that, the history.listen() callback wouldn't fire. I think that's due to the interdependency with the workflowTemplates/workflowParameters props.
2. It'd be simpler to push the logic for handling workflow parameters to ui/src/app/workflows/components/submit-workflow-panel.tsx

Here's a commit that does both things: https://github.com/MasonM/argo-workflows/commit/d2c11c87503c5054c9ce86d5a19918ed79f8cc24

[MasonM]

@sairam91 Sorry for the delay. You mentioned you were going to fill out the "Verification" section of the PR, so I was waiting for that. If you're unsure of what to put there, I think this would work (you can copy-and-paste this):

Verification

1. Run make start UI=true
2. Visit http://127.0.0.1:8080/workflow-templates?namespace=argo and create a new WorkflowTemplate named with the default example
3. Visit http://127.0.0.1:8080/workflows?namespace=argo&sidePanel=submit-new-workflow&template=test&parameters%5Bmessage%5D=test123 and verify fields are populated correctly

Also, it looks like there's conflicts. If you can add me as a collaborator at https://github.com/sairam91/argo-workflows/settings, I can resolve them for you, if you want.

[sairam91]

Closed in favor of https://github.com/argoproj/argo-workflows/pull/13922