Added resolvable discussion frontend

3 files changed, 49 insertions, 1 deletions

diff --git a/app/assets/javascripts/comment_type_toggle.js b/app/assets/javascripts/comment_type_toggle.js
new file mode 100644
index 00000000000..75b6f60cabb
--- /dev/null
+++ b/app/assets/javascripts/comment_type_toggle.js
@@ -0,0 +1,32 @@
+import DropLab from '@gitlab-org/droplab';
+import InputSetter from '@gitlab-org/droplab/dist/plugins/InputSetter';
+
+class CommentTypeToggle {
+  constructor(trigger, list, input, button, secondaryButton) {
+    this.trigger = trigger;
+    this.list = list;
+    this.input = input;
+    this.button = button;
+    this.secondaryButton = secondaryButton;
+  }
+
+  initDroplab() {
+    this.droplab = new DropLab();
+    this.droplab.init(this.trigger, this.list, [InputSetter], {
+      InputSetter: [{
+        input: this.input,
+        valueAttribute: 'data-value',
+      },
+      {
+        input: this.button,
+        valueAttribute: 'data-button-text',
+      },
+      {
+        input: this.secondaryButton,
+        valueAttribute: 'data-secondary-button-text',
+      }],
+    });
+  }
+}
+
+export default CommentTypeToggle;
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index e7c98e16581..06072faa472 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -3,6 +3,8 @@
 /* global DropzoneInput */
 /* global autosize */
 
+import CommentTypeToggle from './comment_type_toggle';
+
 window.gl = window.gl || {};
 
 function GLForm(form) {
@@ -41,6 +43,20 @@ GLForm.prototype.setupForm = function() {
   this.form.find('.js-note-discard').hide();
   this.form.show();
   if (this.isAutosizeable) this.setupAutosize();
+
+  this.initCommentTypeToggle();
+};
+
+GLForm.prototype.initCommentTypeToggle = function () {
+  this.commentTypeToggle = new CommentTypeToggle(
+    this.form[0].querySelector('.js-comment-type-dropdown .dropdown-toggle'),
+    this.form[0].querySelector('.js-comment-type-dropdown .dropdown-menu'),
+    document.getElementById('note_type'),
+    this.form[0].querySelector('.js-comment-type-dropdown .js-comment-submit-button'),
+    document.querySelector('.js-note-target-close'),
+  );
+
+  this.commentTypeToggle.initDroplab();
 };
 
 GLForm.prototype.setupAutosize = function () {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 63a5d25a1dc..33749d6ed9e 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -452,7 +452,7 @@ require('./task_list');
       form.addClass("js-main-target-form");
       form.find("#note_line_code").remove();
       form.find("#note_position").remove();
-      form.find("#note_type").remove();
+      form.find("#note_type").val('');
       form.find("#in_reply_to_discussion_id").remove();
       form.find('.js-comment-resolve-button').closest('comment-and-resolve-btn').remove();
       return this.parentTimeline = form.parents('.timeline');