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