backported "fix(webapp/sidenav): Move Browse sidebar section in between...

backported "fix(webapp/sidenav): Move Browse sidebar section in between Trash and other collections" (#46604) * 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>

backported "fix(webapp/sidenav): Move Browse sidebar section in between...
4081e04e · github-automation-metabase · GitHub · 733dde5e · 4081e04e · 4081e04e
Unverified Commit 4081e04e authored 6 months ago by github-automation-metabase Committed by GitHub 6 months ago
--- 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();
      });

--- 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;

--- 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>
+    <ErrorBoundary>
-      <div>
+      <SidebarContentRoot>
-        <SidebarSection>
+        <div>
-          <PaddedSidebarLink
+          <SidebarSection>
-            isSelected={nonEntityItem?.url === "/"}
+            <ErrorBoundary>
-            icon="home"
+              <PaddedSidebarLink
-            onClick={handleHomeClick}
+                isSelected={nonEntityItem?.url === "/"}
-            url="/"
+                icon="home"
-          >
+                onClick={handleHomeClick}
-            {t`Home`}
+                url="/"
-          </PaddedSidebarLink>
+              >
+                {t`Home`}
+              </PaddedSidebarLink>
-          {hasAttachedDWHFeature && uploadDbId && rootCollection && (
+              {hasAttachedDWHFeature && uploadDbId && rootCollection && (
-            <UploadCSV collection={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>
              )}
-            </>
+            </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
+            <ErrorBoundary>
-              bookmarks={bookmarks}
+              <CollectionSectionHeading
-              selectedItem={cardItem ?? dashboardItem ?? collectionItem}
+                currentUser={currentUser}
-              onSelect={onItemSelect}
+                handleCreateNewCollection={handleCreateNewCollection}
-              reorderBookmarks={reorderBookmarks}
+              />
-              onToggle={setExpandBookmarks}
+              <Tree
-              initialState={expandBookmarks ? "expanded" : "collapsed"}
+                data={collections}
-            />
+                selectedId={collectionItem?.id}
+                onSelect={onItemSelect}
+                TreeNode={SidebarCollectionLink}
+                role="tree"
+                aria-label="collection-tree"
+              />
+            </ErrorBoundary>
          </SidebarSection>
-        )}
-        <SidebarSection>
+          <SidebarSection>
-          <CollectionSectionHeading
+            <ErrorBoundary>
-            currentUser={currentUser}
+              <BrowseNavSection
-            handleCreateNewCollection={handleCreateNewCollection}
+                nonEntityItem={nonEntityItem}
-          />
+                onItemSelect={onItemSelect}
-          <Tree
+                hasDataAccess={hasDataAccess}
-            data={collections}
+              />
-            selectedId={collectionItem?.id}
+              {hasDataAccess && (
-            onSelect={onItemSelect}
+                <>
-            TreeNode={SidebarCollectionLink}
+                  {!hasOwnDatabase && isAdmin && (
-            role="tree"
+                    <AddYourOwnDataLink
-            aria-label="collection-tree"
+                      icon="add"
-          />
+                      url={ADD_YOUR_OWN_DATA_URL}
-        </SidebarSection>
+                      isSelected={nonEntityItem?.url?.startsWith(
-      </div>
+                        ADD_YOUR_OWN_DATA_URL,
-      <WhatsNewNotification />
+                      )}
-    </SidebarContentRoot>
+                      onClick={onItemSelect}
+                    >
+                      {t`Add your own data`}
+                    </AddYourOwnDataLink>
+                  )}
+                </>
+              )}
+            </ErrorBoundary>
+          </SidebarSection>
+        </div>
+        <WhatsNewNotification />
+      </SidebarContentRoot>
+    </ErrorBoundary>
  );
 }
 interface CollectionSectionHeadingProps {