Extracted JumpToNextDiscussionButton to its own component

(cherry picked from commit 3af7723f)

Conflicts:
	locale/gitlab.pot

app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue

+<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>

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -25,6 +25,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',
@@ -36,6 +37,7 @@ export default {
     noteSignedOutWidget,
     noteEditedText,
     noteForm,
+    jumpToNextDiscussionButton,
     toggleRepliesWidget,
     placeholderNote,
     placeholderSystemNote,
@@ -480,16 +482,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>

changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml

+---
+title: Extracted JumpToNextDiscussionButton to its own component
+author: Martin Hobert
+merge_request: 24506
+type: other

locale/gitlab.pot

@@ -5632,6 +5632,9 @@ msgstr ""
 msgid "MergeRequests|Discussion will be unresolved"
 msgstr ""
 
+msgid "MergeRequests|Jump to next unresolved discussion"
+msgstr ""
+
 msgid "MergeRequests|Resolve this discussion in a new issue"
 msgstr ""
 

spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js

+import jumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+const localVue = createLocalVue();
+
+describe('jumpToNextDiscussionButton', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(jumpToNextDiscussionButton, {
+      localVue,
+      sync: false,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('emits onClick event on button click', done => {
+    const button = wrapper.find({ ref: 'button' });
+
+    button.trigger('click');
+
+    localVue.nextTick(() => {
+      expect(wrapper.emitted()).toEqual({
+        onClick: [[]],
+      });
+
+      done();
+    });
+  });
+});