Resolve "Merge request approval button style inadvertently changed"

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

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue

 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import createFlash, { hideFlash } from '~/flash';
 import { s__ } from '~/locale';
 import eventHub from '~/vue_merge_request_widget/event_hub';
@@ -21,7 +21,6 @@ export default {
     ApprovalsFooter,
     ApprovalsAuth,
     GlButton,
-    GlLoadingIcon,
   },
   props: {
     mr: {
@@ -85,10 +84,9 @@ export default {
     action() {
       // Use the default approve action, only if we aren't using the auth component for it
       if (this.showApprove) {
-        const inverted = this.isApproved;
         return {
           text: this.approvalText,
-          inverted,
+          category: this.isApproved ? 'secondary' : 'primary',
           variant: 'info',
           action: () => this.approve(),
         };
@@ -96,7 +94,7 @@ export default {
         return {
           text: s__('mrWidget|Revoke approval'),
           variant: 'warning',
-          inverted: true,
+          category: 'secondary',
           action: () => this.unapprove(),
         };
       }
@@ -210,13 +208,12 @@ export default {
         <gl-button
           v-if="action"
           :variant="action.variant"
-          :class="{ 'btn-inverted': action.inverted }"
-          category="secondary"
+          :category="action.category"
+          :loading="isApproving"
           class="mr-3"
           data-qa-selector="approve_button"
           @click="action.action"
         >
-          <gl-loading-icon v-if="isApproving" inline />
           {{ action.text }}
         </gl-button>
         <approvals-summary-optional

ee/changelogs/unreleased/224139-merge-request-approval-button-style-inadvertently-changed.yml

+---
+title: Fix visual regression for MR approve button
+merge_request: 35213
+author:
+type: fixed

ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import Approvals from 'ee/vue_merge_request_widget/components/approvals/approvals.vue';
 import ApprovalsSummary from 'ee/vue_merge_request_widget/components/approvals/approvals_summary.vue';
 import ApprovalsSummaryOptional from 'ee/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue';
@@ -62,8 +62,8 @@ describe('EE MRWidget approvals', () => {
     return !action.exists()
       ? null
       : {
-          variant: action.attributes('variant'),
-          inverted: action.classes('btn-inverted'),
+          variant: action.props('variant'),
+          category: action.props('category'),
           text: action.text(),
         };
   };
@@ -186,7 +186,7 @@ describe('EE MRWidget approvals', () => {
           expect(findActionData()).toEqual({
             variant: 'info',
             text: 'Approve',
-            inverted: false,
+            category: 'primary',
           });
         });
       });
@@ -203,11 +203,11 @@ describe('EE MRWidget approvals', () => {
             waitForTick(done);
           });
 
-          it('approve action (with inverted) is rendered', () => {
+          it('approve action (with inverted style) is rendered', () => {
             expect(findActionData()).toEqual({
               variant: 'info',
               text: 'Approve',
-              inverted: true,
+              category: 'secondary',
             });
           });
         });
@@ -223,7 +223,7 @@ describe('EE MRWidget approvals', () => {
             expect(findActionData()).toEqual({
               variant: 'info',
               text: 'Approve additionally',
-              inverted: true,
+              category: 'secondary',
             });
           });
         });
@@ -239,13 +239,13 @@ describe('EE MRWidget approvals', () => {
           service.approveMergeRequest.and.callFake(() => new Promise(() => {}));
           const action = findAction();
 
-          expect(action.find(GlLoadingIcon).exists()).toBe(false);
+          expect(action.props('loading')).toBe(false);
 
           action.vm.$emit('click');
 
           tick()
             .then(() => {
-              expect(action.find(GlLoadingIcon).exists()).toBe(true);
+              expect(action.props('loading')).toBe(true);
             })
             .then(done)
             .catch(done.fail);
@@ -360,7 +360,7 @@ describe('EE MRWidget approvals', () => {
         expect(findActionData()).toEqual({
           variant: 'warning',
           text: 'Revoke approval',
-          inverted: true,
+          category: 'secondary',
         });
       });