1 files changed, 114 insertions, 0 deletions
diff --git a/app/assets/javascripts/notes/components/comment_type_dropdown.vue b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
new file mode 100644
index 00000000000..663a912999d
--- /dev/null
+++ b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
@@ -0,0 +1,114 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+
+import { sprintf } from '~/locale';
+import { COMMENT_FORM } from '~/notes/i18n';
+import * as constants from '../constants';
+
+export default {
+  i18n: COMMENT_FORM,
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+  },
+  model: {
+    prop: 'noteType',
+    event: 'change',
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    trackingLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    discussionsRequireResolution: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    noteableDisplayName: {
+      type: String,
+      required: true,
+    },
+    noteType: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isNoteTypeComment() {
+      return this.noteType === constants.COMMENT;
+    },
+    isNoteTypeDiscussion() {
+      return this.noteType === constants.DISCUSSION;
+    },
+    commentButtonTitle() {
+      return this.noteType === constants.COMMENT
+        ? this.$options.i18n.comment
+        : this.$options.i18n.startThread;
+    },
+    startDiscussionDescription() {
+      return this.discussionsRequireResolution
+        ? this.$options.i18n.discussionThatNeedsResolution
+        : this.$options.i18n.discussion;
+    },
+    commentDescription() {
+      return sprintf(this.$options.i18n.submitButton.commentHelp, {
+        noteableDisplayName: this.noteableDisplayName,
+      });
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+    setNoteTypeToComment() {
+      if (this.noteType !== constants.COMMENT) {
+        this.$emit('change', constants.COMMENT);
+      }
+    },
+    setNoteTypeToDiscussion() {
+      if (this.noteType !== constants.DISCUSSION) {
+        this.$emit('change', constants.DISCUSSION);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    split
+    :text="commentButtonTitle"
+    class="gl-mr-3 js-comment-button js-comment-submit-button comment-type-dropdown"
+    category="primary"
+    variant="confirm"
+    :disabled="disabled"
+    data-testid="comment-button"
+    data-qa-selector="comment_button"
+    :data-track-label="trackingLabel"
+    data-track-action="click_button"
+    @click="$emit('click')"
+  >
+    <gl-dropdown-item is-check-item :is-checked="isNoteTypeComment" @click="setNoteTypeToComment">
+      <strong>{{ $options.i18n.submitButton.comment }}</strong>
+      <p class="gl-m-0">{{ commentDescription }}</p>
+    </gl-dropdown-item>
+    <gl-dropdown-divider />
+    <gl-dropdown-item
+      is-check-item
+      :is-checked="isNoteTypeDiscussion"
+      data-qa-selector="discussion_menu_item"
+      @click="setNoteTypeToDiscussion"
+    >
+      <strong>{{ $options.i18n.submitButton.startThread }}</strong>
+      <p class="gl-m-0">{{ startDiscussionDescription }}</p>
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>