19504: Revert breadcrumbs ro transparent background, use primary color for parent...
[arvados-workbench2.git] / src / components / breadcrumbs / breadcrumbs.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
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, FreezeIcon } from 'components/icon/icon';
11 import grey from '@material-ui/core/colors/grey';
12 import { ResourcesState } from 'store/resources/resources';
13 import classNames from 'classnames';
14 import { ArvadosTheme } from 'common/custom-theme';
15
16 export interface Breadcrumb {
17     label: string;
18     icon?: IconType;
19     uuid: string;
20 }
21
22 type CssRules = "item" | "label" | "icon" | "frozenIcon";
23
24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
25     item: {
26         borderRadius: '16px',
27         height: '32px',
28         color: theme.customs.colors.grey700,
29         '&.parentItem': {
30             color: `${theme.palette.primary.main}`,
31         },
32     },
33     label: {
34         textTransform: "none",
35         paddingRight: '3px',
36         paddingLeft: '3px',
37         lineHeight: '1.4',
38     },
39     icon: {
40         fontSize: 20,
41         color: grey["600"],
42         marginRight: '5px',
43     },
44     frozenIcon: {
45         fontSize: 20,
46         color: grey["600"],
47         marginLeft: '3px',
48     },
49 });
50
51 export interface BreadcrumbsProps {
52     items: Breadcrumb[];
53     resources: ResourcesState;
54     onClick: (breadcrumb: Breadcrumb) => void;
55     onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
56 }
57
58 export const Breadcrumbs = withStyles(styles)(
59     ({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
60     <Grid container data-cy='breadcrumbs' alignItems="center">
61     {
62         items.map((item, index) => {
63             const isLastItem = index === items.length - 1;
64             const isFirstItem = index === 0;
65             const Icon = item.icon || (() => (null));
66             return (
67                 <React.Fragment key={index}>
68                     {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
69                     <Tooltip title={item.label}>
70                         <Button
71                             data-cy={
72                                 isFirstItem
73                                 ? 'breadcrumb-first'
74                                 : isLastItem
75                                     ? 'breadcrumb-last'
76                                     : false}
77                             className={classNames(
78                                 isLastItem ? null : 'parentItem',
79                                 classes.item
80                             )}
81                             color="inherit"
82                             onClick={() => onClick(item)}
83                             onContextMenu={event => onContextMenu(event, item)}>
84                             <Icon className={classes.icon} />
85                             <Typography
86                                 noWrap
87                                 color="inherit"
88                                 className={classes.label}>
89                                 {item.label}
90                             </Typography>
91                             {
92                                 (resources[item.uuid] as any)?.frozenByUuid ? <FreezeIcon className={classes.frozenIcon} /> : null
93                             }
94                         </Button>
95                     </Tooltip>
96                     {!isLastItem && <ChevronRightIcon color="inherit" className={'parentItem'} />}
97                 </React.Fragment>
98             );
99         })
100     }
101     </Grid>
102 );