Follow-up from: Cleanup VSA query parameter logic

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

• Work on this issue
• Close this issue

Overview

The following discussion from !62439 (merged) should be addressed:

• @mrincon started a discussion: (+1 comment)

  Suggestion: There is a lot of branching logic here, I would like to see if we could refactor this to a separate function that we can test independently for many different conditions. (empty/non-empty selectedProjectIds, different values of isOverviewStageSelected, etc...).

  Suggestion (non-blocking, for follow-up): The URL query is generated in this component but parsed in index.js so the logic transformation "location.search <-> model" is spread in two files. Furthermore, in index.js it doesn't get tested 😱

  How about moving all this logic to functions, this is something I have been working on recently: https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/frontend/runner/runner_list/filtered_search_utils_spec.js, it tests that logic works bidirectionally.

  This is how I used it in my component:

  • fromUrlQueryToSearch: https://gitlab.com/gitlab-org/gitlab/-/blob/bd6da5e9c0c50493926c7ea504741cdf7afdf031/app/assets/javascripts/runner/runner_list/runner_list_app.vue#L34
  • fromSearchToUrl: https://gitlab.com/gitlab-org/gitlab/-/blob/bd6da5e9c0c50493926c7ea504741cdf7afdf031/app/assets/javascripts/runner/runner_list/runner_list_app.vue#L68

Implementation Guide

• Clean up some of the branching logic for updating query params
• Move query parsing logic to functions and make use of helpers
• Add additional tests for the url query generation / parsing