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>

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();
       });

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;

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 {