services/workbench2/src/components/breadcrumbs/breadcrumbs.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 { Button, Grid, Typography, Tooltip } from '@mui/material';
   8 import { WithStyles } from '@mui/styles';
   9 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
  10 import withStyles from '@mui/styles/withStyles';
  11 import { IllegalNamingWarning } from '../warning/warning';
  12 import { IconType, FreezeIcon } from 'components/icon/icon';
  13 import { getResource, ResourcesState } from 'store/resources/resources';
  14 import classNames from 'classnames';
  15 import { ArvadosTheme } from 'common/custom-theme';
  16 import { GroupClass } from "models/group";
  17 import { navigateTo, navigateToGroupDetails } from 'store/navigation/navigation-action';
  18 import { grey } from '@mui/material/colors';
  19 export interface Breadcrumb {
  20     label: string;
  21     icon?: IconType;
  22     uuid: string;
  23 }
  24
  25 type CssRules = "item" | "chevron" | "label" | "buttonLabel" | "icon" | "frozenIcon";
  26
  27 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     item: {
  29         borderRadius: '16px',
  30         height: '32px',
  31         minWidth: '36px',
  32         color: theme.customs.colors.grey700,
  33         '&.parentItem': {
  34             color: `${theme.palette.primary.main}`,
  35         },
  36     },
  37     chevron: {
  38         color: grey["600"],
  39     },
  40     label: {
  41         textTransform: "none",
  42         paddingRight: '3px',
  43         paddingLeft: '3px',
  44         lineHeight: '1.4',
  45     },
  46     buttonLabel: {
  47         overflow: 'hidden',
  48         justifyContent: 'flex-start',
  49         display: 'inherit',
  50         alignItems: 'inherit',
  51     },
  52     icon: {
  53         fontSize: 20,
  54         color: grey["600"],
  55         marginRight: '5px',
  56     },
  57     frozenIcon: {
  58         fontSize: 20,
  59         color: grey["600"],
  60         marginLeft: '3px',
  61     },
  62 });
  63
  64 export interface BreadcrumbsProps {
  65     items: Breadcrumb[];
  66     resources: ResourcesState;
  67     onClick: (navFunc: (uuid: string) => void, breadcrumb: Breadcrumb) => void;
  68     onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
  69 }
  70
  71 export const Breadcrumbs = withStyles(styles)(
  72     ({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
  73     <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
  74     {
  75         items.map((item, index) => {
  76             const isLastItem = index === items.length - 1;
  77             const isFirstItem = index === 0;
  78             const Icon = item.icon || (() => (null));
  79             const resource = getResource(item.uuid)(resources) as any;
  80             const navFunc = resource && 'groupClass' in resource && resource.groupClass === GroupClass.ROLE ? navigateToGroupDetails : navigateTo;
  81
  82             return (
  83                 <React.Fragment key={index}>
  84                     {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
  85                     <Tooltip title={item.label} disableFocusListener>
  86                         <Button
  87                             data-cy={
  88                                 isFirstItem
  89                                 ? 'breadcrumb-first'
  90                                 : isLastItem
  91                                     ? 'breadcrumb-last'
  92                                     : false}
  93                             className={classNames(
  94                                 isLastItem ? null : 'parentItem',
  95                                 classes.item
  96                             )}
  97                             color="inherit"
  98                             onClick={() => onClick(navFunc, item)}
  99                             onContextMenu={event => onContextMenu(event, item)}>
 100                             <span className={classes.buttonLabel}>
 101                                 <Icon className={classes.icon} />
 102                                 <Typography
 103                                     noWrap
 104                                     color="inherit"
 105                                     className={classes.label}>
 106                                     {item.label}
 107                                 </Typography>
 108                                 {
 109                                     (resources[item.uuid] as any)?.frozenByUuid ? <FreezeIcon className={classes.frozenIcon} /> : null
 110                                 }
 111                             </span>
 112                         </Button>
 113                     </Tooltip>
 114                     {!isLastItem && <ChevronRightIcon color="inherit" className={classNames('parentItem', classes.chevron)} />}
 115                 </React.Fragment>
 116             );
 117         })
 118     }
 119     </Grid>
 120 );