From 4081e04ec0458a720d6034485328b32cb6f418d3 Mon Sep 17 00:00:00 2001
From: github-automation-metabase
<166700802+github-automation-metabase@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:31:10 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20backported=20"fix(webapp/sidenav?=
=?UTF-8?q?):=20Move=20Browse=20sidebar=20section=20in=20between=20Trash?=
=?UTF-8?q?=20and=20other=20collections"=20(#46604)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* fix(webapp/sidenav): Move Browse sidebar section in between Trash and other collections (#46457)
* wip
* restore mainnavbarview
* fix(webapp/sidenav): Move Browse sidebar section below collections (#46457)
---------
Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com>
---
.../personal-collections.cy.spec.js | 4 +-
.../MainNavbar/MainNavbar.styled.tsx | 7 +
.../MainNavbarContainer/MainNavbarView.tsx | 138 ++++++++++--------
3 files changed, 85 insertions(+), 64 deletions(-)
diff --git a/e2e/test/scenarios/collections/personal-collections.cy.spec.js b/e2e/test/scenarios/collections/personal-collections.cy.spec.js
index b3471530a57..7dbffd615a1 100644
--- a/e2e/test/scenarios/collections/personal-collections.cy.spec.js
+++ b/e2e/test/scenarios/collections/personal-collections.cy.spec.js
@@ -61,7 +61,9 @@ describe("personal collections", () => {
});
cy.visit("/collection/root");
- cy.findByRole("tree").findByText("Your personal collection");
+ cy.findAllByRole("tree")
+ .contains("Your personal collection")
+ .should("be.visible");
navigationSidebar().within(() => {
cy.icon("ellipsis").click();
});
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx
index 26cf87e9f59..0e63ce3c4e4 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx
@@ -11,6 +11,7 @@ import {
import { Icon } from "metabase/ui";
import { SidebarLink } from "./SidebarItems";
+import { ExpandToggleButton } from "./SidebarItems/SidebarItems.styled";
const openSidebarCSS = css`
width: ${NAV_SIDEBAR_WIDTH};
@@ -84,6 +85,12 @@ export const SidebarSection = styled.div`
padding-inline-end: ${space(2)};
`;
+export const TrashSidebarSection = styled(SidebarSection)`
+ ${ExpandToggleButton} {
+ width: 12px;
+ }
+`;
+
export const SidebarHeadingWrapper = styled.div`
display: flex;
align-items: center;
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx
index a299c55400d..8d0d250732e 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx
@@ -3,6 +3,7 @@ import { useCallback } from "react";
import { t } from "ttag";
import _ from "underscore";
+import ErrorBoundary from "metabase/ErrorBoundary";
import { useUserSetting } from "metabase/common/hooks";
import { useHasTokenFeature } from "metabase/common/hooks/use-has-token-feature";
import { useIsAtHomepageDashboard } from "metabase/common/hooks/use-is-at-homepage-dashboard";
@@ -122,76 +123,87 @@ function MainNavbarView({
);
return (
- <SidebarContentRoot>
- <div>
- <SidebarSection>
- <PaddedSidebarLink
- isSelected={nonEntityItem?.url === "/"}
- icon="home"
- onClick={handleHomeClick}
- url="/"
- >
- {t`Home`}
- </PaddedSidebarLink>
+ <ErrorBoundary>
+ <SidebarContentRoot>
+ <div>
+ <SidebarSection>
+ <ErrorBoundary>
+ <PaddedSidebarLink
+ isSelected={nonEntityItem?.url === "/"}
+ icon="home"
+ onClick={handleHomeClick}
+ url="/"
+ >
+ {t`Home`}
+ </PaddedSidebarLink>
- {hasAttachedDWHFeature && uploadDbId && rootCollection && (
- <UploadCSV collection={rootCollection} />
- )}
- </SidebarSection>
- <SidebarSection>
- <BrowseNavSection
- nonEntityItem={nonEntityItem}
- onItemSelect={onItemSelect}
- hasDataAccess={hasDataAccess}
- />
- {hasDataAccess && (
- <>
- {!hasOwnDatabase && isAdmin && (
- <AddYourOwnDataLink
- icon="add"
- url={ADD_YOUR_OWN_DATA_URL}
- isSelected={nonEntityItem?.url?.startsWith(
- ADD_YOUR_OWN_DATA_URL,
- )}
- onClick={onItemSelect}
- >
- {t`Add your own data`}
- </AddYourOwnDataLink>
+ {hasAttachedDWHFeature && uploadDbId && rootCollection && (
+ <UploadCSV collection={rootCollection} />
)}
- </>
+ </ErrorBoundary>
+ </SidebarSection>
+
+ {bookmarks.length > 0 && (
+ <SidebarSection>
+ <ErrorBoundary>
+ <BookmarkList
+ bookmarks={bookmarks}
+ selectedItem={cardItem ?? dashboardItem ?? collectionItem}
+ onSelect={onItemSelect}
+ reorderBookmarks={reorderBookmarks}
+ onToggle={setExpandBookmarks}
+ initialState={expandBookmarks ? "expanded" : "collapsed"}
+ />
+ </ErrorBoundary>
+ </SidebarSection>
)}
- </SidebarSection>
- {bookmarks.length > 0 && (
<SidebarSection>
- <BookmarkList
- bookmarks={bookmarks}
- selectedItem={cardItem ?? dashboardItem ?? collectionItem}
- onSelect={onItemSelect}
- reorderBookmarks={reorderBookmarks}
- onToggle={setExpandBookmarks}
- initialState={expandBookmarks ? "expanded" : "collapsed"}
- />
+ <ErrorBoundary>
+ <CollectionSectionHeading
+ currentUser={currentUser}
+ handleCreateNewCollection={handleCreateNewCollection}
+ />
+ <Tree
+ data={collections}
+ selectedId={collectionItem?.id}
+ onSelect={onItemSelect}
+ TreeNode={SidebarCollectionLink}
+ role="tree"
+ aria-label="collection-tree"
+ />
+ </ErrorBoundary>
</SidebarSection>
- )}
- <SidebarSection>
- <CollectionSectionHeading
- currentUser={currentUser}
- handleCreateNewCollection={handleCreateNewCollection}
- />
- <Tree
- data={collections}
- selectedId={collectionItem?.id}
- onSelect={onItemSelect}
- TreeNode={SidebarCollectionLink}
- role="tree"
- aria-label="collection-tree"
- />
- </SidebarSection>
- </div>
- <WhatsNewNotification />
- </SidebarContentRoot>
+ <SidebarSection>
+ <ErrorBoundary>
+ <BrowseNavSection
+ nonEntityItem={nonEntityItem}
+ onItemSelect={onItemSelect}
+ hasDataAccess={hasDataAccess}
+ />
+ {hasDataAccess && (
+ <>
+ {!hasOwnDatabase && isAdmin && (
+ <AddYourOwnDataLink
+ icon="add"
+ url={ADD_YOUR_OWN_DATA_URL}
+ isSelected={nonEntityItem?.url?.startsWith(
+ ADD_YOUR_OWN_DATA_URL,
+ )}
+ onClick={onItemSelect}
+ >
+ {t`Add your own data`}
+ </AddYourOwnDataLink>
+ )}
+ </>
+ )}
+ </ErrorBoundary>
+ </SidebarSection>
+ </div>
+ <WhatsNewNotification />
+ </SidebarContentRoot>
+ </ErrorBoundary>
);
}
interface CollectionSectionHeadingProps {
--
GitLab