Add latest changes from gitlab-org/gitlab@master

16 files changed, 38 insertions, 177 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
deleted file mode 100644
index 124be35f6ca..00000000000
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import $ from 'jquery';
-import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
-import { getSelector, inserted } from './feature_highlight_helper';
-
-export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
-  const $selector = $(getSelector(id));
-  const $parent = $selector.parent();
-  const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
-  const hideOnScroll = togglePopover.bind($selector, false);
-
-  $selector
-    // Set up popover
-    .data('content', $popoverContent.prop('outerHTML'))
-    .popover({
-      html: true,
-      // Override the existing template to add custom CSS classes
-      template: `
-        <div class="popover feature-highlight-popover" role="tooltip">
-          <div class="arrow"></div>
-          <div class="popover-body"></div>
-        </div>
-      `,
-    })
-    .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave(debounceTimeout))
-    .on('inserted.bs.popover', inserted)
-    .on('show.bs.popover', () => {
-      window.addEventListener('scroll', hideOnScroll, { once: true });
-    })
-    // Display feature highlight
-    .removeAttr('disabled');
-}
-
-const getPriority = (e) => parseInt(e.dataset.highlightPriority, 10) || 0;
-
-export function findHighestPriorityFeature() {
-  let priorityFeature;
-
-  const sortedFeatureEls = [].slice
-    .call(document.querySelectorAll('.js-feature-highlight'))
-    .sort((a, b) => getPriority(b) - getPriority(a));
-
-  const [priorityFeatureEl] = sortedFeatureEls;
-  if (priorityFeatureEl) {
-    priorityFeature = priorityFeatureEl.dataset.highlight;
-  }
-
-  return priorityFeature;
-}
-
-export function highlightFeatures() {
-  const priorityFeature = findHighestPriorityFeature();
-
-  if (priorityFeature) {
-    setupFeatureHighlightPopover(priorityFeature);
-  }
-
-  return priorityFeature;
-}
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index 0f460a83c07..7b4bed69fb8 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -1,15 +1,12 @@
-import $ from 'jquery';
-import { deprecatedCreateFlash as Flash } from '../flash';
-import LazyLoader from '../lazy_loader';
+import { deprecatedCreateFlash as Flash } from '~/flash';
 import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
-import { togglePopover } from '../shared/popover';
 
 export const getSelector = (highlightId) => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
