Added user time settings fields to profile

Udpated user_edit_profile_spec with time preferences

Minor update form fields

8 files changed, 85 insertions, 18 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 c1f6edf2f27..a20a0526f12 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,4 +1,10 @@
-const defaultTimezone = 'UTC';
+const defaultTimezone = { name: 'UTC', offset: 0 };
+const defaults = {
+  $inputEl: null,
+  $dropdownEl: null,
+  onSelectTimezone: null,
+  displayFormat: item => item.name,
+};
 
 export const formatUtcOffset = offset => {
   const parsed = parseInt(offset, 10);
@@ -11,23 +17,28 @@ export const formatUtcOffset = offset => {
 
 export const formatTimezone = item => `[UTC ${formatUtcOffset(item.offset)}] ${item.name}`;
 
-const defaults = {
-  $inputEl: null,
-  $dropdownEl: null,
-  onSelectTimezone: null,
+export const findTimezoneByIdentifier = (tzList = [], identifier = null) => {
+  if (tzList && tzList.length && identifier && identifier.length) {
+    return tzList.find(tz => tz.identifier === identifier) || null;
+  }
+  return null;
 };
 
 export default class TimezoneDropdown {
-  constructor({ $dropdownEl, $inputEl, onSelectTimezone } = defaults) {
+  constructor({ $dropdownEl, $inputEl, onSelectTimezone, displayFormat } = defaults) {
     this.$dropdown = $dropdownEl;
     this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
     this.$input = $inputEl;
     this.timezoneData = this.$dropdown.data('data');
 
+    this.onSelectTimezone = onSelectTimezone;
+    this.displayFormat = displayFormat || defaults.displayFormat;
+
+    this.initialTimezone =
+      findTimezoneByIdentifier(this.timezoneData, this.$input.val()) || defaultTimezone;
+
     this.initDefaultTimezone();
     this.initDropdown();
-
-    this.onSelectTimezone = onSelectTimezone;
   }
 
   initDropdown() {
@@ -35,7 +46,7 @@ export default class TimezoneDropdown {
       data: this.timezoneData,
       filterable: true,
       selectable: true,
-      toggleLabel: item => item.name,
+      toggleLabel: this.displayFormat,
       search: {
         fields: ['name'],
       },
@@ -43,20 +54,17 @@ export default class TimezoneDropdown {
       text: item => formatTimezone(item),
     });
 
-    this.setDropdownToggle();
+    this.setDropdownToggle(this.displayFormat(this.initialTimezone));
   }
 
   initDefaultTimezone() {
-    const initialValue = this.$input.val();
-
-    if (!initialValue) {
-      this.$input.val(defaultTimezone);
+    if (!this.$input.val()) {
+      this.$input.val(defaultTimezone.name);
     }
   }
 
-  setDropdownToggle() {
-    const initialValue = this.$input.val();
-    this.$dropdownToggle.text(initialValue);
+  setDropdownToggle(dropdownText) {
+    this.$dropdownToggle.text(dropdownText);
   }
 
   updateInputValue({ selectedObj, e }) {
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index deacff5abe7..6e3800021b4 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -2,6 +2,9 @@ import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import flash from '../flash';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import TimezoneDropdown, {
+  formatTimezone,
+} from '~/pages/projects/pipeline_schedules/shared/components/timezone_dropdown';
 
 export default class Profile {
   constructor({ form } = {}) {
@@ -10,6 +13,14 @@ export default class Profile {
     this.setRepoRadio();
     this.bindEvents();
     this.initAvatarGlCrop();
+
+    this.$inputEl = $('#user_timezone');
+
+    this.timezoneDropdown = new TimezoneDropdown({
+      $inputEl: this.$inputEl,
+      $dropdownEl: $('.js-timezone-dropdown'),
+      displayFormat: selectedItem => formatTimezone(selectedItem),
+    });
   }
 
   initAvatarGlCrop() {
diff --git a/app/controllers/profiles/preferences_controller.rb b/app/controllers/profiles/preferences_controller.rb
index 0e30df1b15b..62f98d9e549 100644
--- a/app/controllers/profiles/preferences_controller.rb
+++ b/app/controllers/profiles/preferences_controller.rb
@@ -44,7 +44,9 @@ class Profiles::PreferencesController < Profiles::ApplicationController
       :project_view,
       :theme_id,
       :first_day_of_week,
-      :preferred_language
+      :preferred_language,
+      :time_display_relative,
+      :time_format_in_24h
     ]
   end
 end
diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
index b9c52618d4b..d3746248bd3 100644
--- a/app/controllers/profiles_controller.rb
+++ b/app/controllers/profiles_controller.rb
@@ -106,6 +106,7 @@ class ProfilesController < Profiles::ApplicationController
       :organization,
       :private_profile,
       :include_private_contributions,
+      :timezone,
       status: [:emoji, :message]
     )
   end
diff --git a/app/models/user.rb b/app/models/user.rb
index 4a1bf5514fe..60f69659a6b 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -230,6 +230,9 @@ class User < ApplicationRecord
   delegate :notes_filter_for, to: :user_preference
   delegate :set_notes_filter, to: :user_preference
   delegate :first_day_of_week, :first_day_of_week=, to: :user_preference
+  delegate :timezone, :timezone=, to: :user_preference
+  delegate :time_display_relative, :time_display_relative=, to: :user_preference
+  delegate :time_format_in_24h, :time_format_in_24h=, to: :user_preference
 
   accepts_nested_attributes_for :user_preference, update_only: true
 
diff --git a/app/models/user_preference.rb b/app/models/user_preference.rb
index 282b192167f..f1326f4c8cb 100644
--- a/app/models/user_preference.rb
+++ b/app/models/user_preference.rb
@@ -10,6 +10,10 @@ class UserPreference < ApplicationRecord
 
   validates :issue_notes_filter, :merge_request_notes_filter, inclusion: { in: NOTES_FILTERS.values }, presence: true
 
+  default_value_for :timezone, value: Time.zone.tzinfo.name, allows_nil: false
+  default_value_for :time_display_relative, value: true, allows_nil: false
+  default_value_for :time_format_in_24h, value: false, allows_nil: false
+
   class << self
     def notes_filters
       {
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index bfe1c3ddf33..58f2eb229ba 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -82,5 +82,31 @@
       = f.label :first_day_of_week, class: 'label-bold' do
         = _('First day of the week')
       = f.select :first_day_of_week, first_day_of_week_choices_with_default, {}, class: 'form-control'
+  - if Feature.enabled?(:user_time_settings)
+    .col-sm-12
+      %hr
+    .col-lg-4.profile-settings-sidebar
+      %h4.prepend-top-0= s_('Preferences|Time preferences')
+      %p= s_('Preferences|These settings will update how dates and times are displayed for you.')
+    .col-lg-8
+      .form-group
+        %h5= s_('Preferences|Time format')
+        .checkbox-icon-inline-wrapper.form-check
+          - time_format_label = capture do
+            = s_('Preferences|Display time in 24-hour format')
+          = f.check_box :time_format_in_24h, class: 'form-check-input'
+          = f.label :time_format_in_24h do
+            = time_format_label
+        %h5= s_('Preferences|Time display')
+        .checkbox-icon-inline-wrapper.form-check
+          - time_display_label = capture do
+            = s_('Preferences|Use relative times')
+          = f.check_box :time_display_relative, class: 'form-check-input'
+          = f.label :time_display_relative do
+            = time_display_label
+            .text-muted
+              = s_('Preferences|For example: 30 mins ago.')
+  .col-lg-4.profile-settings-sidebar
+  .col-lg-8
     .form-group
       = f.submit _('Save changes'), class: 'btn btn-success'
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 02c750a92c3..45b6453b5ff 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -64,6 +64,18 @@
           prepend: emoji_button,
           append: reset_message_button,
           placeholder: s_("Profiles|What's your status?")
+  - if Feature.enabled?(:user_time_settings)
+    %hr
+    .row.user-time-preferences
+      .col-lg-4.profile-settings-sidebar
+        %h4.prepend-top-0= s_("Profiles|Time settings")
+        %p= s_("Profiles|You can set your current timezone here")
+      .col-lg-8
+        -# TODO: might need an entry in user/profile.md to describe some of these settings
+        -# https://gitlab.com/gitlab-org/gitlab-ce/issues/60070
+        %h5= ("Time zone")
+        = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'btn js-timezone-dropdown input-lg', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
+        %input.hidden{ :type => 'hidden', :id => 'user_timezone', :name => 'user[timezone]', value: @user.timezone }
 
   %hr
   .row