Frontend: Security inventory: add filters to URL parameters

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

What?

The group => Secure => Security inventory page has a filtered search bar at the top where you can:

  • search for projects by name (plain text)
  • filter by tool coverage (scanner enabled/not enabled/failed)
  • filter by the number of vulnerabilities with a certain severity (less than/equal to/greater than some number)
  • coming soon: filter by security attributes (is one of/is none of)

However, only the plain text search gets added to the URL params. We should add the filters to the URL params too.

How?

Add a Vue Router and take inspiration from the issues list's filtered search bar, which uses this.$router.push({ query: this.urlParams }); to turn search bar tokens like these:

  • Assignee is one of Angelita Zieme, Alishia Littel
  • Author is not one of Alec Bergnaum, Alishia Littel

... into URL params like these:

http://gdk.test:3000/groups/gitlab-org/-/issues
?sort=created_date
&state=opened
&or%5Bassignee_username%5D%5B%5D=amina_boyer
&or%5Bassignee_username%5D%5B%5D=elza
&not%5Bauthor_username%5D%5B%5D=dionne
&not%5Bauthor_username%5D%5B%5D=elza
&first_page_size=20

... using a convertToUrlParams utility function.

note: %5B is a URL-encoded [; %5D is a URL-encoded ]

Similar pattern used in

Edited by 🤖 GitLab Bot 🤖