X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/616395646c46f90c46ad97bd9a335ab326e5a040..4b75b09d1c75d6796e75efc55e7b06917834b63e:/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..5fbef6b6 100644
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -2,56 +2,62 @@
 //
 // 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 React from 'react';
+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;
+    className?: string;
 }
 
-const ColumnSelector: React.SFC<ColumnSelectorProps & WithStyles<CssRules>> = ({ columns, onColumnToggle, classes }) =>
-    <Popover triggerComponent={ColumnSelectorTrigger}>
-        <Paper>
-            <List dense>
-                {columns
-                    .filter(isColumnConfigurable)
-                    .map((column, index) => (
-                        <ListItem
-                            button
-                            key={index}
-                            onClick={() => onColumnToggle(column)}>
-                            <Checkbox
-                                disableRipple
-                                color="primary"
-                                checked={column.selected}
-                                className={classes.checkbox} />
-                            <ListItemText>
-                                {column.name}
-                            </ListItemText>
-                        </ListItem>
-                    ))}
-            </List>
-        </Paper>
-    </Popover>;
-
-export const ColumnSelectorTrigger: React.SFC<IconButtonProps> = (props) =>
-    <IconButton {...props}>
-        <MenuIcon />
-    </IconButton>;
-
 type CssRules = "checkbox";
 
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     checkbox: {
         width: 24,
         height: 24
     }
 });
 
-export default withStyles(styles)(ColumnSelector);
+export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
+
+export const ColumnSelector = withStyles(styles)(
+    ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
+        <Popover triggerComponent={ColumnSelectorTrigger}>
+            <Paper>
+                <List dense>
+                    {columns
+                        .filter(column => column.configurable)
+                        .map((column, index) =>
+                            <ListItem
+                                button
+                                key={index}
+                                onClick={() => onColumnToggle(column)}>
+                                <Checkbox
+                                    disableRipple
+                                    color="primary"
+                                    checked={column.selected}
+                                    className={classes.checkbox} />
+                                <ListItemText>
+                                    {column.name}
+                                </ListItemText>
+                            </ListItem>
+                        )}
+                </List>
+            </Paper>
+        </Popover>
+);
+
+export const ColumnSelectorTrigger = (props: IconButtonProps) =>
+    <Tooltip disableFocusListener title="Select columns">
+        <IconButton {...props}>
+            <MenuIcon aria-label="Select columns" />
+        </IconButton>
+    </Tooltip>;