X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/847ac07f82a1432d6472390aab5e8c2198d425a5..46c5d0d6ab1e39af6a8c12a7d620e0b03cde8a53:/src/views/run-process-panel/run-process-panel-root.tsx

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 61a0fc08..9dd5aa3f 100644
--- a/src/views/run-process-panel/run-process-panel-root.tsx
+++ b/src/views/run-process-panel/run-process-panel-root.tsx
@@ -2,38 +2,49 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { Stepper, Step, StepLabel, StepContent, Button } from '@material-ui/core';
+import React from 'react';
+import { Stepper, Step, StepLabel, StepContent, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
+import { RunProcessFirstStepDataProps, RunProcessFirstStepActionProps, RunProcessFirstStep } from 'views/run-process-panel/run-process-first-step';
+import { RunProcessSecondStepForm } from './run-process-second-step';
 
-export interface RunProcessPanelRootDataProps {
+export type RunProcessPanelRootDataProps = {
     currentStep: number;
-}
+} & RunProcessFirstStepDataProps;
 
-export interface RunProcessPanelRootActionProps {
-    onSetStep: (step: number) => void;
-}
+export type RunProcessPanelRootActionProps = RunProcessFirstStepActionProps & {
+    runProcess: () => void;
+};
 
 type RunProcessPanelRootProps = RunProcessPanelRootDataProps & RunProcessPanelRootActionProps;
 
-export const RunProcessPanelRoot = ({ currentStep, onSetStep, ...props }: RunProcessPanelRootProps) =>
-    <Stepper activeStep={currentStep} orientation="vertical" elevation={2}>
-        <Step>
-            <StepLabel>Choose a workflow</StepLabel>
-            <StepContent>
-                <Button variant="contained" color="primary" onClick={() => onSetStep(1)}>
-                    Next
-                </Button>
-            </StepContent>
-        </Step>
-        <Step>
-            <StepLabel>Select inputs</StepLabel>
-            <StepContent>
-                <Button color="primary" onClick={() => onSetStep(0)}>
-                    Back
-                </Button>
-                <Button variant="contained" color="primary">
-                    Run Process
-                </Button>
-            </StepContent>
-        </Step>
-    </Stepper>;
\ No newline at end of file
+type CssRules = 'stepper';
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+    stepper: {
+        overflow: "scroll",
+    }
+});
+
+export const RunProcessPanelRoot = withStyles(styles)(
+    ({ runProcess, currentStep, onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: WithStyles<CssRules> & RunProcessPanelRootProps) =>
+        <Stepper activeStep={currentStep} orientation="vertical" elevation={2} className={classes.stepper}>
+            <Step>
+                <StepLabel>Choose a workflow</StepLabel>
+                <StepContent>
+                    <RunProcessFirstStep
+                        workflows={workflows}
+                        selectedWorkflow={selectedWorkflow}
+                        onSearch={onSearch}
+                        onSetStep={onSetStep}
+                        onSetWorkflow={onSetWorkflow} />
+                </StepContent>
+            </Step>
+            <Step>
+                <StepLabel>Select inputs</StepLabel>
+                <StepContent>
+                    <RunProcessSecondStepForm
+                        goBack={() => onSetStep(0)}
+                        runProcess={runProcess} />
+                </StepContent>
+            </Step>
+        </Stepper>);