16086: Adds default value on string array validator.
[arvados-workbench2.git] / 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                     disabled={!(!!selectedWorkflow)}
86                     onClick={() => onSetStep(1)}>
87                     Next
88                 </Button>
89             </Grid>
90         </Grid>
91 );