Add latest changes from gitlab-org/gitlab@master

16 files changed, 116 insertions, 104 deletions

diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index 542890d9b04..28abe558f53 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -27,7 +27,7 @@ export default class ImageFile {
 
   initViewModes() {
     const viewMode = viewModes[0];
-    $('.view-modes', this.file).removeClass('hide');
+    $('.view-modes', this.file).removeClass('gl-display-none');
     $('.view-modes-menu', this.file).on('click', 'li', event => {
       if (!$(event.currentTarget).hasClass('active')) {
         return this.activateViewMode(event.currentTarget.className);
@@ -42,12 +42,10 @@ export default class ImageFile {
       .filter(`.${viewMode}`)
       .addClass('active');
 
-    // eslint-disable-next-line no-jquery/no-fade
-    return $(`.view:visible:not(.${viewMode})`, this.file).fadeOut(200, () => {
-      // eslint-disable-next-line no-jquery/no-fade
-      $(`.view.${viewMode}`, this.file).fadeIn(200);
-      return this.initView(viewMode);
-    });
+    $(`.view:visible:not(.${viewMode})`, this.file).addClass('gl-display-none');
+    $(`.view.${viewMode}`, this.file).removeClass('gl-display-none');
+
+    return this.initView(viewMode);
   }
 
   initView(viewMode) {
@@ -120,7 +118,7 @@ export default class ImageFile {
         return this.requestImageInfo($('img', wrap), (width, height) => {
           $('.image-info .meta-width', wrap).text(`${width}px`);
           $('.image-info .meta-height', wrap).text(`${height}px`);
-          return $('.image-info', wrap).removeClass('hide');
+          return $('.image-info', wrap).removeClass('gl-display-none');
         });
       });
     },
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
index 5674cc8495d..ffb5232ca75 100644
--- a/app/assets/javascripts/due_date_select.js
+++ b/app/assets/javascripts/due_date_select.js
@@ -119,20 +119,18 @@ class DueDateSelect {
   }
 
   updateIssueBoardIssue() {
-    // eslint-disable-next-line no-jquery/no-fade
-    this.$loading.fadeIn();
+    this.$loading.removeClass('gl-display-none');
     this.$dropdown.trigger('loading.gl.dropdown');
     this.$selectbox.hide();
     this.$value.css('display', '');
-    const fadeOutLoader = () => {
-      // eslint-disable-next-line no-jquery/no-fade
-      this.$loading.fadeOut();
+    const hideLoader = () => {
+      this.$loading.addClass('gl-display-none');
     };
 
     boardsStore.detail.issue
       .update(this.$dropdown.attr('data-issue-update'))
-      .then(fadeOutLoader)
-      .catch(fadeOutLoader);
+      .then(hideLoader)
+      .catch(hideLoader);
   }
 
   submitSelectedDate(isDropdown) {
@@ -140,8 +138,7 @@ class DueDateSelect {
     const hasDueDate = this.displayedDate !== __('None');
     const displayedDateStyle = hasDueDate ? 'bold' : 'no-value';
 
-    // eslint-disable-next-line no-jquery/no-fade
-    this.$loading.removeClass('hidden').fadeIn();
+    this.$loading.removeClass('gl-display-none');
 
     if (isDropdown) {
       this.$dropdown.trigger('loading.gl.dropdown');
@@ -164,8 +161,7 @@ class DueDateSelect {
       }
       this.$sidebarCollapsedValue.attr('data-original-title', tooltipText);
 
-      // eslint-disable-next-line no-jquery/no-fade
-      return this.$loading.fadeOut();
+      return this.$loading.addClass('gl-display-none');
     });
   }
 }
@@ -211,7 +207,8 @@ export default class DueDateSelectors {
   initIssuableSelect() {
     const $loading = $('.js-issuable-update .due_date')
       .find('.block-loading')
-      .hide();
+      .removeClass('hidden')
+      .addClass('gl-display-none');
 
     $('.js-due-date-select').each((i, dropdown) => {
       const $dropdown = $(dropdown);
diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js
index 4aad54bed55..eabf3b0846e 100644
--- a/app/assets/javascripts/filterable_list.js
+++ b/app/assets/javascripts/filterable_list.js
@@ -64,8 +64,7 @@ export default class FilterableList {
       return false;
     }
 
-    // eslint-disable-next-line no-jquery/no-fade
-    $(this.listHolderElement).fadeTo(250, 0.5);
+    $(this.listHolderElement).addClass('gl-opacity-5');
 
     this.isBusy = true;
 
@@ -99,7 +98,6 @@ export default class FilterableList {
 
   onFilterComplete() {
     this.isBusy = false;
-    // eslint-disable-next-line no-jquery/no-fade
-    $(this.listHolderElement).fadeTo(250, 1);
+    $(this.listHolderElement).removeClass('gl-opacity-5');
   }
 }
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 8bbd4300c96..ac5aa24d5d8 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -45,8 +45,7 @@ export default class LabelsSelect {
       const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
       const $value = $block.find('.value');
       const $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
-      // eslint-disable-next-line no-jquery/no-fade
-      const $loading = $block.find('.block-loading').fadeOut();
+      const $loading = $block.find('.block-loading').addClass('gl-display-none');
       const fieldName = $dropdown.data('fieldName');
       let initialSelected = $selectbox
         .find(`input[name="${$dropdown.data('fieldName')}"]`)
@@ -83,15 +82,13 @@ export default class LabelsSelect {
         if (!selected.length) {
           data[abilityName].label_ids = [''];
         }
-        // eslint-disable-next-line no-jquery/no-fade
-        $loading.removeClass('hidden').fadeIn();
+        $loading.removeClass('gl-display-none');
         $dropdown.trigger('loading.gl.dropdown');
         axios
           .put(issueUpdateURL, data)
           .then(({ data }) => {
             let template;
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.fadeOut();
+            $loading.addClass('gl-display-none');
             $dropdown.trigger('loaded.gl.dropdown');
             $selectbox.hide();
             data.issueUpdateURL = issueUpdateURL;
@@ -340,9 +337,8 @@ export default class LabelsSelect {
           const { $el, e, isMarking } = clickEvent;
           const label = clickEvent.selectedObj;
 
-          const fadeOutLoader = () => {
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.fadeOut();
+          const hideLoader = () => {
+            $loading.addClass('gl-display-none');
           };
 
           const page = $('body').attr('data-page');
@@ -403,8 +399,7 @@ export default class LabelsSelect {
               boardsStore.detail.issue.labels = labels;
             }
 
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.fadeIn();
+            $loading.removeClass('gl-display-none');
             const oldLabels = boardsStore.detail.issue.labels;
 
             boardsStore.detail.issue
@@ -420,8 +415,8 @@ export default class LabelsSelect {
                     .removeClass('is-active');
                 }
               })
-              .then(fadeOutLoader)
-              .catch(fadeOutLoader);
+              .then(hideLoader)
+              .catch(hideLoader);
           } else if (handleClick) {
             e.preventDefault();
             handleClick(label);
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index abf25ab5f24..f5ba933d012 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -136,10 +136,9 @@ function deferredInitialisation() {
   $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
     tooltips.dispose(this);
 
-    // eslint-disable-next-line no-jquery/no-fade
     $(this)
       .closest('li')
-      .fadeOut();
+      .addClass('gl-display-none!');
   });
 
   $('.js-remove-tr').on('ajax:before', function removeTRAjaxBeforeCallback() {
@@ -147,10 +146,9 @@ function deferredInitialisation() {
   });
 
   $('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() {
-    // eslint-disable-next-line no-jquery/no-fade
     $(this)
       .closest('tr')
-      .fadeOut();
+      .addClass('gl-display-none!');
   });
 
   const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 52f6786ca28..baa5e41989b 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -53,8 +53,7 @@ export default class MilestoneSelect {
       const $block = $selectBox.closest('.block');
       const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
       const $value = $block.find('.value');
-      // eslint-disable-next-line no-jquery/no-fade
-      const $loading = $block.find('.block-loading').fadeOut();
+      const $loading = $block.find('.block-loading').addClass('gl-display-none');
       selectedMilestoneDefault = showAny ? '' : null;
       selectedMilestoneDefault =
         showNo && defaultNo ? __('No milestone') : selectedMilestoneDefault;
@@ -255,34 +254,29 @@ export default class MilestoneSelect {
             }
 
             $dropdown.trigger('loading.gl.dropdown');
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.removeClass('hidden').fadeIn();
+            $loading.removeClass('gl-display-none');
 
             boardsStore.detail.issue
               .update($dropdown.attr('data-issue-update'))
               .then(() => {
                 $dropdown.trigger('loaded.gl.dropdown');
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
               })
               .catch(() => {
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
               });
           } else {
             selected = $selectBox.find('input[type="hidden"]').val();
             data = {};
             data[abilityName] = {};
             data[abilityName].milestone_id = selected != null ? selected : null;
-            // eslint-disable-next-line no-jquery/no-fade
-            $loading.removeClass('hidden').fadeIn();
+            $loading.removeClass('gl-display-none');
             $dropdown.trigger('loading.gl.dropdown');
             return axios
               .put(issueUpdateURL, data)
               .then(({ data }) => {
                 $dropdown.trigger('loaded.gl.dropdown');
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
                 $selectBox.hide();
                 $value.css('display', '');
                 if (data.milestone != null) {
@@ -313,8 +307,7 @@ export default class MilestoneSelect {
                   .text(__('None'));
               })
               .catch(() => {
-                // eslint-disable-next-line no-jquery/no-fade
-                $loading.fadeOut();
+                $loading.addClass('gl-display-none');
               });
           }
         },
diff --git a/app/assets/javascripts/users_select/index.js b/app/assets/javascripts/users_select/index.js
index fbede49e9e8..971c9978865 100644
--- a/app/assets/javascripts/users_select/index.js
+++ b/app/assets/javascripts/users_select/index.js
@@ -63,8 +63,7 @@ function UsersSelect(currentUser, els, options = {}) {
     const abilityName = $dropdown.data('abilityName');
     let $value = $block.find('.value');
     const $collapsedSidebar = $block.find('.sidebar-collapsed-user');
-    // eslint-disable-next-line no-jquery/no-fade
-    const $loading = $block.find('.block-loading').fadeOut();
+    const $loading = $block.find('.block-loading').addClass('gl-display-none');
     const selectedIdDefault = defaultNullUser && showNullUser ? 0 : null;
     let selectedId = $dropdown.data('selected');
     let assignTo;
@@ -205,16 +204,14 @@ function UsersSelect(currentUser, els, options = {}) {
       const data = {};
       data[abilityName] = {};
       data[abilityName].assignee_id = selected != null ? selected : null;
-      // eslint-disable-next-line no-jquery/no-fade
-      $loading.removeClass('hidden').fadeIn();
+      $loading.removeClass('gl-display-none');
       $dropdown.trigger('loading.gl.dropdown');
 
       return axios.put(issueURL, data).then(({ data }) => {
         let user = {};
         let tooltipTitle = user.name;
         $dropdown.trigger('loaded.gl.dropdown');
-        // eslint-disable-next-line no-jquery/no-fade
-        $loading.fadeOut();
+        $loading.addClass('gl-display-none');
         if (data.assignee) {
           user = {
             name: data.assignee.name,
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
new file mode 100644
index 00000000000..4a96d4fa612
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -0,0 +1,30 @@
+@import 'mixins_and_variables_and_functions';
+
+@mixin inset-border-1-red-500($important: false) {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500 if-important($important);
+}
+
+.timezone-dropdown {
+  .dropdown-menu {
+    @include gl-w-full;
+  }
+
+  .gl-new-dropdown-item-text-primary {
+    @include gl-overflow-hidden;
+    @include gl-text-overflow-ellipsis;
+  }
+}
+
+.modal-footer {
+  @include gl-bg-gray-10;
+}
+
+.invalid-dropdown {
+  .gl-dropdown-toggle {
+    @include inset-border-1-red-500;
+
+    &:hover {
+      @include inset-border-1-red-500(true);
+    }
+  }
+}
diff --git a/app/controllers/registrations/welcome_controller.rb b/app/controllers/registrations/welcome_controller.rb
index 5b3f78a92ad..4a6fef56ef5 100644
--- a/app/controllers/registrations/welcome_controller.rb
+++ b/app/controllers/registrations/welcome_controller.rb
@@ -45,7 +45,7 @@ module Registrations
     end
 
     def update_params
-      params.require(:user).permit(:role, :setup_for_company)
+      params.require(:user).permit(:role, :other_role, :setup_for_company)
     end
 
     def requires_confirmation?(user)
diff --git a/app/helpers/ci/pipeline_schedules_helper.rb b/app/helpers/ci/pipeline_schedules_helper.rb
deleted file mode 100644
index 20e5c90a60e..00000000000
--- a/app/helpers/ci/pipeline_schedules_helper.rb
+++ /dev/null
@@ -1,15 +0,0 @@
-# frozen_string_literal: true
-
-module Ci
-  module PipelineSchedulesHelper
-    def timezone_data
-      ActiveSupport::TimeZone.all.map do |timezone|
-        {
-          name: timezone.name,
-          offset: timezone.now.utc_offset,
-          identifier: timezone.tzinfo.identifier
-        }
-      end
-    end
-  end
-end
diff --git a/app/helpers/time_zone_helper.rb b/app/helpers/time_zone_helper.rb
new file mode 100644
index 00000000000..daf99ad9b5e
--- /dev/null
+++ b/app/helpers/time_zone_helper.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module TimeZoneHelper
+  def timezone_data
+    ActiveSupport::TimeZone.all.map do |timezone|
+      {
+        identifier: timezone.tzinfo.identifier,
+        name: timezone.name,
+        abbr: timezone.tzinfo.strftime('%Z'),
+        offset: timezone.now.utc_offset,
+        formatted_offset: timezone.now.formatted_offset
+      }
+    end
+  end
+end
diff --git a/app/models/pages/lookup_path.rb b/app/models/pages/lookup_path.rb
index e33d09559ae..84928468ad1 100644
--- a/app/models/pages/lookup_path.rb
+++ b/app/models/pages/lookup_path.rb
@@ -41,7 +41,7 @@ module Pages
 
     def deployment
       strong_memoize(:deployment) do
-        next unless Feature.enabled?(:pages_serve_from_deployments, project)
+        next unless Feature.enabled?(:pages_serve_from_deployments, project, default_enabled: true)
 
         project.pages_metadatum.pages_deployment
       end
diff --git a/app/models/user.rb b/app/models/user.rb
index db296d28e43..2868b568e4a 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -289,6 +289,7 @@ class User < ApplicationRecord
 
   delegate :path, to: :namespace, allow_nil: true, prefix: true
   delegate :job_title, :job_title=, to: :user_detail, allow_nil: true
+  delegate :other_role, :other_role=, to: :user_detail, allow_nil: true
   delegate :bio, :bio=, :bio_html, to: :user_detail, allow_nil: true
   delegate :webauthn_xid, :webauthn_xid=, to: :user_detail, allow_nil: true
 
diff --git a/app/services/system_hooks_service.rb b/app/services/system_hooks_service.rb
index 0d369c23b57..881a139437a 100644
--- a/app/services/system_hooks_service.rb
+++ b/app/services/system_hooks_service.rb
@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SystemHooksService
+  BUILDER_DRIVEN_EVENT_DATA_AVAILABLE_FOR_CLASSES = [GroupMember].freeze
+
   def execute_hooks_for(model, event)
     data = build_event_data(model, event)
 
@@ -20,6 +22,9 @@ class SystemHooksService
   private
 
   def build_event_data(model, event)
+    # return entire event data from its builder class, if available.
+    return builder_driven_event_data(model, event) if builder_driven_event_data_available?(model)
+
     data = {
       event_name: build_event_name(model, event),
       created_at: model.created_at&.xmlschema,
@@ -62,8 +67,6 @@ class SystemHooksService
           old_full_path: model.full_path_before_last_save
         )
       end
-    when GroupMember
-      data.merge!(group_member_data(model))
     end
 
     data
@@ -75,10 +78,6 @@ class SystemHooksService
       return "user_add_to_team"      if event == :create
       return "user_remove_from_team" if event == :destroy
       return "user_update_for_team"  if event == :update
-    when GroupMember
-      return 'user_add_to_group'      if event == :create
-      return 'user_remove_from_group' if event == :destroy
-      return 'user_update_for_group'  if event == :update
     else
       "#{model.class.name.downcase}_#{event}"
     end
@@ -128,19 +127,6 @@ class SystemHooksService
     }
   end
 
-  def group_member_data(model)
-    {
-      group_name: model.group.name,
-      group_path: model.group.path,
-      group_id: model.group.id,
-      user_username: model.user.username,
-      user_name: model.user.name,
-      user_email: model.user.email,
-      user_id: model.user.id,
-      group_access: model.human_access
-    }
-  end
-
   def user_data(model)
     {
       name: model.name,
@@ -149,6 +135,17 @@ class SystemHooksService
       username: model.username
     }
   end
+
+  def builder_driven_event_data_available?(model)
+    model.class.in?(BUILDER_DRIVEN_EVENT_DATA_AVAILABLE_FOR_CLASSES)
+  end
+
+  def builder_driven_event_data(model, event)
+    case model
+    when GroupMember
+      Gitlab::HookData::GroupMemberBuilder.new(model).build(event)
+    end
+  end
 end
 
 SystemHooksService.prepend_if_ee('EE::SystemHooksService')
diff --git a/app/views/projects/diffs/_replaced_image_diff.html.haml b/app/views/projects/diffs/_replaced_image_diff.html.haml
index 566dfe798c6..1f9533ade83 100644
--- a/app/views/projects/diffs/_replaced_image_diff.html.haml
+++ b/app/views/projects/diffs/_replaced_image_diff.html.haml
@@ -14,7 +14,7 @@
     .wrap
       .frame.deleted
         = image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
-      %p.image-info.hide
+      %p.image-info.gl-display-none
         %span.meta-filesize= number_to_human_size(old_blob.size)
         |
         %strong W:
@@ -24,7 +24,7 @@
         %span.meta-height
     .wrap
       = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_url, alt: diff_file.new_path }
-      %p.image-info.hide
+      %p.image-info.gl-display-none
         %span.meta-filesize= number_to_human_size(blob.size)
         |
         %strong W:
@@ -33,7 +33,7 @@
         %strong H:
         %span.meta-height
 
-  .swipe.view.hide
+  .swipe.view.gl-display-none
     .swipe-frame
       .frame.deleted.old-diff
         = image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
@@ -43,7 +43,7 @@
         %span.top-handle
         %span.bottom-handle
 
-  .onion-skin.view.hide
+  .onion-skin.view.gl-display-none
     .onion-skin-frame
       .frame.deleted
         = image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
@@ -54,7 +54,7 @@
           .dragger{ :style => "left: 0px;" }
         .opaque
 
-.view-modes.hide
+.view-modes.gl-display-none
   %ul.view-modes-menu
     %li.two-up{ data: { mode: 'two-up' } } 2-up
     %li.swipe{ data: { mode: 'swipe' } } Swipe
diff --git a/app/views/registrations/welcome/show.html.haml b/app/views/registrations/welcome/show.html.haml
index 278c0ff7739..0701f4e65e3 100644
--- a/app/views/registrations/welcome/show.html.haml
+++ b/app/views/registrations/welcome/show.html.haml
@@ -14,8 +14,16 @@
         .row
           .form-group.col-sm-12
             = f.label :role, _('Role'), class: 'label-bold'
-            = f.select :role, ::User.roles.keys.map { |role| [role.titleize, role] }, {}, class: 'form-control', autofocus: true
-            .form-text.gl-text-gray-500.gl-mt-3= _('This will help us personalize your onboarding experience.')
+            = f.select :role, ::User.roles.keys.map { |role| [role.titleize, role] }, {}, class: 'form-control js-user-role-dropdown', autofocus: true
+        - if Feature.enabled?(:user_other_role_details)
+          .row
+            .form-group.col-sm-12.js-other-role-group{ class: ("hidden") }
+              = f.label :other_role, _('What is your job title? (optional)'), class: 'form-check-label gl-mb-3'
+              = f.text_field :other_role, class: 'form-control'
+        - else
+        .row
+          .form-group.col-sm-12
+            .form-text.gl-text-gray-500.gl-mt-0.gl-line-height-normal.gl-px-1= _('This will help us personalize your onboarding experience.')
         = render_if_exists "registrations/welcome/setup_for_company", f: f
         .row
           .form-group.col-sm-12.gl-mb-0