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