diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx index 74f8706ff1..368c7f1b77 100644 --- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx +++ b/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 = ( + <> + + {t('trash')} + + ) + return (
)} - + {/* 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' ? ( + + {trashItemContent} + + ) : ( + + )}
diff --git a/services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx b/services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx index c675d1939e..b84d4f5756 100644 --- a/services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx +++ b/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('', 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('', 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('', 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', [])