From d362fde16d3ba7eb15b6ca81fc306417bd6db576 Mon Sep 17 00:00:00 2001
From: Peter Amstutz <peter.amstutz@curii.com>
Date: Mon, 12 Aug 2024 17:54:36 -0400
Subject: [PATCH] 21944: Add title and description to workflow launch panel

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>
---
 .../run-process-basic-form.tsx                | 81 +++++++++++++------
 .../run-process-second-step.tsx               |  2 +-
 2 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/services/workbench2/src/views/run-process-panel/run-process-basic-form.tsx b/services/workbench2/src/views/run-process-panel/run-process-basic-form.tsx
index a6f7a70693..d775c0c3e6 100644
--- a/services/workbench2/src/views/run-process-panel/run-process-basic-form.tsx
+++ b/services/workbench2/src/views/run-process-panel/run-process-basic-form.tsx
@@ -3,13 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { reduxForm, Field } from 'redux-form';
-import { Grid } from '@material-ui/core';
+import { reduxForm, Field, InjectedFormProps } from 'redux-form';
+import { Grid, Typography, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
 import { TextField } from 'components/text-field/text-field';
 import { ProjectInput, ProjectCommandInputParameter } from 'views/run-process-panel/inputs/project-input';
 import { PROCESS_NAME_VALIDATION } from 'validators/validators';
 import { ProjectResource } from 'models/project';
 import { UserResource } from 'models/user';
+import { WorkflowResource } from 'models/workflow';
+import { ArvadosTheme } from 'common/custom-theme';
 
 export const RUN_PROCESS_BASIC_FORM = 'runProcessBasicForm';
 
@@ -19,32 +21,61 @@ export interface RunProcessBasicFormData {
     owner?: ProjectResource | UserResource;
 }
 
+interface RunProcessBasicFormProps {
+    workflow?: WorkflowResource
+}
+
+type CssRules = 'name' | 'description';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    name: {
+        overflow: "hidden",
+        color: theme.customs.colors.greyD,
+        fontSize: "1.875rem",
+    },
+    description: {
+	marginBottom: "3em",
+    }
+});
+
 export const RunProcessBasicForm =
-    reduxForm<RunProcessBasicFormData>({
+    reduxForm<RunProcessBasicFormData, RunProcessBasicFormProps>({
         form: RUN_PROCESS_BASIC_FORM
-    })(() =>
-        <form>
+    })(withStyles(styles)((props: InjectedFormProps<RunProcessBasicFormData, RunProcessBasicFormProps> & RunProcessBasicFormProps & WithStyles<CssRules>) =>
+	<form>
             <Grid container spacing={32}>
-                <Grid item xs={12} md={6}>
-                    <Field
-                        name='name'
-                        component={TextField as any}
-                        label="Name for this workflow run"
-                        required
-                        validate={PROCESS_NAME_VALIDATION} />
-                </Grid>
-                <Grid item xs={12} md={6}>
+		<Grid item xs={12} md={6}>
                     <Field
-                        name='description'
-                        component={TextField as any}
-                        label="Optional description of this workflow run" />
-                </Grid>
-                <Grid item xs={12} md={6}>
+			name='name'
+			component={TextField as any}
+			label="Name for this workflow run"
+			required
+			validate={PROCESS_NAME_VALIDATION} />
+		</Grid>
+		<Grid item xs={12} md={6}>
                     <ProjectInput required input={{
-                        id: "owner",
-                        label: "Project where the workflow will run"
+			id: "owner",
+			label: "Project where the workflow will run"
                     } as ProjectCommandInputParameter}
-                        options={{ showOnlyOwned: false, showOnlyWritable: true }} />
-                </Grid>
-            </Grid>
-        </form>);
+				  options={{ showOnlyOwned: false, showOnlyWritable: true }} />
+		</Grid>
+		<Grid item xs={12} md={6}>
+                    <Field
+			name='description'
+			component={TextField as any}
+			label="Optional description" />
+		</Grid>
+		<Grid item xs={12}>
+		    {props.workflow && <Typography className={props.classes.name}
+						   data-cy='workflow-name'>{props.workflow.name}</Typography>}
+		</Grid>
+		<Grid item xs={12}>
+		    {props.workflow && <Typography className={props.classes.description}
+						   data-cy='workflow-description'
+						   //dangerouslySetInnerHTML is ok here only if description is sanitized,
+						   //which it is before it is loaded into the redux store
+						   dangerouslySetInnerHTML={{ __html: props.workflow.description }}
+				       />}
+		</Grid>
+	    </Grid>
+	</form>));
diff --git a/services/workbench2/src/views/run-process-panel/run-process-second-step.tsx b/services/workbench2/src/views/run-process-panel/run-process-second-step.tsx
index 2f41dedb82..d35e4eb88a 100644
--- a/services/workbench2/src/views/run-process-panel/run-process-second-step.tsx
+++ b/services/workbench2/src/views/run-process-panel/run-process-second-step.tsx
@@ -57,7 +57,7 @@ export const RunProcessSecondStepForm = connect(mapStateToProps, { onPresetChang
     ({ inputs, workflow, selectedPreset, presets, onPresetChange, valid, goBack, runProcess }: RunProcessSecondStepFormProps) =>
         <Grid container spacing={16} data-cy="new-process-panel">
             <Grid item xs={12}>
-                <RunProcessBasicForm />
+                <RunProcessBasicForm workflow={workflow} />
                 <RunProcessInputsForm inputs={inputs} />
                 <RunProcessAdvancedForm />
             </Grid>
-- 
2.30.2