Migrate comment and close to gl button

app/assets/javascripts/notes/components/comment_form.vue

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { isEmpty } from 'lodash';
 import Autosize from 'autosize';
-import { GlAlert, GlIntersperse, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlIntersperse, GlLink, GlSprintf, GlButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import { deprecatedCreateFlash as Flash } from '../../flash';
@@ -20,7 +20,6 @@ import eventHub from '../event_hub';
 import NoteableWarning from '../../vue_shared/components/notes/noteable_warning.vue';
 import markdownField from '../../vue_shared/components/markdown/field.vue';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-import loadingButton from '../../vue_shared/components/loading_button.vue';
 import noteSignedOutWidget from './note_signed_out_widget.vue';
 import discussionLockedWidget from './discussion_locked_widget.vue';
 import issuableStateMixin from '../mixins/issuable_state';
@@ -33,7 +32,7 @@ export default {
     discussionLockedWidget,
     markdownField,
     userAvatarLink,
-    loadingButton,
+    GlButton,
     TimelineEntryItem,
     GlAlert,
     GlIntersperse,
@@ -102,6 +101,9 @@ export default {
         noteable: this.noteableDisplayName,
       });
     },
+    buttonVariant() {
+      return this.isOpen ? 'warning' : 'default';
+    },
     actionButtonClassNames() {
       return {
         'btn-reopen': !this.isOpen,
@@ -480,17 +482,19 @@ export default {
                 </ul>
               </div>
 
-              <loading-button
+              <gl-button
                 v-if="canToggleIssueState && !isToggleBlockedIssueWarning"
                 :loading="isToggleStateButtonLoading"
-                :container-class="[
+                category="secondary"
+                :variant="buttonVariant"
+                :class="[
                   actionButtonClassNames,
-                  'btn btn-comment btn-comment-and-close js-action-button',
+                  'btn-comment btn-comment-and-close js-action-button',
                 ]"
                 :disabled="isToggleStateButtonLoading || isSubmitting"
-                :label="issueActionButtonTitle"
                 @click="handleSave(true)"
-              />
+                >{{ issueActionButtonTitle }}</gl-button
+              >
             </div>
           </form>
         </div>

spec/frontend/notes/components/comment_form_spec.js

@@ -267,15 +267,14 @@ describe('issue_comment_form component', () => {
       });
 
       describe('when clicking close/reopen button', () => {
-        it('should disable button and show a loading spinner', done => {
+        it('should disable button and show a loading spinner', () => {
           const toggleStateButton = wrapper.find('.js-action-button');
 
           toggleStateButton.trigger('click');
-          wrapper.vm.$nextTick(() => {
-            expect(toggleStateButton.element.disabled).toEqual(true);
-            expect(toggleStateButton.find('.js-loading-button-icon').exists()).toBe(true);
 
-            done();
+          return wrapper.vm.$nextTick().then(() => {
+            expect(toggleStateButton.element.disabled).toEqual(true);
+            expect(toggleStateButton.props('loading')).toBe(true);
           });
         });
       });
@@ -321,4 +320,33 @@ describe('issue_comment_form component', () => {
       expect(wrapper.find('textarea').exists()).toBe(false);
     });
   });
+
+  describe('when issuable is open', () => {
+    beforeEach(() => {
+      setupStore(userDataMock, noteableDataMock);
+    });
+
+    it.each([['opened', 'warning'], ['reopened', 'warning']])(
+      'when %i, it changes the variant of the btn to %i',
+      (a, expected) => {
+        store.state.noteableData.state = a;
+
+        mountComponent();
+
+        expect(wrapper.find('.js-action-button').props('variant')).toBe(expected);
+      },
+    );
+  });
+
+  describe('when issuable is not open', () => {
+    beforeEach(() => {
+      setupStore(userDataMock, noteableDataMock);
+
+      mountComponent();
+    });
+
+    it('should render the "default" variant of the button', () => {
+      expect(wrapper.find('.js-action-button').props('variant')).toBe('warning');
+    });
+  });
 });