Add querystring sync component for vulnerability report

What does this MR do and why?

This MR adds a QuerystringSync component that will save and restore an array to a querystring key. It's used like this:

<querystring-sync name="key v-model="array"/>
<!-- or -->
<querystring-sync name="key" :value="array" @input="updateArray"/>

It will do the following:

  1. Emits an input event when there is a querystring key, i.e. ?key=abc,def will emit ['abc', 'def'], on page load or on browser navigation (clicking forward and back).

  2. Saves the array values passed through the value property to the querystring key whenever it changes, i.e. ['abc', 'def'] will be saved as ?key=abc,def.

  3. Clean up the querystring IDs on page load, i.e. ?key=abc,def,invalid will get changed to ?key=abc,def.

Explanation of how QuerystringSync works

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #376324 (closed)

Edited by Daniel Tian

Merge request reports

Loading