X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/7299f093d4325802cbabf89c0b4861768b19b472..23f12738ed71ef736cb9c85a530cb4795c760d8f:/src/components/search-bar/search-bar.tsx

diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index 366d7056..ebb7f5e9 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -10,22 +10,45 @@ import {
     withStyles,
     WithStyles,
     Tooltip,
-    InputAdornment, Input
+    InputAdornment, Input,
+    List, ListItem, ListItemText, ListItemSecondaryAction
 } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
+import { RemoveIcon } from '~/components/icon/icon';
 
-type CssRules = 'container' | 'input';
+type CssRules = 'container' | 'input' | 'advanced' | 'searchQueryList' | 'list' | 'searchView' | 'searchBar';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
     return {
         container: {
             position: 'relative',
-            width: '100%'
+            width: '100%',
+            borderRadius: '0px'
         },
         input: {
             border: 'none',
-            borderRadius: theme.spacing.unit / 4,
-            padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`
+            padding: `0px ${theme.spacing.unit}px`
+        },
+        advanced: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            paddingRight: theme.spacing.unit * 2,
+            paddingBottom: theme.spacing.unit,
+            fontSize: '14px'
+        },
+        searchQueryList: {
+            padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
+            background: '#f2f2f2',
+            fontSize: '14px'
+        },
+        list: {
+            padding: '0px'
+        },
+        searchView: {
+            color: theme.palette.common.black
+        },
+        searchBar: {
+            height: '30px'
         }
     };
 };
@@ -43,6 +66,7 @@ type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<Css
 
 interface SearchBarState {
     value: string;
+    isSearchViewOpen: boolean;
 }
 
 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
@@ -50,22 +74,25 @@ export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 export const SearchBar = withStyles(styles)(
     class extends React.Component<SearchBarProps> {
         state: SearchBarState = {
-            value: ""
+            value: "",
+            isSearchViewOpen: false
         };
 
         timeout: number;
 
         render() {
             const { classes } = this.props;
-            return <Paper className={classes.container}>
-                <form onSubmit={this.handleSubmit}>
+            return <Paper className={classes.container} onBlur={this.closeSearchView}>
+                <form onSubmit={this.handleSubmit} className={classes.searchBar}>
                     <Input
+                        autoComplete={''}
                         className={classes.input}
                         onChange={this.handleChange}
                         placeholder="Search"
                         value={this.state.value}
                         fullWidth={true}
                         disableUnderline={true}
+                        onFocus={this.openSearchView}
                         endAdornment={
                             <InputAdornment position="end">
                                 <Tooltip title='Search'>
@@ -74,7 +101,20 @@ export const SearchBar = withStyles(styles)(
                                     </IconButton>
                                 </Tooltip>
                             </InputAdornment>
-                        }/>
+                        } />
+                    {this.state.isSearchViewOpen && <Paper className={classes.searchView}>
+                        <div className={classes.searchQueryList}>Saved search queries</div>
+                        <List component="nav" className={classes.list}>
+                            {this.renderSavedQueries('Test')}
+                            {this.renderSavedQueries('Demo')}
+                        </List>
+                        <div className={classes.searchQueryList}>Recent search queries</div>
+                        <List component="nav" className={classes.list}>
+                            {this.renderRecentQueries('cos')}
+                            {this.renderRecentQueries('testtest')}
+                        </List>
+                        <div className={classes.advanced}>Advanced search</div>
+                    </Paper>}
                 </form>
             </Paper>;
         }
@@ -93,6 +133,31 @@ export const SearchBar = withStyles(styles)(
             clearTimeout(this.timeout);
         }
 
+        closeSearchView = () =>
+            this.setState({ isSearchViewOpen: false })
+
+
+        openSearchView = () =>
+            this.setState({ isSearchViewOpen: true })
+
+
+        renderRecentQueries = (text: string) =>
+            <ListItem button>
+                <ListItemText secondary={text} />
+            </ListItem>
+
+        renderSavedQueries = (text: string) =>
+            <ListItem button>
+                <ListItemText secondary={text} />
+                <ListItemSecondaryAction>
+                    <Tooltip title="Remove">
+                        <IconButton aria-label="Remove">
+                            <RemoveIcon />
+                        </IconButton>
+                    </Tooltip>
+                </ListItemSecondaryAction>
+            </ListItem>
+
         handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
             event.preventDefault();
             clearTimeout(this.timeout);