Sync the tool coverage card with URL params

What does this MR do and why?

Sync the tool coverage card with URL params

Add tool_coverage_selection.js to map the card's scanner and status onto
the inventory URL params, and read the card's selection back from those
params in inventory_dashboard.vue, so the card and the filter bar derive
from one source. Delete toolCoverageFilterVariables and the
toolCoverageVariables parameter of filterQueryVariables, which built a
second set of query variables beside the bar's and overrode them on
hasScanners, hasStale and hasFailedOrWarning. Replace
TOOL_STATUS_TO_STATUS_FILTER with its inverse in constants.js, the
direction the card reads.

Treat the any-scanner status param and each scanner param as status
tokens. Show a selection on the card only when exactly one is set. Make
a status picked on the card replace every status token in the bar, and
make picking another scanner while the card shows a status remove that
token. Leave attribute, vulnerability count and search tokens in place.
Keep the chosen scanner in cardScanner so a scanner with no status
selected stays on the card without changing the URL.

Related to https://gitlab.com/gitlab-org/gitlab/-/issues/580024
Changelog: added
EE: true

note: The scanner dropdown now lists each sub-scanner with its own counts, and this leaves out business logic scanning until it has a filter token.

References

• issue: Frontend: Security inventory: add filters to UR... (#580024 - closed)
• was stacked on: Sync inventory filters with URL query params (!255954 - merged)
• renamed All scanners to Any scanner: Rename All scanners to Any scanner in the tool ... (!258868 - merged)

Screenshots or screen recordings

testing instructions block	recording
to check the card syncs to the URL	clicking a state in the card adds the filter to the URL
to check the URL syncs to the card	card state matches when navigating directly to a URL with a controllable token
to check the card syncs from the search bar	adding a status token makes the card highlight that status with 2+ status tokens, the card is not highlighted
to check card clicks change the search bar	clicking a status in the card changes the token to match other token types are left alone
to check the card's scanner dropdown	changing the dropdown in the card clears the controlled token until a status is selected again
to check the state gets pushed to browser history	browser back and forward navigates through filter state history

How to set up and validate locally

0. git checkout 580024-sync-tool-coverage-card-with-url-params
   echo "Feature.enable(:security_inventory_pagination, Group.find(ID))" | gdk rails c

1. have a GitLab Ultimate licence
2. have a group with some projects that have scanners in different states
3. go to the group => Secure => Security inventory

to check the card syncs to the URL

1. leave the card's scanner dropdown on Any scanner
2. click Failed in the card's legend
3. check that:
   • the address bar gains status=needs_attention
   • the search bar shows a Status token for Needs attention
   • the project list is filtered to match
4. click Failed again
5. check that status leaves the URL, the token goes, and the list is unfiltered
6. pick Dynamic application security testing (DAST) in the card's Any scanner dropdown
7. check that the URL does not change yet
8. click Failed
9. check that the address bar gains dast=failed, and the search bar shows a Dynamic Application Security Testing (DAST) token for Failed

to check a sub-scanner

1. pick Secret push protection (a sub-scanner in the broader category of secret detection) in the card's Any scanner dropdown
2. click one of the statuses in the card, like Success
3. check that the address bar gains secret_detection_secret_push_protection=success

to check the URL syncs to the card

1. with dast=failed in the URL, reload the page
2. check that the card's dropdown reads Dynamic application security testing (DAST), with Failed selected
3. remove the token from the search bar
4. check that the card no longer has a status selected

to check the card syncs from the search bar

The card highlights a status only when the search bar holds exactly one scanner or Status token.

1. clear the search bar
2. check that the card has no status selected
3. apply a Status token for Has stale scans from the search bar
4. check that the card switches to Any scanner with Stale selected
5. also apply a Dynamic Application Security Testing (DAST) token for Failed
6. check that the card shows no status selected
7. remove the Status token
8. check that the card switches to Dynamic application security testing (DAST) with Failed selected

to check card clicks change the search bar

1. clear the search bar, then apply a token under Security attributes and a Vulnerability count token
2. with the card on Any scanner, click Failed
3. check that:
   • a Status token for Needs attention is added
   • the attribute and vulnerability count tokens stay
4. click Stale
5. check that:
   • the Status token now reads Has stale scans, so it was replaced, not removed
   • the other tokens stay
6. apply a Dynamic Application Security Testing (DAST) token for Failed from the search bar, so there are two
7. check that the card shows no status selected
8. click Enabled on the card
9. check that:
   • both tokens are replaced by one Status token for Has scanners enabled
   • the attribute and vulnerability count tokens stay

to check the card's scanner dropdown

1. click Failed with the card on Any scanner, so the search bar holds one Status token for Needs attention
2. pick Dynamic application security testing (DAST) in the card's dropdown
3. check that the Status token is removed and the card has no status selected
4. click Failed
5. check that a Dynamic Application Security Testing (DAST) token for Failed is added

to check the state gets pushed to browser history

1. click Failed on the card, then Stale
2. press back
3. check that the card, the search bar and the project list all return to Failed
4. press forward and check they all return to Stale

to run tests

yarn jest ee/spec/frontend/security_inventory

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #580024 (closed)