Sync inventory filters with URL query params

What does this MR do and why?

Sync inventory filters with URL query params

Write security inventory filters to URL query params when they change,
restore them from the URL query params on load, and push/pop history.

When the URL has query params, some of them could be attribute-based,
but attributes are loaded separately, so wait to do the first page
fetch until we know there are no params or attributes are loaded.

Changelog: added
EE: true

Where the URL params flow

graph TD
  URL[address bar]

  URL -->|page load: queryToObject| QP[dashboard queryParams]
  URL -->|back or forward: popstate| QP
  QP -->|url-query prop| BAR[filtered search bar]
  BAR -->|queryParamsToTokens| TOK[tokens in the bar]
  TOK -->|filters-initialized| DF[dashboard filters]
  DF --> VARS[GraphQL query variables]
  VARS --> LIST[project list]

  USER[user edits a token] --> TOK
  TOK -->|tokensToQueryParams| PARAMS[query params]
  PARAMS -->|url-params-changed| OUCH[onUrlParamsChanged]
  OUCH -->|setUrlParams + withReadableParams| URL
  OUCH --> QP

  MOUNT[mounted] -->|waits for filters-initialized,<br/>ten second timeout| VARS

References

• Issue: #580024 (closed)
• Original combined merge request, now closed: !252968 (closed)
• Targets !255936 (merged), which targets !255935 (merged)
• Followed by !255957 (merged), which moves the tool coverage card onto the same params

Screenshots or screen recordings

Before	After
you can take all the same actions, but the URL bar stays at /-/security/inventory at most it shows a search term like /-/security/inventory?search=report	URL bar matches the filtered search each attribute filter type works no flash of unfiltered list on hard reload paging through history navigates between filter states

How to set up and validate locally

0. git checkout 580024-sync-inventory-filter-bar-with-url-params

1. have a GitLab Ultimate licence
2. have at least one security attribute category with two attributes on the group, so the attribute tokens appear (create these in top-level group => Secure => Security configuration)
3. go to a group => Secure => Security inventory

to check filters reach the URL

1. apply a plain text search term
2. apply Status is Protected
3. apply Critical >= 5
4. check that the address bar reads, in some order:
   • search=<your term>
   • status=protected
   • gte[critical]=5
5. remove one token
6. check that only that token's param leaves the URL, and the others stay

to check the URL restores filters on load

1. with those filters applied, reload the page
2. check that:
   • the same tokens are back in the search bar
   • the project list is filtered the same way it was before the reload
3. copy the address, open it in a new tab
4. check that the new tab shows the same tokens and the same filtered list

to check the attribute operators

1. apply an attribute filter with is, reload, and check the token comes back
2. check the URL reads attribute~<category>=<id>
3. repeat with is not, and check the URL reads not[attribute~<category>]=<id>
4. repeat with or and two attributes selected, and check the URL reads or[attribute~<category>]=<id>,<id>
5. for each of the three, do a hard reload so the security categories are fetched fresh
6. check that in all three cases the project list is filtered from the first render, with no visible moment where more projects are listed than the filter should allow

to check the browser buttons

1. apply a filter, then apply a second one
2. press back
3. check that the search bar and the project list both return to the previous filter, not just the URL
4. press forward
5. check that both return to the second filter

to check a subgroup selection survives filtering

1. select a subgroup in the tree, so the address gains a # fragment
2. apply a filter
3. check that the fragment is still there and still selects the same subgroup

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)