diff --git a/e2e/test/scenarios/collections/personal-collections.cy.spec.js b/e2e/test/scenarios/collections/personal-collections.cy.spec.js index b3471530a5769bc6e191f6181d301e47df17d338..7dbffd615a1fe53cdba2846d2d7b2feae263d508 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 26cf87e9f592c56e0c4a0bd5ac2cbf9411fcb644..0e63ce3c4e479fc74ec4ba1b1dac6a648eca5116 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 a299c55400d7cfa605f511e77ea7f19c8c03282c..8d0d250732e74429af46afe9b65e058cccc5b3d5 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 {