import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import { withStyles } from '@material-ui/core';
import { IllegalNamingWarning } from '../warning/warning';
-import { IconType } from 'components/icon/icon';
+import { IconType, FreezeIcon } from 'components/icon/icon';
import grey from '@material-ui/core/colors/grey';
-
+import { getResource, ResourcesState } from 'store/resources/resources';
+import classNames from 'classnames';
+import { ArvadosTheme } from 'common/custom-theme';
+import { GroupClass } from "models/group";
+import { navigateTo, navigateToGroupDetails } from 'store/navigation/navigation-action';
export interface Breadcrumb {
label: string;
icon?: IconType;
+ uuid: string;
}
-type CssRules = "item" | "currentItem" | "label" | "icon";
+type CssRules = "item" | "chevron" | "label" | "buttonLabel" | "icon" | "frozenIcon";
-const styles: StyleRulesCallback<CssRules> = theme => ({
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
item: {
- opacity: 0.6
+ borderRadius: '16px',
+ height: '32px',
+ minWidth: '36px',
+ color: theme.customs.colors.grey700,
+ '&.parentItem': {
+ color: `${theme.palette.primary.main}`,
+ },
},
- currentItem: {
- opacity: 1
+ chevron: {
+ color: grey["600"],
},
label: {
- textTransform: "none"
+ textTransform: "none",
+ paddingRight: '3px',
+ paddingLeft: '3px',
+ lineHeight: '1.4',
+ },
+ buttonLabel: {
+ overflow: 'hidden',
+ justifyContent: 'flex-start',
},
icon: {
fontSize: 20,
- color: grey["600"]
+ color: grey["600"],
+ marginRight: '5px',
+ },
+ frozenIcon: {
+ fontSize: 20,
+ color: grey["600"],
+ marginLeft: '3px',
},
});
export interface BreadcrumbsProps {
items: Breadcrumb[];
- onClick: (breadcrumb: Breadcrumb) => void;
+ resources: ResourcesState;
+ onClick: (navFunc: (uuid: string) => void, breadcrumb: Breadcrumb) => void;
onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
}
export const Breadcrumbs = withStyles(styles)(
- ({ classes, onClick, onContextMenu, items }: BreadcrumbsProps & WithStyles<CssRules>) =>
+ ({ 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));
+ const resource = getResource(item.uuid)(resources) as any;
+ const navFunc = resource && 'groupClass' in resource && resource.groupClass === GroupClass.ROLE ? navigateToGroupDetails : navigateTo;
+
return (
<React.Fragment key={index}>
{isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
: isLastItem
? 'breadcrumb-last'
: false}
+ className={classNames(
+ isLastItem ? null : 'parentItem',
+ classes.item
+ )}
+ classes={{
+ label: classes.buttonLabel
+ }}
color="inherit"
- className={isLastItem ? classes.currentItem : classes.item}
- onClick={() => onClick(item)}
+ onClick={() => onClick(navFunc, item)}
onContextMenu={event => onContextMenu(event, item)}>
<Icon className={classes.icon} />
<Typography
className={classes.label}>
{item.label}
</Typography>
+ {
+ (resources[item.uuid] as any)?.frozenByUuid ? <FreezeIcon className={classes.frozenIcon} /> : null
+ }
</Button>
</Tooltip>
- {!isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />}
+ {!isLastItem && <ChevronRightIcon color="inherit" className={classNames('parentItem', classes.chevron)} />}
</React.Fragment>
);
})