Merge branch...

Merge branch '229210-replace-loadingbutton-with-gitlab-ui-s-glbutton-in-ee-app-assets-javascripts-vue_shared' into 'master'

Replace deprecated buttons with GlButton in …modal_footer.vue

Closes #229210 and #219773

See merge request gitlab-org/gitlab!41154

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

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import DismissButton from 'ee/vue_shared/security_reports/components/dismiss_button.vue';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
 import { s__ } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 export default {
   name: 'ModalFooter',
   components: {
     DismissButton,
-    GlDeprecatedButton,
-    LoadingButton,
+    GlButton,
     SplitButton,
   },
   props: {
@@ -102,9 +100,9 @@ export default {
 
 <template>
   <div>
-    <gl-deprecated-button data-dismiss="modal" :disabled="disabled">
+    <gl-button data-dismiss="modal" :disabled="disabled">
       {{ __('Cancel') }}
-    </gl-deprecated-button>
+    </gl-button>
 
     <dismiss-button
       v-if="canDismissVulnerability"
@@ -127,15 +125,17 @@ export default {
       @downloadPatch="$emit('downloadPatch')"
     />
 
-    <loading-button
+    <gl-button
       v-else-if="actionButtons.length > 0"
       :loading="actionButtons[0].isLoading"
       :disabled="actionButtons[0].isLoading || disabled"
-      :label="actionButtons[0].name"
-      container-class="btn btn-success btn-inverted"
+      variant="success"
+      category="secondary"
       class="js-action-button"
       data-qa-selector="create_issue_button"
       @click="$emit(actionButtons[0].action)"
-    />
+    >
+      {{ __(actionButtons[0].name) }}
+    </gl-button>
   </div>
 </template>

ee/changelogs/unreleased/229210-replace-loadingbutton-with-gitlab-ui-s-glbutton-in-ee-app-asset.yml

+---
+title: Replace deprecated buttons with new GlButton component from GitLab UI
+merge_request: 41154
+author:
+type: other

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

@@ -3,7 +3,6 @@ import component from 'ee/vue_shared/security_reports/components/modal_footer.vu
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
 import DismissButton from 'ee/vue_shared/security_reports/components/dismiss_button.vue';
 import createState from 'ee/vue_shared/security_reports/store/state';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 describe('Security Reports modal footer', () => {
   let wrapper;
@@ -34,11 +33,11 @@ describe('Security Reports modal footer', () => {
 
     it('only renders the create issue button', () => {
       expect(wrapper.vm.actionButtons[0].name).toBe('Create issue');
-      expect(wrapper.find(LoadingButton).props('label')).toBe('Create issue');
+      expect(wrapper.find('.js-action-button').text()).toBe('Create issue');
     });
 
     it('emits createIssue when create issue button is clicked', () => {
-      wrapper.find(LoadingButton).trigger('click');
+      wrapper.find('.js-action-button').trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().createNewIssue).toBeTruthy();
@@ -57,11 +56,11 @@ describe('Security Reports modal footer', () => {
 
     it('only renders the create merge request button', () => {
       expect(wrapper.vm.actionButtons[0].name).toBe('Resolve with merge request');
-      expect(wrapper.find(LoadingButton).props('label')).toBe('Resolve with merge request');
+      expect(wrapper.find('.js-action-button').text()).toBe('Resolve with merge request');
     });
 
     it('emits createMergeRequest when create merge request button is clicked', () => {
-      wrapper.find(LoadingButton).trigger('click');
+      wrapper.find('.js-action-button').trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().createMergeRequest).toBeTruthy();
@@ -80,11 +79,11 @@ describe('Security Reports modal footer', () => {
 
     it('renders the download patch button', () => {
       expect(wrapper.vm.actionButtons[0].name).toBe('Download patch to resolve');
-      expect(wrapper.find(LoadingButton).props('label')).toBe('Download patch to resolve');
+      expect(wrapper.find('.js-action-button').text()).toBe('Download patch to resolve');
     });
 
     it('emits downloadPatch when download patch button is clicked', () => {
-      wrapper.find(LoadingButton).trigger('click');
+      wrapper.find('.js-action-button').trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().downloadPatch).toBeTruthy();