Display pipeline parameters in run pipeline modal

tapis-project · Jul 24, 2024 · 38c15c8 · 38c15c8
1 parent bad048c
commit 38c15c8
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/src/app/Workflows/Pipelines/Pipeline/Pipeline.tsx b/src/app/Workflows/Pipelines/Pipeline/Pipeline.tsx
@@ -135,6 +135,7 @@ const Pipeline: React.FC<PipelineProps> = ({ groupId, pipelineId }) => {
             buttons={['createtask', 'runpipeline']}
             groupId={groupId}
             pipelineId={pipelineId}
+            pipeline={pipeline}
           />
 
           {view == ViewEnum.Dag ? (

diff --git a/src/app/Workflows/_components/Toolbar/RunPipelineModal/RunPipelineModal.tsx b/src/app/Workflows/_components/Toolbar/RunPipelineModal/RunPipelineModal.tsx
@@ -9,6 +9,7 @@ import {
   SectionHeader,
 } from '@tapis/tapisui-common';
 import { Workflows as Hooks } from '@tapis/tapisui-hooks';
+import { Workflows } from "@tapis/tapis-typescript"
 import styles from './RunPipelineModal.module.scss';
 import * as Yup from 'yup';
 // import { Workflows } from '@tapis/tapis-typescript';
@@ -17,12 +18,14 @@ type RunPipelineModalProps = {
   toggle: () => void;
   groupId: string;
   pipelineId: string;
+  pipeline: Workflows.Pipeline;
 };
 
 const PipelineRunModal: React.FC<RunPipelineModalProps> = ({
   toggle,
   groupId,
   pipelineId,
+  pipeline
 }) => {
   const { run, isLoading, error, isSuccess } = Hooks.Pipelines.useRun();
 
@@ -95,6 +98,7 @@ const PipelineRunModal: React.FC<RunPipelineModalProps> = ({
     <GenericModal
       toggle={toggle}
       title="Run Pipeline"
+      size="lg"
       body={
         <div>
           <Formik
@@ -135,6 +139,43 @@ const PipelineRunModal: React.FC<RunPipelineModalProps> = ({
                       render={(arrayHelpers) => (
                         <div>
                           <div className={styles['key-vals']}>
+                            {Object.entries(pipeline.params || {}).map(([key, _]) => {
+                              return (
+                                <div key={key} className={styles['key-val']}>
+                                  <div className={styles['grid-2']}>
+                                    <FormikInput
+                                      id={`params.${key}.key`}
+                                      name={`params.${key}.key`}
+                                      label="key"
+                                      required={true}
+                                      description={`Parameter key`}
+                                      aria-label="Input"
+                                      defaultValue={key}
+                                      disabled
+                                    />
+                                    <FormikInput
+                                      id={`params.${key}.value`}
+                                      name={`params.${key}.value`}
+                                      label="value"
+                                      required
+                                      description={`Parameter value`}
+                                      aria-label="Input"
+                                      value=""
+                                    />
+                                  </div>
+                                  {/* <Button
+                                    className={styles['remove-button']}
+                                    type="button"
+                                    color="danger"
+                                    disabled={false}
+                                    onClick={() => arrayHelpers.remove(key)}
+                                    size="sm"
+                                  >
+                                    <Icon name="trash" />
+                                  </Button> */}
+                                </div>
+                              )
+                            })}
                             {values.params &&
                               values.params.length > 0 &&
                               values.params.map((_, i) => (

diff --git a/src/app/Workflows/_components/Toolbar/Toolbar.tsx b/src/app/Workflows/_components/Toolbar/Toolbar.tsx
@@ -9,6 +9,7 @@ import { CreateArchiveModal } from './CreateArchiveModal';
 import { CreateIdentityModal } from './CreateIdentityModal';
 import { AddGroupUsersModal } from './AddGroupUsersModal';
 import { RunPipelineModal } from './RunPipelineModal';
+import { Workflows } from "@tapis/tapis-typescript"
 
 type ToolbarButtonProps = {
   text: string;
@@ -42,12 +43,14 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
 type WorkflowsToolbarProps = {
   groupId?: string;
   pipelineId?: string;
+  pipeline?: Workflows.Pipeline
   buttons?: Array<string>;
 };
 
 const Toolbar: React.FC<WorkflowsToolbarProps> = ({
   groupId,
   pipelineId,
+  pipeline = undefined,
   buttons = [],
 }) => {
   const [modal, setModal] = useState<string | undefined>(undefined);
@@ -132,10 +135,11 @@ const Toolbar: React.FC<WorkflowsToolbarProps> = ({
             toggle={toggle}
           />
         )}
-        {modal === 'runpipeline' && groupId && pipelineId && (
+        {modal === 'runpipeline' && groupId && pipelineId && pipeline && (
           <RunPipelineModal
             groupId={groupId}
             pipelineId={pipelineId}
+            pipeline={pipeline}
             toggle={toggle}
           />
         )}