Release Release 2236 · DFE-Digital/schools-experience

Trello card

Context

As part of our search page updates for Get School Experience, we want to make the filters update automatically, mirroring the functionality seen on gov.uk search.

Changes proposed in this pull request

Remove search criteria description

We are going to replace this with a facet tag list of applied search criteria.

Add applied_filters method to search model

We need to be able to get a representation of the applied filters in order to populate facet tags on the results page.

To be able to dynamically link these to the form when a user interacts with them we will need to be able to derive the form element and value from the field. We also need the text to display in the tag.

Render facet tags for applied filters

Take the applied_filters of the search and run them through a presenter to give a flattened set of facet tags that can be more easily displayed.

Add styling for the tags and output them above the search result count on the search results page.

Update search results on tag/form change

When a user clicks to remove a tag, or clicks one of the search filters, we want to update the search results. To make this less-jarring for the user, we want to update the results without reloading the web page/changing their position on the page.

Add SearchController to handle updating the form dynamically in response to user interactions.

Setup Jest so that we can test our Stimulus controllers.

Show loading indicator when search is in progress

In case the user is on a slow network connection we should have an indicator for the request being in progress.

We could put this behind a timeout so that it only appears after ~100ms, which may be a nicer experience for the user.

Update cucumber search/filtering tests

As the page behaviour has now changed we need to update the tests so that they pass and include additional tests for the new facet tag functionality.

Guidance to review

Best reviewed by-commit.

When Javascript is disabled the 'Update schools list' button should be visible and the tags should not be clickable/have the 'x' to remove them.

What kind of browser support do we need to check? The Stimulus controller uses fetch, closest and URLSearchParams which will need polyfills if we support IE11.