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, Tabs, Tab } 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 '../workflow-panel/workflow-description-card';
  11
  12 type CssRules = 'rightGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     rightGrid: {
  16         borderLeft: `1px solid ${theme.palette.grey["300"]}`
  17     },
  18     list: {
  19         maxHeight: 300,
  20         position: 'relative',
  21         overflow: 'auto'
  22     },
  23     listItem: {
  24         padding: theme.spacing.unit,
  25     },
  26     itemSelected: {
  27         backgroundColor: 'rgba(3, 190, 171, 0.3) !important'
  28     },
  29     listItemText: {
  30         fontSize: '0.875rem'
  31     },
  32     listItemIcon: {
  33         color: theme.customs.colors.red900
  34     }
  35 });
  36
  37 export interface RunProcessFirstStepDataProps {
  38     workflows: WorkflowResource[];
  39     selectedWorkflow: WorkflowResource | undefined;
  40 }
  41
  42 export interface RunProcessFirstStepActionProps {
  43     onSetStep: (step: number) => void;
  44     onSetWorkflow: (workflow: WorkflowResource) => void;
  45 }
  46
  47 type RunProcessFirstStepProps = RunProcessFirstStepDataProps & RunProcessFirstStepActionProps & WithStyles<CssRules>;
  48
  49 export const RunProcessFirstStep = withStyles(styles)(
  50     ({ onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: RunProcessFirstStepProps) =>
  51         <Grid container spacing={16}>
  52             <Grid container item xs={6}>
  53                 <Grid item xs={12}>
  54                     {/* TODO: add filters */}
  55                 </Grid>
  56                 <Grid item xs={12}>
  57                     <List className={classes.list}>
  58                         {workflows.map(workflow => (
  59                             <ListItem key={workflow.uuid} button
  60                                 classes={{ root: classes.listItem, selected: classes.itemSelected}}
  61                                 selected={selectedWorkflow && (selectedWorkflow.uuid === workflow.uuid)}
  62                                 onClick={() => onSetWorkflow(workflow)}>
  63                                 <ListItemIcon>
  64                                     <WorkflowIcon className={classes.listItemIcon}/>
  65                                 </ListItemIcon>
  66                                 <ListItemText className={classes.listItemText} primary={workflow.name} disableTypography={true} />
  67                             </ListItem>
  68                         ))}
  69                     </List>
  70                 </Grid>
  71             </Grid>
  72             <Grid item xs={6} className={classes.rightGrid}>
  73                 <WorkflowDetailsCard workflow={selectedWorkflow}/>
  74             </Grid>
  75             <Grid item xs={12}>
  76                 <Button variant="contained" color="primary"
  77                     disabled={!(!!selectedWorkflow)}
  78                     onClick={() => onSetStep(1)}>
  79                     Next
  80                 </Button>
  81             </Grid>
  82         </Grid>
  83 );