src/views/run-process-panel/run-process-second-step.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { withStyles, WithStyles, StyleRulesCallback, Grid, Button } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { Field, reduxForm, InjectedFormProps } from 'redux-form';
   9 import { TextField } from '~/components/text-field/text-field';
  10 import { RunProcessSecondStepDataFormProps, RUN_PROCESS_SECOND_STEP_FORM_NAME } from '~/store/run-process-panel/run-process-panel-actions';
  11
  12 type CssRules = 'root';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16
  17     }
  18 });
  19
  20 export interface RunProcessSecondStepDataProps {
  21
  22 }
  23
  24 export interface RunProcessSecondStepActionProps {
  25     onSetStep: (step: number) => void;
  26     onRunProcess: (data: RunProcessSecondStepDataFormProps) => void;
  27 }
  28
  29 type RunProcessSecondStepProps = RunProcessSecondStepDataProps
  30     & RunProcessSecondStepActionProps
  31     & WithStyles<CssRules>
  32     & InjectedFormProps<RunProcessSecondStepDataFormProps>;
  33
  34 const RunProcessSecondStep = withStyles(styles)(
  35     ({ onSetStep, classes }: RunProcessSecondStepProps) =>
  36         <Grid container spacing={16}>
  37             <Grid item xs={12}>
  38                 <form>
  39                     <Field
  40                         name='name'
  41                         component={TextField}
  42                         label="Enter a new name for run process" />
  43                     <Field
  44                         name='description'
  45                         component={TextField}
  46                         label="Enter a description for run process" />
  47                 </form>
  48             </Grid>
  49             <Grid item xs={12}>
  50                 <Button color="primary" onClick={() => onSetStep(0)}>
  51                     Back
  52                 </Button>
  53                 <Button variant="contained" color="primary">
  54                     Run Process
  55                 </Button>
  56             </Grid>
  57         </Grid>
  58 );
  59
  60 export const RunProcessSecondStepForm = reduxForm<RunProcessSecondStepDataFormProps>({
  61     form: RUN_PROCESS_SECOND_STEP_FORM_NAME
  62 })(RunProcessSecondStep);