-const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ classes, onClick, onContextMenu, items }) => {
- return <Grid container alignItems="center" wrap="nowrap">
- {
- items.map((item, index) => {
- const isLastItem = index === items.length - 1;
- return (
- <React.Fragment key={index}>
- <Tooltip title={item.label}>
- <Button
+export const Breadcrumbs = withStyles(styles)(
+ ({ classes, onClick, onContextMenu, items }: BreadcrumbsProps & WithStyles<CssRules>) =>
+ <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
+ {
+ items.map((item, index) => {
+ const isLastItem = index === items.length - 1;
+ const isFirstItem = index === 0;
+ const Icon = item.icon || (() => (null));
+ return (
+ <React.Fragment key={index}>
+ {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
+ <Tooltip title={item.label}>
+ <Button
+ data-cy={
+ isFirstItem
+ ? 'breadcrumb-first'
+ : isLastItem
+ ? 'breadcrumb-last'
+ : false}
+ color="inherit"
+ className={isLastItem ? classes.currentItem : classes.item}
+ onClick={() => onClick(item)}
+ onContextMenu={event => onContextMenu(event, item)}>
+ <Icon className={classes.icon} />
+ <Typography
+ noWrap