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 { ResourceBreadcrumb } from 'store/breadcrumbs/breadcrumbs-actions';
  13 import { ResourcesState } from 'store/resources/resources';
  14
  15 export interface Breadcrumb {
  16     label: string;
  17     icon?: IconType;
  18 }
  19
  20 type CssRules = "item" | "currentItem" | "label" | "icon" | "frozenIcon";
  21
  22 const styles: StyleRulesCallback<CssRules> = theme => ({
  23     item: {
  24         opacity: 0.6
  25     },
  26     currentItem: {
  27         opacity: 1
  28     },
  29     label: {
  30         textTransform: "none"
  31     },
  32     icon: {
  33         fontSize: 20,
  34         color: grey["600"],
  35         marginRight: '10px',
  36     },
  37     frozenIcon: {
  38         fontSize: 20,
  39         color: grey["600"],
  40         marginLeft: '10px',
  41     },
  42 });
  43
  44 export interface BreadcrumbsProps {
  45     items: ResourceBreadcrumb[];
  46     resources: ResourcesState;
  47     onClick: (breadcrumb: ResourceBreadcrumb) => void;
  48     onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: ResourceBreadcrumb) => void;
  49 }
  50
  51 export const Breadcrumbs = withStyles(styles)(
  52     ({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
  53     <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
  54     {
  55         items.map((item, index) => {
  56             const isLastItem = index === items.length - 1;
  57             const isFirstItem = index === 0;
  58             const Icon = item.icon || (() => (null));
  59             return (
  60                 <React.Fragment key={index}>
  61                     {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
  62                     <Tooltip title={item.label}>
  63                         <Button
  64                             data-cy={
  65                                 isFirstItem
  66                                 ? 'breadcrumb-first'
  67                                 : isLastItem
  68                                     ? 'breadcrumb-last'
  69                                     : false}
  70                             color="inherit"
  71                             className={isLastItem ? classes.currentItem : classes.item}
  72                             onClick={() => onClick(item)}
  73                             onContextMenu={event => onContextMenu(event, item)}>
  74                             <Icon className={classes.icon} />
  75                             <Typography
  76                                 noWrap
  77                                 color="inherit"
  78                                 className={classes.label}>
  79                                 {item.label}
  80                             </Typography>
  81                             {
  82                                 (resources[item.uuid] as any)?.frozenByUuid ? <FreezeIcon className={classes.frozenIcon} /> : null
  83                             }
  84                         </Button>
  85                     </Tooltip>
  86                     {!isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />}
  87                 </React.Fragment>
  88             );
  89         })
  90     }
  91     </Grid>
  92 );