1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
13 type CssRules = 'root' | 'searchGrid' | 'workflowDetailsGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon';
15 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
17 alignSelf: 'flex-start'
20 marginBottom: theme.spacing.unit * 2
22 workflowDetailsGrid: {
23 borderLeft: `1px solid ${theme.palette.grey["300"]}`
31 padding: theme.spacing.unit,
34 backgroundColor: 'rgba(3, 190, 171, 0.3) !important'
40 color: theme.customs.colors.red900
44 export interface RunProcessFirstStepDataProps {
45 workflows: WorkflowResource[];
46 selectedWorkflow: WorkflowResource | undefined;
49 export interface RunProcessFirstStepActionProps {
50 onSearch: (term: string) => void;
51 onSetStep: (step: number) => void;
52 onSetWorkflow: (workflow: WorkflowResource) => void;
55 type RunProcessFirstStepProps = RunProcessFirstStepDataProps & RunProcessFirstStepActionProps & WithStyles<CssRules>;
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} />
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)}>
72 <WorkflowIcon className={classes.listItemIcon}/>
74 <ListItemText className={classes.listItemText} primary={workflow.name} disableTypography={true} />
80 <Grid item xs={6} className={classes.workflowDetailsGrid}>
81 <WorkflowDetailsCard workflow={selectedWorkflow}/>
84 <Button variant="contained" color="primary"
85 disabled={!(!!selectedWorkflow)}
86 onClick={() => onSetStep(1)}>