services/workbench2/src/views/run-process-panel/run-process-first-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 { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { Grid, Button, List, ListItem, ListItemText, ListItemIcon } from '@mui/material';
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import { WorkflowResource } from 'models/workflow';
  12 import { WorkflowIcon } from 'components/icon/icon';
  13 import { WorkflowDetailsCard } from 'views/workflow-panel/workflow-description-card';
  14 import { SearchInput } from 'components/search-input/search-input';
  15
  16 type CssRules = 'root' | 'searchGrid' | 'workflowDetailsGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon';
  17
  18 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  19     root: {
  20         alignSelf: 'flex-start'
  21     },
  22     searchGrid: {
  23         marginBottom: theme.spacing(2)
  24     },
  25     workflowDetailsGrid: {
  26         borderLeft: `1px solid ${theme.palette.grey["300"]}`
  27     },
  28     list: {
  29         maxHeight: 300,
  30         position: 'relative',
  31         overflow: 'auto'
  32     },
  33     listItem: {
  34         padding: theme.spacing(1),
  35     },
  36     itemSelected: {
  37         backgroundColor: 'rgba(3, 190, 171, 0.3) !important'
  38     },
  39     listItemText: {
  40         fontSize: '0.875rem'
  41     },
  42     listItemIcon: {
  43         color: theme.customs.colors.red900
  44     }
  45 });
  46
  47 export interface RunProcessFirstStepDataProps {
  48     workflows: WorkflowResource[];
  49     selectedWorkflow: WorkflowResource | undefined;
  50 }
  51
  52 export interface RunProcessFirstStepActionProps {
  53     onSearch: (term: string) => void;
  54     onSetStep: (step: number) => void;
  55     onSetWorkflow: (workflow: WorkflowResource) => void;
  56 }
  57
  58 type RunProcessFirstStepProps = RunProcessFirstStepDataProps & RunProcessFirstStepActionProps & WithStyles<CssRules>;
  59
  60 export const RunProcessFirstStep = withStyles(styles)(
  61     ({ onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: RunProcessFirstStepProps) =>
  62         <Grid container spacing={2}>
  63             <Grid container item xs={6} className={classes.root}>
  64                 <Grid item xs={12} className={classes.searchGrid}>
  65                     <SearchInput selfClearProp={JSON.stringify(selectedWorkflow)} value='' onSearch={onSearch} />
  66                 </Grid>
  67                 <Grid item xs={12}>
  68                     <List className={classes.list}>
  69                         {workflows.map(workflow => (
  70                             <ListItem key={workflow.uuid} button
  71                                 classes={{ root: classes.listItem, selected: classes.itemSelected}}
  72                                 selected={selectedWorkflow && (selectedWorkflow.uuid === workflow.uuid)}
  73                                 onClick={() => onSetWorkflow(workflow)}>
  74                                 <ListItemIcon>
  75                                     <WorkflowIcon className={classes.listItemIcon}/>
  76                                 </ListItemIcon>
  77                                 <ListItemText className={classes.listItemText} primary={workflow.name} disableTypography={true} />
  78                             </ListItem>
  79                         ))}
  80                     </List>
  81                 </Grid>
  82             </Grid>
  83             <Grid item xs={6} className={classes.workflowDetailsGrid}>
  84                 <WorkflowDetailsCard workflow={selectedWorkflow}/>
  85             </Grid>
  86             <Grid item xs={12}>
  87                 <Button variant="contained" color="primary"
  88                     data-cy="run-process-next-button"
  89                     disabled={!(!!selectedWorkflow)}
  90                     onClick={() => onSetStep(1)}>
  91                     Next
  92                 </Button>
  93             </Grid>
  94         </Grid>
  95 );