1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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 } from 'components/icon/icon';
11 import grey from '@material-ui/core/colors/grey';
13 export interface Breadcrumb {
18 type CssRules = "item" | "currentItem" | "label" | "icon";
20 const styles: StyleRulesCallback<CssRules> = theme => ({
36 export interface BreadcrumbsProps {
38 onClick: (breadcrumb: Breadcrumb) => void;
39 onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
42 export const Breadcrumbs = withStyles(styles)(
43 ({ classes, onClick, onContextMenu, items }: BreadcrumbsProps & WithStyles<CssRules>) =>
44 <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
46 items.map((item, index) => {
47 const isLastItem = index === items.length - 1;
48 const isFirstItem = index === 0;
49 const Icon = item.icon || (() => (null));
51 <React.Fragment key={index}>
52 {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
53 <Tooltip title={item.label}>
62 className={isLastItem ? classes.currentItem : classes.item}
63 onClick={() => onClick(item)}
64 onContextMenu={event => onContextMenu(event, item)}>
65 <Icon className={classes.icon} />
69 className={classes.label}>
74 {!isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />}