From 818979d32a30f9b0bdbf5cee646124c131386d70 Mon Sep 17 00:00:00 2001 From: Lisa Knox Date: Sun, 18 Dec 2022 18:08:29 -0500 Subject: [PATCH] collapse toggle button in main app bar, redux store set up to handle state change Arvados-DCO-1.1-Signed-off-by: Lisa Knox --- src/store/store.ts | 19 ++++++++++++++++++- .../main-app-bar/main-app-bar.tsx | 11 ++++++++++- .../side-panel/side-panel.tsx | 14 +++++++++++++- src/views/main-panel/main-panel-root.tsx | 19 +++++++++++++------ src/views/main-panel/main-panel.tsx | 12 ++++++++++-- src/views/workbench/workbench.tsx | 19 ++++++++++--------- 6 files changed, 74 insertions(+), 20 deletions(-) diff --git a/src/store/store.ts b/src/store/store.ts index 94f110a095..2925d8f959 100644 --- 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 442b90345d..fd0bc6ca26 100644 --- 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; @@ -42,6 +46,9 @@ export const MainAppBar = withStyles(styles)( (props: MainAppBarProps) => { return + {pluginConfig.appBarLeft || @@ -49,7 +56,9 @@ export const MainAppBar = withStyles(styles)( ({props.uuidPrefix}) - {props.buildInfo} + + + {props.buildInfo} } )); + +export const CollapseLeftPanelTrigger = (props) =>{ + console.log(props) + return + {props.toggleSidePanel(props.sidepanelcollapsed)}}> + + + + }; \ 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 5853acb065..2019f7bcef 100644 --- 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; 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 ? : <> {isNotLinking && + siteBanner={siteBanner} + sidePanelIsCollapsed={sidePanelIsCollapsed} + toggleSidePanel={props.toggleSidePanel} + > {working ? : null} @@ -54,9 +60,10 @@ export const MainPanelRoot = withStyles(styles)( {user ? (user.isActive || (!user.isActive && isLinkingPath) - ? - : ) + ? + : ) : } +} ); diff --git a/src/views/main-panel/main-panel.tsx b/src/views/main-panel/main-panel.tsx index 2968499df1..0be47f4896 100644 --- 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 22ed30e9ed..d7ab911e0c 100644 --- 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 & 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(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 {props.sessionIdleTimeout > 0 && } @@ -206,7 +208,6 @@ export const WorkbenchPanel = } - {props.isNotLinking && } -- 2.30.2