services/workbench2/src/components/column-selector/column-selector.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { IconButton, Paper, List, Checkbox, ListItemText, ListItem, Tooltip } from '@mui/material';
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import MenuIcon from "@mui/icons-material/Menu";
  11 import { DataColumn, DataColumns } from '../data-table/data-column';
  12 import { Popover } from "../popover/popover";
  13 import { IconButtonProps } from '@mui/material/IconButton';
  14 import { ArvadosTheme } from "common/custom-theme";
  15
  16 interface ColumnSelectorDataProps {
  17     columns: DataColumns<any, any>;
  18     onColumnToggle: (column: DataColumn<any, any>) => void;
  19     className?: string;
  20 }
  21
  22 type CssRules = "checkbox" | "listItem" | "listItemText";
  23
  24 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     checkbox: {
  26         width: 24,
  27         height: 24
  28     },
  29     listItem: {
  30         padding: 0,
  31     },
  32     listItemText: {
  33         paddingLeft: '4px',
  34     }
  35 });
  36
  37 export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
  38
  39 export const ColumnSelector = withStyles(styles)(
  40     ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
  41         <Popover triggerComponent={ColumnSelectorTrigger}>
  42             <Paper>
  43                 <List dense>
  44                     {columns
  45                         .filter(column => column.configurable)
  46                         .map((column, index) =>
  47                             <ListItem
  48                                 button
  49                                 key={index}
  50                                 className={classes.listItem}
  51                                 data-cy={'column-selector-li'}
  52                                 onClick={() => onColumnToggle(column)}>
  53                                 <Checkbox
  54                                     disableRipple
  55                                     color="primary"
  56                                     checked={column.selected}
  57                                     className={classes.checkbox} />
  58                                 <ListItemText
  59                                     className={classes.listItemText}>
  60                                     {column.name}
  61                                 </ListItemText>
  62                             </ListItem>
  63                         )}
  64                 </List>
  65             </Paper>
  66         </Popover>
  67 );
  68
  69 export const ColumnSelectorTrigger = (props: IconButtonProps) =>
  70     <Tooltip disableFocusListener title="Select columns">
  71         <IconButton {...props} size="large">
  72             <MenuIcon aria-label="Select columns" data-cy="column-selector-button" />
  73         </IconButton>
  74     </Tooltip>;