Add inputs form to second step form

Feature #13863

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/store/run-process-panel/run-process-panel-reducer.ts b/src/store/run-process-panel/run-process-panel-reducer.ts
index d51eeb12e9475f59a2c408c6ac698c1c4babeba1..f91039b3424324ad895368ff6830ac7091758a46 100644 (file)
--- a/src/store/run-process-panel/run-process-panel-reducer.ts
+++ b/src/store/run-process-panel/run-process-panel-reducer.ts
@@ -3,24 +3,30 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { RunProcessPanelAction, runProcessPanelActions } from '~/store/run-process-panel/run-process-panel-actions';
-import { WorkflowResource } from '~/models/workflow';
+import { WorkflowResource, CommandInputParameter, getWorkflowInputs, parseWorkflowDefinition } from '~/models/workflow';
 
 interface RunProcessPanel {
     currentStep: number;
     workflows: WorkflowResource[];
     selectedWorkflow: WorkflowResource | undefined;
+    inputs: CommandInputParameter[];
 }
 
 const initialState: RunProcessPanel = {
     currentStep: 0,
     workflows: [],
-    selectedWorkflow: undefined
+    selectedWorkflow: undefined,
+    inputs: [],
 };
 
 export const runProcessPanelReducer = (state = initialState, action: RunProcessPanelAction): RunProcessPanel =>
     runProcessPanelActions.match(action, {
         SET_CURRENT_STEP: currentStep => ({ ...state, currentStep }),
-        SET_WORKFLOWS: workflows => ({ ...state, workflows }), 
-        SET_SELECTED_WORKFLOW: selectedWorkflow => ({ ...state, selectedWorkflow }),
+        SET_WORKFLOWS: workflows => ({ ...state, workflows }),
+        SET_SELECTED_WORKFLOW: selectedWorkflow => ({
+            ...state,
+            selectedWorkflow,
+            inputs: getWorkflowInputs(parseWorkflowDefinition(selectedWorkflow)) || [],
+        }),
         default: () => state
     });
\ No newline at end of file

diff --git a/src/views/run-process-panel/run-process-basic-form.tsx b/src/views/run-process-panel/run-process-basic-form.tsx
new file mode 100644 (file)
index 0000000..ef4a9cc
--- /dev/null
+++ b/src/views/run-process-panel/run-process-basic-form.tsx
@@ -0,0 +1,35 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { reduxForm, Field } from 'redux-form';
+import { Grid } from '@material-ui/core';
+import { TextField } from '~/components/text-field/text-field';
+
+export const RUN_PROCESS_BASIC_FORM = 'runProcessBasicForm';
+
+export interface RunProcessBasicFormData {
+    name: string;
+    description: string;
+}
+export const RunProcessBasicForm =
+    reduxForm<RunProcessBasicFormData>({
+        form: RUN_PROCESS_BASIC_FORM
+    })(() =>
+        <form>
+            <Grid container spacing={16}>
+                <Grid item xs={12} md={6}>
+                    <Field
+                        name='name'
+                        component={TextField}
+                        label="Enter a new name for run process" />
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <Field
+                        name='description'
+                        component={TextField}
+                        label="Enter a description for run process" />
+                </Grid>
+            </Grid>
+        </form>);

diff --git a/src/views/run-process-panel/run-process-inputs-form.tsx b/src/views/run-process-panel/run-process-inputs-form.tsx
index e92b1e47f35f21cfe747a4daef9d5738d8e7fecd..5c3818879a5aede420b33f17df9f0b8756659a9c 100644 (file)
--- a/src/views/run-process-panel/run-process-inputs-form.tsx
+++ b/src/views/run-process-panel/run-process-inputs-form.tsx
@@ -15,7 +15,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Grid, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
 