-export function dismiss(highlightId) {
-  axios
-    .post(this.attr('data-dismiss-endpoint'), {
+export function dismiss(endpoint, highlightId) {
+  return axios
+    .post(endpoint, {
       feature_name: highlightId,
     })
     .catch(() =>
@@ -19,21 +16,4 @@ export function dismiss(highlightId) {
         ),
       ),
     );
-
-  togglePopover.call(this, false);
-  this.hide();
-}
-
-export function inserted() {
-  const popoverId = this.getAttribute('aria-describedby');
-  const highlightId = this.dataset.highlight;
-  const $popover = $(this);
-  const dismissWrapper = dismiss.bind($popover, highlightId);
-
-  $(`#${popoverId} .dismiss-feature-highlight`).on('click', dismissWrapper);
-
-  const lazyImg = $(`#${popoverId} .feature-highlight-illustration`)[0];
-  if (lazyImg) {
-    LazyLoader.loadImage(lazyImg);
-  }
 }
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_options.js b/app/assets/javascripts/feature_highlight/feature_highlight_options.js
deleted file mode 100644
index c5553f0243f..00000000000
--- a/app/assets/javascripts/feature_highlight/feature_highlight_options.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import { highlightFeatures } from './feature_highlight';
-
-export default function domContentLoaded() {
-  if (bp.getBreakpointSize() === 'xl') {
-    highlightFeatures();
-    return true;
-  }
-  return false;
-}
-
-document.addEventListener('DOMContentLoaded', domContentLoaded);
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index b5596e257f3..376d93a9783 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -27,7 +27,7 @@ import { localTimeAgo } from './lib/utils/datetime_utility';
 import { getLocationHash, visitUrl } from './lib/utils/url_utility';
 
 // everything else
-import './feature_highlight/feature_highlight_options';
+import initFeatureHighlight from './feature_highlight';
 import LazyLoader from './lazy_loader';
 import { __ } from './locale';
 import initLogoAnimation from './logo';
@@ -114,6 +114,7 @@ function deferredInitialisation() {
   initFrequentItemDropdowns();
   initPersistentUserCallouts();
   initDefaultTrackers();
+  initFeatureHighlight();
 
   const search = document.querySelector('#search');
   if (search) {
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 8d411747b28..36f1b1f2903 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -1,14 +1,7 @@
 .feature-highlight {
-  position: relative;
-  margin-left: $gl-padding;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-
   &::before {
     content: '';
     display: block;
-    position: absolute;
     top: 6px;
     left: 6px;
     width: 8px;
@@ -29,56 +22,22 @@
   }
 }
 
-.feature-highlight-popover-content {
-  display: none;
-
-  hr {
-    margin: $gl-padding 0;
-  }
-
-  .btn-link {
-    svg {
-      @include btn-svg;
-
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .feature-highlight-illustration {
-    width: 100%;
-    height: 100px;
-    padding-top: 12px;
-    padding-bottom: 12px;
 
-    background-color: $indigo-50;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom: 1px solid darken($gray-normal, 8%);
-  }
-}
-
-.popover .feature-highlight-popover-content {
-  display: block;
+.feature-highlight-illustration {
+  background-color: $indigo-50;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: 1px solid darken($gray-normal, 8%);
 }
 
 .feature-highlight-popover {
   width: 240px;
 
-  &.right > .arrow {
-    border-right-color: $border-color;
-  }
-
   .popover-body {
     padding: 0;
   }
 }
 
-.feature-highlight-popover-sub-content {
-  padding: $gl-padding $gl-padding-12;
-}
-
 @include keyframes(pulse-highlight) {
   0% {
     box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 9d6ae83c451..a6ab5459a84 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -117,6 +117,11 @@
   }
 }
 
+.reviewer .merge-icon {
+  bottom: -3px;
+  right: -3px;
+}
+
 .right-sidebar {
   position: fixed;
   top: $header-height;
diff --git a/app/experiments/application_experiment.rb b/app/experiments/application_experiment.rb
index 663c58ceda6..317514d088b 100644
--- a/app/experiments/application_experiment.rb
+++ b/app/experiments/application_experiment.rb
@@ -108,7 +108,6 @@ class ApplicationExperiment < Gitlab::Experiment # rubocop:disable Gitlab/Namesp
     end
 
     def write_entry(key, entry, **options)
-      return false unless Feature.enabled?(:caching_experiments)
       return false if entry.value.blank? # don't cache any empty values
 
       pool { |redis| redis.hset(*hkey(key), entry.value) }
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 822fe3fea88..2576caefdd4 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -284,27 +284,14 @@
                   %span
                     = _('Kubernetes')
                   - if show_cluster_hint
-                    .feature-highlight.js-feature-highlight{ disabled: true,
+                    .js-feature-highlight{ disabled: true,
                       data: { trigger: 'manual',
                         container: 'body',
                         placement: 'right',
                         highlight: UserCalloutsHelper::GKE_CLUSTER_INTEGRATION,
                         highlight_priority: UserCallout.feature_names[:GKE_CLUSTER_INTEGRATION],
-                        dismiss_endpoint: user_callouts_path } }
-                - if show_cluster_hint
-                  .feature-highlight-popover-content
-                    = image_tag 'illustrations/cluster_popover.svg', class: 'feature-highlight-illustration', lazy: false, alt: _('Kubernetes popover')
-                    .feature-highlight-popover-sub-content
-                      %p= _('Allows you to add and manage Kubernetes clusters.')
-                      %p
-                        = _('Protip:')
-                        = link_to _('Auto DevOps'), help_page_path('topics/autodevops/index.md')
-                        %span= _('uses Kubernetes clusters to deploy your code!')
-                      %hr
-                      %button.gl-button.btn.btn-success.btn-sm.dismiss-feature-highlight{ type: 'button' }
-                        %span.gl-mr-2= _("Got it!")
-                        = sprite_icon('thumb-up')
-
+                        dismiss_endpoint: user_callouts_path,
+                        auto_devops_help_path: help_page_path('topics/autodevops/index.md') } }
             - if project_nav_tab? :environments
               = nav_link(controller: :environments, action: [:index, :folder, :show, :new, :edit, :create, :update, :stop, :terminal]) do
                 = link_to project_environments_path(@project), title: _('Environments'), class: 'shortcuts-environments qa-operations-environments-link' do
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index f095f96779d..eb4630b84d5 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -20,9 +20,9 @@
       %li= _('Any encrypted tokens')
   - if project.export_status == :finished
     = link_to _('Download export'), download_export_project_path(project),
-            rel: 'nofollow', download: '', method: :get, class: "btn btn-default", data: { qa_selector: 'download_export_link' }
+            rel: 'nofollow', download: '', method: :get, class: "btn gl-button btn-default", data: { qa_selector: 'download_export_link' }
     = link_to _('Generate new export'), generate_new_export_project_path(project),
-            method: :post, class: "btn btn-default"
+            method: :post, class: "btn gl-button btn-default"
   - else
     = link_to _('Export project'), export_project_path(project),
-          method: :post, class: "btn btn-default", data: { qa_selector: 'export_project_link' }
+          method: :post, class: "btn gl-button btn-default", data: { qa_selector: 'export_project_link' }
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 9414e9b32d5..0d3049cd9a2 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -69,7 +69,7 @@
       .home-panel-description.text-break
         .home-panel-description-markdown.read-more-container{ itemprop: 'description' }
           = markdown_field(@project, :description)
-        %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
+        %button.btn.gl-button.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
           = _("Read more")
 
     - if @project.forked?
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 3b66fdbdf1a..afe42b334ba 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -15,5 +15,5 @@
 
       - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
         .flex-right
-          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn btn-info btn-sm qa-create-merge-request" do
+          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-info btn-sm qa-create-merge-request" do
             #{ _('Create merge request') }
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 153235c37d2..0998cd480d3 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -2,7 +2,7 @@
 %section.settings.js-service-desk-setting-wrapper.no-animate#js-service-desk{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Service Desk')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     - link_start = "<a href='#{help_page_path('user/project/service_desk')}' target='_blank' rel='noopener noreferrer'>".html_safe
     %p= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/projects/_stat_anchor_list.html.haml b/app/views/projects/_stat_anchor_list.html.haml
index 8a93d93a538..13ff8abe499 100644
--- a/app/views/projects/_stat_anchor_list.html.haml
+++ b/app/views/projects/_stat_anchor_list.html.haml
@@ -6,4 +6,4 @@
   - anchors.each do |anchor|
     %li.nav-item
       = link_to_if(anchor.link, anchor.label, anchor.link, stat_anchor_attrs(anchor)) do
-        .stat-text.d-flex.align-items-center{ class: ('btn btn-default disabled' if project_buttons) }= anchor.label
+        .stat-text.d-flex.align-items-center{ class: ('btn gl-button btn-default disabled' if project_buttons) }= anchor.label
diff --git a/app/views/projects/_visibility_modal.html.haml b/app/views/projects/_visibility_modal.html.haml
index 182164d2175..990ac9fefb9 100644
--- a/app/views/projects/_visibility_modal.html.haml
+++ b/app/views/projects/_visibility_modal.html.haml
@@ -24,6 +24,6 @@
         .form-group
           = text_field_tag 'confirm_path_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
         .form-actions
-          %button.btn.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
+          %button.btn.gl-button.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
             = _('Cancel')
-          = submit_tag _('Reduce project visibility'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true
+          = submit_tag _('Reduce project visibility'), class: "btn gl-button btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index 991c95153da..2669c4c0042 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -14,4 +14,4 @@
       - if can_create_wiki
         %p
           = _("Add a homepage to your wiki that contains information about your project and GitLab will display it here instead of this message.")
-        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn btn-primary"
+        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn gl-button btn-primary"
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 962e1158118..c26017ccb79 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -8,14 +8,14 @@
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= _('Collapse')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= _('Collapse')
     %p= _('Update your project name, topics, description, and avatar.')
   .settings-content= render 'projects/settings/general'
 
 %section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded), data: { qa_selector: 'visibility_features_permissions_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     %p= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default award emoji.')
 
   .settings-content
@@ -25,12 +25,12 @@
       .js-project-permissions-form
       - if show_visibility_confirm_modal?(@project)
         = render "visibility_modal"
-      = f.submit _('Save changes'), class: "gl-button gl-button btn btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
+      = f.submit _('Save changes'), class: "btn gl-button btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
 
 %section.qa-merge-request-settings.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Merge requests')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     = render_if_exists 'projects/merge_request_settings_description_text'
 
   .settings-content
@@ -39,7 +39,7 @@
     = form_for @project, remote: true, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
-      = f.submit _('Save changes'), class: "gl-button btn btn-succes qa-save-merge-request-changes rspec-save-merge-request-changes"
+      = f.submit _('Save changes'), class: "btn gl-button btn-success qa-save-merge-request-changes rspec-save-merge-request-changes"
 
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
@@ -48,7 +48,8 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
     %p
       = s_('ProjectSettings|Customize this project\'s badges.')
       = link_to s_('ProjectSettings|What are badges?'), help_page_path('user/project/badges')
@@ -62,7 +63,7 @@
 %section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     %p= _('Housekeeping, export, path, transfer, remove, archive.')
 
   .settings-content
@@ -72,7 +73,7 @@
         = _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
         = link_to _('Learn more.'), help_page_path('administration/housekeeping'), target: '_blank', rel: 'noopener noreferrer'
       = link_to _('Run housekeeping'), housekeeping_project_path(@project),
-        method: :post, class: "gl-button btn btn-default"
+        method: :post, class: "btn gl-button btn-default"
 
     = render 'export', project: @project