Populate CI variables from params

When running a new pipeline on a
project, this commit gives the
feature of populating ci vars
from a url query string.

app/views/ci/variables/_url_query_variable_row.html.haml

+- form_field = local_assigns.fetch(:form_field, nil)
+- variable = local_assigns.fetch(:variable, nil)
+
+- key = variable[0]
+- value = variable[1]
+- variable_type = variable[2] || "env_var"
+
+- destroy_input_name = "#{form_field}[variables_attributes][][_destroy]"
+- variable_type_input_name = "#{form_field}[variables_attributes][][variable_type]"
+- key_input_name = "#{form_field}[variables_attributes][][key]"
+- value_input_name = "#{form_field}[variables_attributes][][secret_value]"
+
+%li.js-row.ci-variable-row
+  .ci-variable-row-body.border-bottom
+    %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
+    %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control.custom-select.table-section.section-15{ name: variable_type_input_name }
+      = options_for_select(ci_variable_type_options, variable_type)
+    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.table-section.section-15{ type: "text",
+      name: key_input_name,
+      value: key,
+      placeholder: s_('CiVariables|Input variable key') }
+    .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0
+      %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ rows: 1,
+        name: value_input_name,
+        placeholder: s_('CiVariables|Input variable value') }
+        = value
+    %button.js-row-remove-button.ci-variable-row-remove-button.table-section.section-5.border-top-0{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
+      = icon('minus-circle')

app/views/projects/pipelines/new.html.haml

@@ -23,6 +23,13 @@
       %label
         = s_('Pipeline|Variables')
       %ul.ci-variable-list
+        - if params[:var]
+          - params[:var].each do |variable|
+            = render 'ci/variables/url_query_variable_row', form_field: 'pipeline', variable: variable
+        - if params[:file_var]
+          - params[:file_var].each do |variable|
+            - variable.push("file")
+            = render 'ci/variables/url_query_variable_row', form_field: 'pipeline', variable: variable
         = render 'ci/variables/variable_row', form_field: 'pipeline', only_key_value: true
       .form-text.text-muted
         = (s_("Pipeline|Specify variable values to be used in this run. The values specified in %{settings_link} will be used by default.") % {settings_link: settings_link}).html_safe

changelogs/unreleased/24146-query-string-params.yml

+---
+title: Populate new pipeline CI vars from params
+merge_request: 19023
+author:
+type: added

spec/features/populate_new_pipeline_vars_with_params_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe "Populate new pipeline CI variables with url params", :js do
+  let(:user) { create(:user) }
+  let(:project) { create(:project) }
+  let(:page_path) { new_project_pipeline_path(project) }
+
+  before do
+    sign_in(user)
+    project.add_maintainer(user)
+
+    visit "#{page_path}?var[key1]=value1&file_var[key2]=value2"
+  end
+
+  it "var[key1]=value1 populates env_var variable correctly" do
+    page.within('.ci-variable-list .js-row:nth-child(1)') do
+      expect(find('.js-ci-variable-input-variable-type').value).to eq('env_var')
+      expect(find('.js-ci-variable-input-key').value).to eq('key1')
+      expect(find('.js-ci-variable-input-value').text).to eq('value1')
+    end
+  end
+
+  it "file_var[key2]=value2 populates file variable correctly" do
+    page.within('.ci-variable-list .js-row:nth-child(2)') do
+      expect(find('.js-ci-variable-input-variable-type').value).to eq('file')
+      expect(find('.js-ci-variable-input-key').value).to eq('key2')
+      expect(find('.js-ci-variable-input-value').text).to eq('value2')
+    end
+  end
+end