//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
-import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import React from 'react';
+import { Button, Grid, StyleRulesCallback, WithStyles, Typography, Tooltip } from '@material-ui/core';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import { withStyles } from '@material-ui/core';
+import { IllegalNamingWarning } from '../warning/warning';
+import { IconType, FreezeIcon } from 'components/icon/icon';
+import grey from '@material-ui/core/colors/grey';
+import { ResourcesState } from 'store/resources/resources';
+import classNames from 'classnames';
+import { ArvadosTheme } from 'common/custom-theme';
export interface Breadcrumb {
label: string;
+ icon?: IconType;
+ uuid: string;
}
-interface BreadcrumbsDataProps {
- items: Breadcrumb[];
-}
-
-interface BreadcrumbsActionProps {
- onClick: (breadcrumb: Breadcrumb) => any;
-}
+type CssRules = "item" | "chevron" | "label" | "buttonLabel" | "icon" | "frozenIcon";
-type BreadcrumbsProps = BreadcrumbsDataProps & BreadcrumbsActionProps & WithStyles<CssRules>;
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ item: {
+ borderRadius: '16px',
+ height: '32px',
+ minWidth: '36px',
+ color: theme.customs.colors.grey700,
+ '&.parentItem': {
+ color: `${theme.palette.primary.main}`,
+ },
+ },
+ chevron: {
+ color: grey["600"],
+ },
+ label: {
+ textTransform: "none",
+ paddingRight: '3px',
+ paddingLeft: '3px',
+ lineHeight: '1.4',
+ },
+ buttonLabel: {
+ overflow: 'hidden',
+ justifyContent: 'flex-start',
+ },
+ icon: {
+ fontSize: 20,
+ color: grey["600"],
+ marginRight: '5px',
+ },
+ frozenIcon: {
+ fontSize: 20,
+ color: grey["600"],
+ marginLeft: '3px',
+ },
+});
-class Breadcrumbs extends React.Component<BreadcrumbsProps> {
+export interface BreadcrumbsProps {
+ items: Breadcrumb[];
+ resources: ResourcesState;
+ onClick: (breadcrumb: Breadcrumb) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
+}
- render() {
- const { classes, onClick } = this.props;
- return <Grid container alignItems="center">
- {
- this.getInactiveItems().map((item, index) => (
- <React.Fragment key={index}>
+export const Breadcrumbs = withStyles(styles)(
+ ({ classes, onClick, onContextMenu, items, resources }: 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}
+ className={classNames(
+ isLastItem ? null : 'parentItem',
+ classes.item
+ )}
+ classes={{
+ label: classes.buttonLabel
+ }}
color="inherit"
- className={classes.inactiveItem}
onClick={() => onClick(item)}
- >
- {item.label}
+ 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>
- <ChevronRightIcon color="inherit" className={classes.inactiveItem} />
- </React.Fragment>
- ))
- }
- {
- this.getActiveItem().map((item, index) => (
- <Button
- color="inherit"
- key={index}
- onClick={() => onClick(item)}
- >
- {item.label}
- </Button>
- ))
- }
- </Grid>;
- }
-
- getInactiveItems = () => {
- return this.props.items.slice(0, -1);
+ </Tooltip>
+ {!isLastItem && <ChevronRightIcon color="inherit" className={classNames('parentItem', classes.chevron)} />}
+ </React.Fragment>
+ );
+ })
}
-
- getActiveItem = () => {
- return this.props.items.slice(-1);
- }
-
-}
-
-type CssRules = 'inactiveItem';
-
-const styles: StyleRulesCallback<CssRules> = theme => {
- const { unit } = theme.spacing;
- return {
- inactiveItem: {
- opacity: 0.6
- }
- };
-};
-
-export default withStyles(styles)(Breadcrumbs);
-
+ </Grid>
+);