Part 3: Abstract pipeline_variables_form to its own component - clean up

What does this MR do and why?

Part 3 for #520831 (closed)

We are abstracting the pipeline variables form to it's own component in order to accommodate inputs work and also hide the component depending on settings.

Part 3 removes the redundant pipeline variables code

Step	MR
Set up component/query	!182376 (merged)
Build out pipeline variable form component	!182455 (merged)
Clean up and integration	[Current MR]

Screenshots or screen recordings

No UI change

How to set up and validate locally

1. Navigate to Build > Pipeline editor and enter the following into your gitlab-ci.yml

variables:
  DEPLOY_ENVIRONMENT:
    value: "staging"
    options:
      - "production"
      - "staging"
      - "canary"
    description: "The deployment target. Set to 'staging' by default."

job:
  script: echo 1

2. Navigate to -/pipelines/new and verify that your variables are output in the pipeline variables form.
3. update variables and click "New pipeline"

Related to #520831 (closed)

app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue

@@ -13,13 +13,12 @@ import RefsDropdown from './refs_dropdown.vue';
 import PipelineVariablesForm from './pipeline_variables_form.vue';
 
 const i18n = {
+  configButtonTitle: s__('Pipelines|Go to the pipeline editor'),
   defaultError: __('Something went wrong on our end. Please try again.'),
+  maxWarningsSummary: __('%{total} warnings found: showing first %{warningsDisplayed}'),
   refsLoadingErrorTitle: s__('Pipeline|Branches or tags could not be loaded.'),
   submitErrorTitle: s__('Pipeline|Pipeline cannot be run.'),
-  configButtonTitle: s__('Pipelines|Go to the pipeline editor'),
   warningTitle: __('The form contains the following warning:'),
-  maxWarningsSummary: __('%{total} warnings found: showing first %{warningsDisplayed}'),
-  pipelineAriaLabel: s__('Pipeline|Variable'),
 };
 
 export default {
@@ -120,6 +119,9 @@ export default {
     overMaxWarningsLimit() {
       return this.totalWarnings > this.maxWarnings;
     },
+    refFullName() {
+      return this.refValue.fullName;
+    },
     refShortName() {
       return this.refValue.shortName;
     },
@@ -140,7+142,7 @@
         const {
           data: {
             pipelineCreate: { errors, pipeline },
           },
         } = await this.$apollo.mutate({
           mutation: createPipelineMutation,
           variables: {
@@ -254,7+256,7 @@
       </gl-form-group>
       <pipeline-inputs-form v-if="isPipelineInputsFeatureAvailable" />
       <pipeline-variables-form
-        :default-branch="defaultBranch"
         :file-params="fileParams"
         :is-maintainer="isMaintainer"
         :project-path="projectPath"
-        :ref-param="refParam"
+        :ref-param="refFullName"
         :settings-link="settingsLink"
         :variable-params="variableParams"
         @variables-updated="handleVariablesUpdated"