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 } from 'redux-form';
   7 import { Grid } 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
  14 export const RUN_PROCESS_BASIC_FORM = 'runProcessBasicForm';
  15
  16 export interface RunProcessBasicFormData {
  17     name: string;
  18     description: string;
  19     owner?: ProjectResource | UserResource;
  20 }
  21
  22 export const RunProcessBasicForm =
  23     reduxForm<RunProcessBasicFormData>({
  24         form: RUN_PROCESS_BASIC_FORM
  25     })(() =>
  26         <form>
  27             <Grid container spacing={32}>
  28                 <Grid item xs={12} md={6}>
  29                     <Field
  30                         name='name'
  31                         component={TextField as any}
  32                         label="Name for this workflow run"
  33                         required
  34                         validate={PROCESS_NAME_VALIDATION} />
  35                 </Grid>
  36                 <Grid item xs={12} md={6}>
  37                     <Field
  38                         name='description'
  39                         component={TextField as any}
  40                         label="Optional description of this workflow run" />
  41                 </Grid>
  42                 <Grid item xs={12} md={6}>
  43                     <ProjectInput input={{
  44                         id: "owner",
  45                         label: "Project where the workflow will run"
  46                     } as ProjectCommandInputParameter}
  47                         options={{ showOnlyOwned: false, showOnlyWritable: true }} />
  48                 </Grid>
  49             </Grid>
  50         </form>);