Merge branch '229214-replace-LoadingButton-with-GlButton' into 'master'

Replace LoadingButton with GlButton for the comment dismissal modal

Closes #229214

See merge request gitlab-org/gitlab!40882

changelogs/unreleased/229214-replace-LoadingButton-with-GlButton.yml

+---
+title: Replace LoadingButton with GlButton for the comment dismissal modal
+merge_request: 40882
+author:
+type: performance

ee/app/assets/javascripts/vue_shared/security_reports/components/dismissal_comment_modal_footer.vue

@@ -2,13 +2,11 @@
 import { GlButton } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import { s__ } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 export default {
   name: 'DismissalCommentModalFooter',
   components: {
     GlButton,
-    LoadingButton,
   },
   props: {
     isDismissingVulnerability: {
@@ -68,14 +66,15 @@ export default {
     <gl-button variant="default" category="primary" class="js-cancel" @click="$emit('cancel')">
       {{ __('Cancel') }}
     </gl-button>
-    <loading-button
+    <gl-button
       :loading="isDismissingVulnerability"
       :disabled="isDismissingVulnerability"
-      :label="submitLabel"
       data-qa-selector="add_and_dismiss_button"
-      class="js-loading-button"
-      container-class="btn btn-close"
+      data-testid="add_and_dismiss_button"
+      variant="warning"
       @click="handleSubmit"
-    />
+    >
+      {{ submitLabel }}
+    </gl-button>
   </div>
 </template>

ee/spec/frontend/vue_shared/security_reports/components/dismissal_comment_modal_footer_spec.js

 import { mount } from '@vue/test-utils';
 import component from 'ee/vue_shared/security_reports/components/dismissal_comment_modal_footer.vue';
 import Tracking from '~/tracking';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 jest.mock('~/tracking');
 
@@ -9,6 +8,8 @@ describe('DismissalCommentModalFooter', () => {
   let origPage;
   let wrapper;
 
+  const findAddAndDismissButton = () => wrapper.find('[data-testid="add_and_dismiss_button"]');
+
   afterEach(() => {
     document.body.dataset.page = origPage;
     wrapper.destroy();
@@ -25,11 +26,11 @@ describe('DismissalCommentModalFooter', () => {
     });
 
     it('should render the "Add comment and dismiss" button', () => {
-      expect(wrapper.find(LoadingButton).text()).toBe('Add comment & dismiss');
+      expect(findAddAndDismissButton().text()).toBe('Add comment & dismiss');
     });
 
     it('should emit the "addCommentAndDismiss" event when clicked', () => {
-      wrapper.find(LoadingButton).trigger('click');
+      findAddAndDismissButton().trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().addCommentAndDismiss).toBeTruthy();
@@ -59,11 +60,11 @@ describe('DismissalCommentModalFooter', () => {
       });
 
       it('should render the "Add comment and dismiss" button', () => {
-        expect(wrapper.find(LoadingButton).text()).toBe('Add comment');
+        expect(findAddAndDismissButton().text()).toBe('Add comment');
       });
 
       it('should emit the "addCommentAndDismiss" event when clicked', () => {
-        wrapper.find(LoadingButton).trigger('click');
+        findAddAndDismissButton().trigger('click');
 
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted().addDismissalComment).toBeTruthy();
@@ -82,11 +83,11 @@ describe('DismissalCommentModalFooter', () => {
       });
 
       it('should render the "Save comment" button', () => {
-        expect(wrapper.find(LoadingButton).text()).toBe('Save comment');
+        expect(findAddAndDismissButton().text()).toBe('Save comment');
       });
 
       it('should emit the "addCommentAndDismiss" event when clicked', () => {
-        wrapper.find(LoadingButton).trigger('click');
+        findAddAndDismissButton().trigger('click');
 
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted().addDismissalComment).toBeTruthy();