Fixed issue button state bug

3 files changed, 63 insertions, 40 deletions

diff --git a/app/assets/javascripts/comment_type_toggle.js b/app/assets/javascripts/comment_type_toggle.js
index 34878f90050..ba3b43b201d 100644
--- a/app/assets/javascripts/comment_type_toggle.js
+++ b/app/assets/javascripts/comment_type_toggle.js
@@ -2,39 +2,54 @@ import DropLab from '~/droplab/drop_lab';
 import InputSetter from '~/droplab/plugins/input_setter';
 
 class CommentTypeToggle {
-  constructor(dropdownTrigger, dropdownList, noteTypeInput, submitButton, closeButton) {
-    this.dropdownTrigger = dropdownTrigger;
-    this.dropdownList = dropdownList;
-    this.noteTypeInput = noteTypeInput;
-    this.submitButton = submitButton;
-    this.closeButton = closeButton;
+  constructor(opts = {}) {
+    this.dropdownTrigger = opts.dropdownTrigger;
+    this.dropdownList = opts.dropdownList;
+    this.noteTypeInput = opts.noteTypeInput;
+    this.submitButton = opts.submitButton;
+    this.closeButton = opts.closeButton;
+    this.reopenButton = opts.reopenButton;
   }
 
   initDroplab() {
     this.droplab = new DropLab();
 
-    const inputSetterConfig = [{
-      input: this.noteTypeInput,
-      valueAttribute: 'data-value',
-    },
-    {
-      input: this.submitButton,
-      valueAttribute: 'data-button-text',
-    }];
-    if (this.closeButton) {
-      inputSetterConfig.push({
-        input: this.closeButton,
-        valueAttribute: 'data-secondary-button-text',
-      }, {
-        input: this.closeButton,
-        valueAttribute: 'data-secondary-button-text',
-        inputAttribute: 'data-alternative-text',
-      });
-    }
-
-    this.droplab.init(this.dropdownTrigger, this.dropdownList, [InputSetter], {
-      InputSetter: inputSetterConfig,
+    const config = this.setConfig();
+
+    this.droplab.init(this.dropdownTrigger, this.dropdownList, [InputSetter], config);
+  }
+
+  setConfig() {
+    const config = {
+      InputSetter: [{
+        input: this.noteTypeInput,
+        valueAttribute: 'data-value',
+      },
+      {
+        input: this.submitButton,
+        valueAttribute: 'data-submit-text',
+      }],
+    };
+
+    if (!this.closeButton || !this.reopenButton) return config;
+
+    config.InputSetter.push({
+      input: this.closeButton,
+      valueAttribute: 'data-close-text',
+    }, {
+      input: this.closeButton,
+      valueAttribute: 'data-close-text',
+      inputAttribute: 'data-alternative-text',
+    }, {
+      input: this.reopenButton,
+      valueAttribute: 'data-reopen-text',
+    }, {
+      input: this.reopenButton,
+      valueAttribute: 'data-reopen-text',
+      inputAttribute: 'data-alternative-text',
     });
+
+    return config;
   }
 }
 
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 9dd516d93fd..2a8f4acc72a 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -137,16 +137,24 @@ require('./task_list');
       $(document).off("click", '.system-note-commit-list-toggler');
     };
 
-    Notes.prototype.initCommentTypeToggle = function (form) {
-      this.commentTypeToggle = new CommentTypeToggle(
-        form.querySelector('.js-comment-type-dropdown .dropdown-toggle'),
-        form.querySelector('.js-comment-type-dropdown .dropdown-menu'),
-        form.querySelector('#note_type'),
-        form.querySelector('.js-comment-type-dropdown .js-comment-submit-button'),
-        form.querySelector('.js-note-target-close:not(.hidden)') || form.querySelector('.js-note-target-reopen'),
-      );
-
-      this.commentTypeToggle.initDroplab();
+    Notes.initCommentTypeToggle = function (form) {
+      const dropdownTrigger = form.querySelector('.js-comment-type-dropdown .dropdown-toggle');
+      const dropdownList = form.querySelector('.js-comment-type-dropdown .dropdown-menu');
+      const noteTypeInput = form.querySelector('#note_type');
+      const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
+      const closeButton = form.querySelector('.js-note-target-close');
+      const reopenButton = form.querySelector('.js-note-target-reopen');
+
+      const commentTypeToggle = new CommentTypeToggle({
+        dropdownTrigger,
+        dropdownList,
+        noteTypeInput,
+        submitButton,
+        closeButton,
+        reopenButton,
+      });
+
+      commentTypeToggle.initDroplab();
     };
 
     Notes.prototype.keydownNoteText = function(e) {
@@ -470,7 +478,7 @@ require('./task_list');
       this.parentTimeline = form.parents('.timeline');
 
       if (form.length) {
-        this.initCommentTypeToggle(form.get(0));
+        Notes.initCommentTypeToggle(form.get(0));
       }
     };
 
@@ -939,8 +947,9 @@ require('./task_list');
       reopenbtn = form.find('.js-note-target-reopen');
       closebtn = form.find('.js-note-target-close');
       discardbtn = form.find('.js-note-discard');
+
       if (textarea.val().trim().length > 0) {
-        reopentext = reopenbtn.data('alternative-text');
+        reopentext = reopenbtn.attr('data-alternative-text');
         closetext = closebtn.attr('data-alternative-text');
         if (reopenbtn.text() !== reopentext) {
           reopenbtn.text(reopentext);
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 09c178c5a14..c71a4e717f8 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -334,7 +334,6 @@
 
   li {
     white-space: nowrap;
-    border-radius: 0;
     cursor: pointer;
     padding-top: 6px;