Migrate to GlButton in note_form

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42221

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

 <script>
 /* eslint-disable vue/no-v-html */
 import { mapGetters, mapActions, mapState } from 'vuex';
+import { GlButton } from '@gitlab/ui';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
 import markdownField from '~/vue_shared/components/markdown/field.vue';
@@ -16,6 +17,7 @@ export default {
   components: {
     markdownField,
     CommentFieldLayout,
+    GlButton,
   },
   mixins: [glFeatureFlagsMixin(), issuableStateMixin, resolvable],
   props: {
@@ -378,61 +380,70 @@ export default {
               </template>
             </label>
           </p>
-          <div>
-            <button
+          <div class="gl-display-sm-flex gl-flex-wrap">
+            <gl-button
               :disabled="isDisabled"
-              type="button"
-              class="btn btn-success"
+              category="primary"
+              variant="success"
+              class="gl-mr-3"
               data-qa-selector="start_review_button"
               @click="handleAddToReview"
             >
               <template v-if="hasDrafts">{{ __('Add to review') }}</template>
               <template v-else>{{ __('Start a review') }}</template>
-            </button>
-            <button
+            </gl-button>
+            <gl-button
               :disabled="isDisabled"
-              type="button"
-              class="btn js-comment-button"
+              category="secondary"
+              variant="default"
               data-qa-selector="comment_now_button"
+              class="gl-mr-3 js-comment-button"
               @click="handleUpdate()"
             >
               {{ __('Add comment now') }}
-            </button>
-            <button
-              class="btn note-edit-cancel js-close-discussion-note-form"
-              type="button"
+            </gl-button>
+            <gl-button
+              class="note-edit-cancel js-close-discussion-note-form"
+              category="secondary"
+              variant="default"
               data-testid="cancelBatchCommentsEnabled"
               @click="cancelHandler(true)"
             >
               {{ __('Cancel') }}
-            </button>
+            </gl-button>
           </div>
         </template>
         <template v-else>
-          <button
-            :disabled="isDisabled"
-            type="button"
-            class="js-vue-issue-save btn btn-success js-comment-button"
-            data-qa-selector="reply_comment_button"
-            @click="handleUpdate()"
-          >
-            {{ saveButtonTitle }}
-          </button>
-          <button
-            v-if="discussion.resolvable"
-            class="btn btn-default gl-mr-3 js-comment-resolve-button"
-            @click.prevent="handleUpdate(true)"
-          >
-            {{ resolveButtonTitle }}
-          </button>
-          <button
-            class="btn btn-cancel note-edit-cancel js-close-discussion-note-form"
-            type="button"
-            data-testid="cancel"
-            @click="cancelHandler(true)"
-          >
-            {{ __('Cancel') }}
-          </button>
+          <div class="gl-display-sm-flex gl-flex-wrap">
+            <gl-button
+              :disabled="isDisabled"
+              category="primary"
+              variant="success"
+              data-qa-selector="reply_comment_button"
+              class="gl-mr-3 js-vue-issue-save js-comment-button"
+              @click="handleUpdate()"
+            >
+              {{ saveButtonTitle }}
+            </gl-button>
+            <gl-button
+              v-if="discussion.resolvable"
+              category="secondary"
+              variant="default"
+              class="gl-mr-3 js-comment-resolve-button"
+              @click.prevent="handleUpdate(true)"
+            >
+              {{ resolveButtonTitle }}
+            </gl-button>
+            <gl-button
+              class="note-edit-cancel js-close-discussion-note-form"
+              category="secondary"
+              variant="default"
+              data-testid="cancel"
+              @click="cancelHandler(true)"
+            >
+              {{ __('Cancel') }}
+            </gl-button>
+          </div>
         </template>
       </div>
     </form>

changelogs/unreleased/229293-migrate-to-GlButton-note-form.yml

+---
+title: Migrate button to gitlab ui in note form
+merge_request: 42221
+author:
+type: changed

spec/features/merge_request/user_posts_notes_spec.rb

@@ -161,7 +161,7 @@ RSpec.describe 'Merge request > User posts notes', :js do
           fill_in 'note[note]', with: 'Some new content'
 
           accept_confirm do
-            find('.btn-cancel').click
+            find('[data-testid="cancel"]').click
           end
         end
         expect(find('.js-note-text').text).to eq ''

spec/frontend/notes/components/note_form_spec.js

@@ -4,9 +4,8 @@ import createStore from '~/notes/stores';
 import NoteForm from '~/notes/components/note_form.vue';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import { noteableDataMock, notesDataMock, discussionMock } from '../mock_data';
-
 import { getDraft, updateDraft } from '~/lib/utils/autosave';
+import { noteableDataMock, notesDataMock, discussionMock } from '../mock_data';
 
 jest.mock('~/lib/utils/autosave');
 
@@ -25,6 +24,8 @@ describe('issue_note_form component', () => {
     });
   };
 
+  const findCancelButton = () => wrapper.find('[data-testid="cancel"]');
+
   beforeEach(() => {
     getDraft.mockImplementation((key) => {
       if (key === dummyAutosaveKey) {
@@ -160,8 +161,8 @@ describe('issue_note_form component', () => {
         });
         await nextTick();
 
-        const cancelButton = wrapper.find('[data-testid="cancel"]');
-        cancelButton.trigger('click');
+        const cancelButton = findCancelButton();
+        cancelButton.vm.$emit('click');
         await nextTick();
 
         expect(wrapper.emitted().cancelForm).toHaveLength(1);
@@ -177,7 +178,7 @@ describe('issue_note_form component', () => {
         const textarea = wrapper.find('textarea');
         textarea.setValue('Foo');
         const saveButton = wrapper.find('.js-vue-issue-save');
-        saveButton.trigger('click');
+        saveButton.vm.$emit('click');
 
         expect(wrapper.vm.isSubmitting).toBe(true);
       });
@@ -272,7 +273,7 @@ describe('issue_note_form component', () => {
 
       await nextTick();
       const cancelButton = wrapper.find('[data-testid="cancelBatchCommentsEnabled"]');
-      cancelButton.trigger('click');
+      cancelButton.vm.$emit('click');
 
       expect(wrapper.vm.cancelHandler).toHaveBeenCalledWith(true);
     });
@@ -302,16 +303,16 @@ describe('issue_note_form component', () => {
       expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(false);
     });
 
-    it('hides actions for commits', () => {
+    it('hides actions for commits', async () => {
       wrapper.setProps({ discussion: { for_commit: true } });
 
-      return nextTick(() => {
-        expect(wrapper.find('.note-form-actions').text()).not.toContain('Start a review');
-      });
+      await nextTick();
+
+      expect(wrapper.find('.note-form-actions').text()).not.toContain('Start a review');
     });
 
     describe('on enter', () => {
-      it('should start review or add to review when cmd+enter is pressed', () => {
+      it('should start review or add to review when cmd+enter is pressed', async () => {
         const textarea = wrapper.find('textarea');
 
         jest.spyOn(wrapper.vm, 'handleAddToReview');
@@ -319,9 +320,8 @@ describe('issue_note_form component', () => {
         textarea.setValue('Foo');
         textarea.trigger('keydown.enter', { metaKey: true });
 
-        return nextTick(() => {
-          expect(wrapper.vm.handleAddToReview).toHaveBeenCalled();
-        });
+        await nextTick();
+        expect(wrapper.vm.handleAddToReview).toHaveBeenCalled();
       });
     });
   });