Persist Filters in URL to Maintain View After Page Refresh

[Dorcas-BD]

This pull request addresses the issue (#765) where the filters applied to the results table were not persisted in the URL, resulting in the default view being restored upon page refresh. With this update, users can now expect the following behavior:

• Filters Persisted: When filters for the platform, status, or confidence are applied, they are retained even after the page is refreshed.
• URL Updates Dynamically: The URL updates as filters are applied or removed, allowing users to share specific filtered views with others.
• Consistent User Experience: Users will see the same filtered results when navigating back to the results table or when sharing the filtered URL.

Implementation Details

The following changes were made to implement the persistence of filters:

1. Effect Hook for Initial Filters:

   • The useEffect hook initialises the filters based on the current URL search parameters. If no parameters are found, it defaults to using the possible values for each filter.
   • The initialFilters state is set accordingly to reflect the current filter configuration.

2. Filter Clearing Functionality:

   • The onClearFilter function was updated to ensure that when a filter is cleared, the URL is also updated to reflect all possible values.

3. Filter Toggling Functionality:

   • The onToggleFilter function ensures that when filters are toggled, the URL parameters are updated accordingly to maintain consistency with the displayed results.

Screenshots Showing Changes Made

Before Changes

After Changes

Platform

Status

Confidence

Steps to Reproduce

1. Run the application
2. Compare with a base
3. Apply filters to the columns (e.g., show only improvements, regressions, by platform, or filter by confidence or platform).
4. Refresh the page.
5. Observe that the column filters are now persisted, maintaining the expected filtered view.
6. Note that the URL should update as filters are applied or removed.

[netlify[bot]]

✅ Deploy Preview for mozilla-perfcompare ready!

Name	Link
🔨 Latest commit	6ee836fad4902da3f564761c9d056fbc47d9f42e
🔍 Latest deploy log	https://app.netlify.com/sites/mozilla-perfcompare/deploys/670e0a66273f110008d453a6
😎 Deploy Preview	https://deploy-preview-786--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.53%. Comparing base (3a555e3) to head (6ee836f).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #786 +/- ## ========================================== + Coverage 91.46% 91.53% +0.06% ========================================== Files 88 88 Lines 2332 2351 +19 Branches 434 444 +10 ========================================== + Hits 2133 2152 +19 Misses 176 176 Partials 23 23 ```

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

[Dorcas-BD]

Hello @Carla-Moz, I’ve updated the code to use whole words instead of initials as suggested. Please take a look at the changes!