phil review changes

app/assets/javascripts/comment_type_toggle.js

@@ -2,37 +2,37 @@ 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;
+  constructor(dropdownTrigger, dropdownList, noteTypeInput, submitButton, closeButton) {
+    this.dropdownTrigger = dropdownTrigger;
+    this.dropdownList = dropdownList;
+    this.noteTypeInput = noteTypeInput;
+    this.submitButton = submitButton;
+    this.closeButton = closeButton;
   }
 
   initDroplab() {
     this.droplab = new DropLab();
 
     const inputSetterConfig = [{
-      input: this.input,
+      input: this.noteTypeInput,
       valueAttribute: 'data-value',
     },
     {
-      input: this.button,
+      input: this.submitButton,
       valueAttribute: 'data-button-text',
     }];
-    if (this.secondaryButton) {
+    if (this.closeButton) {
       inputSetterConfig.push({
-        input: this.secondaryButton,
+        input: this.closeButton,
         valueAttribute: 'data-secondary-button-text',
       }, {
-        input: this.secondaryButton,
+        input: this.closeButton,
         valueAttribute: 'data-secondary-button-text',
         inputAttribute: 'data-alternative-text',
       });
     }
 
-    this.droplab.init(this.trigger, this.list, [InputSetter], {
+    this.droplab.init(this.dropdownTrigger, this.dropdownList, [InputSetter], {
       InputSetter: inputSetterConfig
     });
   }

app/assets/javascripts/gl_form.js

@@ -29,10 +29,7 @@ GLForm.prototype.setupForm = function() {
     this.form.find('.div-dropzone').remove();
     this.form.addClass('gfm-form');
     // remove notify commit author checkbox for non-commit notes
-    gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button'));
-
-    const newDiscussionToggle = this.form.find('.js-note-new-discussion');
-    if (newDiscussionToggle) gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), newDiscussionToggle);
+    gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
 
     gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
     new DropzoneInput(this.form);

app/assets/javascripts/main.js

@@ -279,7 +279,7 @@ $(function () {
   // Disable form buttons while a form is submitting
   $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function (e) {
     var buttons;
-    buttons = $('[type="submit"]', this);
+    buttons = $('[type="submit"], .js-disable-on-submit', this);
     switch (e.type) {
       case 'ajax:beforeSend':
       case 'submit':

app/assets/javascripts/notes.js

@@ -111,18 +111,10 @@ require('./task_list');
       $(document).on("visibilitychange", this.visibilityChange);
       // when issue status changes, we need to refresh data
       $(document).on("issuable:change", this.refresh);
-
-      $(document).on('submit', '.js-main-target-form', this.disableDropdown)
-
       // when a key is clicked on the notes
       return $(document).on("keydown", ".js-note-text", this.keydownNoteText);
     };
 
-    Notes.prototype.disableDropdown = function(e) {
-      const $form = $(e.target);
-      $form.find('.js-note-new-discussion').disable();
-    };
-
     Notes.prototype.cleanBinding = function() {
       $(document).off("ajax:success", ".js-main-target-form");
       $(document).off("ajax:success", ".js-discussion-note-form");
@@ -149,9 +141,9 @@ require('./task_list');
       this.commentTypeToggle = new CommentTypeToggle(
         form.querySelector('.js-comment-type-dropdown .dropdown-toggle'),
         form.querySelector('.js-comment-type-dropdown .dropdown-menu'),
-        document.querySelector('.js-main-target-form #note_type'),
+        form.querySelector('#note_type'),
         form.querySelector('.js-comment-type-dropdown .js-comment-submit-button'),
-        document.querySelector('.js-main-target-form .js-note-target-close'),
+        form.querySelector('.js-note-target-close'),
       );
 
       this.commentTypeToggle.initDroplab();

app/assets/stylesheets/pages/note_form.scss

@@ -312,6 +312,8 @@
 }
 
 .comment-type-dropdown {
+  background: red;
+
   .dropdown-toggle .fa {
     color: $white-light;
     padding-right: 2px;

app/views/projects/notes/_comment_type_button.html.haml

@@ -3,10 +3,10 @@
 .pull-left.btn-group.append-right-10.comment-type-dropdown.js-comment-type-dropdown
   %input.btn.btn-nr.btn-create.comment-btn.js-comment-button.js-comment-submit-button{ type: 'submit', value: 'Comment' }
   - if @note.can_be_discussion_note?
-    = button_tag type: 'button', class: 'btn btn-nr dropdown-toggle comment-btn js-note-new-discussion', data: { 'dropdown-trigger' => '#resolvable-comment-menu' } do
+    = button_tag type: 'button', class: 'btn btn-nr dropdown-toggle comment-btn js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => 'Open comment type dropdown' do
       = icon('caret-down')
     %ul#resolvable-comment-menu.dropdown-menu{ data: { dropdown: true } }
-      %li#comment{ data: { value: '', 'button-text' => 'Comment', 'secondary-button-text' => 'Comment & close merge request' }, class: 'droplab-item-selected' }
+      %li#comment.droplab-item-selected{ data: { value: '', 'button-text' => 'Comment', 'secondary-button-text' => "Comment & close #{noteable_type.titleize.downcase}" } }
         = icon('check')
         .description
           %strong Comment