Set default state for table filters by checking URL params

- If URL is empty, then all table filters are checked, otherwise set the table filters based off that. This helps results table to persist upon reload and url copying - Created a function that sets the filter to the url params on toggle
mozilla · Oct 23, 2024 · 64fd51e · 64fd51e
1 parent 01b30d1
commit 64fd51e
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 6 deletions.
diff --git a/src/__tests__/CompareResults/ResultsTable.test.tsx b/src/__tests__/CompareResults/ResultsTable.test.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import { type ReactElement } from 'react';
 
 import userEvent, { type UserEvent } from '@testing-library/user-event';
 
@@ -72,6 +72,7 @@ describe('Results Table', () => {
         titleElement.textContent,
         ...optionsElements.map((element) => element.textContent),
       ].join(' ');
+
       result.push(title);
       const rows = within(group).getAllByRole('row');
       for (const row of rows) {
@@ -118,6 +119,7 @@ describe('Results Table', () => {
     setupAndRender(testCompareData);
 
     await screen.findByText('a11yr');
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - OSX, Improvement, Low',
@@ -128,7 +130,9 @@ describe('Results Table', () => {
     ]);
 
     const user = userEvent.setup({ delay: null });
+
     await clickMenuItem(user, /Platform/, /Windows/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - OSX, Improvement, Low',
@@ -137,12 +141,14 @@ describe('Results Table', () => {
     ]);
 
     await clickMenuItem(user, /Platform/, /Linux/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - OSX, Improvement, Low',
       '  - Android, Improvement, Low',
     ]);
     await clickMenuItem(user, /Platform/, /Linux/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - OSX, Improvement, Low',
@@ -151,6 +157,7 @@ describe('Results Table', () => {
     ]);
 
     await clickMenuItem(user, /Platform/, 'Clear filters');
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - OSX, Improvement, Low',
@@ -161,6 +168,7 @@ describe('Results Table', () => {
     ]);
 
     await clickMenuItem(user, /Platform/, /OSX/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - Linux, Regression, Medium',
@@ -170,6 +178,7 @@ describe('Results Table', () => {
     ]);
 
     await clickMenuItem(user, /Platform/, /Android/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - Linux, Regression, Medium',
@@ -193,21 +202,25 @@ describe('Results Table', () => {
 
     const user = userEvent.setup({ delay: null });
     await clickMenuItem(user, /Status/, /No changes/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - OSX, Improvement, Low',
       '  - Linux, Regression, Medium',
     ]);
 
     await clickMenuItem(user, /Status/, /Clear filters/);
+
     await clickMenuItem(user, /Status/, /Improvement/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - Linux, Regression, Medium',
       '  - Windows, -, High',
       '  - Windows, -, ',
     ]);
     await clickMenuItem(user, /Status/, /Regression/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - Windows, -, High',
@@ -230,6 +243,7 @@ describe('Results Table', () => {
 
     const user = userEvent.setup({ delay: null });
     await clickMenuItem(user, /Confidence/, /Low/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - Linux, Regression, Medium',
@@ -238,13 +252,14 @@ describe('Results Table', () => {
     ]);
 
     await clickMenuItem(user, /Confidence/, /High/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - Linux, Regression, Medium',
       '  - Windows, -, ',
     ]);
-
     await clickMenuItem(user, /Confidence/, /Medium/);
+
     expect(summarizeVisibleRows()).toEqual([
       'a11yr dhtml.html spam opt e10s fission stylo webrender',
       '  - Windows, -, ',
@@ -258,5 +273,13 @@ describe('Results Table', () => {
       '  - Windows, -, High',
       '  - Windows, -, ',
     ]);
+    await clickMenuItem(user, /Confidence/, /Medium/);
+
+    expect(summarizeVisibleRows()).toEqual([
+      'a11yr dhtml.html spam opt e10s fission stylo webrender',
+      '  - OSX, Improvement, Low',
+      '  - Windows, -, High',
+      '  - Windows, -, ',
+    ]);
   });
 });
diff --git a/src/components/CompareResults/ResultsTable.tsx b/src/components/CompareResults/ResultsTable.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -103,14 +103,42 @@ export default function ResultsTable() {
   const initialSearchTerm = rawSearchParams.get('search') ?? '';
   const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
   const [frameworkIdVal, setFrameworkIdVal] = useState(frameworkId);
-  const [tableFilters, setTableFilters] = useState(
-    new Map() as Map<string, Set<string>>, // ColumnID -> Set<Values to remove>
-  );
+  const [tableFilters, setTableFilters] = useState(() => {
+    const initialFilters = new Map() as Map<string, Set<string>>;
+    cellsConfiguration.forEach(({ key, possibleValues }) => {
+      if (!possibleValues) return;
+      const paramValue = rawSearchParams.get(`filter-${key}`);
+      initialFilters.set(key, new Set(paramValue?.split(',')));
+    });
+
+    return initialFilters;
+  });
+
+  const accessFilterValues = () => {
+    cellsConfiguration.forEach(({ key }) => {
+      const searchValue = [...(tableFilters.get(key) ?? [])];
+
+      if (searchValue.length > 0) {
+        rawSearchParams.set(`filter-${key}`, searchValue.join(','));
+      } else {
+        rawSearchParams.delete(`filter-${key}`);
+      }
+    });
+    updateRawSearchParams(rawSearchParams);
+  };
+
+  useEffect(() => {
+    if (tableFilters.size > 0) {
+      accessFilterValues();
+    }
+  }, [tableFilters]);
 
   const onClearFilter = (columnId: string) => {
     setTableFilters((oldFilters) => {
       const newFilters = new Map(oldFilters);
       newFilters.delete(columnId);
+      rawSearchParams.delete(`filter-${columnId}`);
+      updateRawSearchParams(rawSearchParams);
       return newFilters;
     });
   };

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -7,6 +7,7 @@ export type CompareResultsTableConfig =
       key: string;
       disable?: boolean;
       gridWidth?: string;
+      possibleValues?: undefined;
     }
   | {
       name: string;