Skip to content

Pre-fill Run Pipeline form with predefined variables

Mireya Andres requested to merge run-pipeline-graphql into master

What does this MR do and why?

For #363660 (closed). This is dependent on !98223 (merged) (must be merged first before this can be merged).

This migrates the Run Pipeline form to GraphQL and allows the user to select the value of predefined variables if multiple values for it are provided in the CI Config. The query to fetch the variables uses GQL; the form submission uses a local client resolver.

The frontend feature flag and GQL app was previously set up in !96633 (merged). pipeline_new_form.vue (where the MR's changes are focused on) uses apollo. legacy_pipeline_new_form.vue is the default and uses the existing axios implementation. It does not render the dropdown for multiple values for predefined variables.

MR Breakdown

Implementation MR
Set up feature flag and GraphQL app !96633 (merged)
Migrate app to GQL and fetch predefined variables 👈 You are here!
Rollout feature flag #372310 (closed)

Screenshots or screen recordings

Form is pre-filled with the variables defined in the YAML config. If there are multiple possible values, the first value in the array is used as the default.

Screen_Shot_2022-09-15_at_18.30.00

How to set up and validate locally

  1. Pull the changes from !98223 (merged).

  2. Enable the run_pipeline_graphql and ci_variables_refactoring_to_variable feature flags.

  3. Add the following to you .gitlab-ci.yml config file:

    stages:
      - test
    
    variables:
      FOO:
        value: "BAR"
        description: "Environment variable declared from the CI config."
      DEPLOY_ENVIRONMENT:
        value: 
          - "production"
          - "development"
          - "staging" 
        description: "The deployment target. Change this variable to 'canary' or 'production' if needed."
    
    declare-config-vars:
      stage: test
      script:
        - echo $FOO
        - echo $DEPLOY_ENVIRONMENT
  4. Go to CI/CD > Pipelines then click on the Run Pipeline button on the upper right corner.

  5. Verify that the variable FOO is pre-filled in the form with the value "BAR"

  6. Verify that the variable DEPLOY_ENVIRONMENT is pre-filled in the form with the value "production". You can change this value through the dropdown, which should have the values "production", "development", and "staging" (same as the list in your CI file).

  7. Click on the Run Pipeline button. This will create the pipeline with your variables and redirect you to the newly created pipeline.

  8. Wait for the pipeline to finish then check the job logs. The correct variable values should be printed in the logs.

MR acceptance checklist

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

Edited by Mireya Andres

Merge request reports