feat(sidebar): Expand/Collapse the new sidebar COMPASS-5967 (#3430)

* Expand/Collapse the sidebar

* update test

* Update packages/compass-sidebar/src/components/sidebar.tsx

Co-authored-by: Rhys <Anemy@users.noreply.github.com>

* Update packages/compass-components/src/components/resizeable-sidebar.tsx

Co-authored-by: Rhys <Anemy@users.noreply.github.com>

* and useEffect

* and prevWidth

* reformat

Co-authored-by: Rhys <Anemy@users.noreply.github.com>

Author: lerouxb

packages/compass-components/src/components/resizeable-sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import {
   ResizeHandle,
   ResizeDirection,
@@ -57,24 +57,70 @@ const containerStylesLight = css({
   backgroundColor: 'var(--bg-color)',
 });
 
-const initialSidebarWidth = spacing[6] * 4 - spacing[1]; // 252px
-const minSidebarWidth = spacing[4] * 9; // 216px
-
 const ResizableSidebar = ({
-  initialWidth = initialSidebarWidth,
-  minWidth = minSidebarWidth,
+  collapsable = false,
+  expanded = true,
+  setExpanded = () => {
+    return;
+  },
+  initialWidth = spacing[6] * 4,
+  minWidth = 210,
+  collapsedWidth = 48,
   children,
 }: {
+  collapsable?: boolean;
+  expanded?: boolean;
+  setExpanded?: (isExpaned: boolean) => void;
   initialWidth?: number;
   minWidth?: number;
+  collapsedWidth?: number;
   children: JSX.Element;
 }): JSX.Element => {
   const [width, setWidth] = useState(initialWidth);
+  const [prevWidth, setPrevWidth] = useState(initialWidth);
 
   const getMaxSidebarWidth = useCallback(() => {
     return Math.max(minWidth, window.innerWidth - 100);
   }, [minWidth]);
 
+  // Apply bounds to the sidebar width when resizing to ensure it's always
+  // visible and usable to the user.
+  const boundSidebarWidth = useCallback(
+    (attemptedWidth: number) => {
+      const maxWidth = getMaxSidebarWidth();
+
+      return Math.min(maxWidth, Math.max(minWidth, attemptedWidth));
+    },
+    [getMaxSidebarWidth, minWidth]
+  );
+
+  const updateWidth = useCallback(
+    (newWidth: number) => {
+      setWidth(newWidth);
+
+      const expectedExpanded = width > minWidth || !collapsable;
+      if (expanded !== expectedExpanded) {
+        setExpanded(expectedExpanded);
+      }
+
+      // Keep the most recent expanded width in case the sidebar suddenly gets
+      // collapsed (via a button or keyboard shortcut or similar) so that if it
+      // gets similarly expanded later we can restore the width.
+      if (expectedExpanded) {
+        setPrevWidth(newWidth);
+      }
+    },
+    [collapsable, expanded, minWidth, setExpanded, width]
+  );
+
+  const renderedWidth = expanded ? boundSidebarWidth(width) : collapsedWidth;
+
+  useEffect(() => {
+    if (expanded && width === collapsedWidth) {
+      setWidth(prevWidth);
+    }
+  }, [setWidth, prevWidth, expanded, width, collapsedWidth]);
+
   const { theme } = useTheme();
 
   return (
@@ -84,17 +130,17 @@ const ResizableSidebar = ({
         theme === Theme.Dark ? containerStylesDark : containerStylesLight
       )}
       style={{
-        minWidth: minWidth,
-        width: width,
+        minWidth: collapsable ? collapsedWidth : minWidth,
+        width: renderedWidth,
         flex: 'none',
       }}
     >
       {children}
       <ResizeHandle
-        onChange={(newWidth) => setWidth(newWidth)}
+        onChange={updateWidth}
         direction={ResizeDirection.RIGHT}
         value={width}
-        minValue={minWidth}
+        minValue={collapsable ? collapsedWidth : minWidth}
         maxValue={getMaxSidebarWidth()}
         title="sidebar"
       />

packages/compass-sidebar/src/components/navigation-items.tsx

@@ -151,8 +151,10 @@ export function NavigationItems({
         actions={databasesActions}
         isActive={currentLocation === 'Databases'}
       />
-      <DatabaseCollectionFilter changeFilterRegex={changeFilterRegex} />
-      <SidebarDatabasesNavigation />
+      {isExpanded && (
+        <DatabaseCollectionFilter changeFilterRegex={changeFilterRegex} />
+      )}
+      {isExpanded && <SidebarDatabasesNavigation />}
     </>
   );
 }

packages/compass-sidebar/src/components/sidebar-title.tsx

@@ -13,11 +13,12 @@ import {
 
 import type { ItemAction } from '@mongodb-js/compass-components';
 
-type Actions =
+type Action =
   | 'open-instance-workspace'
   | 'copy-connection-string'
   | 'edit-favorite'
   | 'open-connection-info'
+  | 'expand-sidebar'
   | 'refresh-data';
 
 const titleLabel = css({
@@ -44,7 +45,6 @@ const TitleLabel: React.FunctionComponent<React.HTMLProps<HTMLSpanElement>> = ({
 
 const titleLogo = css({
   width: spacing[5],
-  paddingLeft: spacing[1],
   marginTop: '6px', // hardcoded to try and match the design
   flexShrink: 0,
 });
@@ -100,10 +100,10 @@ function SidebarTitle({
   title: string;
   isFavorite: boolean;
   isExpanded?: boolean;
-  onAction(actionName: Actions, ...rest: any[]): void;
+  onAction(actionName: Action, ...rest: any[]): void;
 }) {
   const actions = useMemo(() => {
-    const actions: ItemAction<Actions>[] = [];
+    const actions: ItemAction<Action>[] = [];
 
     actions.push({
       action: 'copy-connection-string',
@@ -135,16 +135,20 @@ function SidebarTitle({
   const { theme } = useTheme();
 
   const onClick = useCallback(() => {
-    onAction('open-instance-workspace', 'My Queries');
-  }, [onAction]);
+    if (isExpanded) {
+      onAction('open-instance-workspace', 'My Queries');
+    } else {
+      onAction('expand-sidebar');
+    }
+  }, [isExpanded, onAction]);
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div className={cx(sidebarTitle)} onClick={onClick}>
       <TitleLogo />
       {isExpanded && <TitleLabel title={title}>{title}</TitleLabel>}
       {isExpanded && (
-        <ItemActionControls<Actions>
+        <ItemActionControls<Action>
           onAction={onAction}
           iconSize="small"
           actions={actions}

packages/compass-sidebar/src/components/sidebar.tsx

@@ -3,6 +3,7 @@ import { cloneDeep } from 'lodash';
 import { connect } from 'react-redux';
 import { getConnectionTitle } from 'mongodb-data-service';
 import type { ConnectionInfo } from 'mongodb-data-service';
+import type { MongoDBInstance } from 'mongodb-instance-model';
 import {
   css,
   spacing,
@@ -24,7 +25,7 @@ import NonGenuineMarker from './non-genuine-marker';
 
 import { updateAndSaveConnectionInfo } from '../modules/connection-info';
 import { toggleIsGenuineMongoDBVisible } from '../modules/is-genuine-mongodb-visible';
-import type { MongoDBInstance } from 'mongodb-instance-model';
+import { setIsExpanded } from '../modules/is-expanded';
 
 const TOAST_TIMEOUT_MS = 5000; // 5 seconds.
 
@@ -35,26 +36,29 @@ const badgesPlaceholderStyles = css({
 
 // eslint-disable-next-line no-empty-pattern
 export function Sidebar({
+  isExpanded,
   connectionInfo,
   globalAppRegistryEmit,
   updateAndSaveConnectionInfo,
   isGenuineMongoDBVisible,
   toggleIsGenuineMongoDBVisible,
+  setIsExpanded,
   isGenuine,
   csfleMode,
 }: {
+  isExpanded: boolean;
   connectionInfo: ConnectionInfo;
   globalAppRegistryEmit: any;
   updateAndSaveConnectionInfo: any;
   isGenuineMongoDBVisible: boolean;
   toggleIsGenuineMongoDBVisible: (isVisible: boolean) => void;
+  setIsExpanded: (isExpanded: boolean) => void;
   isGenuine?: boolean;
   csfleMode?: 'enabled' | 'disabled' | 'unavailable';
 }) {
   const [isFavoriteModalVisible, setIsFavoriteModalVisible] = useState(false);
   const [isConnectionInfoModalVisible, setIsConnectionInfoModalVisible] =
     useState(false);
-  const [isExpanded] = useState(true);
 
   const onClickSaveFavorite = useCallback(
     (newFavoriteInfo) => {
@@ -108,10 +112,16 @@ export function Sidebar({
         return;
       }
 
+      if (action === 'expand-sidebar') {
+        setIsExpanded(true);
+        return;
+      }
+
       globalAppRegistryEmit(action, ...rest);
     },
     [
       connectionInfo.connectionOptions.connectionString,
+      setIsExpanded,
       globalAppRegistryEmit,
       openToast,
     ]
@@ -135,7 +145,11 @@ export function Sidebar({
   );
 
   return (
-    <ResizableSidebar>
+    <ResizableSidebar
+      collapsable={true}
+      expanded={isExpanded}
+      setExpanded={setIsExpanded}
+    >
       <>
         <SidebarTitle
           title={getConnectionTitle(connectionInfo)}
@@ -190,12 +204,14 @@ export function Sidebar({
 }
 
 const mapStateToProps = (state: {
+  isExpanded: boolean;
   connectionInfo: {
     connectionInfo: ConnectionInfo;
   };
   isGenuineMongoDBVisible: boolean;
   instance?: MongoDBInstance;
 }) => ({
+  isExpanded: state.isExpanded,
   connectionInfo: state.connectionInfo.connectionInfo,
   isGenuineMongoDBVisible: state.isGenuineMongoDBVisible,
   isGenuine: state.instance?.genuineMongoDB.isGenuine,
@@ -206,6 +222,7 @@ const MappedSidebar = connect(mapStateToProps, {
   globalAppRegistryEmit,
   updateAndSaveConnectionInfo,
   toggleIsGenuineMongoDBVisible,
+  setIsExpanded,
 })(Sidebar);
 
 export default MappedSidebar;

packages/compass-sidebar/src/modules/index.js

@@ -19,6 +19,7 @@ import connectionOptions, {
   INITIAL_STATE as CONNECTION_OPTIONS_IS,
 } from './connection-options';
 import location, { INITIAL_STATE as LOCATION_IS } from './location';
+import isExpanded, { INITIAL_STATE as IS_EXPANDED_IS } from './is-expanded';
 
 /**
  * The reducer.
@@ -32,6 +33,7 @@ const reducer = combineReducers({
   isDetailsExpanded,
   isGenuineMongoDBVisible,
   location,
+  isExpanded,
 });
 
 /**
@@ -53,6 +55,7 @@ const rootReducer = (state, action) => {
       isDetailsExpanded: IS_DETAILS_EXPANDED_INITIAL_STATE,
       isGenuineMongoDBVisible: IS_VISIBLE_IS,
       location: LOCATION_IS,
+      isExpanded: IS_EXPANDED_IS,
     };
   }
   return reducer(state, action);

packages/compass-sidebar/src/modules/is-expanded.ts

@@ -0,0 +1,25 @@
+import type { AnyAction } from 'redux';
+
+export const TOGGLE = 'sidebar/TOGGLE';
+export const SET_EXPANDED = 'sidebar/SET_EXPANDED';
+
+export const INITIAL_STATE = true;
+
+export default function reducer(state = INITIAL_STATE, action: AnyAction) {
+  if (action.type === TOGGLE) {
+    return !state;
+  }
+  if (action.type === SET_EXPANDED) {
+    return action.isExpanded;
+  }
+  return state;
+}
+
+export const toggleSidebar = () => ({
+  type: TOGGLE,
+});
+
+export const setIsExpanded = (isExpanded: boolean) => ({
+  type: SET_EXPANDED,
+  isExpanded,
+});

packages/compass-sidebar/src/stores/store.js

@@ -10,6 +10,7 @@ import { reset } from '../modules/reset';
 import { toggleIsGenuineMongoDBVisible } from '../modules/is-genuine-mongodb-visible';
 import { changeConnectionInfo } from '../modules/connection-info';
 import { changeConnectionOptions } from '../modules/connection-options';
+import { toggleSidebar } from '../modules/is-expanded';
 
 // We use these symbols so that nothing from outside can access these values on
 // the store
@@ -191,6 +192,10 @@ store.onActivated = (appRegistry) => {
   appRegistry.on('data-service-disconnected', () => {
     store.dispatch(reset());
   });
+
+  appRegistry.on('toggle-sidebar', () => {
+    store.dispatch(toggleSidebar());
+  });
 };
 
 export default store;

packages/compass/src/app/index.js

@@ -341,6 +341,10 @@ app.extend({
           ipc.on('app:refresh-data', () =>
             global.hadronApp.appRegistry.emit('refresh-data')
           );
+          // catch a toggle sidebar coming from window-manager
+          ipc.on('app:toggle-sidebar', () =>
+            global.hadronApp.appRegistry.emit('toggle-sidebar')
+          );
           // as soon as dom is ready, render and set up the rest
           state.render();
           marky.stop('Time to Connect rendered');

packages/compass/src/main/menu.spec.ts

@@ -136,6 +136,13 @@ describe('CompassMenu', function () {
           {
             type: 'separator',
           },
+          {
+            accelerator: 'CmdOrCtrl+Shift+D',
+            label: '&Toggle Sidebar',
+          },
+          {
+            type: 'separator'
+          },
           {
             accelerator: 'CmdOrCtrl+0',
             label: 'Actual Size',
@@ -182,6 +189,13 @@ describe('CompassMenu', function () {
           {
             type: 'separator',
           },
+          {
+            accelerator: 'CmdOrCtrl+Shift+D',
+            label: '&Toggle Sidebar',
+          },
+          {
+            type: 'separator'
+          },
           {
             accelerator: 'CmdOrCtrl+0',
             label: 'Actual Size',

packages/compass/src/main/menu.ts

@@ -395,6 +395,14 @@ function viewSubMenu(
         },
       },
       separator(),
+      {
+        label: '&Toggle Sidebar',
+        accelerator: 'CmdOrCtrl+Shift+D',
+        click() {
+          ipcMain.broadcast('app:toggle-sidebar');
+        },
+      },
+      separator(),
       {
         label: 'Actual Size',
         accelerator: 'CmdOrCtrl+0',