+export const Breadcrumbs = withStyles(styles)(
+ ({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
+ <Grid container data-cy='breadcrumbs' alignItems="center">
+ {
+ 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}
+ className={classNames(
+ isLastItem ? null : 'parentItem',
+ classes.item
+ )}
+ onClick={() => onClick(item)}
+ onContextMenu={event => onContextMenu(event, item)}>
+ <Icon className={classes.icon} />
+ <Typography
+ noWrap
+ color="inherit"
+ className={classes.label}>
+ {item.label}
+ </Typography>
+ {
+ (resources[item.uuid] as any)?.frozenByUuid ? <FreezeIcon className={classes.frozenIcon} /> : null
+ }
+ </Button>
+ </Tooltip>
+ {!isLastItem && <ChevronRightIcon color="inherit" className={'parentItem'} />}
+ </React.Fragment>
+ );
+ })
+ }
+ </Grid>
+);