Merge branch 'ekigbo-extend-timezone-dropdown' into 'master'

Extend timezone dropdown

See merge request gitlab-org/gitlab-ce!26311

2 files changed, 33 insertions, 26 deletions

diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
index 95b57d5e048..c1f6edf2f27 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
@@ -1,17 +1,33 @@
-/* eslint-disable class-methods-use-this */
+const defaultTimezone = 'UTC';
+
+export const formatUtcOffset = offset => {
+  const parsed = parseInt(offset, 10);
+  if (Number.isNaN(parsed) || parsed === 0) {
+    return `0`;
+  }
+  const prefix = offset > 0 ? '+' : '-';
+  return `${prefix} ${Math.abs(offset / 3600)}`;
+};
 
-import $ from 'jquery';
+export const formatTimezone = item => `[UTC ${formatUtcOffset(item.offset)}] ${item.name}`;
 
-const defaultTimezone = 'UTC';
+const defaults = {
+  $inputEl: null,
+  $dropdownEl: null,
+  onSelectTimezone: null,
+};
 
 export default class TimezoneDropdown {
-  constructor() {
-    this.$dropdown = $('.js-timezone-dropdown');
+  constructor({ $dropdownEl, $inputEl, onSelectTimezone } = defaults) {
+    this.$dropdown = $dropdownEl;
     this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
-    this.$input = $('#schedule_cron_timezone');
+    this.$input = $inputEl;
     this.timezoneData = this.$dropdown.data('data');
+
     this.initDefaultTimezone();
     this.initDropdown();
+
+    this.onSelectTimezone = onSelectTimezone;
   }
 
   initDropdown() {
@@ -24,28 +40,12 @@ export default class TimezoneDropdown {
         fields: ['name'],
       },
       clicked: cfg => this.updateInputValue(cfg),
-      text: item => this.formatTimezone(item),
+      text: item => formatTimezone(item),
     });
 
     this.setDropdownToggle();
   }
 
-  formatUtcOffset(offset) {
-    let prefix = '';
-
-    if (offset > 0) {
-      prefix = '+';
-    } else if (offset < 0) {
-      prefix = '-';
-    }
-
-    return `${prefix} ${Math.abs(offset / 3600)}`;
-  }
-
-  formatTimezone(item) {
-    return `[UTC ${this.formatUtcOffset(item.offset)}] ${item.name}`;
-  }
-
   initDefaultTimezone() {
     const initialValue = this.$input.val();
 
@@ -56,13 +56,14 @@ export default class TimezoneDropdown {
 
   setDropdownToggle() {
     const initialValue = this.$input.val();
-
     this.$dropdownToggle.text(initialValue);
   }
 
   updateInputValue({ selectedObj, e }) {
     e.preventDefault();
     this.$input.val(selectedObj.identifier);
-    gl.pipelineScheduleFieldErrors.updateFormValidityState();
+    if (this.onSelectTimezone) {
+      this.onSelectTimezone({ selectedObj, e });
+    }
   }
 }
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
index 4d494efef6c..dc6df27f1c7 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
@@ -41,7 +41,13 @@ export default () => {
 
   const formElement = document.getElementById('new-pipeline-schedule-form');
 
-  gl.timezoneDropdown = new TimezoneDropdown();
+  gl.timezoneDropdown = new TimezoneDropdown({
+    $dropdownEl: $('.js-timezone-dropdown'),
+    $inputEl: $('#schedule_cron_timezone'),
+    onSelectTimezone: () => {
+      gl.pipelineScheduleFieldErrors.updateFormValidityState();
+    },
+  });
   gl.targetBranchDropdown = new TargetBranchDropdown();
   gl.pipelineScheduleFieldErrors = new GlFieldErrors(formElement);