Add keyboard shortcut to control the sidebar (#21450)

frontend/src/metabase/nav/containers/AppBar.tsx

-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { t } from "ttag";
 import { Location, LocationDescriptorObject } from "history";
 
@@ -15,6 +15,7 @@ import {
 } from "metabase/nav/containers/Navbar.styled";
 
 import Database from "metabase/entities/databases";
+import { isMac } from "metabase/lib/browser";
 import { isSmallScreen } from "metabase/lib/dom";
 
 import { AppBarRoot, LogoIconWrapper } from "./AppBar.styled";
@@ -42,6 +43,12 @@ function AppBar({
     }
   }, [handleCloseSidebar]);
 
+  const sidebarButtonLabel = useMemo(() => {
+    const message = isSidebarOpen ? t`Close sidebar` : t`Open sidebar`;
+    const shortcut = isMac() ? "(⌘ + .)" : "(Ctrl + .)";
+    return `${message} ${shortcut}`;
+  }, [isSidebarOpen]);
+
   return (
     <AppBarRoot>
       <LogoIconWrapper>
@@ -53,7 +60,7 @@ function AppBar({
           <LogoIcon size={24} />
         </Link>
       </LogoIconWrapper>
-      <Tooltip tooltip={isSidebarOpen ? t`Close sidebar` : t`Open sidebar`}>
+      <Tooltip tooltip={sidebarButtonLabel}>
         <SidebarButton
           onClick={onToggleSidebarClick}
           isSidebarOpen={isSidebarOpen}

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer.tsx

-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { t } from "ttag";
 import { connect } from "react-redux";
 import _ from "underscore";
@@ -13,6 +13,7 @@ import Collections, {
   getCollectionIcon,
   buildCollectionTree,
 } from "metabase/entities/collections";
+import { openNavbar, closeNavbar } from "metabase/redux/app";
 import { getHasDataAccess } from "metabase/new_query/selectors";
 import { getUser } from "metabase/selectors/user";
 import {
@@ -32,6 +33,11 @@ function mapStateToProps(state: unknown) {
   };
 }
 
+const mapDispatchToProps = {
+  openNavbar,
+  closeNavbar,
+};
+
 interface CollectionTreeItem extends Collection {
   icon: string | IconProps;
   children: CollectionTreeItem[];
@@ -51,6 +57,7 @@ type Props = {
   params: {
     slug?: string;
   };
+  openNavbar: () => void;
   closeNavbar: () => void;
 };
 
@@ -63,9 +70,27 @@ function MainNavbarContainer({
   allFetched,
   location,
   params,
+  openNavbar,
   closeNavbar,
   ...props
 }: Props) {
+  useEffect(() => {
+    function handleSidebarKeyboardShortcut(e: KeyboardEvent) {
+      if (e.key === "." && (e.ctrlKey || e.metaKey)) {
+        if (isOpen) {
+          closeNavbar();
+        } else {
+          openNavbar();
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleSidebarKeyboardShortcut);
+    return () => {
+      window.removeEventListener("keydown", handleSidebarKeyboardShortcut);
+    };
+  }, [isOpen, openNavbar, closeNavbar]);
+
   const selectedItem = useMemo<SelectedItem>(() => {
     const { pathname } = location;
     const { slug } = params;
@@ -144,5 +169,5 @@ export default _.compose(
     query: () => ({ tree: true }),
     loadingAndErrorWrapper: false,
   }),
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(MainNavbarContainer);

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -10,8 +10,6 @@ import Link from "metabase/core/components/Link";
 import LogoIcon from "metabase/components/LogoIcon";
 import { AdminNavbar } from "../components/AdminNavbar";
 
-import { closeNavbar } from "metabase/redux/app";
-
 import { getPath, getContext, getUser } from "../selectors";
 import { getHasDataAccess } from "metabase/new_query/selectors";
 import Database from "metabase/entities/databases";
@@ -29,7 +27,6 @@ import MainNavbar from "./MainNavbar";
 
 const mapDispatchToProps = {
   onChangeLocation: push,
-  closeNavbar,
 };
 
 @Database.loadList({
@@ -70,16 +67,11 @@ export default class Navbar extends Component {
   }
 
   renderMainNav() {
-    const { isOpen, location, params, closeNavbar } = this.props;
+    const { isOpen, location, params } = this.props;
     // NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
     return (
       <Sidebar className="Nav" isOpen={isOpen} aria-hidden={!isOpen}>
-        <MainNavbar
-          isOpen={isOpen}
-          location={location}
-          params={params}
-          closeNavbar={closeNavbar}
-        />
+        <MainNavbar isOpen={isOpen} location={location} params={params} />
       </Sidebar>
     );
   }