services/workbench2/src/views/run-process-panel/run-process-basic-form.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { reduxForm, Field, InjectedFormProps } from 'redux-form';
   7 import { Grid, Typography } from '@mui/material';
   8 import withStyles from '@mui/styles/withStyles';
   9 import { WithStyles } from '@mui/styles';
  10 import { TextField } from 'components/text-field/text-field';
  11 import { ProjectInput, ProjectCommandInputParameter } from 'views/run-process-panel/inputs/project-input';
  12 import { PROCESS_NAME_VALIDATION } from 'validators/validators';
  13 import { ProjectResource } from 'models/project';
  14 import { UserResource } from 'models/user';
  15 import { WorkflowResource } from 'models/workflow';
  16 import { ArvadosTheme, CustomStyleRulesCallback } from 'common/custom-theme';
  17
  18 export const RUN_PROCESS_BASIC_FORM = 'runProcessBasicForm';
  19
  20 export interface RunProcessBasicFormData {
  21     name: string;
  22     owner?: ProjectResource | UserResource;
  23 }
  24
  25 interface RunProcessBasicFormProps {
  26     workflow?: WorkflowResource;
  27 }
  28
  29 type CssRules = 'root' | 'name' | 'description';
  30
  31 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  32     root: {
  33         fontSize: '1.125rem',
  34     },
  35     name: {
  36         overflow: 'hidden',
  37         color: theme.customs.colors.greyD,
  38         fontSize: '1.875rem',
  39     },
  40     description: {},
  41 });
  42
  43 export const RunProcessBasicForm = reduxForm<RunProcessBasicFormData, RunProcessBasicFormProps>({
  44     form: RUN_PROCESS_BASIC_FORM,
  45 })(
  46     withStyles(styles)((props: InjectedFormProps<RunProcessBasicFormData, RunProcessBasicFormProps> & RunProcessBasicFormProps & WithStyles<CssRules>) => (
  47         <form className={props.classes.root}>
  48             <Grid
  49                 container
  50                 spacing={2}
  51             >
  52                 <Grid
  53                     item
  54                     xs={12}
  55                 >
  56                     {props.workflow && (
  57                         <Typography
  58                             className={props.classes.name}
  59                             data-cy='workflow-name'
  60                         >
  61                             {props.workflow.name}
  62                         </Typography>
  63                     )}
  64                 </Grid>
  65                 <Grid
  66                     item
  67                     xs={12}
  68                 >
  69                     {props.workflow && (
  70                         <Typography
  71                             className={props.classes.description}
  72                             data-cy='workflow-description'
  73                             //dangerouslySetInnerHTML is ok here only if description is sanitized,
  74                             //which it is before it is loaded into the redux store
  75                             dangerouslySetInnerHTML={{ __html: props.workflow.description }}
  76                         />
  77                     )}
  78                 </Grid>
  79                 <Grid
  80                     item
  81                     xs={12}
  82                     md={6}
  83                     >
  84                     <Field
  85                         name='name'
  86                         component={TextField as any}
  87                         label='Name for this workflow run'
  88                         required
  89                         validate={PROCESS_NAME_VALIDATION}
  90                     />
  91                 </Grid>
  92                 <Grid
  93                     item
  94                     xs={12}
  95                     md={6}
  96                 >
  97                     <ProjectInput
  98                         required
  99                         input={
 100                             {
 101                                 id: 'owner',
 102                                 label: 'Project where the workflow will run',
 103                             } as ProjectCommandInputParameter
 104                         }
 105                         options={{ showOnlyOwned: false, showOnlyWritable: true }}
 106                     />
 107                 </Grid>
 108             </Grid>
 109         </form>
 110     ))
 111 );