feat: disable revoke button while tx pending (#37559)

## **Description**

This PR extends the gatar permission revocation UI to dynamically
determine if the revoke CTA should be disabled when a transaction to
revoke said permission is pending.

- Extends the gator permission selector file to read
`pendingRevocations` from `GatorPermissionsController`
- Extends the `ReviewGatorPermissionItem` component props to include
`pendingRevocations` values
- Extends the `ReviewGatorPermissionItem` logic to render button text
and determine button disabled status dynamically

## **Related issues**

Relates to: #37209
Requires: MetaMask/core#7055

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


https://github.com/user-attachments/assets/5b65766b-8e8b-4d4e-b7a4-26f52fb60f19

### **After**


https://github.com/user-attachments/assets/92ff11a6-a01d-43b8-bcdf-6b3242252408

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Disables the Gator permission "Revoke" action when a matching
revocation tx is pending via a new selector, with updated UI text and
tests.
> 
> - **UI (Gator Permissions)**:
> - `ReviewGatorPermissionItem`: use `getPendingRevocations` to compute
`isPendingRevocation` by `permissionResponse.context` and:
> - Disable `Revoke` button and switch label to
`t('gatorPermissionsRevocationPending')` with muted color when pending.
>     - Replace wrapper with `Button` for the revoke CTA.
> - **Selectors**:
> - Add `getPendingRevocations` in
`ui/selectors/gator-permissions/gator-permissions.ts` to read
`metamask.pendingRevocations`.
> - **i18n**:
> - Add messages: `gatorPermissionsRevocationPending`,
`gatorPermissionsRevoke` in `app/_locales/en*.json`.
> - **Tests/Snapshots**:
> - Update `review-gator-permission-item.test.tsx` to mock
`getPendingRevocations`; adjust snapshots for button changes.
> - Add unit tests for `getPendingRevocations` in
`gator-permissions.test.ts`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ff6c481. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: jeffsmale90 <[email protected]>

Author: V00D00-child

app/_locales/en/messages.json

@@ -18,16 +18,17 @@ exports[`Permission List Item render ERC20 token permissions renders erc20 token
         >
           localhost:8000
         </p>
-        <div
-          class="flex flex-row gap-2 justify-end"
-          style="flex: 1; align-self: center; cursor: pointer;"
+        <button
+          class="inline-flex items-center justify-center rounded-xl px-4 font-medium min-w-20 overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-icon-default text-primary-inverse hover:bg-icon-default-hover active:bg-icon-default-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default"
+          role="button"
+          style="background-color: transparent; padding: 0px;"
         >
           <p
             class="text-error-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
           >
             Revoke
           </p>
-        </div>
+        </button>
       </div>
     </div>
     <div
@@ -196,16 +197,17 @@ exports[`Permission List Item render ERC20 token permissions renders erc20 token
         >
           localhost:8000
         </p>
-        <div
-          class="flex flex-row gap-2 justify-end"
-          style="flex: 1; align-self: center; cursor: pointer;"
+        <button
+          class="inline-flex items-center justify-center rounded-xl px-4 font-medium min-w-20 overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-icon-default text-primary-inverse hover:bg-icon-default-hover active:bg-icon-default-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default"
+          role="button"
+          style="background-color: transparent; padding: 0px;"
         >
           <p
             class="text-error-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
           >
             Revoke
           </p>
-        </div>
+        </button>
       </div>
     </div>
     <div
@@ -374,16 +376,17 @@ exports[`Permission List Item render ERC20 token permissions renders erc20 token
         >
           localhost:8000
         </p>
-        <div
-          class="flex flex-row gap-2 justify-end"
-          style="flex: 1; align-self: center; cursor: pointer;"
+        <button
+          class="inline-flex items-center justify-center rounded-xl px-4 font-medium min-w-20 overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-icon-default text-primary-inverse hover:bg-icon-default-hover active:bg-icon-default-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default"
+          role="button"
+          style="background-color: transparent; padding: 0px;"
         >
           <p
             class="text-error-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
           >
             Revoke
           </p>
-        </div>
+        </button>
       </div>
     </div>
     <div
@@ -552,16 +555,17 @@ exports[`Permission List Item render NATIVE token permissions renders native tok
         >
           localhost:8000
         </p>
-        <div
-          class="flex flex-row gap-2 justify-end"
-          style="flex: 1; align-self: center; cursor: pointer;"
+        <button
+          class="inline-flex items-center justify-center rounded-xl px-4 font-medium min-w-20 overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-icon-default text-primary-inverse hover:bg-icon-default-hover active:bg-icon-default-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default"
+          role="button"
+          style="background-color: transparent; padding: 0px;"
         >
           <p
             class="text-error-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
           >
             Revoke
           </p>
-        </div>
+        </button>
       </div>
     </div>
     <div
@@ -730,16 +734,17 @@ exports[`Permission List Item render NATIVE token permissions renders native tok
         >
           localhost:8000
         </p>
-        <div
-          class="flex flex-row gap-2 justify-end"
-          style="flex: 1; align-self: center; cursor: pointer;"
+        <button
+          class="inline-flex items-center justify-center rounded-xl px-4 font-medium min-w-20 overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-icon-default text-primary-inverse hover:bg-icon-default-hover active:bg-icon-default-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default"
+          role="button"
+          style="background-color: transparent; padding: 0px;"
         >
           <p
             class="text-error-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
           >
             Revoke
           </p>
-        </div>
+        </button>
       </div>
     </div>
     <div

app/_locales/en_GB/messages.json

@@ -22,6 +22,13 @@ const store = configureStore({
   },
 });
 
+jest.mock(
+  '../../../../../selectors/gator-permissions/gator-permissions',
+  () => ({
+    getPendingRevocations: jest.fn().mockReturnValue([]),
+  }),
+);
+
 describe('Permission List Item', () => {
   beforeAll(() => {
     // Set Luxon to use UTC as the default timezone for consistent test results

ui/components/multichain/pages/gator-permissions/components/__snapshots__/review-gator-permission-item.test.tsx.snap

@@ -17,6 +17,7 @@ import {
   AvatarNetworkSize,
   ButtonIconSize,
   IconName,
+  Button,
 } from '@metamask/design-system-react';
 import {
   Erc20TokenPeriodicPermission,
@@ -46,6 +47,7 @@ import {
   selectERC20TokensByChain,
 } from '../../../../../selectors/selectors';
 import { getTokenMetadata } from '../../../../../helpers/utils/token-util';
+import { getPendingRevocations } from '../../../../../selectors/gator-permissions/gator-permissions';
 
 type TokenMetadata = {
   symbol: string;
@@ -105,6 +107,7 @@ export const ReviewGatorPermissionItem = ({
   const { permissionResponse, siteOrigin } = gatorPermission;
   const { chainId } = permissionResponse;
   const permissionType = permissionResponse.permission.type;
+  const permissionContext = permissionResponse.context;
   const permissionAccount = permissionResponse.address || '0x';
   const tokenAddress = permissionResponse.permission.data.tokenAddress as
     | Hex
@@ -115,6 +118,7 @@ export const ReviewGatorPermissionItem = ({
   const nativeTokenMetadata = useSelector((state) =>
     getNativeTokenInfo(state, chainId),
   ) as TokenMetadata;
+  const pendingRevocations = useSelector(getPendingRevocations);
 
   const tokenMetadata: TokenMetadata = useMemo(() => {
     if (tokenAddress) {
@@ -146,6 +150,12 @@ export const ReviewGatorPermissionItem = ({
     };
   }, [tokensByChain, chainId, tokenAddress, nativeTokenMetadata]);
 
+  const isPendingRevocation = useMemo(() => {
+    return pendingRevocations.some(
+      (revocation) => revocation.permissionContext === permissionContext,
+    );
+  }, [pendingRevocations, permissionContext]);
+
   /**
    * Handles the click event for the expand/collapse button
    */
@@ -354,17 +364,28 @@ export const ReviewGatorPermissionItem = ({
           >
             {getURLHost(siteOrigin)}
           </Text>
-          <Box
-            flexDirection={BoxFlexDirection.Row}
-            justifyContent={BoxJustifyContent.End}
-            style={{ flex: '1', alignSelf: 'center', cursor: 'pointer' }}
-            gap={2}
+          <Button
             onClick={onRevokeClick}
+            disabled={isPendingRevocation}
+            style={{
+              backgroundColor: 'transparent',
+              border: 'none',
+              padding: 0,
+            }}
           >
-            <Text color={TextColor.ErrorDefault} variant={TextVariant.BodyMd}>
-              Revoke
+            <Text
+              color={
+                isPendingRevocation
+                  ? TextColor.TextMuted
+                  : TextColor.ErrorDefault
+              }
+              variant={TextVariant.BodyMd}
+            >
+              {isPendingRevocation
+                ? t('gatorPermissionsRevocationPending')
+                : t('gatorPermissionsRevoke')}
             </Text>
-          </Box>
+          </Button>
         </Box>
       </Box>
 

ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.test.tsx

@@ -16,6 +16,7 @@ import {
   AppState,
   getPermissionGroupMetaData,
   getPermissionMetaDataByOrigin,
+  getPendingRevocations,
 } from './gator-permissions';
 
 const MOCK_CHAIN_ID_MAINNET = '0x1' as Hex;
@@ -1502,4 +1503,27 @@ describe('Gator Permissions Selectors', () => {
       expect(result).toEqual([]);
     });
   });
+
+  describe('getPendingRevocations', () => {
+    it('should return the list of gator permissions pending a revocation transaction', () => {
+      const result = getPendingRevocations({
+        ...mockState,
+        metamask: {
+          ...mockState.metamask,
+          pendingRevocations: [
+            {
+              txId: '1',
+              permissionContext: '0x1',
+            },
+          ],
+        },
+      });
+      expect(result).toEqual([
+        {
+          txId: '1',
+          permissionContext: '0x1',
+        },
+      ]);
+    });
+  });
 });

ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.tsx

@@ -413,3 +413,14 @@ export const getAggregatedGatorPermissionByChainId = createSelector(
     }
   },
 );
+
+/**
+ * Get the list of gator permissions pending a revocation transaction.
+ *
+ * @param state - The current state
+ * @returns The list of gator permissions pending a revocation transaction
+ */
+export const getPendingRevocations = createSelector(
+  [getMetamask],
+  (metamask) => metamask.pendingRevocations,
+);