Schedule pipelines with variables

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/32568

2 files changed, 74 insertions, 0 deletions

diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
index b424e7f205d..50c725aa3d5 100644
--- a/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
+++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
@@ -3,6 +3,7 @@ import Translate from '../vue_shared/translate';
 import intervalPatternInput from './components/interval_pattern_input.vue';
 import TimezoneDropdown from './components/timezone_dropdown';
 import TargetBranchDropdown from './components/target_branch_dropdown';
+import { setupPipelineVariableList } from './setup_pipeline_variable_list';
 
 Vue.use(Translate);
 
@@ -39,4 +40,6 @@ document.addEventListener('DOMContentLoaded', () => {
   gl.timezoneDropdown = new TimezoneDropdown();
   gl.targetBranchDropdown = new TargetBranchDropdown();
   gl.pipelineScheduleFieldErrors = new gl.GlFieldErrors(formElement);
+
+  setupPipelineVariableList($('.js-pipeline-variable-list'));
 });
diff --git a/app/assets/javascripts/pipeline_schedules/setup_pipeline_variable_list.js b/app/assets/javascripts/pipeline_schedules/setup_pipeline_variable_list.js
new file mode 100644
index 00000000000..644efd10509
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/setup_pipeline_variable_list.js
@@ -0,0 +1,71 @@
+function insertRow($row) {
+  const $rowClone = $row.clone();
+  $rowClone.removeAttr('data-is-persisted');
+  $rowClone.find('input, textarea').val('');
+  $row.after($rowClone);
+}
+
+function removeRow($row) {
+  const isPersisted = gl.utils.convertPermissionToBoolean($row.attr('data-is-persisted'));
+
+  if (isPersisted) {
+    $row.hide();
+    $row
+      .find('.js-destroy-input')
+      .val(1);
+  } else {
+    $row.remove();
+  }
+}
+
+function checkIfRowTouched($row) {
+  return $row.find('.js-user-input').toArray().some(el => $(el).val().length > 0);
+}
+
+function setupPipelineVariableList(parent = document) {
+  const $parent = $(parent);
+
+  $parent.on('click', '.js-row-remove-button', (e) => {
+    const $row = $(e.currentTarget).closest('.js-row');
+    removeRow($row);
+
+    e.preventDefault();
+  });
+
+  // Remove any empty rows except the last r
+  $parent.on('blur', '.js-user-input', (e) => {
+    const $row = $(e.currentTarget).closest('.js-row');
+
+    const isTouched = checkIfRowTouched($row);
+    if ($row.is(':not(:last-child)') && !isTouched) {
+      removeRow($row);
+    }
+  });
+
+  // Always make sure there is an empty last row
+  $parent.on('input', '.js-user-input', () => {
+    const $lastRow = $parent.find('.js-row').last();
+
+    const isTouched = checkIfRowTouched($lastRow);
+    if (isTouched) {
+      insertRow($lastRow);
+    }
+  });
+
+  // Clear out the empty last row so it
+  // doesn't get submitted and throw validation errors
+  $parent.closest('form').on('submit', () => {
+    const $lastRow = $parent.find('.js-row').last();
+
+    const isTouched = checkIfRowTouched($lastRow);
+    if (!isTouched) {
+      $lastRow.find('input, textarea').attr('name', '');
+    }
+  });
+}
+
+export {
+  setupPipelineVariableList,
+  insertRow,
+  removeRow,
+};