#765 Results Page: Persist the column filters in the results table in the url

[Netacci]

Description

This PR addresses the issue where the results table resets during a page reload after a user applies column filters (e.g., platform, status, confidence). The filtered values do not persist, causing the results table to revert to its default state.

Before

https://github.com/user-attachments/assets/6bef395e-659b-4073-8e77-14d2e4426d99

The problem occurred because the filters were not stored in the URL, leading to their loss upon page reload or when the URL is shared. As a result, the filtered state is not retained, and users have to reapply their filters each time a page reloads.

Test cases

1. By default, all filter values are checked, and as a result, all filter values are appended to the URL parameters.

   To achieve this, I used useEffect to set an initial filter state. This useEffect sets all the checked filter values to the URL.

https://github.com/user-attachments/assets/c16c8d64-cada-49b6-b45f-9c5cd2660168

2. When specific filters are applied or modified, the relevant filter values are added or updated in the URL.

   I adjusted the onToggle function to ensure that filter values are added to the URL when they are checked and removed when unchecked. This helps in maintaining persistence on page reload.

https://github.com/user-attachments/assets/122e7585-ae5a-485a-98bc-2230cac24f9e

3. On page reload or URL sharing, filtered values appended to the URL remain the same thereby persisting the results table filtered state.

https://github.com/user-attachments/assets/614321c0-efa9-44b6-9077-de9647bf6f3f

4. If all filters are unchecked, the results table retains the unfiltered state, and the URL maintains the filter parameter keys with empty values.

This was challenging to implement at first, because when all filter values are unchecked and the page reloads, the default behavior (from test case 1) would normally re-check all filters and set them back to checked. To resolve this, instead of removing the parameter keys entirely from the URL, I set their values to empty. I also updated the useEffect to run once on page load and check if there is existing checked values to be applied before setting the default. That way there's a significant difference between when a user has unchecked all filters and when the default filter settings should apply, ensuring the correct behavior on page load.

https://github.com/user-attachments/assets/27b825e7-e737-435c-a510-1e7513d0da70

5. When the clear filter button is clicked, filtered values are added back to the URL. I updated the clearFilter function to set all filter values to the URL.

https://github.com/user-attachments/assets/dc403997-b4f3-40a1-ae7a-a30b812f4562

Steps to test

• Navigate to results table page
• Apply Column filters by platform, status and/or confidence
• Refresh the page and observe the filters persist both in the URL and the results table
• Copy the URL to another tab and observe the filtered state is still maintained.

[netlify[bot]]

✅ Deploy Preview for mozilla-perfcompare ready!

Name	Link
🔨 Latest commit	3b37a51ab7a8958eba8133788363f2dd151a7459
🔍 Latest deploy log	https://app.netlify.com/sites/mozilla-perfcompare/deploys/67081c2c9eecb3000842b49c
😎 Deploy Preview	https://deploy-preview-778--mozilla-perfcompare.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 91.35%. Comparing base (3a555e3) to head (3b37a51).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #778 +/- ## ========================================== - Coverage 91.46% 91.35% -0.12% ========================================== Files 88 88 Lines 2332 2371 +39 Branches 434 449 +15 ========================================== + Hits 2133 2166 +33 - Misses 176 181 +5 - Partials 23 24 +1 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.