collapse toggle button in main app bar, redux store set up to handle state change...

diff --git a/src/store/store.ts b/src/store/store.ts
index 94f110a09563ab17537b44445b964f650fef2ce5..2925d8f9593461b190dea92b406d6f2567cbc560 100644 (file)
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -185,6 +185,22 @@ export function configureStore(history: History, services: ServiceRepository, co
     return createStore(rootReducer, enhancer);
 }
 
+//TODO: put sidePanel items in separate file and import
+export const toggleSidePanel = (collapsedState: boolean) => {
+    return (dispatch) => {
+        dispatch({type: 'TOGGLE_COLLAPSE', payload: !collapsedState})
+    }
+}
+
+const sidePanelInitialState = {
+    collapsedState: false
+}
+
+const sidePanelReducer = (state = sidePanelInitialState, action)=>{
+    if(action.type === 'TOGGLE_COLLAPSE') return {...state, collapsedState: action.payload}
+    return state
+}
+
 const createRootReducer = (services: ServiceRepository) => combineReducers({
     auth: authReducer(services),
     collectionPanel: collectionPanelReducer,
@@ -212,5 +228,6 @@ const createRootReducer = (services: ServiceRepository) => combineReducers({
     virtualMachines: virtualMachinesReducer,
     repositories: repositoriesReducer,
     keepServices: keepServicesReducer,
-    linkAccountPanel: linkAccountPanelReducer
+    linkAccountPanel: linkAccountPanelReducer,
+    sidePanel: sidePanelReducer
 });

diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index 442b90345dadad7687266a46749757a9ac8c6527..fd0bc6ca2614ab4e65bff5ddd086dd2763efe924 100644 (file)
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -15,6 +15,8 @@ import { HelpMenu } from 'views-components/main-app-bar/help-menu';
 import { ReactNode } from "react";
 import { AdminMenu } from "views-components/main-app-bar/admin-menu";
 import { pluginConfig } from 'plugins';
+import { CollapseLeftPanelTrigger } from 'views-components/side-panel/side-panel'
+// import { toggleSidePanel } from "store/store";
 
 type CssRules = 'toolbar' | 'link';
 
@@ -34,6 +36,8 @@ interface MainAppBarDataProps {
     children?: ReactNode;
     uuidPrefix: string;
     siteBanner: string;
+    sidePanelIsCollapsed: boolean;
+    toggleSidePanel: (collapsedState:boolean) => void
 }
 
 export type MainAppBarProps = MainAppBarDataProps & WithStyles<CssRules>;
@@ -42,6 +46,9 @@ export const MainAppBar = withStyles(styles)(
     (props: MainAppBarProps) => {
         return <AppBar position="absolute">
             <Toolbar className={props.classes.toolbar}>
+                <CollapseLeftPanelTrigger sidepanelcollapsed={props.sidePanelIsCollapsed} 
+                toggleSidePanel={props.toggleSidePanel}
+                />
                 <Grid container justify="space-between">
                     {pluginConfig.appBarLeft || <Grid container item xs={3} direction="column" justify="center">
                         <Typography variant='h6' color="inherit" noWrap>
@@ -49,7 +56,9 @@ export const MainAppBar = withStyles(styles)(
                                 <span dangerouslySetInnerHTML={{ __html: props.siteBanner }} /> ({props.uuidPrefix})
                 </Link>
                         </Typography>
-                        <Typography variant="caption" color="inherit">{props.buildInfo}</Typography>
+                        <Typography variant="caption" color="inherit">
+                            
+                            {props.buildInfo}</Typography>
                     </Grid>}
                     <Grid
                         item

diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 429e984dc1054dd60150d328433e42188ef9dba5..dce8217a79636e9c856008a7c03963e9e7c4b395 100644 (file)
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -9,9 +9,12 @@ import { SidePanelTree, SidePanelTreeProps } from 'views-components/side-panel-t
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { navigateFromSidePanel } from 'store/side-panel/side-panel-action';
-import { Grid } from '@material-ui/core';
+import { Grid, Tooltip, IconButton  } from '@material-ui/core';
 import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
 import { RootState } from 'store/store';
+import MenuIcon from "@material-ui/icons/Menu";
+// import { IconButtonProps } from '@material-ui/core/IconButton';
+// import { toggleSidePanel } from 'store/store';
 
 const DRAWER_WIDTH = 240;
 
@@ -45,3 +48,12 @@ export const SidePanel = withStyles(styles)(
                 <SidePanelTree {...props} />
             </Grid>
     ));
+
+export const CollapseLeftPanelTrigger = (props) =>{ 
+    console.log(props)
+    return <Tooltip disableFocusListener title="Toggle Side Panel">
+                <IconButton onClick={()=>{props.toggleSidePanel(props.sidepanelcollapsed)}}>
+                    <MenuIcon aria-label="Toggle Side Panel" />
+                </IconButton>
+            </Tooltip>
+    };
\ No newline at end of file

diff --git a/src/views/main-panel/main-panel-root.tsx b/src/views/main-panel/main-panel-root.tsx
index 5853acb065b97acf18ea9061b5dabad77fc1bb50..2019f7bcefb484001cb9030828f55e417d60fba8 100644 (file)
--- a/src/views/main-panel/main-panel-root.tsx
+++ b/src/views/main-panel/main-panel-root.tsx
@@ -11,6 +11,7 @@ import { LoginPanel } from 'views/login-panel/login-panel';
 import { InactivePanel } from 'views/inactive-panel/inactive-panel';
 import { WorkbenchLoadingScreen } from 'views/workbench/workbench-loading-screen';
 import { MainAppBar } from 'views-components/main-app-bar/main-app-bar';
+import { toggleSidePanel } from 'store/store';
 
 type CssRules = 'root';
 
@@ -32,21 +33,26 @@ export interface MainPanelRootDataProps {
     isLinkingPath: boolean;
     siteBanner: string;
     sessionIdleTimeout: number;
+    sidePanelIsCollapsed: boolean;
 }
 
 type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
 
 export const MainPanelRoot = withStyles(styles)(
-    ({ classes, loading, working, user, buildInfo, uuidPrefix,
-        isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout }: MainPanelRootProps) =>
-        loading
+    (props: MainPanelRootProps | any) =>{
+        const{ classes, loading, working, user, buildInfo, uuidPrefix,
+            isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout, sidePanelIsCollapsed: sidePanelIsCollapsed } = props
+            return loading
             ? <WorkbenchLoadingScreen />
             : <>
                 {isNotLinking && <MainAppBar
                     user={user}
                     buildInfo={buildInfo}
                     uuidPrefix={uuidPrefix}
-                    siteBanner={siteBanner}>
+                    siteBanner={siteBanner}
+                    sidePanelIsCollapsed={sidePanelIsCollapsed}
+                    toggleSidePanel={props.toggleSidePanel}
+                    >
                     {working
                         ? <LinearProgress color="secondary" data-cy="linear-progress" />
                         : null}
@@ -54,9 +60,10 @@ export const MainPanelRoot = withStyles(styles)(
                 <Grid container direction="column" className={classes.root}>
                     {user
                         ? (user.isActive || (!user.isActive && isLinkingPath)
-                            ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} />
-                            : <InactivePanel />)
+                        ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} sidePanelIsCollapsed={sidePanelIsCollapsed}/>
+                        : <InactivePanel />)
                         : <LoginPanel />}
                 </Grid>
             </>
+}
 );

diff --git a/src/views/main-panel/main-panel.tsx b/src/views/main-panel/main-panel.tsx
index 2968499df1cef23364329e8fbb1badf4a1ec780a..0be47f4896a4f6ffa8b6d64b30bf59f7dbbe2eeb 100644 (file)
--- a/src/views/main-panel/main-panel.tsx
+++ b/src/views/main-panel/main-panel.tsx
@@ -10,6 +10,7 @@ import { isSystemWorking } from 'store/progress-indicator/progress-indicator-red
 import { isWorkbenchLoading } from 'store/workbench/workbench-actions';
 import { LinkAccountPanelStatus } from 'store/link-account-panel/link-account-panel-reducer';
 import { matchLinkAccountRoute } from 'routes/routes';
+import { toggleSidePanel } from "store/store";
 
 const mapStateToProps = (state: RootState): MainPanelRootDataProps => {
     return {
@@ -21,10 +22,17 @@ const mapStateToProps = (state: RootState): MainPanelRootDataProps => {
         isNotLinking: state.linkAccountPanel.status === LinkAccountPanelStatus.NONE || state.linkAccountPanel.status === LinkAccountPanelStatus.INITIAL,
         isLinkingPath: state.router.location ? matchLinkAccountRoute(state.router.location.pathname) !== null : false,
         siteBanner: state.auth.config.clusterConfig.Workbench.SiteName,
-        sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0
+        sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0,
+        sidePanelIsCollapsed: state.sidePanel.collapsedState,
     };
 };
 
-const mapDispatchToProps = null;
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSidePanel: (collapsedState)=>{
+            return dispatch(toggleSidePanel(collapsedState))
+        }
+    }
+};
 
 export const MainPanel = connect(mapStateToProps, mapDispatchToProps)(MainPanelRoot);

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 22ed30e9ed9e237f609c10902170703ba2b4672f..d7ab911e0cff5b76ed293a6087ec586dea139fba 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -99,6 +99,7 @@ import { RestoreCollectionVersionDialog } from 'views-components/collections-dia
 import { WebDavS3InfoDialog } from 'views-components/webdav-s3-dialog/webdav-s3-dialog';
 import { pluginConfig } from 'plugins';
 import { ElementListReducer } from 'common/plugintypes';
+// import { toggleSidePanel } from 'store/store'
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
 
@@ -137,6 +138,7 @@ interface WorkbenchDataProps {
     isUserActive: boolean;
     isNotLinking: boolean;
     sessionIdleTimeout: number;
+    sidePanelIsCollapsed: boolean;
 }
 
 type WorkbenchPanelProps = WithStyles<CssRules> & WorkbenchDataProps;
@@ -185,16 +187,16 @@ const reduceRoutesFn: (a: React.ReactElement[],
 
 routes = React.createElement(React.Fragment, null, pluginConfig.centerPanelList.reduce(reduceRoutesFn, React.Children.toArray(routes.props.children)));
 
+const applyCollapsedState = (isCollapsed) => {
+    const rightPanel: Element = document.getElementsByClassName('layout-pane')[1]
+    if(rightPanel) {
+        rightPanel.setAttribute('style', `width: ${isCollapsed ? 100 : getSplitterInitialSize()}%`)
+    }
+}
+
 export const WorkbenchPanel =
     withStyles(styles)((props: WorkbenchPanelProps) =>{
-        const [isExpanded, setIsExpanded] = useState<boolean>(false)
-
-        const expandRightPanel = (): void=> {
-            const rightPanel: Element = document.getElementsByClassName('layout-pane')[1]
-            rightPanel.setAttribute('style', `width: ${isExpanded ? getSplitterInitialSize() : 100}%`)
-            setIsExpanded(!isExpanded)
-        }
-
+        applyCollapsedState(props.sidePanelIsCollapsed)
         return <Grid container item xs className={props.classes.root}>
             {props.sessionIdleTimeout > 0 && <AutoLogout />}
             <Grid container item xs className={props.classes.container}>
@@ -206,7 +208,6 @@ export const WorkbenchPanel =
                         <SidePanel />
                     </Grid>}
                     <Grid container item xs component="main" direction="column" className={props.classes.contentWrapper}>
-                    <button onClick={expandRightPanel}>moveSplitter</button>
                         <Grid item xs>
                             {props.isNotLinking && <MainContentBar />}
                         </Grid>