Close collection sidebar on mobile (#17278)

frontend/src/metabase/collections/components/CollectionLink.jsx

 import styled, { css } from "styled-components";
 import Link from "metabase/components/Link";
 import { color } from "metabase/lib/colors";
-
-import { SIDEBAR_SPACER } from "../constants";
+import { space } from "metabase/styled-components/theme";
+import { SIDEBAR_SPACER } from "metabase/collections/constants";
 
 const dimmedIconCss = css`
   fill: ${color("white")};
@@ -17,9 +17,9 @@ const CollectionLink = styled(Link)`
     // now pad it by the depth so we get hover states that are the full width of the sidebar
     props.depth * (SIDEBAR_SPACER * 2) + SIDEBAR_SPACER}px;
   position: relative;
-  padding-right: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-right: ${space(1)};
+  padding-top: ${space(1)};
+  padding-bottom: ${space(1)};
   display: flex;
   flex-shrink: 0;
   align-items: center;

frontend/src/metabase/collections/containers/CollectionSidebar/CollectionSidebar.jsx

@@ -74,13 +74,18 @@ class CollectionSidebar extends React.Component {
 
         <Collection.Loader id="root">
           {({ collection: root }) => (
-            <RootCollectionLink isRoot={isRoot} root={root} />
+            <RootCollectionLink
+              handleToggleMobileSidebar={handleToggleMobileSidebar}
+              isRoot={isRoot}
+              root={root}
+            />
           )}
         </Collection.Loader>
 
         <Collections
           collectionId={collectionId}
           currentUserId={currentUser.id}
+          handleToggleMobileSidebar={handleToggleMobileSidebar}
           list={list}
           onClose={this.onClose}
           onOpen={this.onOpen}

frontend/src/metabase/collections/containers/CollectionSidebar/CollectionSidebarHeader/CollectionSidebarHeader.jsx

-import React from "react";
-import PropTypes from "prop-types";
-import { t } from "ttag";
-
-import * as Urls from "metabase/lib/urls";
-
-import CollectionDropTarget from "metabase/containers/dnd/CollectionDropTarget";
-import CollectionLink from "metabase/collections/components/CollectionLink";
-
-import { Container } from "./CollectionSidebarHeader.styled";
-
-const propTypes = {
-  isRoot: PropTypes.bool.isRequired,
-  root: PropTypes.object.isRequired,
-};
-
-export default function CollectionSidebarHeader({ isRoot, root }) {
-  return (
-    <Container>
-      <CollectionDropTarget collection={root}>
-        {({ highlighted, hovered }) => (
-          <CollectionLink
-            to={Urls.collection({ id: "root" })}
-            selected={isRoot}
-            highlighted={highlighted}
-            hovered={hovered}
-          >
-            {t`Our analytics`}
-          </CollectionLink>
-        )}
-      </CollectionDropTarget>
-    </Container>
-  );
-}
-
-CollectionSidebarHeader.propTypes = propTypes;

frontend/src/metabase/collections/containers/CollectionSidebar/CollectionSidebarHeader/CollectionSidebarHeader.styled.jsx

-import styled from "styled-components";
-import { Box } from "grid-styled";
-
-import { space } from "metabase/styled-components/theme";
-
-export const Container = styled(Box)`
-  margin-bottom: ${space(1)};
-  margin-top: ${space(2)};
-`;

frontend/src/metabase/collections/containers/CollectionSidebar/CollectionSidebarHeader/CollectionSidebarHeader.unit.spec.js

-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { DragDropContextProvider } from "react-dnd";
-import HTML5Backend from "react-dnd-html5-backend";
-
-import CollectionSidebarHeader from "./CollectionSidebarHeader";
-
-it("displays link to main collection: Our Analytics", () => {
-  render(
-    <DragDropContextProvider backend={HTML5Backend}>
-      <CollectionSidebarHeader
-        isRoot={false}
-        root={{ name: "name", id: "root" }}
-      />
-    </DragDropContextProvider>,
-  );
-
-  screen.getByText("Our analytics");
-});

frontend/src/metabase/collections/containers/CollectionSidebar/Collections/Collections.jsx

@@ -13,6 +13,7 @@ import { Container } from "./Collections.styled";
 const propTypes = {
   collectionId: PropTypes.number,
   currentUserId: PropTypes.number,
+  handleToggleMobileSidebar: PropTypes.func.isRequired,
   list: PropTypes.array,
   onClose: PropTypes.func.isRequired,
   onOpen: PropTypes.func.isRequired,
@@ -22,6 +23,7 @@ const propTypes = {
 export default function Collections({
   collectionId,
   currentUserId,
+  handleToggleMobileSidebar,
   list,
   onClose,
   onOpen,
@@ -39,6 +41,7 @@ export default function Collections({
   return (
     <Container>
       <CollectionsList
+        handleToggleMobileSidebar={handleToggleMobileSidebar}
         openCollections={openCollections}
         onClose={onClose}
         onOpen={onOpen}
@@ -49,6 +52,7 @@ export default function Collections({
 
       <Box>
         <CollectionsList
+          handleToggleMobileSidebar={handleToggleMobileSidebar}
           openCollections={openCollections}
           onClose={onClose}
           onOpen={onOpen}

frontend/src/metabase/collections/containers/CollectionSidebar/Collections/CollectionsList/CollectionsList.jsx

@@ -24,6 +24,7 @@ function ToggleChildCollectionButton({ action, collectionId, isOpen }) {
 
   function handleClick(e) {
     e.preventDefault();
+    e.stopPropagation();
     action(collectionId);
   }
 
@@ -61,6 +62,7 @@ function Collection({
   depth,
   currentCollection,
   filter,
+  handleToggleMobileSidebar,
   initialIcon,
   onClose,
   onOpen,
@@ -81,7 +83,7 @@ function Collection({
           // when we click on a link, if there are children,
           // expand to show sub collections
           function handleClick() {
-            children && action(id);
+            handleToggleMobileSidebar();
           }
 
           return (
@@ -110,6 +112,7 @@ function Collection({
       {children && isOpen && (
         <ChildrenContainer>
           <CollectionsList
+            handleToggleMobileSidebar={handleToggleMobileSidebar}
             openCollections={openCollections}
             onOpen={onOpen}
             onClose={onClose}
@@ -127,6 +130,7 @@ function Collection({
 function CollectionsList({
   collections,
   filter,
+  handleToggleMobileSidebar,
   initialIcon,
   depth = 1,
   ...otherProps
@@ -140,6 +144,7 @@ function CollectionsList({
           collection={collection}
           depth={depth}
           filter={filter}
+          handleToggleMobileSidebar={handleToggleMobileSidebar}
           initialIcon={initialIcon}
           key={collection.id}
           {...otherProps}

frontend/src/metabase/collections/containers/CollectionSidebar/RootCollectionLink/RootCollectionLink.jsx

@@ -11,17 +11,27 @@ import CollectionLink from "metabase/collections/components/CollectionLink";
 import { Container } from "./RootCollectionLink.styled";
 
 const propTypes = {
+  handleToggleMobileSidebar: PropTypes.func.isRequired,
   isRoot: PropTypes.bool.isRequired,
   root: PropTypes.object.isRequired,
 };
 
-export default function CollectionSidebarHeader({ isRoot, root }) {
+export default function RootCollectionLink({
+  handleToggleMobileSidebar,
+  isRoot,
+  root,
+}) {
+  function handleClick() {
+    handleToggleMobileSidebar();
+  }
+
   return (
     <Container>
       <CollectionDropTarget collection={root}>
         {({ highlighted, hovered }) => (
           <CollectionLink
             to={Urls.collection({ id: "root" })}
+            onClick={handleClick}
             selected={isRoot}
             highlighted={highlighted}
             hovered={hovered}
@@ -35,4 +45,4 @@ export default function CollectionSidebarHeader({ isRoot, root }) {
   );
 }
 
-CollectionSidebarHeader.propTypes = propTypes;
+RootCollectionLink.propTypes = propTypes;

frontend/test/metabase/scenarios/collections/collections-sidebar.cy.spec.js

@@ -27,4 +27,17 @@ describe("collections sidebar (metabase#15006)", () => {
 
     cy.icon("burger");
   });
+
+  it("should close collections sidebar when collection is clicked in mobile screen size", () => {
+    cy.viewport(480, 800);
+    cy.icon("burger").click();
+
+    sidebar().should("be.visible");
+
+    sidebar().within(() => {
+      cy.findByText("First collection").click();
+    });
+
+    cy.icon("burger");
+  });
 });

frontend/test/metabase/scenarios/collections/collections.cy.spec.js

@@ -7,6 +7,7 @@ import {
   openOrdersTable,
   sidebar,
 } from "__support__/e2e/cypress";
+import { displaySidebarChildOf } from "./helpers/e2e-collections-sidebar.js";
 import { USERS, USER_GROUPS } from "__support__/e2e/cypress_data";
 
 const { nocollection } = USERS;
@@ -122,7 +123,7 @@ describe("scenarios > collection_defaults", () => {
       it("should allow a user to expand a collection without navigating to it", () => {
         cy.visit("/collection/root");
         // 1. click on the chevron to expand the sub collection
-        openDropdownFor("First collection");
+        displaySidebarChildOf("First collection");
         // 2. I should see the nested collection name
         cy.findByText("First collection");
         cy.findByText("Second collection");
@@ -153,10 +154,10 @@ describe("scenarios > collection_defaults", () => {
           });
           cy.visit("/collection/root");
           // 1. Expand out via the chevrons so that all collections are showing
-          openDropdownFor("First collection");
-          openDropdownFor("Second collection");
-          openDropdownFor("Third collection");
-          openDropdownFor("Fourth collection");
+          displaySidebarChildOf("First collection");
+          displaySidebarChildOf("Second collection");
+          displaySidebarChildOf("Third collection");
+          displaySidebarChildOf("Fourth collection");
           // 2. Ensure we can see the entire "Fifth level with a long name" collection text
           cy.findByText("Fifth collection with a very long name");
         });
@@ -324,7 +325,7 @@ describe("scenarios > collection_defaults", () => {
       cy.visit("/collection/root");
       cy.get("[class*=CollectionSidebar]").as("sidebar");
 
-      openDropdownFor("Your personal collection");
+      displaySidebarChildOf("Your personal collection");
       cy.findByText(COLLECTION);
       cy.get("@sidebar")
         .contains("Our analytics")
@@ -396,7 +397,7 @@ describe("scenarios > collection_defaults", () => {
     it("should update UI when nested child collection is moved to the root collection (metabase#14482)", () => {
       cy.visit("/collection/root");
       cy.log("Move 'Second collection' to the root");
-      openDropdownFor("First collection");
+      displaySidebarChildOf("First collection");
       cy.findByText("Second collection").click();
       cy.icon("pencil").click();
       cy.findByText("Edit this collection").click();
@@ -454,6 +455,7 @@ describe("scenarios > collection_defaults", () => {
 
     it("collections without sub-collections shouldn't have chevron icon (metabase#14753)", () => {
       cy.visit("/collection/root");
+
       sidebar()
         .findByText("Your personal collection")
         .parent()
@@ -461,9 +463,8 @@ describe("scenarios > collection_defaults", () => {
         .should("not.exist");
 
       // Ensure if sub-collection is archived, the chevron is not displayed
+      displaySidebarChildOf("First collection");
       sidebar()
-        .findByText("First collection")
-        .click()
         .findByText("Second collection")
         .click();
       cy.icon("pencil").click();
@@ -611,14 +612,6 @@ function createPulse() {
   cy.findByText("Create pulse").click();
 }
 
-function openDropdownFor(collectionName) {
-  cy.findByText(collectionName)
-    .parent()
-    .find(".Icon-chevronright")
-    .eq(0) // there may be more nested icons, but we need the top level one
-    .click();
-}
-
 function openEllipsisMenuFor(item) {
   cy.findByText(item)
     .closest("tr")

frontend/test/metabase/scenarios/collections/helpers/e2e-collections-sidebar.js

+export function displaySidebarChildOf(collectionName) {
+  cy.findByText(collectionName)
+    .parent()
+    .find(".Icon-chevronright")
+    .eq(0) // there may be more nested icons, but we need the top level one
+    .click();
+}

frontend/test/metabase/scenarios/collections/permissions.cy.spec.js

@@ -17,6 +17,7 @@ import {
   sidebar,
   openNativeEditor,
 } from "__support__/e2e/cypress";
+import { displaySidebarChildOf } from "./helpers/e2e-collections-sidebar.js";
 import { USERS } from "__support__/e2e/cypress_data";
 
 const PERMISSIONS = {
@@ -45,8 +46,8 @@ describe("collection permissions", () => {
                 it("should offer to save dashboard to a currently opened collection", () => {
                   cy.visit("/collection/root");
                   sidebar().within(() => {
-                    cy.findByText("First collection").click();
-                    cy.findByText("Second collection").click();
+                    displaySidebarChildOf("First collection");
+                    displaySidebarChildOf("Second collection");
                   });
                   cy.icon("add").click();
                   cy.findByText("New dashboard").click();