Merge branch 'refactor/56369-extract-jump-to-next-discussion-button' into 'master'

Refactor/56369 extract jump to next discussion button

Closes #56369

See merge request gitlab-org/gitlab-ce!24506

2 files changed, 34 insertions, 10 deletions

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
new file mode 100644
index 00000000000..07a5bda6bcb
--- /dev/null
+++ b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
@@ -0,0 +1,28 @@
+<script>
+import icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective } from '@gitlab/ui';
+
+export default {
+  name: 'JumpToNextDiscussionButton',
+  components: {
+    icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+};
+</script>
+
+<template>
+  <div class="btn-group" role="group">
+    <button
+      ref="button"
+      v-gl-tooltip
+      class="btn btn-default discussion-next-btn"
+      :title="s__('MergeRequests|Jump to next unresolved discussion')"
+      @click="$emit('onClick')"
+    >
+      <icon name="comment-next" />
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 1a9723de856..8add7278f9b 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -23,6 +23,7 @@ import autosave from '../mixins/autosave';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
 import discussionNavigation from '../mixins/discussion_navigation';
+import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue';
 
 export default {
   name: 'NoteableDiscussion',
@@ -34,6 +35,7 @@ export default {
     noteSignedOutWidget,
     noteEditedText,
     noteForm,
+    jumpToNextDiscussionButton,
     toggleRepliesWidget,
     placeholderNote,
     placeholderSystemNote,
@@ -476,16 +478,10 @@ Please check your network connection and try again.`;
                           <icon name="issue-new" />
                         </a>
                       </div>
-                      <div v-if="shouldShowJumpToNextDiscussion" class="btn-group" role="group">
-                        <button
-                          v-gl-tooltip
-                          class="btn btn-default discussion-next-btn"
-                          title="Jump to next unresolved discussion"
-                          @click="jumpToNextDiscussion"
-                        >
-                          <icon name="comment-next" />
-                        </button>
-                      </div>
+                      <jump-to-next-discussion-button
+                        v-if="shouldShowJumpToNextDiscussion"
+                        @onClick="jumpToNextDiscussion"
+                      />
                     </div>
                   </div>
                 </template>