services/workbench2/src/components/tabbedList/tabbed-list.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useEffect, useRef } from 'react';
   6 import { Tabs, Tab, List, ListItemButton } from '@mui/material';
   7 import { CustomStyleRulesCallback } from 'common/custom-theme';
   8 import { WithStyles, withStyles } from '@mui/styles';
   9 import classNames from 'classnames';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import { InlinePulser } from 'components/loading/inline-pulser';
  12
  13 type TabbedListClasses = 'root' | 'tabs' | 'listItem' | 'selected' | 'spinner' | 'notFoundLabel';
  14
  15 const tabbedListStyles: CustomStyleRulesCallback<TabbedListClasses> = (theme: ArvadosTheme) => ({
  16     root: {
  17         display: 'flex',
  18         flexDirection: 'column',
  19         height: '100%',
  20     },
  21     tabs: {
  22         backgroundColor: theme.palette.background.paper,
  23         position: 'sticky',
  24         top: 0,
  25         zIndex: 1,
  26         borderBottom: '1px solid lightgrey',
  27     },
  28     listItem: {
  29         height: '2rem',
  30         cursor: 'pointer',
  31         '&:hover': {
  32             backgroundColor: theme.palette.grey[200],
  33         }
  34     },
  35     selected: {
  36         backgroundColor: `${theme.palette.grey['300']} !important`
  37     },
  38     spinner: {
  39         display: 'flex',
  40         justifyContent: 'center',
  41         alignItems: 'center',
  42         height: '4rem',
  43     },
  44     notFoundLabel: {
  45         cursor: 'default',
  46         padding: theme.spacing(1),
  47         color: theme.palette.grey[700],
  48         textAlign: 'center',
  49     },
  50 });
  51
  52 type TabPanelProps = {
  53   children: React.ReactNode;
  54   value: number;
  55   index: number;
  56 };
  57
  58 type TabbedListProps<T> = {
  59     tabbedListContents: Record<string, T[]>;
  60     injectedStyles?: string;
  61     selectedIndex?: number;
  62     selectedTab?: number;
  63     includeContentsLength: boolean;
  64     isWorking?: boolean;
  65     handleSelect?: (selection: T) => React.MouseEventHandler<HTMLElement> | undefined;
  66     renderListItem?: (item: T) => React.ReactNode;
  67     handleTabChange?: (event: React.SyntheticEvent, newValue: number) => void;
  68 };
  69
  70 export const TabbedList = withStyles(tabbedListStyles)(<T,>({ tabbedListContents, selectedIndex = 0, selectedTab = 0, isWorking, injectedStyles, classes, handleSelect, renderListItem, handleTabChange, includeContentsLength }: TabbedListProps<T> & WithStyles<TabbedListClasses>) => {
  71     const tabLabels = Object.keys(tabbedListContents);
  72     const selectedTabLabel = tabLabels[selectedTab];
  73     const listContents = tabbedListContents[selectedTabLabel] || [];
  74
  75     const TabPanel = ({ children, value, index }: TabPanelProps) => {
  76         return <div hidden={value !== index}>{value === index && children}</div>;
  77     };
  78
  79     return (
  80         <div className={classNames(classes.root, injectedStyles)}>
  81             <Tabs
  82                 className={classes.tabs}
  83                 value={selectedTab}
  84                 onChange={handleTabChange}
  85                 variant='fullWidth'
  86             >
  87                 {tabLabels.map((label) => (
  88                     <Tab key={label} data-cy={`${label}-tab-label`} label={includeContentsLength ? `${label} (${tabbedListContents[label].length})` : label} />
  89                 ))}
  90             </Tabs>
  91             <TabPanel
  92                 value={selectedTab}
  93                 index={selectedTab}
  94             >
  95                 {isWorking ? <div className={classes.spinner}><InlinePulser /></div> :
  96                     <List dense>
  97                     {listContents.length === 0 && <div className={classes.notFoundLabel}>no matching {tabLabels[selectedTab]} found</div>}
  98                         {listContents.map((item, i) => (
  99                         <div key={`${selectedTabLabel}-${i}`}>
 100                             <ListItemButton
 101                                 className={classNames(classes.listItem, { [classes.selected]: i === selectedIndex })}
 102                                 selected={i === selectedIndex}
 103                                 onClick={handleSelect && handleSelect(item)}
 104                                 >
 105                                 {renderListItem ? renderListItem(item) : JSON.stringify(item)}
 106                             </ListItemButton>
 107                         </div>
 108                         ))}
 109                     </List>
 110                 }
 111             </TabPanel>
 112         </div>
 113     );
 114 });