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