Added jump tp next discussion button

app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6

 (() => {
   JumpToDiscussion = Vue.extend({
+    props: {
+      discussionId: String
+    },
     data: function () {
       return {
         discussions: CommentsStore.state,
       };
     },
-    methods: {
-      jumpToNextUnresolvedDiscussion: function () {
-        let nextUnresolvedDiscussionId;
-
+    computed: {
+      allResolved: function () {
+        let allResolved = true;
         for (const discussionId in this.discussions) {
           const discussion = this.discussions[discussionId];
 
@@ -16,18 +18,55 @@
             const note = discussion[noteId];
 
             if (!note.resolved) {
-              nextUnresolvedDiscussionId = discussionId;
-              break;
+              allResolved = false;
             }
           }
-
-          if (nextUnresolvedDiscussionId) break;
         }
 
-        $.scrollTo(`.${nextUnresolvedDiscussionId}`, {
-          offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
-        });
+        return allResolved;
       },
+      isLast: function () {
+        const discussionKeys = Object.keys(this.discussions),
+              indexOfDiscussion = discussionKeys.indexOf(this.discussionId);
+
+        return discussionKeys.length - 1 === indexOfDiscussion;
+      }
+    },
+    methods: {
+      jumpToNextUnresolvedDiscussion: function () {
+        let nextUnresolvedDiscussionId;
+
+        if (!this.discussionId) {
+          for (const discussionId in this.discussions) {
+            const discussion = this.discussions[discussionId];
+
+            for (const noteId in discussion) {
+              const note = discussion[noteId];
+
+              if (!note.resolved) {
+                nextUnresolvedDiscussionId = discussionId;
+                break;
+              }
+            }
+
+            if (nextUnresolvedDiscussionId) break;
+          }
+        } else {
+          const discussionKeys = Object.keys(this.discussions),
+                indexOfDiscussion = discussionKeys.indexOf(this.discussionId),
+                nextDiscussionId = discussionKeys[indexOfDiscussion + 1];
+
+          if (nextDiscussionId) {
+            nextUnresolvedDiscussionId = nextDiscussionId;
+          }
+        }
+
+        if (nextUnresolvedDiscussionId) {
+          $.scrollTo(`.${nextUnresolvedDiscussionId}`, {
+            offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
+          });
+        }
+      }
     }
   });
 

app/assets/javascripts/notes.js

@@ -300,8 +300,8 @@
         discussionContainer.append(note_html);
       }
 
-      if ($('resolve-btn, resolve-all-btn').length && (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null)) {
-        $('resolve-btn, resolve-all-btn').each(function () {
+      if ($('resolve-btn, resolve-all-btn, jump-to-discussion').length && (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null)) {
+        $('resolve-btn, resolve-all-btn, jump-to-discussion').each(function () {
           DiffNotesApp.$compile($(this).get(0))
         });
       }
@@ -439,8 +439,8 @@
 
       $note_li.replaceWith($html);
 
-      if ($('resolve-btn, resolve-all-btn').length && (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null)) {
-        $('resolve-btn, resolve-all-btn').each(function () {
+      if ($('resolve-btn, resolve-all-btn, jump-to-discussion').length && (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null)) {
+        $('resolve-btn, resolve-all-btn, jump-to-discussion').each(function () {
           DiffNotesApp.$compile($(this).get(0))
         });
       }

app/assets/stylesheets/pages/notes.scss

@@ -384,14 +384,38 @@ ul.notes {
   }
 }
 
+.line-resolve-all-container {
+  .btn-group {
+    margin-top: -1px;
+    margin-left: -4px;
+  }
+
+  .discussion-next-btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
 .line-resolve-all {
+  display: inline-block;
   margin-top: 10px;
-  padding: 10px;
+  padding: 5px 10px;
+  background-color: $background-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
-  .btn {
-    margin-right: 10px;
+  &.has-next-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .line-resolve-btn {
+    top: 1px;
+    margin-right: 5px;
+
+    .fa {
+      left: 2px;
+    }
   }
 }
 
@@ -400,6 +424,7 @@ ul.notes {
 }
 
 .line-resolve-btn {
+  display: inline-block;
   position: relative;
   top: -1px;
   width: 14px;
@@ -417,18 +442,25 @@ ul.notes {
 
   &:not(.is-disabled):hover,
   &.is-active {
-    color: #fff;
-    background-color: $gl-text-green;
+    color: $gl-text-green;
     border-color: $gl-text-green;
 
     .fa {
-      color: #fff;
+      color: $gl-text-green;
     }
   }
 
   .fa {
+    position: relative;
     top: 2px;
     font-size: 8px;
+    color: #c3c3c3;
     vertical-align: top;
   }
 }
+
+.discussion-next-btn {
+  path {
+    fill: #7E7E7E;
+  }
+}

app/views/discussions/_diff_discussion.html.haml

@@ -6,7 +6,8 @@
 
     .discussion-reply-holder
       .discussion-with-resolve-btn{ role: "group" }
-        .btn-group
+        .btn-group{ role: "group" }
           = link_to_reply_discussion(discussion)
-        .btn-group
+        .btn-group{ role: "group" }
           = render "discussions/resolve_all", discussion: discussion
+        = render "discussions/jump_to_next", discussion: discussion

app/views/discussions/_jump_to_next.html.haml

+- discussion = local_assigns.fetch(:discussion, false)
+%jump-to-discussion{ "inline-template" => true, ":discussion-id" => "'#{discussion.try(:id)}'" }
+  .btn-group{ role: "group",
+    "v-show" => "!allResolved",
+    "v-if" => "!isLast" }
+    %button.btn.btn-default.discussion-next-btn.has-tooltip{ "@click" => "jumpToNextUnresolvedDiscussion",
+      title: "Jump to next unresolved discussion",
+      "aria-label" => "Jump to next unresolved discussion",
+      data: { container: "body" } }
+      = custom_icon("next_discussion")

app/views/discussions/_parallel_diff_discussion.html.haml

@@ -11,6 +11,7 @@
             = link_to_reply_discussion(discussion_left, 'old')
           .btn-group{ role: "group" }
             = render "discussions/resolve_all", discussion: discussion_left
+          = render "discussions/jump_to_next", discussion: discussion
   - else
     %td.notes_line.old= ""
     %td.notes_content.parallel.old= ""
@@ -27,6 +28,7 @@
             = link_to_reply_discussion(discussion_right, 'new')
           .btn-group{ role: "group" }
             = render "discussions/resolve_all", discussion: discussion_right
+          = render "discussions/jump_to_next", discussion: discussion
   - else
     %td.notes_line.new= ""
     %td.notes_content.parallel.new= ""

app/views/projects/merge_requests/_show.html.haml

@@ -45,14 +45,16 @@
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
     - if current_user
-      #resolve-count-app{ "v-cloak" => true }
+      #resolve-count-app.line-resolve-all-container{ "v-cloak" => true }
         %resolve-count{ "inline-template" => true }
-          .line-resolve-all{ "v-show" => "discussionCount > 0" }
+          .line-resolve-all{ "v-show" => "discussionCount > 0",
+            ":class" => "{ 'has-next-btn': resolved !== discussionCount }" }
+            %span.line-resolve-btn.is-disabled{ type: "button",
+                ":class" => "{ 'is-active': resolved === discussionCount }" }
+              = icon("check")
             %span.line-resolve-text
               {{ resolved }}/{{ discussionCount }} discussions resolved
-          %jump-to-discussion{ "inline-template" => true }
-            %button.btn.btn-default.has-tooltip{ "@click" => "jumpToNextUnresolvedDiscussion", title: "Jump to next unresolved discussion", data: { container: "body" } }
-              = icon("caret-down")
+          = render "discussions/jump_to_next"
 
     - if @commits_count.nonzero?
       %ul.merge-request-tabs.nav-links.no-top.no-bottom

app/views/shared/icons/_next_discussion.svg

+<svg viewBox="0 0 20 19" ><path d="M15.21 7.783h-3.317c-.268 0-.472.218-.472.486v.953c0 .28.212.486.473.486h3.318v1.575c0 .36.233.452.52.23l3.06-2.37c.274-.213.286-.582 0-.804l-3.06-2.37c-.275-.213-.52-.12-.52.23v1.583zm.57-3.66c-1.558-1.22-3.783-1.98-6.254-1.98C4.816 2.143 1 4.91 1 8.333c0 1.964 1.256 3.715 3.216 4.846-.447 1.615-1.132 2.195-1.732 2.882-.142.174-.304.32-.256.56v.01c.047.213.218.368.41.368h.046c.37-.048.743-.116 1.085-.213 1.645-.425 3.13-1.22 4.377-2.34.447.048.913.077 1.38.077 2.092 0 4.01-.546 5.492-1.454-.416-.208-.798-.475-1.134-.792-1.227.63-2.743 1.008-4.36 1.008-.41 0-.828-.03-1.237-.078l-.543-.058-.41.368c-.78.696-1.655 1.248-2.616 1.654.248-.445.486-.977.667-1.664l.257-.928-.828-.484c-1.646-.948-2.598-2.32-2.598-3.763 0-2.69 3.35-4.952 7.308-4.952 1.893 0 3.647.518 4.962 1.353.393-.266.827-.473 1.29-.61z" /></svg>