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