// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { StyleRulesCallback, withStyles, Grid, Button, WithStyles, List, ListItem, ListItemText, ListItemIcon, Tabs, Tab } from '@material-ui/core';
+import { StyleRulesCallback, withStyles, Grid, Button, WithStyles, List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core';
import { ArvadosTheme } from '~/common/custom-theme';
import { WorkflowResource } from '~/models/workflow';
import { WorkflowIcon } from '~/components/icon/icon';
-import { WorkflowDetailsCard } from '../workflow-panel/workflow-description-card';
+import { WorkflowDetailsCard } from '~/views/workflow-panel/workflow-description-card';
+import { SearchInput } from '~/components/search-input/search-input';
-type CssRules = 'rightGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon';
+type CssRules = 'root' | 'searchGrid' | 'workflowDetailsGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- rightGrid: {
+ root: {
+ alignSelf: 'flex-start'
+ },
+ searchGrid: {
+ marginBottom: theme.spacing.unit * 2
+ },
+ workflowDetailsGrid: {
borderLeft: `1px solid ${theme.palette.grey["300"]}`
},
list: {
}
export interface RunProcessFirstStepActionProps {
+ onSearch: (term: string) => void;
onSetStep: (step: number) => void;
onSetWorkflow: (workflow: WorkflowResource) => void;
}
type RunProcessFirstStepProps = RunProcessFirstStepDataProps & RunProcessFirstStepActionProps & WithStyles<CssRules>;
export const RunProcessFirstStep = withStyles(styles)(
- ({ onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: RunProcessFirstStepProps) =>
+ ({ onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: RunProcessFirstStepProps) =>
<Grid container spacing={16}>
- <Grid container item xs={6}>
- <Grid item xs={12}>
- {/* TODO: add filters */}
+ <Grid container item xs={6} className={classes.root}>
+ <Grid item xs={12} className={classes.searchGrid}>
+ <SearchInput value='' onSearch={onSearch} />
</Grid>
<Grid item xs={12}>
<List className={classes.list}>
</List>
</Grid>
</Grid>
- <Grid item xs={6} className={classes.rightGrid}>
+ <Grid item xs={6} className={classes.workflowDetailsGrid}>
<WorkflowDetailsCard workflow={selectedWorkflow}/>
</Grid>
<Grid item xs={12}>