X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/1a9eb2261e6030ba78078e2a206bad27653f2475..c324b64f3b26e79b4640b6f0cf55671f1a261bca:/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 62c8cc3c..f01b5692 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -3,83 +3,9 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { IconButton, Paper, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
+import { IconButton, Paper, StyleRulesCallback, withStyles, WithStyles, Tooltip } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
-interface SearchBarDataProps {
-    value: string;
-}
-
-interface SearchBarActionProps {
-    onSearch: (value: string) => any;
-    debounce?: number;
-}
-
-type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
-
-interface SearchBarState {
-    value: string;
-}
-
-export const DEFAULT_SEARCH_DEBOUNCE = 1000;
-
-class SearchBar extends React.Component<SearchBarProps> {
-
-    state: SearchBarState = {
-        value: ""
-    };
-
-    timeout: number;
-
-    render() {
-        const { classes } = this.props;
-        return <Paper className={classes.container}>
-            <form onSubmit={this.handleSubmit}>
-                <input
-                    className={classes.input}
-                    onChange={this.handleChange}
-                    placeholder="Search"
-                    value={this.state.value}
-                />
-                <IconButton className={classes.button}>
-                    <SearchIcon />
-                </IconButton>
-            </form>
-        </Paper>;
-    }
-
-    componentDidMount() {
-        this.setState({value: this.props.value});
-    }
-
-    componentWillReceiveProps(nextProps: SearchBarProps) {
-        if (nextProps.value !== this.props.value) {
-            this.setState({ value: nextProps.value });
-        }
-    }
-
-    componentWillUnmount() {
-        clearTimeout(this.timeout);
-    }
-
-    handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-        clearTimeout(this.timeout);
-        this.props.onSearch(this.state.value);
-    }
-
-    handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        clearTimeout(this.timeout);
-        this.setState({ value: event.target.value });
-        this.timeout = window.setTimeout(
-            () => this.props.onSearch(this.state.value),
-            this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
-        );
-
-    }
-
-}
-
 type CssRules = 'container' | 'input' | 'button';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
@@ -106,4 +32,78 @@ const styles: StyleRulesCallback<CssRules> = theme => {
     };
 };
 
-export default withStyles(styles)(SearchBar);
\ No newline at end of file
+interface SearchBarDataProps {
+    value: string;
+}
+
+interface SearchBarActionProps {
+    onSearch: (value: string) => any;
+    debounce?: number;
+}
+
+type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
+
+interface SearchBarState {
+    value: string;
+}
+
+export const DEFAULT_SEARCH_DEBOUNCE = 1000;
+
+export const SearchBar = withStyles(styles)(
+    class extends React.Component<SearchBarProps> {
+        state: SearchBarState = {
+            value: ""
+        };
+
+        timeout: number;
+
+        render() {
+            const { classes } = this.props;
+            return <Paper className={classes.container}>
+                <form onSubmit={this.handleSubmit}>
+                    <input
+                        className={classes.input}
+                        onChange={this.handleChange}
+                        placeholder="Search"
+                        value={this.state.value}
+                    />
+                    <Tooltip title='Search'>
+                        <IconButton className={classes.button}>
+                            <SearchIcon />
+                        </IconButton>
+                    </Tooltip>
+                </form>
+            </Paper>;
+        }
+
+        componentDidMount() {
+            this.setState({ value: this.props.value });
+        }
+
+        componentWillReceiveProps(nextProps: SearchBarProps) {
+            if (nextProps.value !== this.props.value) {
+                this.setState({ value: nextProps.value });
+            }
+        }
+
+        componentWillUnmount() {
+            clearTimeout(this.timeout);
+        }
+
+        handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            clearTimeout(this.timeout);
+            this.props.onSearch(this.state.value);
+        }
+
+        handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            clearTimeout(this.timeout);
+            this.setState({ value: event.target.value });
+            this.timeout = window.setTimeout(
+                () => this.props.onSearch(this.state.value),
+                this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
+            );
+
+        }
+    }
+);