Add variables table to the new pipeline form

app/assets/javascripts/pages/projects/pipelines/new/index.js

 import $ from 'jquery';
 import NewBranchForm from '~/new_branch_form';
+import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
   new NewBranchForm($('.js-new-pipeline-form')); // eslint-disable-line no-new
+
+  setupNativeFormVariableList({
+    container: $('.js-ci-variable-list-section'),
+    formField: 'variables_attributes',
+  });
 });

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

 - breadcrumb_title "Pipelines"
 - page_title = s_("Pipeline|Run Pipeline")
+- settings_link = link_to _('CI/CD settings'), project_settings_ci_cd_path(@project)
 
 %h3.page-title
   = s_("Pipeline|Run Pipeline")
@@ -8,17 +9,26 @@
 = form_for @pipeline, as: :pipeline, url: project_pipelines_path(@project), html: { id: "new-pipeline-form", class: "form-horizontal js-new-pipeline-form js-requires-input" } do |f|
   = form_errors(@pipeline)
   .form-group
-    = f.label :ref, s_('Pipeline|Run on'), class: 'control-label'
-    .col-sm-10
+    .col-sm-12
+      = f.label :ref, s_('Pipeline|Create for')
       = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
       = dropdown_tag(params[:ref] || @project.default_branch,
                      options: { toggle_class: 'js-branch-select wide git-revision-dropdown-toggle',
                                 filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: s_("Pipeline|Search branches"),
                                 data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
       .help-block
-        = s_("Pipeline|Existing branch name, tag")
+        = s_("Pipeline|Existing branch name or tag")
+
+    .col-sm-12.prepend-top-10.js-ci-variable-list-section
+      %label.label-light
+        = s_('Pipeline|Variables')
+      .help-block
+        = (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
+      %ul.ci-variable-list
+        = render 'ci/variables/variable_row', form_field: 'pipeline', only_key_value: true
+
   .form-actions
-    = f.submit s_('Pipeline|Run pipeline'), class: 'btn btn-success', tabindex: 3
+    = f.submit s_('Pipeline|Create pipeline'), class: 'btn btn-success js-variables-save-button', tabindex: 3
     = link_to 'Cancel', project_pipelines_path(@project), class: 'btn btn-default pull-right'
 
 -# haml-lint:disable InlineJavaScript