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