X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/77af50a44c54ef12a1d7abb59a0e4cba4284e77e..89efe3a344e0850cf7e401142d2a838cbc825ffb:/src/components/column-selector/column-selector.tsx

diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx
index b5dd43b8..210dc5ae 100644
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -3,25 +3,38 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
+import { WithStyles, StyleRulesCallback, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem, Tooltip } from '@material-ui/core';
 import MenuIcon from "@material-ui/icons/Menu";
-import { DataColumn, isColumnConfigurable } from '../data-table/data-column';
-import Popover from "../popover/popover";
+import { DataColumn } from '../data-table/data-column';
+import { Popover } from "../popover/popover";
 import { IconButtonProps } from '@material-ui/core/IconButton';
 import { DataColumns } from '../data-table/data-table';
+import { ArvadosTheme } from "~/common/custom-theme";
 
-export interface ColumnSelectorProps {
+interface ColumnSelectorDataProps {
     columns: DataColumns<any>;
     onColumnToggle: (column: DataColumn<any>) => void;
 }
 
-const ColumnSelector: React.SFC<ColumnSelectorProps & WithStyles<CssRules>> = ({ columns, onColumnToggle, classes }) =>
+type CssRules = "checkbox";
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    checkbox: {
+        width: 24,
+        height: 24
+    }
+});
+
+export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
+
+export const ColumnSelector = withStyles(styles)(
+    ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
     <Popover triggerComponent={ColumnSelectorTrigger}>
         <Paper>
             <List dense>
                 {columns
-                    .filter(isColumnConfigurable)
-                    .map((column, index) => (
+                    .filter(column => column.configurable)
+                    .map((column, index) =>
                         <ListItem
                             button
                             key={index}
@@ -35,23 +48,15 @@ const ColumnSelector: React.SFC<ColumnSelectorProps & WithStyles<CssRules>> = ({
                                 {column.name}
                             </ListItemText>
                         </ListItem>
-                    ))}
+                    )}
             </List>
         </Paper>
-    </Popover>;
+    </Popover>
+);
 
-export const ColumnSelectorTrigger: React.SFC<IconButtonProps> = (props) =>
+export const ColumnSelectorTrigger = (props: IconButtonProps) =>
     <IconButton {...props}>
-        <MenuIcon />
+        <Tooltip title="Filters">
+            <MenuIcon />
+        </Tooltip>
     </IconButton>;
-
-type CssRules = "checkbox";
-
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
-    checkbox: {
-        width: 24,
-        height: 24
-    }
-});
-
-export default withStyles(styles)(ColumnSelector);