Add latest changes from gitlab-org/gitlab@master

18 files changed, 166 insertions, 64 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index eedcb0c09d4..cdb8e9abab8 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlTooltipDirective, GlButton, GlButtonGroup } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
+import { throttle } from 'lodash';
 import { __ } from '~/locale';
 import discussionNavigation from '../mixins/discussion_navigation';
 
@@ -19,6 +20,12 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      jumpNext: throttle(this.jumpToNextDiscussion, 500),
+      jumpPrevious: throttle(this.jumpToPreviousDiscussion, 500),
+    };
+  },
   computed: {
     ...mapGetters([
       'getNoteableData',
@@ -54,6 +61,7 @@ export default {
 <template>
   <div
     v-if="resolvableDiscussionsCount > 0"
+    id="discussionCounter"
     ref="discussionCounter"
     class="gl-display-flex discussions-counter"
   >
@@ -74,7 +82,7 @@ export default {
         {{ n__('%d unresolved thread', '%d unresolved threads', unresolvedDiscussionsCount) }}
         <gl-button-group class="gl-ml-3">
           <gl-button
-            v-gl-tooltip.hover
+            v-gl-tooltip:discussionCounter.hover.bottom
             :title="__('Go to previous unresolved thread')"
             :aria-label="__('Go to previous unresolved thread')"
             class="discussion-previous-btn gl-rounded-base! gl-px-2!"
@@ -83,10 +91,10 @@ export default {
             data-track-property="click_previous_unresolved_thread_top"
             icon="chevron-lg-up"
             category="tertiary"
-            @click="jumpToPreviousDiscussion"
+            @click="jumpPrevious"
           />
           <gl-button
-            v-gl-tooltip.hover
+            v-gl-tooltip:discussionCounter.hover.bottom
             :title="__('Go to next unresolved thread')"
             :aria-label="__('Go to next unresolved thread')"
             class="discussion-next-btn gl-rounded-base! gl-px-2!"
@@ -95,7 +103,7 @@ export default {
             data-track-property="click_next_unresolved_thread_top"
             icon="chevron-lg-down"
             category="tertiary"
-            @click="jumpToNextDiscussion"
+            @click="jumpNext"
           />
         </gl-button-group>
       </template>
diff --git a/app/assets/javascripts/notes/components/discussion_navigator.vue b/app/assets/javascripts/notes/components/discussion_navigator.vue
index c1e39f31bbb..03bdc7a2cc6 100644
--- a/app/assets/javascripts/notes/components/discussion_navigator.vue
+++ b/app/assets/javascripts/notes/components/discussion_navigator.vue
@@ -1,6 +1,7 @@
 <script>
 /* global Mousetrap */
 import 'mousetrap';
+import { throttle } from 'lodash';
 import {
   keysFor,
   MR_NEXT_UNRESOLVED_DISCUSSION,
@@ -11,12 +12,18 @@ import discussionNavigation from '~/notes/mixins/discussion_navigation';
 
 export default {
   mixins: [discussionNavigation],
+  data() {
+    return {
+      jumpToNext: throttle(() => this.jumpToNextDiscussion({ behavior: 'auto' }), 200),
+      jumpToPrevious: throttle(() => this.jumpToPreviousDiscussion({ behavior: 'auto' }), 200),
+    };
+  },
   created() {
     eventHub.$on('jumpToFirstUnresolvedDiscussion', this.jumpToFirstUnresolvedDiscussion);
   },
   mounted() {
-    Mousetrap.bind(keysFor(MR_NEXT_UNRESOLVED_DISCUSSION), this.jumpToNextDiscussion);
-    Mousetrap.bind(keysFor(MR_PREVIOUS_UNRESOLVED_DISCUSSION), this.jumpToPreviousDiscussion);
+    Mousetrap.bind(keysFor(MR_NEXT_UNRESOLVED_DISCUSSION), this.jumpToNext);
+    Mousetrap.bind(keysFor(MR_PREVIOUS_UNRESOLVED_DISCUSSION), this.jumpToPrevious);
   },
   beforeDestroy() {
     Mousetrap.unbind(keysFor(MR_NEXT_UNRESOLVED_DISCUSSION));
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index c5d174ed890..ca880802b5d 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -269,6 +269,7 @@ export default {
     <div class="timeline-content">
       <div
         :data-discussion-id="discussion.id"
+        :data-discussion-resolved="discussion.resolved"
         class="discussion js-discussion-container"
         data-qa-selector="discussion_content"
       >
diff --git a/app/assets/javascripts/notes/mixins/discussion_navigation.js b/app/assets/javascripts/notes/mixins/discussion_navigation.js
index 45df91796fc..10c897d2d2a 100644
--- a/app/assets/javascripts/notes/mixins/discussion_navigation.js
+++ b/app/assets/javascripts/notes/mixins/discussion_navigation.js
@@ -1,5 +1,5 @@
 import { mapGetters, mapActions, mapState } from 'vuex';
-import { scrollToElementWithContext, scrollToElement } from '~/lib/utils/common_utils';
+import { scrollToElementWithContext, scrollToElement, contentTop } from '~/lib/utils/common_utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
 
@@ -94,8 +94,6 @@ function jumpToDiscussion(self, discussion) {
 
     if (activeTab === 'diffs' && isDiffDiscussion) {
       diffsJump(self, id, firstNoteId);
-    } else if (activeTab === 'show') {
-      discussionJump(self, id);
     } else {
       switchToDiscussionsTabAndJumpTo(self, id);
     }
@@ -105,11 +103,10 @@ function jumpToDiscussion(self, discussion) {
 /**
  * @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) {
+function handleDiscussionJump(self, fn) {
   const isDiffView = window.mrTabs.currentAction === 'diffs';
-  const targetId = fn(discussionId, isDiffView);
+  const targetId = fn(self.currentDiscussionId, isDiffView);
   const discussion = self.getDiscussion(targetId);
   const discussionFilePath = discussion?.diff_file?.file_path;
 
@@ -127,6 +124,70 @@ function handleDiscussionJump(self, fn, discussionId = self.currentDiscussionId)
   });
 }
 
+function getAllDiscussionElements() {
+  return Array.from(
+    document.querySelectorAll('[data-discussion-id]:not([data-discussion-resolved])'),
+  );
+}
+
+function hasReachedPageEnd() {
+  return document.body.scrollHeight <= Math.ceil(window.scrollY + window.innerHeight);
+}
+
+function findNextClosestVisibleDiscussion(discussionElements) {
+  const offsetHeight = contentTop();
+  let isActive;
+  const index = discussionElements.findIndex((element) => {
+    const { y } = element.getBoundingClientRect();
+    const visibleHorizontalOffset = Math.ceil(y) - offsetHeight;
+    // handle rect rounding errors
+    isActive = visibleHorizontalOffset < 2;
+    return visibleHorizontalOffset >= 0;
+  });
+  return [discussionElements[index], index, isActive];
+}
+
+function getNextDiscussion() {
+  const discussionElements = getAllDiscussionElements();
+  const firstDiscussion = discussionElements[0];
+  if (hasReachedPageEnd()) {
+    return firstDiscussion;
+  }
+  const [nextClosestDiscussion, index, isActive] = findNextClosestVisibleDiscussion(
+    discussionElements,
+  );
+  if (nextClosestDiscussion && !isActive) {
+    return nextClosestDiscussion;
+  }
+  const nextDiscussion = discussionElements[index + 1];
+  if (!nextClosestDiscussion || !nextDiscussion) {
+    return firstDiscussion;
+  }
+  return nextDiscussion;
+}
+
+function getPreviousDiscussion() {
+  const discussionElements = getAllDiscussionElements();
+  const lastDiscussion = discussionElements[discussionElements.length - 1];
+  const [, index] = findNextClosestVisibleDiscussion(discussionElements);
+  const previousDiscussion = discussionElements[index - 1];
+  if (previousDiscussion) {
+    return previousDiscussion;
+  }
+  return lastDiscussion;
+}
+
+function handleJumpForBothPages(getDiscussion, ctx, fn, scrollOptions) {
+  if (window.mrTabs.currentAction !== 'show') {
+    handleDiscussionJump(ctx, fn);
+  } else {
+    const discussion = getDiscussion();
+    const id = discussion.dataset.discussionId;
+    ctx.expandDiscussion({ discussionId: id });
+    scrollToElement(discussion, scrollOptions);
+  }
+}
+
 export default {
   computed: {
     ...mapGetters([
@@ -142,12 +203,22 @@ export default {
     ...mapActions(['expandDiscussion', 'setCurrentDiscussionId']),
     ...mapActions('diffs', ['scrollToFile']),
 
-    jumpToNextDiscussion() {
-      handleDiscussionJump(this, this.nextUnresolvedDiscussionId);
+    jumpToNextDiscussion(scrollOptions) {
+      handleJumpForBothPages(
+        getNextDiscussion,
+        this,
+        this.nextUnresolvedDiscussionId,
+        scrollOptions,
+      );
     },
 
-    jumpToPreviousDiscussion() {
-      handleDiscussionJump(this, this.previousUnresolvedDiscussionId);
+    jumpToPreviousDiscussion(scrollOptions) {
+      handleJumpForBothPages(
+        getPreviousDiscussion,
+        this,
+        this.previousUnresolvedDiscussionId,
+        scrollOptions,
+      );
     },
 
     jumpToFirstUnresolvedDiscussion() {
@@ -157,13 +228,5 @@ export default {
         })
         .catch(() => {});
     },
-
-    /**
-     * 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/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
index 7342f215b5e..9e5403bb416 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees.vue
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -52,7 +52,6 @@ export default {
     GlDropdownDivider,
   },
   mixins: [Tracking.mixin()],
-  inject: ['fullPath'],
   props: {
     workItemId: {
       type: String,
@@ -80,6 +79,10 @@ export default {
       required: false,
       default: false,
     },
+    fullPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/work_items/components/work_item_description.vue b/app/assets/javascripts/work_items/components/work_item_description.vue
index cf59789ce2d..c18ea3ddb00 100644
--- a/app/assets/javascripts/work_items/components/work_item_description.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description.vue
@@ -21,12 +21,15 @@ export default {
     MarkdownField,
   },
   mixins: [Tracking.mixin()],
-  inject: ['fullPath'],
   props: {
     workItemId: {
       type: String,
       required: true,
     },
+    fullPath: {
+      type: String,
+      required: true,
+    },
   },
   markdownDocsPath: helpPagePath('user/markdown'),
   data() {
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index a5580c14a7a..5cc93f0a767 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -121,6 +121,9 @@ export default {
     canDelete() {
       return this.workItem?.userPermissions?.deleteWorkItem;
     },
+    fullPath() {
+      return this.workItem?.project.fullPath;
+    },
     workItemsMvc2Enabled() {
       return this.glFeatures.workItemsMvc2;
     },
@@ -326,12 +329,14 @@ export default {
           :allows-multiple-assignees="workItemAssignees.allowsMultipleAssignees"
           :work-item-type="workItemType"
           :can-invite-members="workItemAssignees.canInviteMembers"
+          :full-path="fullPath"
           @error="error = $event"
         />
         <work-item-labels
           v-if="workItemLabels"
           :work-item-id="workItem.id"
           :can-update="canUpdate"
+          :full-path="fullPath"
           @error="error = $event"
         />
       </template>
@@ -347,6 +352,7 @@ export default {
       <work-item-description
         v-if="hasDescriptionWidget"
         :work-item-id="workItem.id"
+        :full-path="fullPath"
         class="gl-pt-5"
         @error="error = $event"
       />
diff --git a/app/assets/javascripts/work_items/components/work_item_labels.vue b/app/assets/javascripts/work_items/components/work_item_labels.vue
index e73488bbd70..e608e4ad57e 100644
--- a/app/assets/javascripts/work_items/components/work_item_labels.vue
+++ b/app/assets/javascripts/work_items/components/work_item_labels.vue
@@ -31,7 +31,6 @@ export default {
     LabelItem,
   },
   mixins: [Tracking.mixin()],
-  inject: ['fullPath'],
   props: {
     workItemId: {
       type: String,
@@ -41,6 +40,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    fullPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
index 4cc23fa0071..1228c876a55 100644
--- a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
@@ -1,4 +1,4 @@
-#import "ee_else_ce/work_items/graphql/work_item.fragment.graphql"
+#import "./work_item.fragment.graphql"
 
 mutation createWorkItem($input: WorkItemCreateInput!) {
   workItemCreate(input: $input) {
diff --git a/app/assets/javascripts/work_items/graphql/create_work_item_from_task.mutation.graphql b/app/assets/javascripts/work_items/graphql/create_work_item_from_task.mutation.graphql
index 1f98cd4fa2b..ccfe62cc585 100644
--- a/app/assets/javascripts/work_items/graphql/create_work_item_from_task.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/create_work_item_from_task.mutation.graphql
@@ -1,4 +1,4 @@
-#import "ee_else_ce/work_items/graphql/work_item.fragment.graphql"
+#import "./work_item.fragment.graphql"
 
 mutation workItemCreateFromTask($input: WorkItemCreateFromTaskInput!) {
   workItemCreateFromTask(input: $input) {
diff --git a/app/assets/javascripts/work_items/graphql/local_update_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/local_update_work_item.mutation.graphql
index 790b8e60b6a..43c92cf89ec 100644
--- a/app/assets/javascripts/work_items/graphql/local_update_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/local_update_work_item.mutation.graphql
@@ -1,4 +1,4 @@
-#import "ee_else_ce/work_items/graphql/work_item.fragment.graphql"
+#import "./work_item.fragment.graphql"
 
 mutation localUpdateWorkItem($input: LocalUpdateWorkItemInput) {
   localUpdateWorkItem(input: $input) @client {
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
index 0a887fcfc00..25eb8099251 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
@@ -1,4 +1,4 @@
-#import "ee_else_ce/work_items/graphql/work_item.fragment.graphql"
+#import "./work_item.fragment.graphql"
 
 mutation workItemUpdate($input: WorkItemUpdateInput!) {
   workItemUpdate(input: $input) {
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item_task.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item_task.mutation.graphql
index fad5a9fa5bc..ad861a60d15 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item_task.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item_task.mutation.graphql
@@ -1,4 +1,4 @@
-#import "ee_else_ce/work_items/graphql/work_item.fragment.graphql"
+#import "./work_item.fragment.graphql"
 
 mutation workItemUpdateTask($input: WorkItemUpdateTaskInput!) {
   workItemUpdate: workItemUpdateTask(input: $input) {
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item_widgets.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item_widgets.mutation.graphql
index 6a94c96b347..148b340b439 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item_widgets.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item_widgets.mutation.graphql
@@ -1,4 +1,4 @@
-#import "ee_else_ce/work_items/graphql/work_item.fragment.graphql"
+#import "./work_item.fragment.graphql"
 
 mutation workItemUpdateWidgets($input: WorkItemUpdateWidgetsInput!) {
   workItemUpdateWidgets(input: $input) {
diff --git a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
index e8ef27ec778..e77f577c897 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
@@ -1,4 +1,5 @@
 #import "~/graphql_shared/fragments/user.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/work_item_widgets.fragment.graphql"
 
 fragment WorkItem on WorkItem {
   id
@@ -6,6 +7,10 @@ fragment WorkItem on WorkItem {
   state
   description
   confidential
+  project {
+    id
+    fullPath
+  }
   workItemType {
     id
     name
@@ -16,34 +21,6 @@ fragment WorkItem on WorkItem {
     updateWorkItem
   }
   widgets {
-    ... on WorkItemWidgetDescription {
-      type
-      description
-      descriptionHtml
-    }
-    ... on WorkItemWidgetAssignees {
-      type
-      allowsMultipleAssignees
-      canInviteMembers
-      assignees {
-        nodes {
-          ...User
-        }
-      }
-    }
-    ... on WorkItemWidgetHierarchy {
-      type
-      parent {
-        id
-        iid
-        title
-        confidential
-      }
-      children {
-        nodes {
-          id
-        }
-      }
-    }
+    ...WorkItemWidgets
   }
 }
diff --git a/app/assets/javascripts/work_items/graphql/work_item.query.graphql b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
index a9f7b714551..276061af193 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
@@ -1,5 +1,5 @@
 #import "~/graphql_shared/fragments/label.fragment.graphql"
-#import "ee_else_ce/work_items/graphql/work_item.fragment.graphql"
+#import "./work_item.fragment.graphql"
 
 query workItem($id: WorkItemID!) {
   workItem(id: $id) {
diff --git a/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
index df62ca1c143..2ca4450f892 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
@@ -1,4 +1,4 @@
-query workItemQuery($id: WorkItemID!) {
+query workItemLinksQuery($id: WorkItemID!) {
   workItem(id: $id) {
     id
     workItemType {
diff --git a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
new file mode 100644
index 00000000000..510788217ca
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -0,0 +1,31 @@
+fragment WorkItemWidgets on WorkItemWidget {
+  ... on WorkItemWidgetDescription {
+    type
+    description
+    descriptionHtml
+  }
+  ... on WorkItemWidgetAssignees {
+    type
+    allowsMultipleAssignees
+    canInviteMembers
+    assignees {
+      nodes {
+        ...User
+      }
+    }
+  }
+  ... on WorkItemWidgetHierarchy {
+    type
+    parent {
+      id
+      iid
+      title
+      confidential
+    }
+    children {
+      nodes {
+        id
+      }
+    }
+  }
+}