Rearrange discussion resolve buttons & update button display

- next-discuss button is always show unless there is only 1 discussion
- regroup buttons arrangements

4 files changed, 26 insertions, 20 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue
index 22cca756ef6..1357a5268d6 100644
--- a/app/assets/javascripts/notes/components/discussion_actions.vue
+++ b/app/assets/javascripts/notes/components/discussion_actions.vue
@@ -39,20 +39,27 @@ export default {
 </script>
 
 <template>
-  <div class="discussion-with-resolve-btn">
+  <div class="discussion-with-resolve-btn clearfix">
     <reply-placeholder class="qa-discussion-reply" @onClick="$emit('showReplyForm')" />
-    <resolve-discussion-button
-      v-if="discussion.resolvable"
-      :is-resolving="isResolving"
-      :button-title="resolveButtonTitle"
-      @onClick="$emit('resolve')"
-    />
-    <div v-if="discussion.resolvable" class="btn-group discussion-actions ml-sm-2" role="group">
-      <resolve-with-issue-button v-if="resolveWithIssuePath" :url="resolveWithIssuePath" />
-      <jump-to-next-discussion-button
-        v-if="shouldShowJumpToNextDiscussion"
-        @onClick="$emit('jumpToNextDiscussion')"
+
+    <div class="btn-group discussion-actions" role="group">
+      <resolve-discussion-button
+        v-if="discussion.resolvable"
+        :is-resolving="isResolving"
+        :button-title="resolveButtonTitle"
+        @onClick="$emit('resolve')"
+      />
+      <resolve-with-issue-button
+        v-if="discussion.resolvable && resolveWithIssuePath"
+        :url="resolveWithIssuePath"
       />
     </div>
+
+    <div
+      v-if="discussion.resolvable && shouldShowJumpToNextDiscussion"
+      class="btn-group discussion-actions ml-sm-2"
+    >
+      <jump-to-next-discussion-button @onClick="$emit('jumpToNextDiscussion')" />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 10b15a9c38c..b8eaff32cce 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -126,10 +126,7 @@ export default {
       return this.discussion.resolved_by_push ? __('Automatically resolved') : __('Resolved');
     },
     shouldShowJumpToNextDiscussion() {
-      return this.showJumpToNextDiscussion(
-        this.discussion.id,
-        this.discussionsByDiffOrder ? 'diff' : 'discussion',
-      );
+      return this.showJumpToNextDiscussion(this.discussionsByDiffOrder ? 'diff' : 'discussion');
     },
     shouldRenderDiffs() {
       return this.discussion.diff_discussion && this.renderDiffFile;
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index d7982be3e4b..8aa8f5037b3 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -61,15 +61,13 @@ export const unresolvedDiscussionsCount = state => state.unresolvedDiscussionsCo
 export const resolvableDiscussionsCount = state => state.resolvableDiscussionsCount;
 export const hasUnresolvedDiscussions = state => state.hasUnresolvedDiscussions;
 
-export const showJumpToNextDiscussion = (state, getters) => (discussionId, mode = 'discussion') => {
+export const showJumpToNextDiscussion = (state, getters) => (mode = 'discussion') => {
   const orderedDiffs =
     mode !== 'discussion'
       ? getters.unresolvedDiscussionsIdsByDiff
       : getters.unresolvedDiscussionsIdsByDate;
 
-  const indexOf = orderedDiffs.indexOf(discussionId);
-
-  return indexOf !== -1 && indexOf < orderedDiffs.length - 1;
+  return orderedDiffs.length > 1;
 };
 
 export const isDiscussionResolved = (state, getters) => discussionId =>
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 824edb2869f..e880b941d67 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -657,6 +657,10 @@ $note-form-margin-left: 72px;
     margin-left: -1px;
   }
 
+  .btn-group > .discussion-create-issue-btn {
+    margin-left: -2px;
+  }
+
   svg {
     height: 15px;
   }