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, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
   8 import { TextField } from 'components/text-field/text-field';
   9 import { ProjectInput, ProjectCommandInputParameter } from 'views/run-process-panel/inputs/project-input';
  10 import { PROCESS_NAME_VALIDATION } from 'validators/validators';
  11 import { ProjectResource } from 'models/project';
  12 import { UserResource } from 'models/user';
  13 import { WorkflowResource } from 'models/workflow';
  14 import { ArvadosTheme } from 'common/custom-theme';
  15
  16 export const RUN_PROCESS_BASIC_FORM = 'runProcessBasicForm';
  17
  18 export interface RunProcessBasicFormData {
  19     name: string;
  20     owner?: ProjectResource | UserResource;
  21 }
  22
  23 interface RunProcessBasicFormProps {
  24     workflow?: WorkflowResource
  25 }
  26
  27 type CssRules = 'name' | 'description';
  28
  29 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  30     name: {
  31         overflow: "hidden",
  32         color: theme.customs.colors.greyD,
  33         fontSize: "1.875rem",
  34     },
  35     description: {
  36     }
  37 });
  38
  39 export const RunProcessBasicForm =
  40     reduxForm<RunProcessBasicFormData, RunProcessBasicFormProps>({
  41         form: RUN_PROCESS_BASIC_FORM
  42     })(withStyles(styles)((props: InjectedFormProps<RunProcessBasicFormData, RunProcessBasicFormProps> & RunProcessBasicFormProps & WithStyles<CssRules>) =>
  43         <form>
  44             <Grid container spacing={32}>
  45                 <Grid item xs={12}>
  46                     {props.workflow && <Typography className={props.classes.name}
  47                                                    data-cy='workflow-name'>{props.workflow.name}</Typography>}
  48                 </Grid>
  49                 <Grid item xs={12}>
  50                     {props.workflow && <Typography className={props.classes.description}
  51                                                    data-cy='workflow-description'
  52                                                    //dangerouslySetInnerHTML is ok here only if description is sanitized,
  53                                                    //which it is before it is loaded into the redux store
  54                                                    dangerouslySetInnerHTML={{ __html: props.workflow.description }}
  55                                        />}
  56                 </Grid>
  57                 <Grid item xs={12} md={6}>
  58                     <Field
  59                         name='name'
  60                              component={TextField as any}
  61                              label="Name for this workflow run"
  62                              required
  63                         validate={PROCESS_NAME_VALIDATION} />
  64                 </Grid>
  65                 <Grid item xs={12} md={6}>
  66                     <ProjectInput required input={{
  67                         id: "owner",
  68                         label: "Project where the workflow will run"
  69                     } as ProjectCommandInputParameter}
  70                                   options={{ showOnlyOwned: false, showOnlyWritable: true }} />
  71                 </Grid>
  72
  73             </Grid>
  74         </form>));