Merge branch '17579-Clear-table-filter-when-changing-the-project' into main

[arvados-workbench2.git] / src / views / run-process-panel / run-process-first-step.tsx

diff --git a/src/views/run-process-panel/run-process-first-step.tsx b/src/views/run-process-panel/run-process-first-step.tsx
index ff7b2c3d16300462cc8e799fe9390bf94661dd7b..ed6d5640ed44c068879222e7d72a5683c6645d14 100644 (file)
--- a/src/views/run-process-panel/run-process-first-step.tsx
+++ b/src/views/run-process-panel/run-process-first-step.tsx
@@ -2,17 +2,24 @@
 //
 // 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 { 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 React from 'react';
+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 '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: {
@@ -40,6 +47,7 @@ export interface RunProcessFirstStepDataProps {
 }
 
 export interface RunProcessFirstStepActionProps {
+    onSearch: (term: string) => void;
     onSetStep: (step: number) => void;
     onSetWorkflow: (workflow: WorkflowResource) => void;
 }
@@ -47,11 +55,11 @@ export interface RunProcessFirstStepActionProps {
 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 selfClearProp={JSON.stringify(selectedWorkflow)} value='' onSearch={onSearch} />
                 </Grid>
                 <Grid item xs={12}>
                     <List className={classes.list}>
@@ -69,11 +77,12 @@ export const RunProcessFirstStep = withStyles(styles)(
                     </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}>
-                <Button variant="contained" color="primary" 
+                <Button variant="contained" color="primary"
+                    data-cy="run-process-next-button"
                     disabled={!(!!selectedWorkflow)}
                     onClick={() => onSetStep(1)}>
                     Next