-const RUN_PROCESS_INPUTS_FORM = 'runProcessInputsForm';
+export const RUN_PROCESS_INPUTS_FORM = 'runProcessInputsForm';
 
 export interface RunProcessInputFormProps {
     inputs: CommandInputParameter[];
@@ -32,7 +32,7 @@ export const RunProcessInputsForm = compose(
     }))(
         (props: InjectedFormProps & RunProcessInputFormProps) =>
             <form>
-                <Grid container>
+                <Grid container spacing={16}>
                     {props.inputs.map(input =>
                         <InputItem input={input} key={input.id} />)}
                 </Grid>
@@ -48,7 +48,7 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
 
 const InputItem = withStyles(styles)(
     (props: WithStyles<CssRules> & { input: CommandInputParameter }) =>
-        <Grid item xs={12} className={props.classes.inputItem}>
+        <Grid item xs={12} md={6} className={props.classes.inputItem}>
             {getInputComponent(props.input)}
         </Grid>);
 

diff --git a/src/views/run-process-panel/run-process-panel-root.tsx b/src/views/run-process-panel/run-process-panel-root.tsx
index f399d96481ced4f8f47bc456727f3b1d2ba3ede1..da21d704d766e48577ecc96f9eb40d4b495998a2 100644 (file)
--- a/src/views/run-process-panel/run-process-panel-root.tsx
+++ b/src/views/run-process-panel/run-process-panel-root.tsx
@@ -5,33 +5,36 @@
 import * as React from 'react';
 import { Stepper, Step, StepLabel, StepContent } from '@material-ui/core';
 import { RunProcessFirstStepDataProps, RunProcessFirstStepActionProps, RunProcessFirstStep } from '~/views/run-process-panel/run-process-first-step';
-import { RunProcessSecondStepDataProps, RunProcessSecondStepActionProps, RunProcessSecondStepForm } from '~/views/run-process-panel/run-process-second-step';
+import { RunProcessSecondStepForm } from './run-process-second-step';
 
 export type RunProcessPanelRootDataProps = {
     currentStep: number;
-} & RunProcessFirstStepDataProps & RunProcessSecondStepDataProps;
+} & RunProcessFirstStepDataProps;
 
-export type RunProcessPanelRootActionProps = RunProcessFirstStepActionProps & RunProcessSecondStepActionProps;
+export type RunProcessPanelRootActionProps = RunProcessFirstStepActionProps & {
+    runProcess: () => void;
+};
 
 type RunProcessPanelRootProps = RunProcessPanelRootDataProps & RunProcessPanelRootActionProps;
 
-export const RunProcessPanelRoot = ({ currentStep, onSetStep, onRunProcess, onSetWorkflow, workflows, selectedWorkflow }: RunProcessPanelRootProps) =>
+export const RunProcessPanelRoot = ({ runProcess, currentStep, onSetStep, onSetWorkflow, workflows, selectedWorkflow }: RunProcessPanelRootProps) =>
     <Stepper activeStep={currentStep} orientation="vertical" elevation={2}>
         <Step>
             <StepLabel>Choose a workflow</StepLabel>
             <StepContent>
-                <RunProcessFirstStep 
+                <RunProcessFirstStep
                     workflows={workflows}
                     selectedWorkflow={selectedWorkflow}
-                    onSetStep={onSetStep} 
+                    onSetStep={onSetStep}
                     onSetWorkflow={onSetWorkflow} />
             </StepContent>
         </Step>
         <Step>
             <StepLabel>Select inputs</StepLabel>
             <StepContent>
-                <RunProcessSecondStepForm />
-                {/* <RunProcessSecondStep onSetStep={onSetStep} onRunProcess={onRunProcess} /> */}
+                <RunProcessSecondStepForm
+                    goBack={() => onSetStep(0)}
+                    runProcess={runProcess} />
             </StepContent>
         </Step>
     </Stepper>;
\ No newline at end of file

diff --git a/src/views/run-process-panel/run-process-panel.tsx b/src/views/run-process-panel/run-process-panel.tsx
index f284ac72106ea24b216cd9c9c7970bc96b317f0f..dd7b08509e2bbf8ab2a252e8cc1d5860730b2dff 100644 (file)
--- a/src/views/run-process-panel/run-process-panel.tsx
+++ b/src/views/run-process-panel/run-process-panel.tsx
@@ -24,8 +24,8 @@ const mapDispatchToProps = (dispatch: Dispatch): RunProcessPanelRootActionProps
     onSetWorkflow: (workflow: WorkflowResource) => {
         dispatch<any>(setWorkflow(workflow));
     },
