Add latest changes from gitlab-org/gitlab@master

5 files changed, 34 insertions, 43 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index ac36d284384..4f26bab8bd3 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -1,8 +1,6 @@
 <script>
 /* global Flash */
 
-import $ from 'jquery';
-import 'vendor/jquery.scrollTo';
 import { GlLoadingIcon, GlModal } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { HIDDEN_CLASS } from '~/lib/utils/constants';
@@ -116,7 +114,7 @@ export default {
         })
         .catch(() => {
           this.isLoading = false;
-          $.scrollTo(0);
+          window.scrollTo({ top: 0, behavior: 'smooth' });
 
           Flash(COMMON_STR.FAILURE);
         });
@@ -151,7 +149,7 @@ export default {
         updatePagination: true,
       }).then((res) => {
         this.isLoading = false;
-        $.scrollTo(0);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
 
         const currentPath = mergeUrlParams({ page }, window.location.href);
         window.history.replaceState(
@@ -195,7 +193,7 @@ export default {
       this.service
         .leaveGroup(this.targetGroup.leavePath)
         .then((res) => {
-          $.scrollTo(0);
+          window.scrollTo({ top: 0, behavior: 'smooth' });
           this.store.removeGroup(this.targetGroup, this.targetParentGroup);
           this.$toast.show(res.data.notice);
         })
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index ba1280d89d5..1c8cb423828 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -4,7 +4,7 @@
 
 import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import { isFunction } from 'lodash';
+import { isFunction, defer } from 'lodash';
 import Cookies from 'js-cookie';
 import axios from './axios_utils';
 import { getLocationHash } from './url_utility';
@@ -261,20 +261,23 @@ export const contentTop = () => {
 };
 
 export const scrollToElement = (element, options = {}) => {
-  let $el = element;
-  if (!(element instanceof $)) {
-    $el = $(element);
+  let el = element;
+  if (element instanceof $) {
+    // eslint-disable-next-line prefer-destructuring
+    el = element[0];
+  } else if (typeof el === 'string') {
+    el = document.querySelector(element);
   }
-  const { top } = $el.offset();
-  const { offset = 0 } = options;
 
-  // eslint-disable-next-line no-jquery/no-animate
-  return $('body, html').animate(
-    {
-      scrollTop: top - contentTop() + offset,
-    },
-    200,
-  );
+  if (el && el.getBoundingClientRect) {
+    // In the previous implementation, jQuery naturally deferred this scrolling.
+    // Unfortunately, we're quite coupled to this implementation detail now.
+    defer(() => {
+      const { duration = 200, offset = 0 } = options;
+      const y = el.getBoundingClientRect().top + window.pageYOffset + offset - contentTop();
+      window.scrollTo({ top: y, behavior: duration ? 'smooth' : 'auto' });
+    });
+  }
 };
 
 export const scrollToElementWithContext = (element) => {
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index 314ade0dc3e..aaa8ee40966 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names, no-underscore-dangle, no-param-reassign, consistent-return */
 
 import $ from 'jquery';
-import 'vendor/jquery.scrollTo';
+import { scrollToElement } from '~/lib/utils/common_utils';
 
 // LineHighlighter
 //
@@ -69,16 +69,12 @@ LineHighlighter.prototype.highlightHash = function (newHash) {
     if (range[0]) {
       this.highlightRange(range);
       const lineSelector = `#L${range[0]}`;
-      const scrollOptions = {
+
+      scrollToElement(lineSelector, {
         // Scroll to the first highlighted line on initial load
-        // Offset -50 for the sticky top bar, and another -100 for some context
-        offset: -150,
-      };
-      if (this.options.scrollFileHolder) {
-        $(this.options.fileHolderSelector).scrollTo(lineSelector, scrollOptions);
-      } else {
-        $.scrollTo(lineSelector, scrollOptions);
-      }
+        // Add an offset of -100 for some context
+        offset: -100,
+      });
     }
   }
 };
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 071dd62ad52..81241cd2418 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-new, class-methods-use-this */
 
 import $ from 'jquery';
-import 'vendor/jquery.scrollTo';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import Cookies from 'js-cookie';
 import createEventHub from '~/helpers/event_hub_factory';
@@ -14,6 +13,7 @@ import {
   handleLocationHash,
   isMetaClick,
   parseBoolean,
+  scrollToElement,
 } from './lib/utils/common_utils';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import { getLocationHash } from './lib/utils/url_utility';
@@ -255,12 +255,12 @@ export default class MergeRequestTabs {
     this.eventHub.$emit('MergeRequestTabChange', action);
   }
 
-  scrollToElement(container) {
+  scrollToContainerElement(container) {
     if (location.hash) {
-      const offset = 0 - ($('.navbar-gitlab').outerHeight() + $('.js-tabs-affix').outerHeight());
       const $el = $(`${container} ${location.hash}:not(.match)`);
+
       if ($el.length) {
-        $.scrollTo($el[0], { offset });
+        scrollToElement($el[0]);
       }
     }
   }
@@ -339,7 +339,7 @@ export default class MergeRequestTabs {
         document.querySelector('div#commits').innerHTML = data.html;
         localTimeAgo($('.js-timeago', 'div#commits'));
         this.commitsLoaded = true;
-        this.scrollToElement('#commits');
+        this.scrollToContainerElement('#commits');
 
         this.toggleLoading(false);
         initAddContextCommitsTriggers();
@@ -408,7 +408,7 @@ export default class MergeRequestTabs {
         this.diffsLoaded = true;
 
         new Diff();
-        this.scrollToElement('#diffs');
+        this.scrollToContainerElement('#diffs');
 
         $('.diff-file').each((i, el) => {
           new BlobForkSuggestion({
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index 3ee9a19e2d9..06ba2496a99 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,4 +1,4 @@
-/* eslint-disable consistent-return, class-methods-use-this */
+/* eslint-disable consistent-return */
 
 // Zen Mode (full screen) textarea
 //
@@ -6,10 +6,10 @@
 /*= provides zen_mode:leave */
 
 import $ from 'jquery';
-import 'vendor/jquery.scrollTo';
 import Dropzone from 'dropzone';
 import Mousetrap from 'mousetrap';
 import 'mousetrap/plugins/pause/mousetrap-pause';
+import { scrollToElement } from '~/lib/utils/common_utils';
 
 Dropzone.autoDiscover = false;
 
@@ -76,7 +76,7 @@ export default class ZenMode {
     if (this.active_textarea) {
       Mousetrap.unpause();
       this.active_textarea.closest('.zen-backdrop').removeClass('fullscreen');
-      this.scrollTo(this.active_textarea);
+      scrollToElement(this.active_textarea, { duration: 0, offset: -100 });
       this.active_textarea = null;
       this.active_backdrop = null;
 
@@ -86,10 +86,4 @@ export default class ZenMode {
       }
     }
   }
-
-  scrollTo(zenArea) {
-    return $.scrollTo(zenArea, 0, {
-      offset: -150,
-    });
-  }
 }