fix: communicate fixed listing filters on tree and hardware (#1924) (#1955)

* feat: remove checkout filtering in /trees (#1924)

This filter was filtering very little in practice,
and querying every lastest checkout is very cheap.

Signed-off-by: Luiz Georg <luiz.georg@profusion.mobi>

* feat: add an indicator for the time filtering in /hardware (#1924)

Closes: #1924

Signed-off-by: Luiz Georg <luiz.georg@profusion.mobi>

* fixup! feat: remove checkout filtering in /trees (#1924)

this change was out of scope and requires further investigation

Signed-off-by: Luiz Georg <luiz.georg@profusion.mobi>

* amend! feat: add an indicator for the time filtering in /hardware (#1924)

feat: add a label to indicate hidden filtering filtering (#1924)

Closes: #1924

Signed-off-by: Luiz Georg <luiz.georg@profusion.mobi>

* fixup! feat: add an indicator for the time filtering in /hardware (#1924)

Signed-off-by: Luiz Georg <luiz.georg@profusion.mobi>

---------

Signed-off-by: Luiz Georg <luiz.georg@profusion.mobi>

Author: mentonin

dashboard/e2e/e2e-selectors.ts

@@ -49,4 +49,5 @@ export const HARDWARE_LISTING_SELECTORS = {
   branchSelector: '[data-test-id="hardware-branch-selector"]',
   revisionSelector: '[data-test-id="hardware-revision-selector"]',
   clearSelection: '[data-test-id="hardware-selection-clear"]',
+  filterLabel: '[data-test-id="listing-filter-label"]',
 } as const;

dashboard/e2e/hardware-listing.spec.ts

@@ -137,4 +137,49 @@ test.describe('Hardware Listing Page Tests', () => {
     ).toContainText('Select tree');
     await expect(clearButton).toBeHidden();
   });
+
+  test('filter label updates with query params', async ({ page }) => {
+    const filterLabel = page.locator(HARDWARE_LISTING_SELECTORS.filterLabel);
+    await expect(filterLabel).toBeVisible();
+    await expect(filterLabel).toContainText(
+      /Showing latest checkout for trees updated in the last \d+ days/,
+    );
+
+    const url = new URL(page.url());
+
+    url.searchParams.set('days', '2');
+    await page.goto(url.toString());
+    await expect(filterLabel).toContainText('last 2 days');
+
+    url.searchParams.set('days', '7');
+    await page.goto(url.toString());
+    await expect(filterLabel).toContainText('last 7 days');
+  });
+
+  test('selecting a revision toggles filter label', async ({ page }) => {
+    const filterLabel = page.locator(HARDWARE_LISTING_SELECTORS.filterLabel);
+    await expect(filterLabel).toBeVisible();
+
+    await selectComboboxOption(page, HARDWARE_LISTING_SELECTORS.treeSelector);
+    await expect(filterLabel).toBeHidden();
+
+    await page.locator(HARDWARE_LISTING_SELECTORS.clearSelection).click();
+    await expect(filterLabel).toBeVisible();
+  });
+
+  test('loading URL with revision does not show filter label', async ({
+    page,
+  }) => {
+    await selectComboboxOption(page, HARDWARE_LISTING_SELECTORS.treeSelector);
+    const urlWithRevision = page.url();
+    await expect(urlWithRevision).toMatch(/[?&]ch=/);
+
+    await page.goto(urlWithRevision);
+
+    const filterLabel = page.locator(HARDWARE_LISTING_SELECTORS.filterLabel);
+    await expect(filterLabel).toBeHidden();
+
+    await page.locator(HARDWARE_LISTING_SELECTORS.clearSelection).click();
+    await expect(filterLabel).toBeVisible();
+  });
 });

dashboard/src/components/FilterLabel/FilterLabel.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export function FilterLabel({ days }: { days: number }): JSX.Element {
+  return (
+    <p
+      className="text-dim-gray text-left text-xs"
+      data-test-id="listing-filter-label"
+    >
+      <FormattedMessage
+        id="filter.latestCheckoutFilterLabel"
+        values={{ days }}
+      />
+    </p>
+  );
+}

dashboard/src/components/TreeListingPage/TreeTable.tsx

@@ -34,6 +34,7 @@ import { usePaginationState } from '@/hooks/usePaginationState';
 import BaseTable, { TableHead } from '@/components/Table/BaseTable';
 import { TableBody, TableCell, TableRow } from '@/components/ui/table';
 import { ConditionalTableCell } from '@/components/Table/ConditionalTableCell';
+import { FilterLabel } from '@/components/FilterLabel/FilterLabel';
 
 import { BaseGroupedStatusWithLink } from '@/components/Status/Status';
 import { TableHeader } from '@/components/Table/TableHeader';
@@ -50,6 +51,7 @@ import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
 
 import type { TreeListingRoutesMap } from '@/utils/constants/treeListing';
+import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
 
 import {
   commonTreeTableColumns,
@@ -265,7 +267,7 @@ export function TreeTable({
   isLoading?: boolean;
   urlFromMap: TreeListingRoutesMap;
 }): JSX.Element {
-  const { origin, listingSize } = useSearch({
+  const { origin, listingSize, intervalInDays } = useSearch({
     from: urlFromMap.search,
   });
   const navigate = useNavigate({ from: urlFromMap.navigate });
@@ -395,11 +397,16 @@ export function TreeTable({
           <TableBody>{tableBody}</TableBody>
         </BaseTable>
       </QuerySwitcher>
-      <PaginationInfo
-        table={table}
-        intlLabel="global.trees"
-        onPaginationChange={navigateWithPageSize}
-      />
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <FilterLabel days={intervalInDays ?? DEFAULT_TIME_SEARCH} />
+        <div className="ml-auto">
+          <PaginationInfo
+            table={table}
+            intlLabel="global.trees"
+            onPaginationChange={navigateWithPageSize}
+          />
+        </div>
+      </div>
     </div>
   );
 }

dashboard/src/locales/messages/index.ts

@@ -83,6 +83,8 @@ export const messages = {
     'filter.issueSubtitle': 'Please select one or more issues:',
     'filter.labs': 'Labs',
     'filter.labsSubtitle': 'Please select one or more labs:',
+    'filter.latestCheckoutFilterLabel':
+      'Showing latest checkout for trees updated in the last {days} days',
     'filter.max': 'Max',
     'filter.min': 'Min',
     'filter.onlySpecificTab': 'Only affects a specific tab',

dashboard/src/pages/Hardware/HardwareTable.tsx

@@ -46,6 +46,8 @@ import type {
 
 import { sumStatus } from '@/utils/status';
 
+import { REDUCED_TIME_SEARCH } from '@/utils/constants/general';
+
 import { usePaginationState } from '@/hooks/usePaginationState';
 
 import { zPossibleTabValidator } from '@/types/tree/TreeDetails';
@@ -61,6 +63,8 @@ import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
 import { LoadingCircle } from '@/components/ui/loading-circle';
 
+import { FilterLabel } from '@/components/FilterLabel/FilterLabel';
+
 import { buildHardwareDetailsSearch } from './hardwareTableUtils';
 import { HardwareRevisionSelectors } from './HardwareRevisionSelectors';
 import type { HardwareRevisionSelectorValue } from './hardwareSelection';
@@ -390,7 +394,7 @@ export function HardwareTable({
   onTreeChange = (): void => {},
   onClearSelection = (): void => {},
 }: IHardwareTable): JSX.Element {
-  const { listingSize } = useSearch({ strict: false });
+  const { listingSize, intervalInDays } = useSearch({ strict: false });
   const navigate = useNavigate({ from: navigateFrom });
 
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -546,11 +550,18 @@ export function HardwareTable({
           <TableBody>{tableBody}</TableBody>
         </BaseTable>
       </QuerySwitcher>
-      <PaginationInfo
-        table={table}
-        intlLabel="global.hardware"
-        onPaginationChange={navigateWithPageSize}
-      />
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        {!selection && (
+          <FilterLabel days={intervalInDays ?? REDUCED_TIME_SEARCH} />
+        )}
+        <div className="ml-auto">
+          <PaginationInfo
+            table={table}
+            intlLabel="global.hardware"
+            onPaginationChange={navigateWithPageSize}
+          />
+        </div>
+      </div>
     </div>
   );
 }