Merge branch '21379-user-activity-remote-collection'
[arvados.git] / services / workbench2 / src / views-components / side-panel / side-panel.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React, { useRef, useEffect } from 'react';
6 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
7 import { ArvadosTheme } from 'common/custom-theme';
8 import { SidePanelTree, SidePanelTreeProps } from 'views-components/side-panel-tree/side-panel-tree';
9 import { Dispatch } from 'redux';
10 import { connect } from 'react-redux';
11 import { navigateFromSidePanel, setCurrentSideWidth } from 'store/side-panel/side-panel-action';
12 import { Grid } from '@material-ui/core';
13 import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
14 import { RootState } from 'store/store';
15 import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
16 import { SidePanelCollapsed } from './side-panel-collapsed';
17
18 const DRAWER_WIDTH = 240;
19
20 type CssRules = 'root' | 'topButtonContainer';
21
22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
23     root: {
24         background: theme.palette.background.paper,
25         borderRight: `1px solid ${theme.palette.divider}`,
26         height: '100%',
27         overflowX: 'auto',
28         width: DRAWER_WIDTH,
29     },
30     topButtonContainer: {
31         display: 'flex',
32         justifyContent: 'space-between'
33     }
34 });
35
36 const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
37     onItemActivation: id => {
38         dispatch<any>(navigateFromSidePanel(id));
39     },
40     setCurrentSideWidth: width => {
41         dispatch<any>(setCurrentSideWidth(width))
42     }
43 });
44
45 const mapStateToProps = ({ router, sidePanel, detailsPanel }: RootState) => ({
46     currentRoute: router.location ? router.location.pathname : '',
47     isCollapsed: sidePanel.collapsedState,
48     isDetailsPanelTransitioning: detailsPanel.isTransitioning
49 });
50
51 export const SidePanel = withStyles(styles)(
52     connect(mapStateToProps, mapDispatchToProps)(
53         ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string, isDetailsPanelTransitioning: boolean }) =>{
54
55         const splitPaneRef = useRef<any>(null)
56
57         useEffect(()=>{
58             const splitPane = splitPaneRef?.current as Element
59
60             if (!splitPane) return;
61
62             const observer = new ResizeObserver((entries)=>{
63                 const width = entries[0].contentRect.width
64                 props.setCurrentSideWidth(width)
65             })
66
67             observer.observe(splitPane)
68
69             return ()=> observer.disconnect()
70         }, [props])
71
72             return (
73                 <Grid item xs>
74                         {props.isCollapsed ? 
75                             <div ref={splitPaneRef}>
76                         <>
77
78                             <SidePanelToggle />
79                             <SidePanelCollapsed />
80                         </>
81                         </div>
82                             :
83                             <>
84                         <div ref={splitPaneRef}>
85                             <Grid className={classes.topButtonContainer}>
86                                 <SidePanelButton key={props.currentRoute} />
87                                 <SidePanelToggle/>
88                             </Grid>
89                             <SidePanelTree {...props} />
90                         </div>
91                         </>
92                         }
93                     </Grid>
94         )}
95     ));