Add latest changes from gitlab-org/gitlab@master

7 files changed, 104 insertions, 73 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue
index 8ab31ef3448..251199f1778 100644
--- a/app/assets/javascripts/notes/components/discussion_actions.vue
+++ b/app/assets/javascripts/notes/components/discussion_actions.vue
@@ -73,7 +73,7 @@ export default {
       v-if="discussion.resolvable && shouldShowJumpToNextDiscussion"
       class="btn-group discussion-actions ml-sm-2"
     >
-      <jump-to-next-discussion-button />
+      <jump-to-next-discussion-button :from-discussion-id="discussion.id" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 70e22db364b..515d513e3ee 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -39,7 +39,11 @@ export default {
 </script>
 
 <template>
-  <div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container full-width-mobile">
+  <div
+    v-if="resolvableDiscussionsCount > 0"
+    ref="discussionCounter"
+    class="line-resolve-all-container full-width-mobile"
+  >
     <div class="full-width-mobile d-flex d-sm-block">
       <div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all">
         <span
diff --git a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
index 630d4fd89b1..e66abcfddbb 100644
--- a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
@@ -12,6 +12,12 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [discussionNavigation],
+  props: {
+    fromDiscussionId: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 
@@ -22,7 +28,7 @@ export default {
       v-gl-tooltip
       class="btn btn-default discussion-next-btn"
       :title="s__('MergeRequests|Jump to next unresolved thread')"
-      @click="jumpToNextDiscussion"
+      @click="jumpToNextRelativeDiscussion(fromDiscussionId)"
     >
       <icon name="comment-next" />
     </button>
diff --git a/app/assets/javascripts/notes/mixins/discussion_navigation.js b/app/assets/javascripts/notes/mixins/discussion_navigation.js
index e5066695403..08c7efd69a6 100644
--- a/app/assets/javascripts/notes/mixins/discussion_navigation.js
+++ b/app/assets/javascripts/notes/mixins/discussion_navigation.js
@@ -2,6 +2,86 @@ import { mapGetters, mapActions, mapState } from 'vuex';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import eventHub from '../../notes/event_hub';
 
+/**
+ * @param {string} selector
+ * @returns {boolean}
+ */
+function scrollTo(selector) {
+  const el = document.querySelector(selector);
+
+  if (el) {
+    scrollToElement(el);
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * @param {object} self Component instance with mixin applied
+ * @param {string} id Discussion id we are jumping to
+ */
+function diffsJump({ expandDiscussion }, id) {
+  const selector = `ul.notes[data-discussion-id="${id}"]`;
+  eventHub.$once('scrollToDiscussion', () => scrollTo(selector));
+  expandDiscussion({ discussionId: id });
+}
+
+/**
+ * @param {object} self Component instance with mixin applied
+ * @param {string} id Discussion id we are jumping to
+ * @returns {boolean}
+ */
+function discussionJump({ expandDiscussion }, id) {
+  const selector = `div.discussion[data-discussion-id="${id}"]`;
+  expandDiscussion({ discussionId: id });
+  return scrollTo(selector);
+}
+
+/**
+ * @param {object} self Component instance with mixin applied
+ * @param {string} id Discussion id we are jumping to
+ */
+function switchToDiscussionsTabAndJumpTo(self, id) {
+  window.mrTabs.eventHub.$once('MergeRequestTabChange', () => {
+    setTimeout(() => discussionJump(self, id), 0);
+  });
+
+  window.mrTabs.tabShown('show');
+}
+
+/**
+ * @param {object} self Component instance with mixin applied
+ * @param {object} discussion Discussion we are jumping to
+ */
+function jumpToDiscussion(self, discussion) {
+  const { id, diff_discussion: isDiffDiscussion } = discussion;
+  if (id) {
+    const activeTab = window.mrTabs.currentAction;
+
+    if (activeTab === 'diffs' && isDiffDiscussion) {
+      diffsJump(self, id);
+    } else if (activeTab === 'show') {
+      discussionJump(self, id);
+    } else {
+      switchToDiscussionsTabAndJumpTo(self, id);
+    }
+  }
+}
+
+/**
+ * @param {object} self Component instance with mixin applied
+ * @param {function} fn Which function used to get the target discussion's id
+ * @param {string} [discussionId=this.currentDiscussionId] Current discussion id, will be null if discussions have not been traversed yet
+ */
+function handleDiscussionJump(self, fn, discussionId = self.currentDiscussionId) {
+  const isDiffView = window.mrTabs.currentAction === 'diffs';
+  const targetId = fn(discussionId, isDiffView);
+  const discussion = self.getDiscussion(targetId);
+  jumpToDiscussion(self, discussion);
+  self.setCurrentDiscussionId(targetId);
+}
+
 export default {
   computed: {
     ...mapGetters([
@@ -16,76 +96,20 @@ export default {
   methods: {
     ...mapActions(['expandDiscussion', 'setCurrentDiscussionId']),
 
-    diffsJump(id) {
-      const selector = `ul.notes[data-discussion-id="${id}"]`;
-
-      eventHub.$once('scrollToDiscussion', () => {
-        const el = document.querySelector(selector);
-
-        if (el) {
-          scrollToElement(el);
-
-          return true;
-        }
-
-        return false;
-      });
-
-      this.expandDiscussion({ discussionId: id });
-    },
-    discussionJump(id) {
-      const selector = `div.discussion[data-discussion-id="${id}"]`;
-
-      const el = document.querySelector(selector);
-
-      this.expandDiscussion({ discussionId: id });
-
-      if (el) {
-        scrollToElement(el);
-
-        return true;
-      }
-
-      return false;
-    },
-
-    switchToDiscussionsTabAndJumpTo(id) {
-      window.mrTabs.eventHub.$once('MergeRequestTabChange', () => {
-        setTimeout(() => this.discussionJump(id), 0);
-      });
-
-      window.mrTabs.tabShown('show');
-    },
-
-    jumpToDiscussion(discussion) {
-      const { id, diff_discussion: isDiffDiscussion } = discussion;
-      if (id) {
-        const activeTab = window.mrTabs.currentAction;
-
-        if (activeTab === 'diffs' && isDiffDiscussion) {
-          this.diffsJump(id);
-        } else if (activeTab === 'show') {
-          this.discussionJump(id);
-        } else {
-          this.switchToDiscussionsTabAndJumpTo(id);
-        }
-      }
-    },
-
     jumpToNextDiscussion() {
-      this.handleDiscussionJump(this.nextUnresolvedDiscussionId);
+      handleDiscussionJump(this, this.nextUnresolvedDiscussionId);
     },
 
     jumpToPreviousDiscussion() {
-      this.handleDiscussionJump(this.previousUnresolvedDiscussionId);
+      handleDiscussionJump(this, this.previousUnresolvedDiscussionId);
     },
 
-    handleDiscussionJump(fn) {
-      const isDiffView = window.mrTabs.currentAction === 'diffs';
-      const targetId = fn(this.currentDiscussionId, isDiffView);
-      const discussion = this.getDiscussion(targetId);
-      this.jumpToDiscussion(discussion);
-      this.setCurrentDiscussionId(targetId);
+    /**
+     * Go to the next discussion from the given discussionId
+     * @param {String} discussionId The id we are jumping from
+     */
+    jumpToNextRelativeDiscussion(discussionId) {
+      handleDiscussionJump(this, this.nextUnresolvedDiscussionId, discussionId);
     },
   },
 };
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index bc613db8672..bfb9b0f4688 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -199,10 +199,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-gl-resize-observer="handleResize"
-    class="my-3 position-absolute w-100 slide-enter-to-element"
-  >
+  <div v-gl-resize-observer="handleResize" class="my-3 w-100 slide-enter-to-element">
     <div class="d-flex my-3 align-items-center">
       <h4>
         <gl-sprintf :message="s__('ContainerRegistry|%{imageName} tags')">
diff --git a/app/assets/javascripts/registry/explorer/pages/index.vue b/app/assets/javascripts/registry/explorer/pages/index.vue
index deefbfc40e0..19ae3bee640 100644
--- a/app/assets/javascripts/registry/explorer/pages/index.vue
+++ b/app/assets/javascripts/registry/explorer/pages/index.vue
@@ -3,7 +3,7 @@ export default {};
 </script>
 
 <template>
-  <div class="position-relative">
+  <div>
     <transition name="slide">
       <router-view />
     </transition>
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 1dbc7cc2242..5f8f4d8df1e 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -78,7 +78,7 @@ export default {
 </script>
 
 <template>
-  <div class="position-absolute w-100 slide-enter-from-element">
+  <div class="w-100 slide-enter-from-element">
     <gl-empty-state
       v-if="config.characterError"
       :title="s__('ContainerRegistry|Docker connection error')"