services/workbench2/src/views/run-process-panel/run-process-panel-root.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 { Stepper, Step, StepLabel, StepContent, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
   7 import { RunProcessFirstStepDataProps, RunProcessFirstStepActionProps, RunProcessFirstStep } from 'views/run-process-panel/run-process-first-step';
   8 import { RunProcessSecondStepForm } from './run-process-second-step';
   9
  10 export type RunProcessPanelRootDataProps = {
  11     currentStep: number;
  12 } & RunProcessFirstStepDataProps;
  13
  14 export type RunProcessPanelRootActionProps = RunProcessFirstStepActionProps & {
  15     runProcess: () => void;
  16 };
  17
  18 type RunProcessPanelRootProps = RunProcessPanelRootDataProps & RunProcessPanelRootActionProps;
  19
  20 type CssRules = 'stepper';
  21
  22 const styles: StyleRulesCallback<CssRules> = theme => ({
  23     stepper: {
  24         overflow: "scroll",
  25     }
  26 });
  27
  28 export const RunProcessPanelRoot = withStyles(styles)(
  29     ({ runProcess, currentStep, onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: WithStyles<CssRules> & RunProcessPanelRootProps) =>
  30         <Stepper activeStep={currentStep} orientation="vertical" elevation={2} className={classes.stepper}>
  31             <Step>
  32                 <StepLabel>Choose a workflow</StepLabel>
  33                 <StepContent>
  34                     <RunProcessFirstStep
  35                         workflows={workflows}
  36                         selectedWorkflow={selectedWorkflow}
  37                         onSearch={onSearch}
  38                         onSetStep={onSetStep}
  39                         onSetWorkflow={onSetWorkflow} />
  40                 </StepContent>
  41             </Step>
  42             <Step>
  43                 <StepLabel>Select inputs</StepLabel>
  44                 <StepContent>
  45                     <RunProcessSecondStepForm
  46                         goBack={() => onSetStep(0)}
  47                         runProcess={runProcess} />
  48                 </StepContent>
  49             </Step>
  50         </Stepper>);