-    onRunProcess: () => {
-        
+    runProcess: () => {
+        console.log('run process!');
     }
 });
 

diff --git a/src/views/run-process-panel/run-process-second-step.tsx b/src/views/run-process-panel/run-process-second-step.tsx
index 6582710c098141e2db700860407b3c31e53d55f3..89092c8c1d63f023f39f85a6ae9384de96f6a5fe 100644 (file)
--- a/src/views/run-process-panel/run-process-second-step.tsx
+++ b/src/views/run-process-panel/run-process-second-step.tsx
@@ -3,60 +3,45 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { withStyles, WithStyles, StyleRulesCallback, Grid, Button } from '@material-ui/core';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { Field, reduxForm, InjectedFormProps } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
-import { RunProcessSecondStepDataFormProps, RUN_PROCESS_SECOND_STEP_FORM_NAME } from '~/store/run-process-panel/run-process-panel-actions';
-
-type CssRules = 'root';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-
-    }
-});
-
-export interface RunProcessSecondStepDataProps {
-
+import { Grid, Button } from '@material-ui/core';
+import { RunProcessBasicForm, RUN_PROCESS_BASIC_FORM } from './run-process-basic-form';
+import { RunProcessInputsForm } from '~/views/run-process-panel/run-process-inputs-form';
+import { CommandInputParameter } from '~/models/workflow';
+import { connect } from 'react-redux';
+import { RootState } from '~/store/store';
+import { isValid } from 'redux-form';
+import { RUN_PROCESS_INPUTS_FORM } from './run-process-inputs-form';
+
+export interface RunProcessSecondStepFormDataProps {
+    inputs: CommandInputParameter[];
+    valid: boolean;
 }
 
-export interface RunProcessSecondStepActionProps {
-    onSetStep: (step: number) => void;
-    onRunProcess: (data: RunProcessSecondStepDataFormProps) => void;
+export interface RunProcessSecondStepFormActionProps {
+    goBack: () => void;
+    runProcess: () => void;
 }
 
-type RunProcessSecondStepProps = RunProcessSecondStepDataProps 
-    & RunProcessSecondStepActionProps 
-    & WithStyles<CssRules> 
-    & InjectedFormProps<RunProcessSecondStepDataFormProps>;
+const mapStateToProps = (state: RootState): RunProcessSecondStepFormDataProps => ({
+    inputs: state.runProcessPanel.inputs,
+    valid: isValid(RUN_PROCESS_BASIC_FORM)(state.form) &&
+        isValid(RUN_PROCESS_INPUTS_FORM)(state.form),
+});
 
-const RunProcessSecondStep = withStyles(styles)(
-    ({ onSetStep, classes }: RunProcessSecondStepProps) =>
+export type RunProcessSecondStepFormProps = RunProcessSecondStepFormDataProps & RunProcessSecondStepFormActionProps;
+export const RunProcessSecondStepForm = connect(mapStateToProps)(
+    ({ inputs, valid, goBack, runProcess }: RunProcessSecondStepFormProps) =>
         <Grid container spacing={16}>
             <Grid item xs={12}>
-                <form>
-                    <Field
-                        name='name'
-                        component={TextField}
-                        label="Enter a new name for run process" />
-                    <Field
-                        name='description'
-                        component={TextField}
-                        label="Enter a description for run process" />
-                </form>
+                <RunProcessBasicForm />
+                <RunProcessInputsForm inputs={inputs} />
             </Grid>
             <Grid item xs={12}>
-                <Button color="primary" onClick={() => onSetStep(0)}>
+                <Button color="primary" onClick={goBack}>
                     Back
                 </Button>
-                <Button variant="contained" color="primary">
+                <Button disabled={!valid} variant="contained" color="primary" onClick={runProcess}>
                     Run Process
                 </Button>
             </Grid>
-        </Grid>
-);
-
-export const RunProcessSecondStepForm = reduxForm<RunProcessSecondStepDataFormProps>({
-    form: RUN_PROCESS_SECOND_STEP_FORM_NAME
-})(RunProcessSecondStep);
\ No newline at end of file
+        </Grid>);