[web] Fix button-link loading state in subscription page (#23640)

* Fix inline loading button style

* Fix frontend test

GitOrigin-RevId: 59cdf68b8f2ad50f042a4457dc37f5c3d33d6c87

services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/cancel-subscription.tsx

@@ -38,10 +38,7 @@ function ConfirmCancelSubscriptionButton({
       isLoading={isLoading}
       disabled={disabled}
       onClick={onClick}
-      className={showNoThanks ? 'btn-inline-link' : undefined}
-      bs3Props={{
-        loading: isLoading ? t('processing_uppercase') + '…' : text,
-      }}
+      variant={showNoThanks ? 'link' : undefined}
     >
       {text}
     </OLButton>

services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx

@@ -11,7 +11,7 @@ import {
   trialCollaboratorSubscription,
   trialSubscription,
 } from '../../../../fixtures/subscriptions'
-import sinon from 'sinon'
+import sinon, { type SinonStub } from 'sinon'
 import { cleanUpContext } from '../../../../helpers/render-with-subscription-dash-context'
 import { renderActiveSubscription } from '../../../../helpers/render-active-subscription'
 import { cloneDeep } from 'lodash'
@@ -20,12 +20,22 @@ import {
   cancelSubscriptionUrl,
   extendTrialUrl,
   subscriptionUpdateUrl,
-} from '../../../../../../../../frontend/js/features/subscription/data/subscription-url'
+} from '@/features/subscription/data/subscription-url'
 import * as useLocationModule from '../../../../../../../../frontend/js/shared/hooks/use-location'
 import { MetaTag } from '@/utils/meta'
+import * as bootstrapUtils from '@/features/utils/bootstrap-5'
 
 describe('<ActiveSubscription />', function () {
   let sendMBSpy: sinon.SinonSpy
+  let isBootstrap5Stub: SinonStub
+
+  before(function () {
+    isBootstrap5Stub = sinon.stub(bootstrapUtils, 'isBootstrap5').returns(true)
+  })
+
+  after(function () {
+    isBootstrap5Stub.restore()
+  })
 
   beforeEach(function () {
     sendMBSpy = sinon.spy(eventTracking, 'sendMB')
@@ -301,7 +311,7 @@ describe('<ActiveSubscription />', function () {
       })
     })
 
-    it('disables cancels subscription button after clicking and updates text', async function () {
+    it('disables cancels subscription button after clicking and shows loading spinner', async function () {
       renderActiveSubscription(annualActiveSubscription)
       showConfirmCancelUI()
       screen.getByRole('button', {
@@ -312,12 +322,13 @@ describe('<ActiveSubscription />', function () {
       })
       fireEvent.click(button)
 
-      const cancelButtton = screen.getByRole('button', {
-        name: 'Processing…',
+      const cancelButton = screen.getByRole('button', {
+        name: 'Loading',
       }) as HTMLButtonElement
-      expect(cancelButtton.disabled).to.be.true
+      expect(cancelButton.disabled).to.be.true
 
-      expect(screen.queryByText('Cancel my subscription')).to.be.null
+      const hiddenText = screen.getByText('Cancel my subscription')
+      expect(hiddenText.getAttribute('aria-hidden')).to.equal('true')
     })
 
     describe('extend trial', function () {
@@ -357,7 +368,7 @@ describe('<ActiveSubscription />', function () {
           name: cancelButtonText,
         })
         screen.getByRole('button', {
-          name: 'Processing…',
+          name: 'Loading',
         })
       })
 
@@ -374,7 +385,7 @@ describe('<ActiveSubscription />', function () {
         expect(buttons[0].getAttribute('disabled')).to.equal('')
         expect(buttons[1].getAttribute('disabled')).to.equal('')
         screen.getByRole('button', {
-          name: 'Processing…',
+          name: 'Loading',
         })
         screen.getByRole('button', {
           name: extendTrialButtonText,
@@ -445,7 +456,7 @@ describe('<ActiveSubscription />', function () {
           name: cancelButtonText,
         })
         screen.getByRole('button', {
-          name: 'Processing…',
+          name: 'Loading',
         })
       })
 
@@ -462,7 +473,7 @@ describe('<ActiveSubscription />', function () {
         expect(buttons[0].getAttribute('disabled')).to.equal('')
         expect(buttons[1].getAttribute('disabled')).to.equal('')
         screen.getByRole('button', {
-          name: 'Processing…',
+          name: 'Loading',
         })
         screen.getByRole('button', {
           name: downgradeButtonText,