Jumps between discussions on the changes tab

Ordered the jump to discussion by order in the DOM

2 files changed, 34 insertions, 25 deletions

diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6 b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
index 2b487fde313..83417a2703e 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
@@ -43,38 +43,34 @@
     },
     methods: {
       jumpToNextUnresolvedDiscussion: function () {
-        let nextUnresolvedDiscussionId,
-            firstUnresolvedDiscussionId,
-            useNextDiscussionId = false,
-            i = 0;
+        let unresolvedIds = CommentsStore.unresolvedDiscussionIds(),
+            nextUnresolvedDiscussionId;
+        const activePage = $('.merge-request-tabs .active a').attr('data-action'),
+              $diffDiscussions = $('.discussion').filter(function () {
+                return unresolvedIds.indexOf($(this).attr('data-discussion-id')) !== -1;
+              });
 
-        for (const discussionId in this.discussions) {
-          const discussion = this.discussions[discussionId];
-
-          if (!discussion.isResolved()) {
-            if (i === 0) {
-              firstUnresolvedDiscussionId = discussion.id;
-            }
-
-            if (useNextDiscussionId) {
-              nextUnresolvedDiscussionId = discussion.id;
-              break;
-            }
+        unresolvedIds = unresolvedIds.sort(function (a, b) {
+          return $diffDiscussions.index(`[data-discussion-id="${b}"]`) > $diffDiscussions.index(`[data-discussion-id="${a}"]`);
+        });
 
-            if (this.discussionId && discussion.id === this.discussionId) {
-              useNextDiscussionId = true;
-            }
-
-            i++;
+        unresolvedIds.forEach(function (discussionId, i) {
+          if (this.discussionId && discussionId === this.discussionId) {
+            nextUnresolvedDiscussionId = unresolvedIds[i + 1];
+            return;
           }
-        }
+        }.bind(this));
 
-        nextUnresolvedDiscussionId = nextUnresolvedDiscussionId || firstUnresolvedDiscussionId
+        nextUnresolvedDiscussionId = nextUnresolvedDiscussionId || unresolvedIds[0];
 
         if (nextUnresolvedDiscussionId) {
-          mrTabs.activateTab('notes');
+          let selector = '.discussion';
+
+          if (activePage === 'diffs' && $(`${selector}[data-discussion-id="${nextUnresolvedDiscussionId}"]`).length) {
+            selector = '.diffs .notes';
+          }
 
-          $.scrollTo(`.discussion[data-discussion-id="${nextUnresolvedDiscussionId}"]`, {
+          $.scrollTo(`${selector}[data-discussion-id="${nextUnresolvedDiscussionId}"]`, {
             offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
           });
         }
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js.es6 b/app/assets/javascripts/diff_notes/stores/comments.js.es6
index d3882d94cea..b1458c63683 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js.es6
+++ b/app/assets/javascripts/diff_notes/stores/comments.js.es6
@@ -26,6 +26,19 @@
       if (discussion.notesCount() === 0) {
         Vue.delete(this.state, discussionId);
       }
+    },
+    unresolvedDiscussionIds: function () {
+      let ids = [];
+
+      for (const discussionId in this.state) {
+        const discussion = this.state[discussionId];
+
+        if (!discussion.isResolved()) {
+          ids.push(discussion.id);
+        }
+      }
+
+      return ids;
     }
   };
 })(window);