14219-missing-tooltip-for-filters-icon

Feature #14219

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/data-table-filters/data-table-filters.tsx b/src/components/data-table-filters/data-table-filters.tsx
index d288a5a3dbfc8997cee987598cfb767048e748f9..b8a6e834869eb5a3e59aa1125b5e8a867d8fe5e6 100644 (file)
--- a/src/components/data-table-filters/data-table-filters.tsx
+++ b/src/components/data-table-filters/data-table-filters.tsx
@@ -18,7 +18,8 @@ import {
     Card,
     CardActions,
     Typography,
-    CardContent
+    CardContent,
+    Tooltip
 } from "@material-ui/core";
 import * as classnames from "classnames";
 import { DefaultTransformOrigin } from "../popover/helpers";
@@ -88,16 +89,18 @@ export const DataTableFilters = withStyles(styles)(
             const { name, classes, children } = this.props;
             const isActive = this.state.filters.some(f => f.selected);
             return <>
-                <ButtonBase
-                    className={classnames([classes.root, { [classes.active]: isActive }])}
-                    component="span"
-                    onClick={this.open}
-                    disableRipple>
-                    {children}
-                    <i className={classnames(["fas fa-filter", classes.icon])}
-                        data-fa-transform="shrink-3"
-                        ref={this.icon} />
-                </ButtonBase>
+                <Tooltip title='Filters'>
+                    <ButtonBase
+                        className={classnames([classes.root, { [classes.active]: isActive }])}
+                        component="span"
+                        onClick={this.open}
+                        disableRipple>
+                        {children}
+                        <i className={classnames(["fas fa-filter", classes.icon])}
+                            data-fa-transform="shrink-3"
+                            ref={this.icon} />
+                    </ButtonBase>
+                </Tooltip>
                 <Popover
                     anchorEl={this.state.anchorEl}
                     open={!!this.state.anchorEl}

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index c0668b8291fa3e7b89010ef0638cb8f2c16bafdd..06a56172ffb52077d48e6c05734b5a627dd4b697 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -64,8 +64,11 @@ export const DetailsIcon: IconType = (props) => <Info {...props} />;
 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
 export const FavoriteIcon: IconType = (props) => <Star {...props} />;
 export const HelpIcon: IconType = (props) => <Help {...props} />;
+export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
+export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
 export const InputIcon: IconType = (props) => <InsertDriveFile {...props} />;
 export const LogIcon: IconType = (props) => <SettingsEthernet {...props} />;
+export const MailIcon: IconType = (props) => <Mail {...props} />;
 export const MoreOptionsIcon: IconType = (props) => <MoreVert {...props} />;
 export const MoveToIcon: IconType = (props) => <Input {...props} />;
 export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
@@ -92,6 +95,3 @@ export const TrashIcon: IconType = (props) => <Delete {...props} />;
 export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 export const WorkflowIcon: IconType = (props) => <Code {...props} />;
-export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
-export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
-export const MailIcon: IconType = (props) => <Mail {...props} />;

diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index de9e7de5261c299870cc16d4618971869dfc273b..ab25e1379ddee64f55a016bfeff8680754d1d3be 100644 (file)
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -3,7 +3,7 @@
 // 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';
 
 type CssRules = 'container' | 'input' | 'button';
@@ -58,7 +58,7 @@ export const SearchBar = withStyles(styles)(
         timeout: number;
 
         render() {
-            const {classes} = this.props;
+            const { classes } = this.props;
             return <Paper className={classes.container}>
                 <form onSubmit={this.handleSubmit}>
                     <input
@@ -68,19 +68,21 @@ export const SearchBar = withStyles(styles)(
                         value={this.state.value}
                     />
                     <IconButton className={classes.button}>
-                        <SearchIcon/>
+                        <Tooltip title='Search'>
+                            <SearchIcon />
+                        </Tooltip>
                     </IconButton>
                 </form>
             </Paper>;
         }
 
         componentDidMount() {
-            this.setState({value: this.props.value});
+            this.setState({ value: this.props.value });
         }
 
         componentWillReceiveProps(nextProps: SearchBarProps) {
             if (nextProps.value !== this.props.value) {
-                this.setState({value: nextProps.value});
+                this.setState({ value: nextProps.value });
             }
         }
 
@@ -96,7 +98,7 @@ export const SearchBar = withStyles(styles)(
 
         handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
             clearTimeout(this.timeout);
-            this.setState({value: event.target.value});
+            this.setState({ value: event.target.value });
             this.timeout = window.setTimeout(
                 () => this.props.onSearch(this.state.value),
                 this.props.debounce || DEFAULT_SEARCH_DEBOUNCE

diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index dc02cd3d13ba13bedd50daf01963bb5a76d98f80..da2f3a9b6ab07dccd3691a5e0396ca60ee7f16f8 100644 (file)
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { IconButton, StyleRulesCallback, withStyles, WithStyles, FormControl, InputLabel, Input, InputAdornment } from '@material-ui/core';
+import { IconButton, StyleRulesCallback, withStyles, WithStyles, FormControl, InputLabel, Input, InputAdornment, Tooltip } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
 type CssRules = 'container' | 'input' | 'button';
@@ -70,10 +70,12 @@ export const SearchInput = withStyles(styles)(
                             <InputAdornment position="end">
                                 <IconButton
                                     onClick={this.handleSubmit}>
-                                    <SearchIcon/>
+                                    <Tooltip title='Search'>
+                                        <SearchIcon />
+                                    </Tooltip>
                                 </IconButton>
                             </InputAdornment>
-                        }/>
+                        } />
                 </FormControl>
             </form>;
         }