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 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, WorkflowResource } 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, RUN_PROCESS_ADVANCED_FORM } from './run-process-advanced-form';
  15 import { createStructuredSelector } from 'reselect';
  16 import { selectPreset } from 'store/run-process-panel/run-process-panel-actions';
  17
  18 export interface RunProcessSecondStepFormDataProps {
  19     inputs: CommandInputParameter[];
  20     workflow?: WorkflowResource;
  21     presets?: WorkflowResource[];
  22     selectedPreset?: WorkflowResource;
  23     valid: boolean;
  24 }
  25
  26 export interface RunProcessSecondStepFormActionProps {
  27     goBack: () => void;
  28     runProcess: () => void;
  29     onPresetChange: (preset: WorkflowResource) => void;
  30 }
  31
  32 const selectedWorkflowSelector = (state: RootState) =>
  33     state.runProcessPanel.selectedWorkflow;
  34
  35 const presetsSelector = (state: RootState) =>
  36     state.runProcessPanel.presets;
  37
  38 const selectedPresetSelector = (state: RootState) =>
  39     state.runProcessPanel.selectedPreset;
  40
  41 const inputsSelector = (state: RootState) =>
  42     state.runProcessPanel.inputs;
  43
  44 const validSelector = (state: RootState) =>
  45     isValid(RUN_PROCESS_BASIC_FORM)(state) && isValid(RUN_PROCESS_INPUTS_FORM)(state) && isValid(RUN_PROCESS_ADVANCED_FORM)(state);
  46
  47 const mapStateToProps = createStructuredSelector({
  48     inputs: inputsSelector,
  49     valid: validSelector,
  50     workflow: selectedWorkflowSelector,
  51     presets: presetsSelector,
  52     selectedPreset: selectedPresetSelector,
  53 });
  54
  55 export type RunProcessSecondStepFormProps = RunProcessSecondStepFormDataProps & RunProcessSecondStepFormActionProps;
  56 export const RunProcessSecondStepForm = connect(mapStateToProps, { onPresetChange: selectPreset })(
  57     ({ inputs, workflow, selectedPreset, presets, onPresetChange, valid, goBack, runProcess }: RunProcessSecondStepFormProps) =>
  58         <Grid container spacing={16} data-cy="new-process-panel">
  59             <Grid item xs={12}>
  60                 <RunProcessBasicForm />
  61                 <RunProcessInputsForm inputs={inputs} />
  62                 <RunProcessAdvancedForm />
  63             </Grid>
  64             <Grid item xs={12}>
  65                 <Button color="primary" onClick={goBack}>
  66                     Back
  67                 </Button>
  68                 <Button disabled={!valid} variant="contained" color="primary" onClick={runProcess}>
  69                     Run workflow
  70                 </Button>
  71             </Grid>
  72         </Grid>);