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