Add inputs form to second step form
[arvados-workbench2.git] / 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
15 export interface RunProcessSecondStepFormDataProps {
16     inputs: CommandInputParameter[];
17     valid: boolean;
18 }
19
20 export interface RunProcessSecondStepFormActionProps {
21     goBack: () => void;
22     runProcess: () => void;
23 }
24
25 const mapStateToProps = (state: RootState): RunProcessSecondStepFormDataProps => ({
26     inputs: state.runProcessPanel.inputs,
27     valid: isValid(RUN_PROCESS_BASIC_FORM)(state.form) &&
28         isValid(RUN_PROCESS_INPUTS_FORM)(state.form),
29 });
30
31 export type RunProcessSecondStepFormProps = RunProcessSecondStepFormDataProps & RunProcessSecondStepFormActionProps;
32 export const RunProcessSecondStepForm = connect(mapStateToProps)(
33     ({ inputs, valid, goBack, runProcess }: RunProcessSecondStepFormProps) =>
34         <Grid container spacing={16}>
35             <Grid item xs={12}>
36                 <RunProcessBasicForm />
37                 <RunProcessInputsForm inputs={inputs} />
38             </Grid>
39             <Grid item xs={12}>
40                 <Button color="primary" onClick={goBack}>
41                     Back
42                 </Button>
43                 <Button disabled={!valid} variant="contained" color="primary" onClick={runProcess}>
44                     Run Process
45                 </Button>
46             </Grid>
47         </Grid>);