21224: details button works as expected Arvados-DCO-1.1-Signed-off-by: Lisa Knox...
[arvados.git] / services / workbench2 / src / views-components / main-content-bar / main-content-bar.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
7 import { Toolbar, StyleRulesCallback, IconButton, Tooltip, Grid, WithStyles, withStyles } from "@material-ui/core";
8 import { DetailsIcon } from "components/icon/icon";
9 import { Breadcrumbs } from "views-components/breadcrumbs/breadcrumbs";
10 import { connect } from 'react-redux';
11 import { RootState } from 'store/store';
12 import * as Routes from 'routes/routes';
13 import { toggleDetailsPanel } from 'store/details-panel/details-panel-action';
14 import RefreshButton from "components/refresh-button/refresh-button";
15 import { loadSidePanelTreeProjects } from "store/side-panel-tree/side-panel-tree-actions";
16 import { Dispatch } from "redux";
17
18 type CssRules = 'mainBar' | 'breadcrumbContainer' | 'infoTooltip';
19
20 const styles: StyleRulesCallback<CssRules> = theme => ({
21     mainBar: {
22         flexWrap: 'nowrap',
23     },
24     breadcrumbContainer: {
25         overflow: 'hidden',
26     },
27     infoTooltip: {
28         marginTop: '-10px',
29         marginLeft: '10px',
30     }
31 });
32
33 interface MainContentBarProps {
34     onRefreshPage: () => void;
35     onDetailsPanelToggle: () => void;
36     buttonVisible: boolean;
37     projectUuid: string;
38     routeUuid: string;
39 }
40
41 const isButtonVisible = ({ router }: RootState) => {
42     const pathname = router.location ? router.location.pathname : '';
43     return Routes.matchCollectionsContentAddressRoute(pathname) ||
44         Routes.matchPublicFavoritesRoute(pathname) ||
45         Routes.matchGroupDetailsRoute(pathname) ||
46         Routes.matchGroupsRoute(pathname) ||
47         Routes.matchUsersRoute(pathname) ||
48         Routes.matchSearchResultsRoute(pathname) ||
49         Routes.matchSharedWithMeRoute(pathname) ||
50         Routes.matchProcessRoute(pathname) ||
51         Routes.matchCollectionRoute(pathname) ||
52         Routes.matchProjectRoute(pathname) ||
53         Routes.matchAllProcessesRoute(pathname) ||
54         Routes.matchTrashRoute(pathname) ||
55         Routes.matchFavoritesRoute(pathname);
56 };
57
58 const mapStateToProps = (state: RootState) => {
59     const currentRoute = state.router.location?.pathname.split('/') || [];
60     const routeUuid = currentRoute[currentRoute.length - 1];
61
62     return {
63         buttonVisible: isButtonVisible(state),
64         projectUuid: state.detailsPanel.resourceUuid,
65         routeUuid
66     }
67 };
68
69 const mapDispatchToProps = () => (dispatch: Dispatch) => ({
70     onDetailsPanelToggle: (uuid: string) => dispatch<any>(toggleDetailsPanel(uuid)),
71     onRefreshButtonClick: (id) => {
72         dispatch<any>(loadSidePanelTreeProjects(id));
73     }
74 });
75
76 export const MainContentBar = connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(
77     (props: MainContentBarProps & WithStyles<CssRules> & any) =>
78         <Toolbar><Grid container className={props.classes.mainBar}>
79             <Grid container item xs alignItems="center" className={props.classes.breadcrumbContainer}>
80                 <Breadcrumbs />
81             </Grid>
82             <Grid item>
83                 <RefreshButton onClick={() => {
84                     props.onRefreshButtonClick(props.projectUuid);
85                 }} />
86             </Grid>
87             <Grid item>
88                 {props.buttonVisible && <Tooltip title="Additional Info">
89                     <IconButton data-cy="additional-info-icon"
90                         color="inherit"
91                         className={props.classes.infoTooltip}
92                         onClick={()=>props.onDetailsPanelToggle(props.routeUuid)}>
93                         <DetailsIcon />
94                     </IconButton>
95                 </Tooltip>}
96             </Grid>
97         </Grid></Toolbar>
98 ));