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