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