Merge branch '19988-data-explorer-sorting' into main. Closes #19988

[arvados-workbench2.git] / 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 ccff61811b6303dacf9a8362e4c3853391d768b2..0eb1323a07d44d2fd58a3ea3a5f912f01d083a18 100644 (file)
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -2,26 +2,33 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+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 } 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";
+import { ArvadosTheme } from "common/custom-theme";
 
 interface ColumnSelectorDataProps {
-    columns: DataColumns<any>;
-    onColumnToggle: (column: DataColumn<any>) => void;
+    columns: DataColumns<any, any>;
+    onColumnToggle: (column: DataColumn<any, any>) => void;
+    className?: string;
 }
 
-type CssRules = "checkbox";
+type CssRules = "checkbox" | "listItem" | "listItemText";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     checkbox: {
         width: 24,
         height: 24
+    },
+    listItem: {
+        padding: 0
+    },
+    listItemText: {
+        paddingTop: '0.2rem'
     }
 });
 
@@ -38,13 +45,15 @@ export const ColumnSelector = withStyles(styles)(
                             <ListItem
                                 button
                                 key={index}
+                                className={classes.listItem}
                                 onClick={() => onColumnToggle(column)}>
                                 <Checkbox
                                     disableRipple
                                     color="primary"
                                     checked={column.selected}
                                     className={classes.checkbox} />
-                                <ListItemText>
+                                <ListItemText
+                                    className={classes.listItemText}>
                                     {column.name}
                                 </ListItemText>
                             </ListItem>
@@ -55,8 +64,8 @@ export const ColumnSelector = withStyles(styles)(
 );
 
 export const ColumnSelectorTrigger = (props: IconButtonProps) =>
-    <Tooltip title="Filters">
+    <Tooltip disableFocusListener title="Select columns">
         <IconButton {...props}>
-            <MenuIcon aria-label="Filters" />
+            <MenuIcon aria-label="Select columns" />
         </IconButton>
     </Tooltip>;