From 62cfaeb1d14550c34692bb475df49f4d6f1d5018 Mon Sep 17 00:00:00 2001
From: Martin Hobert <info@dosh.dk>
Date: Mon, 28 Jan 2019 11:36:44 +0100
Subject: [PATCH] Extracted JumpToNextDiscussionButton to its own component

(cherry picked from commit 3af7723fcde7d32986ae4a9e104a893cf0167745)

Conflicts:
	locale/gitlab.pot
---
 .../discussion_jump_to_next_button.vue        | 28 ++++++++++++++++
 .../notes/components/noteable_discussion.vue  | 16 ++++-----
 ...extract-jump-to-next-discussion-button.yml |  5 +++
 locale/gitlab.pot                             |  3 ++
 .../discussion_jump_to_next_button_spec.js    | 33 +++++++++++++++++++
 5 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
 create mode 100644 changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml
 create mode 100644 spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js

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 00000000000000..07a5bda6bcb467
--- /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 1a2b6cee09f362..72d76c88232bf4 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/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>
diff --git a/changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml b/changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml
new file mode 100644
index 00000000000000..9a0d16c2d708c4
--- /dev/null
+++ b/changelogs/unreleased/refactor-56369-extract-jump-to-next-discussion-button.yml
@@ -0,0 +1,5 @@
+---
+title: Extracted JumpToNextDiscussionButton to its own component
+author: Martin Hobert
+merge_request: 24506
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index be1f473616689f..9fb75a8313d080 100644
--- a/locale/gitlab.pot
+++ b/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 ""
 
diff --git a/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js b/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
new file mode 100644
index 00000000000000..c41b29fa78847e
--- /dev/null
+++ b/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
@@ -0,0 +1,33 @@
+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();
+    });
+  });
+});
-- 
GitLab