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 { Grid, Button } from '@material-ui/core';
   7 import { RunProcessBasicForm, RUN_PROCESS_BASIC_FORM } from './run-process-basic-form';
   8 import { RunProcessInputsForm } from '~/views/run-process-panel/run-process-inputs-form';
   9 import { CommandInputParameter } from '~/models/workflow';
  10 import { connect } from 'react-redux';
  11 import { RootState } from '~/store/store';
  12 import { isValid } from 'redux-form';
  13 import { RUN_PROCESS_INPUTS_FORM } from './run-process-inputs-form';
  14 import { RunProcessAdvancedForm } from './run-process-advanced-form';
  15 import { createSelector, createStructuredSelector } from 'reselect';
  16
  17 export interface RunProcessSecondStepFormDataProps {
  18     inputs: CommandInputParameter[];
  19     valid: boolean;
  20 }
  21
  22 export interface RunProcessSecondStepFormActionProps {
  23     goBack: () => void;
  24     runProcess: () => void;
  25 }
  26
  27 const inputsSelector = (state: RootState) =>
  28     state.runProcessPanel.inputs;
  29
  30 const validSelector = (state: RootState) =>
  31     isValid(RUN_PROCESS_BASIC_FORM)(state) && isValid(RUN_PROCESS_INPUTS_FORM)(state);
  32
  33 const mapStateToProps = createStructuredSelector({
  34     inputs: inputsSelector,
  35     valid: validSelector,
  36 });
  37
  38 export type RunProcessSecondStepFormProps = RunProcessSecondStepFormDataProps & RunProcessSecondStepFormActionProps;
  39 export const RunProcessSecondStepForm = connect(mapStateToProps)(
  40     ({ inputs, valid, goBack, runProcess }: RunProcessSecondStepFormProps) =>
  41         <Grid container spacing={16}>
  42             <Grid item xs={12}>
  43                 <RunProcessBasicForm />
  44                 <RunProcessInputsForm inputs={inputs} />
  45                 <RunProcessAdvancedForm />
  46             </Grid>
  47             <Grid item xs={12}>
  48                 <Button color="primary" onClick={goBack}>
  49                     Back
  50                 </Button>
  51                 <Button disabled={!valid} variant="contained" color="primary" onClick={runProcess}>
  52                     Run Process
  53                 </Button>
  54             </Grid>
  55         </Grid>);