Toggle bookmarks list visibility (#21203)

frontend/src/metabase/collections/components/CollectionSidebar/Bookmarks/Bookmarks.tsx

-import React from "react";
+import React, { useState } from "react";
 import { t } from "ttag";
 
 import * as Urls from "metabase/lib/urls";
@@ -14,7 +14,10 @@ import BookmarksRoot, {
   BookmarkTypeIcon,
 } from "./Bookmarks.styled";
 
-import { SidebarHeading } from "metabase/collections/components/CollectionSidebar/CollectionSidebar.styled";
+import {
+  SidebarHeading,
+  ToggleListDisplayButton,
+} from "metabase/collections/components/CollectionSidebar/CollectionSidebar.styled";
 
 import { Bookmark, BookmarkableEntities, Bookmarks } from "metabase-types/api";
 
@@ -43,6 +46,12 @@ const CollectionSidebarBookmarks = ({
   bookmarks,
   deleteBookmark,
 }: CollectionSidebarBookmarksProps) => {
+  const storedShouldDisplayBookmarks =
+    localStorage.getItem("shouldDisplayBookmarks") !== "false";
+  const [shouldDisplayBookmarks, setShouldDisplayBookmarks] = useState(
+    storedShouldDisplayBookmarks,
+  );
+
   if (bookmarks.length === 0) {
     return null;
   }
@@ -51,28 +60,46 @@ const CollectionSidebarBookmarks = ({
     deleteBookmark(id.toString(), type);
   };
 
+  const toggleBookmarkListVisibility = () => {
+    const booleanForLocalStorage = (!shouldDisplayBookmarks).toString();
+    localStorage.setItem("shouldDisplayBookmarks", booleanForLocalStorage);
+
+    setShouldDisplayBookmarks(!shouldDisplayBookmarks);
+  };
+
   return (
     <BookmarksRoot>
-      <SidebarHeading>{t`Bookmarks`}</SidebarHeading>
-
-      <BookmarkListRoot>
-        {bookmarks.map((bookmark, index) => {
-          const { id, name, type, display } = bookmark;
-          const url = Urls.bookmark({ id, name, type });
-          return (
-            <BookmarkContainer key={`bookmark-${id}`}>
-              <Link to={url}>
-                <Label name={name} type={type} display={display} />
-              </Link>
-              <button onClick={() => handleDeleteBookmark(bookmark)}>
-                <Tooltip tooltip={t`Remove bookmark`} placement="bottom">
-                  <Icon name="bookmark" />
-                </Tooltip>
-              </button>
-            </BookmarkContainer>
-          );
-        })}
-      </BookmarkListRoot>
+      <SidebarHeading onClick={toggleBookmarkListVisibility}>
+        {t`Bookmarks`}{" "}
+        <ToggleListDisplayButton
+          name="play"
+          shouldDisplayBookmarks={shouldDisplayBookmarks}
+          size="8"
+        />
+      </SidebarHeading>
+
+      {shouldDisplayBookmarks && (
+        <BookmarkListRoot>
+          {bookmarks.map((bookmark, index) => {
+            const { id, name, type } = bookmark;
+            const url = Urls.bookmark({ id, name, type });
+
+            return (
+              <BookmarkContainer key={`bookmark-${id}`}>
+                <Link to={url}>
+                  <Label name={name} type={type} />
+                </Link>
+
+                <button onClick={() => handleDeleteBookmark(bookmark)}>
+                  <Tooltip tooltip={t`Remove bookmark`} placement="bottom">
+                    <Icon name="bookmark" />
+                  </Tooltip>
+                </button>
+              </BookmarkContainer>
+            );
+          })}
+        </BookmarkListRoot>
+      )}
     </BookmarksRoot>
   );
 };

frontend/src/metabase/collections/components/CollectionSidebar/CollectionSidebar.styled.jsx → frontend/src/metabase/collections/components/CollectionSidebar/CollectionSidebar.styled.tsx

@@ -18,7 +18,11 @@ export const LoadingTitle = styled.h2`
   margin-top: ${space(1)};
 `;
 
-export const Sidebar = styled.aside`
+interface SidebarProps {
+  shouldDisplayMobileSidebar: boolean;
+}
+
+export const Sidebar = styled.aside<SidebarProps>`
   bottom: 0;
   display: flex;
   box-sizing: border-box;
@@ -32,8 +36,8 @@ export const Sidebar = styled.aside`
   width: 0;
   background-color: ${color("white")};
 
-  ${props =>
-    props.shouldDisplayMobileSidebar &&
+  ${({ shouldDisplayMobileSidebar }) =>
+    shouldDisplayMobileSidebar &&
     css`
       box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.35),
         40px 0px rgba(5, 14, 31, 0.32);
@@ -52,9 +56,39 @@ export const Sidebar = styled.aside`
 
 export const SidebarHeading = styled.h4`
   color: ${color("text-medium")};
+  font-size: 12px;
   font-weight: 700;
+  letter-spacing: 0.5px;
   margin-left: ${space(3)};
   text-transform: uppercase;
+  user-select: none;
+
+  ${({ onClick }) =>
+    onClick &&
+    css`
+      cursor: pointer;
+
+      &:hover {
+        color: ${color("text-dark")};
+      }
+    `};
+`;
+
+interface ToggleListDisplayButtonProps {
+  shouldDisplayBookmarks: boolean;
+}
+
+export const ToggleListDisplayButton = styled(Icon)<
+  ToggleListDisplayButtonProps
+>`
+  margin-left: 4px;
+  transform: translate(0px, -1px);
+
+  ${({ shouldDisplayBookmarks }) =>
+    shouldDisplayBookmarks &&
+    css`
+      transform: rotate(90deg) translate(-1px, -1px);
+    `}
 `;
 
 export const ToggleMobileSidebarIcon = styled(Icon)`

frontend/test/__support__/e2e/helpers/e2e-collection-helpers.js

@@ -19,6 +19,6 @@ export function openNewCollectionItemFlowFor(type) {
     .click();
 }
 
-export function getSidebarSectionTitle(title) {
-  return cy.findAllByRole("heading", { name: title });
+export function getSidebarSectionTitle(name) {
+  return cy.findAllByRole("heading", { name });
 }

frontend/test/metabase-visual/collections/bookmarks.cy.spec.js

@@ -17,7 +17,7 @@ describe("Bookmarks in a collection page", () => {
     cy.visit("/collection/1");
 
     sidebar().within(() => {
-      getSectionTitle("Bookmarks");
+      getSectionTitle(/Bookmarks/);
     });
 
     cy.percySnapshot();

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

@@ -31,7 +31,7 @@ describe("Bookmarks in a collection page", () => {
     cy.icon("bookmark").click();
 
     sidebar().within(() => {
-      getSectionTitle("Bookmarks");
+      getSectionTitle(/Bookmarks/);
       cy.findByText(adminPersonalCollectionName);
 
       // Once there is a list of bookmarks,
@@ -47,7 +47,7 @@ describe("Bookmarks in a collection page", () => {
     sidebar().within(() => {
       cy.findByText(adminPersonalCollectionName).should("not.exist");
 
-      getSectionTitle("Bookmarks").should("not.exist");
+      getSectionTitle(/Bookmarks/).should("not.exist");
 
       // Once there is no list of bookmarks,
       // we remove the heading for the list of collections
@@ -73,7 +73,24 @@ describe("Bookmarks in a collection page", () => {
       cy.icon("bookmark").click({ force: true });
     });
 
-    getSectionTitle("Bookmarks").should("not.exist");
+    getSectionTitle(/Bookmarks/).should("not.exist");
+  });
+
+  it("can toggle bookmark list visibility", () => {
+    cy.visit("/collection/1");
+
+    // Add bookmark
+    cy.icon("bookmark").click();
+
+    sidebar().within(() => {
+      getSectionTitle(/Bookmarks/).click();
+
+      cy.findByText(adminPersonalCollectionName).should("not.exist");
+
+      getSectionTitle(/Bookmarks/).click();
+
+      cy.findByText(adminPersonalCollectionName);
+    });
   });
 });
 
@@ -84,7 +101,7 @@ function addThenRemoveBookmarkTo(itemName) {
   cy.findByText("Bookmark").click();
 
   sidebar().within(() => {
-    getSectionTitle("Bookmarks");
+    getSectionTitle(/Bookmarks/);
     cy.findByText(itemName);
   });
 
@@ -93,7 +110,7 @@ function addThenRemoveBookmarkTo(itemName) {
   cy.findByText("Remove bookmark").click();
 
   sidebar().within(() => {
-    getSectionTitle("Bookmarks").should("not.exist");
+    getSectionTitle(/Bookmarks/).should("not.exist");
     cy.findByText(itemName).should("not.exist");
   });
 }

frontend/test/metabase/scenarios/question/bookmarks.cy.spec.js

@@ -14,7 +14,7 @@ describe("scenarios > question > bookmarks", () => {
     cy.visit("/collection/root");
 
     sidebar().within(() => {
-      getSectionTitle("Bookmarks");
+      getSectionTitle(/Bookmarks/);
       cy.findByText("Orders");
     });
 
@@ -29,7 +29,7 @@ describe("scenarios > question > bookmarks", () => {
 
     cy.wait("@fetchRootCollectionItems");
 
-    getSectionTitle("Bookmarks").should("not.exist");
+    getSectionTitle(/Bookmarks/).should("not.exist");
   });
 });