X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/6d1c41d6fd83824669cd1a6d714ea6da1ae7ab4c..fabc97343f1b74c66890c00295c5c1911d5e096a:/services/workbench2/src/views-components/side-panel/side-panel.tsx

diff --git a/services/workbench2/src/views-components/side-panel/side-panel.tsx b/services/workbench2/src/views-components/side-panel/side-panel.tsx
index 4953022d66..e19daefa87 100644
--- a/services/workbench2/src/views-components/side-panel/side-panel.tsx
+++ b/services/workbench2/src/views-components/side-panel/side-panel.tsx
@@ -2,17 +2,18 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 import { ArvadosTheme } from 'common/custom-theme';
 import { SidePanelTree, SidePanelTreeProps } from 'views-components/side-panel-tree/side-panel-tree';
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
-import { navigateFromSidePanel } from 'store/side-panel/side-panel-action';
+import { navigateFromSidePanel, setCurrentSideWidth } from 'store/side-panel/side-panel-action';
 import { Grid } from '@material-ui/core';
 import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
 import { RootState } from 'store/store';
 import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
+import { SidePanelCollapsed } from './side-panel-collapsed';
 
 const DRAWER_WIDTH = 240;
 
@@ -35,25 +36,60 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
     onItemActivation: id => {
         dispatch<any>(navigateFromSidePanel(id));
+    },
+    setCurrentSideWidth: width => {
+        dispatch<any>(setCurrentSideWidth(width))
     }
 });
 
-const mapStateToProps = ({ router, sidePanel }: RootState) => ({
+const mapStateToProps = ({ router, sidePanel, detailsPanel }: RootState) => ({
     currentRoute: router.location ? router.location.pathname : '',
-    isCollapsed: sidePanel.collapsedState
+    isCollapsed: sidePanel.collapsedState,
+    isDetailsPanelTransitioning: detailsPanel.isTransitioning
 });
 
 export const SidePanel = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
-        ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
-            <Grid item xs>
-                {props.isCollapsed ? <SidePanelToggle /> :
-                <>
-                    <Grid className={classes.topButtonContainer}>
-                        <SidePanelButton key={props.currentRoute} />
-                        <SidePanelToggle/>
+        ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string, isDetailsPanelTransitioning: boolean }) =>{
+
+        const splitPaneRef = useRef<any>(null)
+
+        useEffect(()=>{
+            const splitPane = splitPaneRef?.current as Element
+
+            if (!splitPane) return;
+
+            const observer = new ResizeObserver((entries)=>{
+                const width = entries[0].contentRect.width
+                props.setCurrentSideWidth(width)
+            })
+
+            observer.observe(splitPane)
+
+            return ()=> observer.disconnect()
+        }, [props])
+
+            return (
+                <Grid item xs>
+                        {props.isCollapsed ? 
+                            <div ref={splitPaneRef}>
+                        <>
+
+                            <SidePanelToggle />
+                            <SidePanelCollapsed />
+                        </>
+                        </div>
+                            :
+                            <>
+                        <div ref={splitPaneRef}>
+                            <Grid className={classes.topButtonContainer}>
+                                <SidePanelButton key={props.currentRoute} />
+                                <SidePanelToggle/>
+                            </Grid>
+                            <SidePanelTree {...props} />
+                        </div>
+                        </>
+                        }
                     </Grid>
-                    <SidePanelTree {...props} />
-                </>}
-            </Grid>
+        )}
     ));