services/workbench2/src/components/data-table/data-table.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 {
   7     Table,
   8     TableBody,
   9     TableRow,
  10     TableCell,
  11     TableHead,
  12     TableSortLabel,
  13     StyleRulesCallback,
  14     Theme,
  15     WithStyles,
  16     withStyles,
  17     IconButton,
  18     Tooltip,
  19 } from "@material-ui/core";
  20 import classnames from "classnames";
  21 import { DataColumn, SortDirection } from "./data-column";
  22 import { DataTableDefaultView } from "../data-table-default-view/data-table-default-view";
  23 import { DataTableFilters } from "../data-table-filters/data-table-filters-tree";
  24 import { DataTableMultiselectPopover } from "../data-table-multiselect-popover/data-table-multiselect-popover";
  25 import { DataTableFiltersPopover } from "../data-table-filters/data-table-filters-popover";
  26 import { countNodes, getTreeDirty } from "models/tree";
  27 import { IconType, PendingIcon } from "components/icon/icon";
  28 import { SvgIconProps } from "@material-ui/core/SvgIcon";
  29 import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
  30 import { createTree } from "models/tree";
  31 import { DataTableMultiselectOption } from "../data-table-multiselect-popover/data-table-multiselect-popover";
  32
  33 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
  34
  35 export enum DataTableFetchMode {
  36     PAGINATED,
  37     INFINITE,
  38 }
  39
  40 export interface DataTableDataProps<I> {
  41     items: I[];
  42     columns: DataColumns<I, any>;
  43     onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: I) => void;
  44     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: I) => void;
  45     onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: I) => void;
  46     onSortToggle: (column: DataColumn<I, any>) => void;
  47     onFiltersChange: (filters: DataTableFilters, column: DataColumn<I, any>) => void;
  48     extractKey?: (item: I) => React.Key;
  49     working?: boolean;
  50     defaultViewIcon?: IconType;
  51     defaultViewMessages?: string[];
  52     currentItemUuid?: string;
  53     currentRoute?: string;
  54     toggleMSToolbar: (isVisible: boolean) => void;
  55     setCheckedListOnStore: (checkedList: TCheckedList) => void;
  56     checkedList: TCheckedList;
  57 }
  58
  59 type CssRules =
  60     | "tableBody"
  61     | "root"
  62     | "content"
  63     | "noItemsInfo"
  64     | "checkBoxHead"
  65     | "checkBoxCell"
  66     | "clickBox"
  67     | "checkBox"
  68     | "firstTableCell"
  69     | "tableCell"
  70     | "arrow"
  71     | "arrowButton"
  72     | "tableCellWorkflows"
  73     | "loader";
  74
  75 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  76     root: {
  77         width: "100%",
  78     },
  79     content: {
  80         display: "inline-block",
  81         width: "100%",
  82     },
  83     tableBody: {
  84         background: theme.palette.background.paper,
  85     },
  86     loader: {
  87         left: "50%",
  88         marginLeft: "-84px",
  89         position: "absolute",
  90     },
  91     noItemsInfo: {
  92         textAlign: "center",
  93         padding: theme.spacing.unit,
  94     },
  95     checkBoxHead: {
  96         padding: "0",
  97         display: "flex",
  98         width: '2rem',
  99         height: "1.5rem",
 100         paddingLeft: '0.8rem',
 101         marginRight: '0.2rem'
 102     },
 103     checkBoxCell: {
 104         padding: "0",
 105     },
 106     clickBox: {
 107         width: '1.4rem',
 108         height: "1.4rem",
 109         paddingLeft: '0.25rem',
 110         paddingTop: '0rem',
 111         marginLeft: '0.5rem',
 112         cursor: "pointer",
 113     },
 114     checkBox: {
 115         cursor: "pointer",
 116     },
 117     tableCell: {
 118         wordWrap: "break-word",
 119         paddingRight: "24px",
 120         color: "#737373",
 121     },
 122     firstTableCell: {
 123         paddingLeft: "5px",
 124     },
 125     tableCellWorkflows: {
 126         "&:nth-last-child(2)": {
 127             padding: "0px",
 128             maxWidth: "48px",
 129         },
 130         "&:last-child": {
 131             padding: "0px",
 132             paddingRight: "24px",
 133             width: "48px",
 134         },
 135     },
 136     arrow: {
 137         margin: 0,
 138     },
 139     arrowButton: {
 140         color: theme.palette.text.primary,
 141     },
 142 });
 143
 144 export type TCheckedList = Record<string, boolean>;
 145
 146 type DataTableState = {
 147     isSelected: boolean;
 148 };
 149
 150 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 151
 152 export const DataTable = withStyles(styles)(
 153     class Component<T> extends React.Component<DataTableProps<T>> {
 154         state: DataTableState = {
 155             isSelected: false,
 156         };
 157
 158         componentDidMount(): void {
 159             this.initializeCheckedList([]);
 160         }
 161
 162         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
 163             const { items, setCheckedListOnStore } = this.props;
 164             const { isSelected } = this.state;
 165             if (prevProps.items !== items) {
 166                 if (isSelected === true) this.setState({ isSelected: false });
 167                 if (items.length) this.initializeCheckedList(items);
 168                 else setCheckedListOnStore({});
 169             }
 170             if (prevProps.currentRoute !== this.props.currentRoute) {
 171                 this.initializeCheckedList([])
 172             }
 173         }
 174
 175         componentWillUnmount(): void {
 176             this.initializeCheckedList([])
 177         }
 178
 179         checkBoxColumn: DataColumn<any, any> = {
 180             name: "checkBoxColumn",
 181             selected: true,
 182             configurable: false,
 183             filters: createTree(),
 184             render: uuid => {
 185                 const { classes, checkedList } = this.props;
 186                 return (
 187                     <div
 188                         className={classes.clickBox}
 189                         onClick={(ev) => {
 190                             ev.stopPropagation()
 191                             this.handleSelectOne(uuid)
 192                         }}
 193                         onDoubleClick={(ev) => ev.stopPropagation()}
 194                     >
 195                         <input
 196                             data-cy={`multiselect-checkbox-${uuid}`}
 197                             type='checkbox'
 198                             name={uuid}
 199                             className={classes.checkBox}
 200                             checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
 201                             onChange={() => this.handleSelectOne(uuid)}
 202                             onDoubleClick={(ev) => ev.stopPropagation()}
 203                         ></input>
 204                     </div>
 205                 );
 206             },
 207         };
 208
 209         multiselectOptions: DataTableMultiselectOption[] = [
 210             { name: "All", fn: list => this.handleSelectAll(list) },
 211             { name: "None", fn: list => this.handleSelectNone(list) },
 212             { name: "Invert", fn: list => this.handleInvertSelect(list) },
 213         ];
 214
 215         initializeCheckedList = (uuids: any[]): void => {
 216             const newCheckedList = { ...this.props.checkedList };
 217
 218             uuids.forEach(uuid => {
 219                 if (!newCheckedList.hasOwnProperty(uuid)) {
 220                     newCheckedList[uuid] = false;
 221                 }
 222             });
 223             for (const key in newCheckedList) {
 224                 if (!uuids.includes(key)) {
 225                     delete newCheckedList[key];
 226                 }
 227             }
 228             this.props.setCheckedListOnStore(newCheckedList);
 229         };
 230
 231         isAllSelected = (list: TCheckedList): boolean => {
 232             for (const key in list) {
 233                 if (list[key] === false) return false;
 234             }
 235             return true;
 236         };
 237
 238         isAnySelected = (): boolean => {
 239             const { checkedList } = this.props;
 240             if (!Object.keys(checkedList).length) return false;
 241             for (const key in checkedList) {
 242                 if (checkedList[key] === true) return true;
 243             }
 244             return false;
 245         };
 246
 247         handleSelectOne = (uuid: string): void => {
 248             const { checkedList } = this.props;
 249             const newCheckedList = { ...checkedList };
 250             newCheckedList[uuid] = !checkedList[uuid];
 251             this.setState({ isSelected: this.isAllSelected(newCheckedList) });
 252             this.props.setCheckedListOnStore(newCheckedList);
 253         };
 254
 255         handleSelectorSelect = (): void => {
 256             const { checkedList } = this.props;
 257             const { isSelected } = this.state;
 258             isSelected ? this.handleSelectNone(checkedList) : this.handleSelectAll(checkedList);
 259         };
 260
 261         handleSelectAll = (list: TCheckedList): void => {
 262             if (Object.keys(list).length) {
 263                 const newCheckedList = { ...list };
 264                 for (const key in newCheckedList) {
 265                     newCheckedList[key] = true;
 266                 }
 267                 this.setState({ isSelected: true });
 268                 this.props.setCheckedListOnStore(newCheckedList);
 269             }
 270         };
 271
 272         handleSelectNone = (list: TCheckedList): void => {
 273             const newCheckedList = { ...list };
 274             for (const key in newCheckedList) {
 275                 newCheckedList[key] = false;
 276             }
 277             this.setState({ isSelected: false });
 278             this.props.setCheckedListOnStore(newCheckedList);
 279         };
 280
 281         handleInvertSelect = (list: TCheckedList): void => {
 282             if (Object.keys(list).length) {
 283                 const newCheckedList = { ...list };
 284                 for (const key in newCheckedList) {
 285                     newCheckedList[key] = !list[key];
 286                 }
 287                 this.setState({ isSelected: this.isAllSelected(newCheckedList) });
 288                 this.props.setCheckedListOnStore(newCheckedList);
 289             }
 290         };
 291
 292         render() {
 293             const { items, classes, working, columns } = this.props;
 294             if (columns[0].name === this.checkBoxColumn.name) columns.shift();
 295             columns.unshift(this.checkBoxColumn);
 296             return (
 297                 <div className={classes.root}>
 298                     <div className={classes.content}>
 299                         <Table>
 300                             <TableHead>
 301                                 <TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
 302                             </TableHead>
 303                             <TableBody className={classes.tableBody}>{!working && items.map(this.renderBodyRow)}</TableBody>
 304                         </Table>
 305                         {!!working && (
 306                             <div className={classes.loader}>
 307                                 <DataTableDefaultView
 308                                     icon={PendingIcon}
 309                                     messages={["Loading data, please wait."]}
 310                                 />
 311                             </div>
 312                         )}
 313                         {items.length === 0 && !working && this.renderNoItemsPlaceholder(this.props.columns)}
 314                     </div>
 315                 </div>
 316             );
 317         }
 318
 319         renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
 320             const dirty = columns.some(column => getTreeDirty("")(column.filters));
 321             return (
 322                 <DataTableDefaultView
 323                     icon={this.props.defaultViewIcon}
 324                     messages={this.props.defaultViewMessages}
 325                     filtersApplied={dirty}
 326                 />
 327             );
 328         };
 329
 330         renderHeadCell = (column: DataColumn<T, any>, index: number) => {
 331             const { name, key, renderHeader, filters, sort } = column;
 332             const { onSortToggle, onFiltersChange, classes, checkedList } = this.props;
 333             const { isSelected } = this.state;
 334             return column.name === "checkBoxColumn" ? (
 335                 <TableCell
 336                     key={key || index}
 337                     className={classes.checkBoxCell}>
 338                     <div className={classes.checkBoxHead}>
 339                         <Tooltip title={this.state.isSelected ? "Deselect All" : "Select All"}>
 340                             <input
 341                                 type="checkbox"
 342                                 className={classes.checkBox}
 343                                 checked={isSelected}
 344                                 disabled={!this.props.items.length}
 345                                 onChange={this.handleSelectorSelect}></input>
 346                         </Tooltip>
 347                         <DataTableMultiselectPopover
 348                             name={`Options`}
 349                             disabled={!this.props.items.length}
 350                             options={this.multiselectOptions}
 351                             checkedList={checkedList}></DataTableMultiselectPopover>
 352                     </div>
 353                 </TableCell>
 354             ) : (
 355                 <TableCell
 356                     className={index === 1 ? classes.firstTableCell : classes.tableCell}
 357                     key={key || index}>
 358                     {renderHeader ? (
 359                         renderHeader()
 360                     ) : countNodes(filters) > 0 ? (
 361                         <DataTableFiltersPopover
 362                             name={`${name} filters`}
 363                             mutuallyExclusive={column.mutuallyExclusiveFilters}
 364                             onChange={filters => onFiltersChange && onFiltersChange(filters, column)}
 365                             filters={filters}>
 366                             {name}
 367                         </DataTableFiltersPopover>
 368                     ) : sort ? (
 369                         <TableSortLabel
 370                             active={sort.direction !== SortDirection.NONE}
 371                             direction={sort.direction !== SortDirection.NONE ? sort.direction : undefined}
 372                             IconComponent={this.ArrowIcon}
 373                             hideSortIcon
 374                             onClick={() => onSortToggle && onSortToggle(column)}>
 375                             {name}
 376                         </TableSortLabel>
 377                     ) : (
 378                         <span>{name}</span>
 379                     )}
 380                 </TableCell>
 381             );
 382         };
 383
 384         ArrowIcon = ({ className, ...props }: SvgIconProps) => (
 385             <IconButton
 386                 component="span"
 387                 className={this.props.classes.arrowButton}
 388                 tabIndex={-1}>
 389                 <ArrowDownwardIcon
 390                     {...props}
 391                     className={classnames(className, this.props.classes.arrow)}
 392                 />
 393             </IconButton>
 394         );
 395
 396         renderBodyRow = (item: any, index: number) => {
 397             const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid, currentRoute } = this.props;
 398             return (
 399                 <TableRow
 400                     data-cy={'data-table-row'}
 401                     hover
 402                     key={extractKey ? extractKey(item) : index}
 403                     onClick={event => onRowClick && onRowClick(event, item)}
 404                     onContextMenu={this.handleRowContextMenu(item)}
 405                     onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}
 406                     selected={item === currentItemUuid}>
 407                     {this.mapVisibleColumns((column, index) => (
 408                         <TableCell
 409                             key={column.key || index}
 410                             className={
 411                                 currentRoute === "/workflows"
 412                                     ? classes.tableCellWorkflows
 413                                     : index === 0
 414                                     ? classes.checkBoxCell
 415                                     : `${classes.tableCell} ${index === 1 ? classes.firstTableCell : ""}`
 416                             }>
 417                             {column.render(item)}
 418                         </TableCell>
 419                     ))}
 420                 </TableRow>
 421             );
 422         };
 423
 424         mapVisibleColumns = (fn: (column: DataColumn<T, any>, index: number) => React.ReactElement<any>) => {
 425             return this.props.columns.filter(column => column.selected).map(fn);
 426         };
 427
 428         handleRowContextMenu = (item: T) => (event: React.MouseEvent<HTMLElement>) => this.props.onContextMenu(event, item);
 429     }
 430 );