Add javascript for domain/subdomain widget behaviour #89
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MatMoore
force-pushed
the
subdomain-filter
branch
6 times, most recently
from
b05e527
to
0e7fdf7
Compare
MatMoore
changed the title
Domain will have top level and subdomain selections, and work similarly to "Topic/Sub-Topic" on GOV.UK search. The form will submit domain and subdomain as separate fields, so we need to combine them on the backend. If javascript is not enabled, then the subdomain field is not displayed and it will work as before. This is tested using jest and jest-dom.
MatMoore
force-pushed
the
subdomain-filter
branch
from
0e7fdf7
to
730c59e
Compare
MatMoore
changed the title
tom-webber
reviewed
Feb 23, 2024
MatMoore
force-pushed
the
subdomain-filter
branch
3 times, most recently
from
20821f1
to
4c5778f
Compare
tom-webber
reviewed
Feb 26, 2024
MatMoore
force-pushed
the
subdomain-filter
branch
4 times, most recently
from
938121d
to
bc1d6a1
Compare
The chromedriver library updates more frequently than the chrome distributed in ubuntu-latest, but these need to be the same version, otherwise axe-core breaks. As a workaround, try to install a version that matches whatever chrome is on the path. See also dequelabs/axe-core-npm#401 (comment)
MatMoore
force-pushed
the
subdomain-filter
branch
from
bc1d6a1
to
755477f
Compare
tom-webber
approved these changes
Feb 26, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue: #87
This is based on a similar topic/subtopic widget from GOV.UK: https://github.com/alphagov/finder-frontend/blob/ebee8ca91224eea3876490da1775aa568690f94a/app/assets/javascripts/taxonomy-select.js
This PR adds the javascript to support this widget, but does not yet wire it up to django. I will do this once @mitchdawson1982's changes are merged.
This is what it looks like with example HTML:
domain-widget.mov
Progressive enhancement
This component uses progressive enhancement so that we gracefully fallback to the basic top-level domain select if the javascript fails to load for any reason.
Testing
I've introduced jest as a javascript testing framework and integrated that with the CI. You can run it with
npm test.Possible extensions
We may want to add functionality later to make other parts of the page (such as the list of selected filters) live refresh when the domain/subdomain changes.
I've not implemented this now, because we already have an "Apply filters" button and I didn't want to diverge too much from the MOJ filter component before we've put this in front of users. But I've implemented a custom event so the state of this component is observable.