Extract discussion actions into separate component58293-extract-discussion-actions

- Created DiscussionActions component
- Updated NoteableDiscussion component accordingly
- Wrote Jest tests for DiscussionActions
- Updated Jest config to enable emojis aliases mock
- Updated qa specs to reflect changes in NoteableDiscussions

1 files changed, 58 insertions, 0 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue
new file mode 100644
index 00000000000..22cca756ef6
--- /dev/null
+++ b/app/assets/javascripts/notes/components/discussion_actions.vue
@@ -0,0 +1,58 @@
+<script>
+import ReplyPlaceholder from './discussion_reply_placeholder.vue';
+import ResolveDiscussionButton from './discussion_resolve_button.vue';
+import ResolveWithIssueButton from './discussion_resolve_with_issue_button.vue';
+import JumpToNextDiscussionButton from './discussion_jump_to_next_button.vue';
+
+export default {
+  name: 'DiscussionActions',
+  components: {
+    ReplyPlaceholder,
+    ResolveDiscussionButton,
+    ResolveWithIssueButton,
+    JumpToNextDiscussionButton,
+  },
+  props: {
+    discussion: {
+      type: Object,
+      required: true,
+    },
+    isResolving: {
+      type: Boolean,
+      required: true,
+    },
+    resolveButtonTitle: {
+      type: String,
+      required: true,
+    },
+    resolveWithIssuePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    shouldShowJumpToNextDiscussion: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="discussion-with-resolve-btn">
+    <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>
+  </div>
+</template>