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