WIPwip-46806-typed-ci-variables

5 files changed, 19 insertions, 0 deletions

diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
index da3100b9386..9dd6b36676a 100644
--- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
@@ -26,6 +26,10 @@ export default class VariableList {
         selector: '.js-ci-variable-input-id',
         default: '',
       },
+      variable_type: {
+        selector: '.js-ci-variable-input-variable-type',
+        default: 'env_var',
+      },
       key: {
         selector: '.js-ci-variable-input-key',
         default: '',
@@ -234,6 +238,7 @@ export default class VariableList {
         }
       });
 
+      console.log(resultant);
       return resultant;
     });
   }
diff --git a/app/assets/javascripts/ci_variable_list/native_form_variable_list.js b/app/assets/javascripts/ci_variable_list/native_form_variable_list.js
index e7111c666a2..ad51cf8d11d 100644
--- a/app/assets/javascripts/ci_variable_list/native_form_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/native_form_variable_list.js
@@ -17,8 +17,10 @@ export default function setupNativeFormVariableList({ container, formField = 'va
     const $lastRow = $container.find('.js-row').last();
 
     const isTouched = variableList.checkIfRowTouched($lastRow);
+    console.log(isTouched);
     if (!isTouched) {
       $lastRow.find('input, textarea').attr('name', '');
+      $lastRow.find('select').attr('name', '');
     }
   });
 }
diff --git a/app/assets/javascripts/pages/projects/pipelines/new/index.js b/app/assets/javascripts/pages/projects/pipelines/new/index.js
index b0b077a5e4c..7a881c5dae8 100644
--- a/app/assets/javascripts/pages/projects/pipelines/new/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/new/index.js
@@ -3,6 +3,7 @@ import NewBranchForm from '~/new_branch_form';
 import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
+  console.log("OHAI");
   new NewBranchForm($('.js-new-pipeline-form')); // eslint-disable-line no-new
 
   setupNativeFormVariableList({
diff --git a/app/models/ci/variable.rb b/app/models/ci/variable.rb
index c37b444bdee..333741bb570 100644
--- a/app/models/ci/variable.rb
+++ b/app/models/ci/variable.rb
@@ -23,6 +23,13 @@ module Ci
 
     scope :unprotected, -> { where(protected: false) }
 
+    def self.variable_type_options
+      [
+        %w(Variable env_var),
+        %w(File file)
+      ]
+    end
+
     def to_runner_variable
       super.merge(file: file?)
     end
diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index aecfdea10d9..25fcbb85dd5 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -3,6 +3,7 @@
 - only_key_value = local_assigns.fetch(:only_key_value, false)
 
 - id = variable&.id
+- variable_type = variable&.variable_type
 - key = variable&.key
 - value = variable&.value
 - is_protected_default = ci_variable_protected_by_default?
@@ -12,6 +13,7 @@
 
 - id_input_name = "#{form_field}[variables_attributes][][id]"
 - 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]"
 - protected_input_name = "#{form_field}[variables_attributes][][protected]"
@@ -21,6 +23,8 @@
   .ci-variable-row-body
     %input.js-ci-variable-input-id{ type: "hidden", name: id_input_name, value: id }
     %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{ name:  variable_type_input_name }
+      = options_for_select(Ci::Variable.variable_type_options, variable_type)
     %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control{ type: "text",
       name: key_input_name,
       value: key,