Skip to content

Fix duplicate CI variables when running manual jobs

Mireya Andres requested to merge fix/duplicate-manual-vars into master

What does this MR do and why?

Fix for #431726 (closed)

Bug: When running a manual job with CI variables, the input field for variables is duplicated a few times before the page is redirected to the job output.

In this line, we're concatenating the variables we fetch from GraphQL with the variables in the Vue app. When the page is loaded for the first time, the variables list contains an empty variable (which we show in the form). But when we submit the form, we're redirecting to the same page again (or rather, assigning the same URL, rather than reloading). This triggers a refetch on the GraphQL query for variables, so we're concatenating this new list of variables into the existing list and causing the duplication bug.

This is UX issue and doesn't affect the actual running of the job. This bug only occurs when we run the job for the first time. It doesn't show up when retrying then job with new CI variables.

The fix introduced in this MR is to skip the refetch if we the Vue app already has a list of non-empty variables.

Screenshots or screen recordings

Before After
before after

How to set up and validate locally

  1. Add the following to your .gitlab-ci.yml file: 
    job:
  script: echo Hello world!
  allow_failure: true

job-manual:
  script: echo Hello world!
  when: manual
  allow_failure: true
  2. Visit job-manual and input some CI variables before running the job.

MR acceptance checklist

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

Merge request reports