## Problem On the vulnerability report we need to sync querystring parameters based on the advanced search. At the moment we do this by wrapping each token of the filtered search in a [QuerystringSync](https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/security_dashboard/components/shared/filters/querystring_sync.vue) component. This component handles all the querystring syncing including: setting value based on querystring value, setting querystring based on the value, checking valid ids, default values, setting backup values when it's destroyed, ... A couple issues this has brought forward: 1. When switching tabs, the token is destroyed, so the querystring sync resets to backup values which are incorrect on the new tab 2. Related to the point above, we can't differentiate between the token being removed or the tab being switched 3. We can't control querystring params if the token does not exist 4. It requires a querystring sync component for each token, which adds a `window` `'popstate'` eventlistener for all of those components and unnecessary calls ## Requirements 1. Tab isolation. The development, operational, and container registry tab have different filtering capabilities, so when switching between these, the query parameters should not persist (except for the `tab` query parameter) 2. Manage the querystring syncing in 1 central place 3. Handle default values: token default value if none is supplied via query params. This don't need to appear in the querystring if it's on page load, but they do make the token appear in the filtered search, e.g.: `?activity=STILL_DETECTED` 4. Handle backup values: when the token gets cleared/removed the backup values are set in querystring, e.g.: `?activity=ALL` 5. Be able to check querystring values for validity per token 6. Handle forward/back browser actions 7. SSOT for tokens and their type, default values, backups values, valid values, components ## Implementation