feat(frontend): Add filter navigation remove button (#12668)

* feat(frontend): Add filter navigation remove button

* extend docs

* extract and extend labels

* add spacer

* fix test

* small fix

* remove unneeded labels

* add mechanism for not triggering on viewsets

* reduce diff for now

* fix test

---------

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

src/frontend/src/components/nav/DetailNavigation.tsx

@@ -1,7 +1,13 @@
-import { ActionIcon, Group, Text, Tooltip } from '@mantine/core';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { ActionIcon, Group, Space, Text, Tooltip } from '@mantine/core';
+import {
+  IconCancel,
+  IconChevronLeft,
+  IconChevronRight
+} from '@tabler/icons-react';
 
 import { t } from '@lingui/core/macro';
+import { useNavigate } from 'react-router-dom';
+import { removeDetailNavigationParams } from '../../functions/DetailNavigation';
 import type { DetailNavigationState } from '../../hooks/UseDetailNavigation';
 
 export function DetailNavigation({
@@ -13,11 +19,22 @@ export function DetailNavigation({
       navigation.position ||
       navigation.isLoading
   );
+  const navigate = useNavigate();
+
+  function handleClear() {
+    const url = new URL(window.location.href);
+    removeDetailNavigationParams(url.searchParams);
+    navigate(url);
+  }
 
   if (!hasNavigation) {
     return null;
   }
 
+  const lbl_next = t`Next item`;
+  const lbl_prev = t`Previous item`;
+  const lbl_clear = t`Remove navigation filters from current view`;
+
   return (
     <Group
       gap={5}
@@ -37,7 +54,18 @@ export function DetailNavigation({
           {t`${navigation.position.current} of ${navigation.position.total}`}
         </Text>
       )}
-      <Tooltip label={t`Previous`} position='top'>
+      <Tooltip label={lbl_clear} position='top'>
+        <ActionIcon
+          onClick={handleClear}
+          size='md'
+          variant='subtle'
+          aria-label={lbl_clear}
+        >
+          <IconCancel size='1.25rem' />
+        </ActionIcon>
+      </Tooltip>
+      <Space />
+      <Tooltip label={lbl_prev} position='top'>
         <ActionIcon
           component='a'
           href={navigation.previous?.href}
@@ -45,12 +73,12 @@ export function DetailNavigation({
           disabled={!navigation.previous}
           size='md'
           variant='subtle'
-          aria-label={t`Previous`}
+          aria-label={lbl_prev}
         >
           <IconChevronLeft size='1.25rem' />
         </ActionIcon>
       </Tooltip>
-      <Tooltip label={t`Next`} position='top'>
+      <Tooltip label={lbl_next} position='top'>
         <ActionIcon
           component='a'
           href={navigation.next?.href}
@@ -58,7 +86,7 @@ export function DetailNavigation({
           disabled={!navigation.next}
           size='md'
           variant='subtle'
-          aria-label={t`Next`}
+          aria-label={lbl_next}
         >
           <IconChevronRight size='1.25rem' />
         </ActionIcon>

src/frontend/src/functions/DetailNavigation.tsx

@@ -88,7 +88,7 @@ function decodeDetailNavigationApi(apiUrl: string): string {
   return DETAIL_NAVIGATION_API_URLS.get(apiUrl) ?? apiUrl;
 }
 
-function removeDetailNavigationParams(params: URLSearchParams) {
+export function removeDetailNavigationParams(params: URLSearchParams) {
   DETAIL_NAVIGATION_PARAM_KEYS.forEach((key) => {
     params.delete(key);
   });

src/frontend/tests/pui_tables.spec.ts

@@ -243,13 +243,13 @@ test('Tables - Detail navigation', async ({ browser }) => {
   const detailNavigation = breadcrumbBar.getByTestId('detail-navigation');
   await expect(detailNavigation).toBeVisible();
 
-  const previous = page.getByLabel('Previous', { exact: true });
+  const previous = page.getByLabel('Previous item', { exact: true });
   await expect(previous).toBeVisible();
   await expect(previous.locator('svg')).toBeVisible();
   await expect(previous).toHaveAttribute('data-disabled', 'true');
   await expect(previous).not.toHaveAttribute('href');
 
-  const next = page.getByLabel('Next', { exact: true });
+  const next = page.getByLabel('Next item', { exact: true });
   await expect(next).toBeVisible();
   await expect(next.locator('svg')).toBeVisible();
   await expect(next).not.toHaveAttribute('data-disabled');