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 { Button, Grid, StyleRulesCallback, WithStyles, Typography, Tooltip } from '@material-ui/core';
   7 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
   8 import { withStyles } from '@material-ui/core';
   9 import { IllegalNamingWarning } from '../warning/warning';
  10 import { IconType, FreezeIcon } from 'components/icon/icon';
  11 import grey from '@material-ui/core/colors/grey';
  12 import { ResourcesState } from 'store/resources/resources';
  13 import classNames from 'classnames';
  14 import { ArvadosTheme } from 'common/custom-theme';
  15
  16 export interface Breadcrumb {
  17     label: string;
  18     icon?: IconType;
  19     uuid: string;
  20 }
  21
  22 type CssRules = "item" | "label" | "icon" | "frozenIcon";
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     item: {
  26         borderRadius: '16px',
  27         backgroundColor: theme.customs.colors.grey300,
  28         '&.parentItem': {
  29             backgroundColor: `${theme.customs.colors.grey300}99`,
  30         },
  31         '&:hover': {
  32             backgroundColor: theme.customs.colors.grey400,
  33         },
  34         '&.parentItem:hover': {
  35             backgroundColor: `${theme.customs.colors.grey400}99`,
  36         },
  37     },
  38     label: {
  39         textTransform: "none",
  40         paddingRight: '3px',
  41         paddingLeft: '3px',
  42     },
  43     icon: {
  44         fontSize: 20,
  45         color: grey["600"],
  46         marginRight: '5px',
  47     },
  48     frozenIcon: {
  49         fontSize: 20,
  50         color: grey["600"],
  51         marginLeft: '3px',
  52     },
  53 });
  54
  55 export interface BreadcrumbsProps {
  56     items: Breadcrumb[];
  57     resources: ResourcesState;
  58     onClick: (breadcrumb: Breadcrumb) => void;
  59     onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
  60 }
  61
  62 export const Breadcrumbs = withStyles(styles)(
  63     ({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
  64     <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
  65     {
  66         items.map((item, index) => {
  67             const isLastItem = index === items.length - 1;
  68             const isFirstItem = index === 0;
  69             const Icon = item.icon || (() => (null));
  70             return (
  71                 <React.Fragment key={index}>
  72                     {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
  73                     <Tooltip title={item.label}>
  74                         <Button
  75                             data-cy={
  76                                 isFirstItem
  77                                 ? 'breadcrumb-first'
  78                                 : isLastItem
  79                                     ? 'breadcrumb-last'
  80                                     : false}
  81                             className={classNames(
  82                                 isLastItem ? null : 'parentItem',
  83                                 classes.item
  84                             )}
  85                             onClick={() => onClick(item)}
  86                             onContextMenu={event => onContextMenu(event, item)}>
  87                             <Icon className={classes.icon} />
  88                             <Typography
  89                                 noWrap
  90                                 color="inherit"
  91                                 className={classes.label}>
  92                                 {item.label}
  93                             </Typography>
  94                             {
  95                                 (resources[item.uuid] as any)?.frozenByUuid ? <FreezeIcon className={classes.frozenIcon} /> : null
  96                             }
  97                         </Button>
  98                     </Tooltip>
  99                     {!isLastItem && <ChevronRightIcon color="inherit" className={'parentItem'} />}
 100                 </React.Fragment>
 101             );
 102         })
 103     }
 104     </Grid>
 105 );