Merge pull request #36620 from overleaf/copilot/fix-default-trash-view

Default Trash nav item to the current location

GitOrigin-RevId: 939284aecc4a002394430e9e2850125825d599de

services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx

@@ -42,6 +42,16 @@ function SidebarDsNav({
   })
   const { containerRef, scrolledUp } = useScrolled()
 
+  const trashItemClassName = classnames('ds-nav-page-switcher-item', {
+    active: isTrashActive,
+  })
+  const trashItemContent = (
+    <>
+      <Trash size={20} />
+      <span className="ds-nav-page-switcher-item-label">{t('trash')}</span>
+    </>
+  )
+
   return (
     <div
       className="project-list-sidebar-wrapper-react d-none d-md-flex"
@@ -79,19 +89,26 @@ function SidebarDsNav({
               inLibrary={activePage === 'library'}
             />
           )}
-          <button
-            type="button"
-            className={classnames('ds-nav-page-switcher-item', {
-              active: isTrashActive,
-            })}
-            aria-current={isTrashActive ? 'page' : undefined}
-            onClick={() => selectFilter('trashed')}
-          >
-            <Trash size={20} />
-            <span className="ds-nav-page-switcher-item-label">
-              {t('trash')}
-            </span>
-          </button>
+          {/* The trash view defaults to the location the user is navigating from: the
+          library trash when on the library, the project trash everywhere else. */}
+          {activePage === 'library' ? (
+            <a
+              href="/library/trashed"
+              className={trashItemClassName}
+              aria-current={isTrashActive ? 'page' : undefined}
+            >
+              {trashItemContent}
+            </a>
+          ) : (
+            <button
+              type="button"
+              className={trashItemClassName}
+              aria-current={isTrashActive ? 'page' : undefined}
+              onClick={() => selectFilter('trashed')}
+            >
+              {trashItemContent}
+            </button>
+          )}
           <div className="project-list-sidebar-survey-wrapper">
             <SurveyWidgetDsNav />
           </div>

services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx

@@ -1,4 +1,4 @@
-import { screen, waitFor, within } from '@testing-library/react'
+import { fireEvent, screen, waitFor, within } from '@testing-library/react'
 import { expect } from 'chai'
 import SidebarDsNav from '../../../../../../frontend/js/features/project-list/components/sidebar/sidebar-ds-nav'
 import {
@@ -61,7 +61,7 @@ describe('<SidebarDsNav />', function () {
     await renderSidebar({ activePage: 'library', trashActive: true })
 
     expect(
-      screen.getByRole('button', { name: 'Trash' }).getAttribute('aria-current')
+      screen.getByRole('link', { name: 'Trash' }).getAttribute('aria-current')
     ).to.equal('page')
     expect(
       screen.getByRole('link', { name: 'Library' }).getAttribute('aria-current')
@@ -75,7 +75,7 @@ describe('<SidebarDsNav />', function () {
       screen.getByRole('link', { name: 'Library' }).getAttribute('aria-current')
     ).to.equal('page')
     expect(
-      screen.getByRole('button', { name: 'Trash' }).getAttribute('aria-current')
+      screen.getByRole('link', { name: 'Trash' }).getAttribute('aria-current')
     ).to.be.null
   })
 
@@ -88,10 +88,26 @@ describe('<SidebarDsNav />', function () {
       screen.getByRole('link', { name: 'Library' }).getAttribute('aria-current')
     ).to.equal('page')
     expect(
-      screen.getByRole('button', { name: 'Trash' }).getAttribute('aria-current')
+      screen.getByRole('link', { name: 'Trash' }).getAttribute('aria-current')
     ).to.be.null
   })
 
+  it('links trash to the library trash on the library view', async function () {
+    await renderSidebar({ activePage: 'library' })
+
+    expect(
+      screen.getByRole('link', { name: 'Trash' }).getAttribute('href')
+    ).to.equal('/library/trashed')
+  })
+
+  it('navigates to the project trash on the projects view', async function () {
+    await renderSidebar({ activePage: 'projects' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Trash' }))
+
+    expect(window.location.pathname).to.equal('/project/trashed')
+  })
+
   describe('library "New" badge', function () {
     it('shows the badge on the projects page when the tutorial is active', async function () {
       window.metaAttributesCache.set('ol-inactiveTutorials', [])