From 70e375a71bff7d95260ba28953cd8d0e40772d69 Mon Sep 17 00:00:00 2001 From: Idris Bowman <34751375+V00D00-child@users.noreply.github.com> Date: Thu, 21 Aug 2025 12:22:11 -0400 Subject: [PATCH 01/12] Add feature flag for gator permissions page --- builds.yml | 6 ++ .../gator-permissions-page.test.tsx | 12 +++ .../gator-permissions-page.tsx | 85 +++++++++++++++++++ ui/pages/routes/routes.component.test.js | 28 ++++++ ui/pages/routes/routes.component.tsx | 17 +++- 5 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx create mode 100644 ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx diff --git a/builds.yml b/builds.yml index 635d5a616727..4e2a1af82e2b 100644 --- a/builds.yml +++ b/builds.yml @@ -112,6 +112,9 @@ buildTypes: - APPLE_FLASK_CLIENT_ID - GOOGLE_CLIENT_ID_REF: GOOGLE_FLASK_CLIENT_ID - APPLE_CLIENT_ID_REF: APPLE_FLASK_CLIENT_ID + + # For testing gator permissions page + - GATOR_PERMISSIONS_PAGE: true isPrerelease: true manifestOverrides: ./app/build-types/flask/manifest/ buildNameOverride: MetaMask Flask @@ -331,6 +334,9 @@ env: - METAMASK_RAMP_API_CONTENT_BASE_URL: https://on-ramp-content.api.cx.metamask.io + # For testing gator permissions page + - GATOR_PERMISSIONS_PAGE: true + ### # Meta variables ### diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx new file mode 100644 index 000000000000..b606096c8d83 --- /dev/null +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import { GatorPermissionsPage } from './gator-permissions-page'; + +describe('Gator Permissions Page', () => { + describe('render', () => { + it('renders no connections message when user has no connections', () => { + const { getByTestId } = renderWithProvider(); + expect(getByTestId('no-connections')).toBeInTheDocument(); + }); + }); +}); diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx new file mode 100644 index 000000000000..db636059a106 --- /dev/null +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx @@ -0,0 +1,85 @@ +import React, { useRef } from 'react'; +import { useHistory } from 'react-router-dom'; +import { Content, Header, Page } from '../page'; +import { + Box, + ButtonIcon, + ButtonIconSize, + IconName, + Text, +} from '../../../component-library'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { + BackgroundColor, + BlockSize, + Color, + Display, + FlexDirection, + JustifyContent, + TextAlign, + TextColor, + TextVariant, +} from '../../../../helpers/constants/design-system'; +import { + DEFAULT_ROUTE, +} from '../../../../helpers/constants/routes'; + +export const GatorPermissionsPage = () => { + const t = useI18nContext(); + const history = useHistory(); + const headerRef = useRef(); + + return ( + +
history.push(DEFAULT_ROUTE)} + size={ButtonIconSize.Sm} + /> + } + > + + {t('permissions')} + +
+ + + + + {t('permissionsPageEmptyContent')} + + + {t('permissionsPageEmptySubContent')} + + + + + ); +}; diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js index fd84caf153d5..77c90c10f485 100644 --- a/ui/pages/routes/routes.component.test.js +++ b/ui/pages/routes/routes.component.test.js @@ -380,3 +380,31 @@ describe('toast display', () => { expect(toastContainer).toBeInTheDocument(); }); }); + +describe('Gator permissions page build-time feature flag', () => { + const originalEnv = process.env.GATOR_PERMISSIONS_PAGE; + + afterEach(() => { + // Restore original environment variable + if (originalEnv === undefined) { + delete process.env.PERMISSIONS_PAGE_V2; + } else { + process.env.PERMISSIONS_PAGE_V2 = originalEnv; + } + }); + + it('should use PermissionsPage when GATOR_PERMISSIONS_PAGE is not set to true', () => { + process.env.GATOR_PERMISSIONS_PAGE = 'false'; + expect(process.env.GATOR_PERMISSIONS_PAGE).toBe('false'); + }); + + it('should use PermissionsPageV2 when GATOR_PERMISSIONS_PAGE is set to true', () => { + process.env.GATOR_PERMISSIONS_PAGE = 'true'; + expect(process.env.GATOR_PERMISSIONS_PAGE).toBe('true'); + }); + + it('should default to PermissionsPage when GATOR_PERMISSIONS_PAGE is undefined', () => { + delete process.env.GATOR_PERMISSIONS_PAGE; + expect(process.env.GATOR_PERMISSIONS_PAGE).toBeUndefined(); + }); +}); diff --git a/ui/pages/routes/routes.component.tsx b/ui/pages/routes/routes.component.tsx index d1b52034dd04..5d39a0c13c84 100644 --- a/ui/pages/routes/routes.component.tsx +++ b/ui/pages/routes/routes.component.tsx @@ -266,6 +266,13 @@ const PermissionsPage = mmLazy( '../../components/multichain/pages/permissions-page/permissions-page.js' )) as unknown as DynamicImportType, ); +const GatorPermissionsPage = mmLazy( + // TODO: This is a named export. Fix incorrect type casting once `mmLazy` is updated to handle non-default export types. + (() => + import( + '../../components/multichain/pages/gator-permissions/gator-permissions-page.tsx' + )) as unknown as DynamicImportType, +); const Connections = mmLazy( // TODO: This is a named export. Fix incorrect type casting once `mmLazy` is updated to handle non-default export types. (() => @@ -582,7 +589,15 @@ export default function Routes() { path={`${CONNECTIONS}/:origin`} component={Connections} /> - + Date: Thu, 21 Aug 2025 12:30:01 -0400 Subject: [PATCH 02/12] Always make sure the feature flag is false --- builds.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/builds.yml b/builds.yml index 4e2a1af82e2b..68bf1b8dd45d 100644 --- a/builds.yml +++ b/builds.yml @@ -114,7 +114,7 @@ buildTypes: - APPLE_CLIENT_ID_REF: APPLE_FLASK_CLIENT_ID # For testing gator permissions page - - GATOR_PERMISSIONS_PAGE: true + - GATOR_PERMISSIONS_PAGE: false isPrerelease: true manifestOverrides: ./app/build-types/flask/manifest/ buildNameOverride: MetaMask Flask @@ -335,7 +335,7 @@ env: - METAMASK_RAMP_API_CONTENT_BASE_URL: https://on-ramp-content.api.cx.metamask.io # For testing gator permissions page - - GATOR_PERMISSIONS_PAGE: true + - GATOR_PERMISSIONS_PAGE: false ### # Meta variables From 6b86a4915d4c3e3f98e6a093ab4fd15497b7b9b7 Mon Sep 17 00:00:00 2001 From: Idris Bowman <34751375+V00D00-child@users.noreply.github.com> Date: Thu, 21 Aug 2025 12:43:10 -0400 Subject: [PATCH 03/12] Fix incorrect reset in afterEach test --- ui/pages/routes/routes.component.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js index 77c90c10f485..2f9d7f4f1e9c 100644 --- a/ui/pages/routes/routes.component.test.js +++ b/ui/pages/routes/routes.component.test.js @@ -387,9 +387,9 @@ describe('Gator permissions page build-time feature flag', () => { afterEach(() => { // Restore original environment variable if (originalEnv === undefined) { - delete process.env.PERMISSIONS_PAGE_V2; + delete process.env.GATOR_PERMISSIONS_PAGE; } else { - process.env.PERMISSIONS_PAGE_V2 = originalEnv; + process.env.GATOR_PERMISSIONS_PAGE = originalEnv; } }); From 3e4bbd436491985014ad950c3f7b7244a0a536c4 Mon Sep 17 00:00:00 2001 From: Idris Bowman <34751375+V00D00-child@users.noreply.github.com> Date: Thu, 21 Aug 2025 16:16:02 -0400 Subject: [PATCH 04/12] Fix lint error --- .../gator-permissions-page.tsx | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx index db636059a106..ba609e443b8c 100644 --- a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx @@ -20,9 +20,7 @@ import { TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; -import { - DEFAULT_ROUTE, -} from '../../../../helpers/constants/routes'; +import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; export const GatorPermissionsPage = () => { const t = useI18nContext(); @@ -55,30 +53,30 @@ export const GatorPermissionsPage = () => { + + {t('permissionsPageEmptyContent')} + + - - {t('permissionsPageEmptyContent')} - - - {t('permissionsPageEmptySubContent')} - - + {t('permissionsPageEmptySubContent')} + + ); From 9684fbfdc714dbf8ff262eb825a9a8feb2dd103a Mon Sep 17 00:00:00 2001 From: Idris Bowman <34751375+V00D00-child@users.noreply.github.com> Date: Fri, 22 Aug 2025 11:06:01 -0400 Subject: [PATCH 05/12] Fix lint errors in GatorPermissionsPage --- .../pages/gator-permissions/gator-permissions-page.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx index ba609e443b8c..458370393fa3 100644 --- a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React from 'react'; import { useHistory } from 'react-router-dom'; import { Content, Header, Page } from '../page'; import { @@ -8,11 +8,10 @@ import { IconName, Text, } from '../../../component-library'; -import { useI18nContext } from '../../../../hooks/useI18nContext'; import { + IconColor, BackgroundColor, BlockSize, - Color, Display, FlexDirection, JustifyContent, @@ -20,12 +19,12 @@ import { TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; export const GatorPermissionsPage = () => { const t = useI18nContext(); const history = useHistory(); - const headerRef = useRef(); return ( @@ -36,7 +35,7 @@ export const GatorPermissionsPage = () => { ariaLabel={t('back')} iconName={IconName.ArrowLeft} className="connections-header__start-accessory" - color={Color.iconDefault} + color={IconColor.iconDefault} onClick={() => history.push(DEFAULT_ROUTE)} size={ButtonIconSize.Sm} /> @@ -51,7 +50,6 @@ export const GatorPermissionsPage = () => { - Date: Thu, 21 Aug 2025 12:22:11 -0400 Subject: [PATCH 06/12] Add feature flag for gator permissions page --- builds.yml | 6 ++ .../gator-permissions-page.test.tsx | 12 +++ .../gator-permissions-page.tsx | 85 +++++++++++++++++++ ui/pages/routes/routes.component.test.js | 28 ++++++ ui/pages/routes/routes.component.tsx | 17 +++- 5 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx create mode 100644 ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx diff --git a/builds.yml b/builds.yml index 635d5a616727..4e2a1af82e2b 100644 --- a/builds.yml +++ b/builds.yml @@ -112,6 +112,9 @@ buildTypes: - APPLE_FLASK_CLIENT_ID - GOOGLE_CLIENT_ID_REF: GOOGLE_FLASK_CLIENT_ID - APPLE_CLIENT_ID_REF: APPLE_FLASK_CLIENT_ID + + # For testing gator permissions page + - GATOR_PERMISSIONS_PAGE: true isPrerelease: true manifestOverrides: ./app/build-types/flask/manifest/ buildNameOverride: MetaMask Flask @@ -331,6 +334,9 @@ env: - METAMASK_RAMP_API_CONTENT_BASE_URL: https://on-ramp-content.api.cx.metamask.io + # For testing gator permissions page + - GATOR_PERMISSIONS_PAGE: true + ### # Meta variables ### diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx new file mode 100644 index 000000000000..b606096c8d83 --- /dev/null +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import { GatorPermissionsPage } from './gator-permissions-page'; + +describe('Gator Permissions Page', () => { + describe('render', () => { + it('renders no connections message when user has no connections', () => { + const { getByTestId } = renderWithProvider(); + expect(getByTestId('no-connections')).toBeInTheDocument(); + }); + }); +}); diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx new file mode 100644 index 000000000000..db636059a106 --- /dev/null +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx @@ -0,0 +1,85 @@ +import React, { useRef } from 'react'; +import { useHistory } from 'react-router-dom'; +import { Content, Header, Page } from '../page'; +import { + Box, + ButtonIcon, + ButtonIconSize, + IconName, + Text, +} from '../../../component-library'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { + BackgroundColor, + BlockSize, + Color, + Display, + FlexDirection, + JustifyContent, + TextAlign, + TextColor, + TextVariant, +} from '../../../../helpers/constants/design-system'; +import { + DEFAULT_ROUTE, +} from '../../../../helpers/constants/routes'; + +export const GatorPermissionsPage = () => { + const t = useI18nContext(); + const history = useHistory(); + const headerRef = useRef(); + + return ( + +
history.push(DEFAULT_ROUTE)} + size={ButtonIconSize.Sm} + /> + } + > + + {t('permissions')} + +
+ + + + + {t('permissionsPageEmptyContent')} + + + {t('permissionsPageEmptySubContent')} + + + + + ); +}; diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js index fd84caf153d5..77c90c10f485 100644 --- a/ui/pages/routes/routes.component.test.js +++ b/ui/pages/routes/routes.component.test.js @@ -380,3 +380,31 @@ describe('toast display', () => { expect(toastContainer).toBeInTheDocument(); }); }); + +describe('Gator permissions page build-time feature flag', () => { + const originalEnv = process.env.GATOR_PERMISSIONS_PAGE; + + afterEach(() => { + // Restore original environment variable + if (originalEnv === undefined) { + delete process.env.PERMISSIONS_PAGE_V2; + } else { + process.env.PERMISSIONS_PAGE_V2 = originalEnv; + } + }); + + it('should use PermissionsPage when GATOR_PERMISSIONS_PAGE is not set to true', () => { + process.env.GATOR_PERMISSIONS_PAGE = 'false'; + expect(process.env.GATOR_PERMISSIONS_PAGE).toBe('false'); + }); + + it('should use PermissionsPageV2 when GATOR_PERMISSIONS_PAGE is set to true', () => { + process.env.GATOR_PERMISSIONS_PAGE = 'true'; + expect(process.env.GATOR_PERMISSIONS_PAGE).toBe('true'); + }); + + it('should default to PermissionsPage when GATOR_PERMISSIONS_PAGE is undefined', () => { + delete process.env.GATOR_PERMISSIONS_PAGE; + expect(process.env.GATOR_PERMISSIONS_PAGE).toBeUndefined(); + }); +}); diff --git a/ui/pages/routes/routes.component.tsx b/ui/pages/routes/routes.component.tsx index d1b52034dd04..5d39a0c13c84 100644 --- a/ui/pages/routes/routes.component.tsx +++ b/ui/pages/routes/routes.component.tsx @@ -266,6 +266,13 @@ const PermissionsPage = mmLazy( '../../components/multichain/pages/permissions-page/permissions-page.js' )) as unknown as DynamicImportType, ); +const GatorPermissionsPage = mmLazy( + // TODO: This is a named export. Fix incorrect type casting once `mmLazy` is updated to handle non-default export types. + (() => + import( + '../../components/multichain/pages/gator-permissions/gator-permissions-page.tsx' + )) as unknown as DynamicImportType, +); const Connections = mmLazy( // TODO: This is a named export. Fix incorrect type casting once `mmLazy` is updated to handle non-default export types. (() => @@ -582,7 +589,15 @@ export default function Routes() { path={`${CONNECTIONS}/:origin`} component={Connections} /> - + Date: Thu, 21 Aug 2025 12:30:01 -0400 Subject: [PATCH 07/12] Always make sure the feature flag is false --- builds.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/builds.yml b/builds.yml index 4e2a1af82e2b..68bf1b8dd45d 100644 --- a/builds.yml +++ b/builds.yml @@ -114,7 +114,7 @@ buildTypes: - APPLE_CLIENT_ID_REF: APPLE_FLASK_CLIENT_ID # For testing gator permissions page - - GATOR_PERMISSIONS_PAGE: true + - GATOR_PERMISSIONS_PAGE: false isPrerelease: true manifestOverrides: ./app/build-types/flask/manifest/ buildNameOverride: MetaMask Flask @@ -335,7 +335,7 @@ env: - METAMASK_RAMP_API_CONTENT_BASE_URL: https://on-ramp-content.api.cx.metamask.io # For testing gator permissions page - - GATOR_PERMISSIONS_PAGE: true + - GATOR_PERMISSIONS_PAGE: false ### # Meta variables From fa633bc53ffe9a5cc1ec376fe81f8ab04b20cadd Mon Sep 17 00:00:00 2001 From: Idris Bowman <34751375+V00D00-child@users.noreply.github.com> Date: Thu, 21 Aug 2025 12:43:10 -0400 Subject: [PATCH 08/12] Fix incorrect reset in afterEach test --- ui/pages/routes/routes.component.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js index 77c90c10f485..2f9d7f4f1e9c 100644 --- a/ui/pages/routes/routes.component.test.js +++ b/ui/pages/routes/routes.component.test.js @@ -387,9 +387,9 @@ describe('Gator permissions page build-time feature flag', () => { afterEach(() => { // Restore original environment variable if (originalEnv === undefined) { - delete process.env.PERMISSIONS_PAGE_V2; + delete process.env.GATOR_PERMISSIONS_PAGE; } else { - process.env.PERMISSIONS_PAGE_V2 = originalEnv; + process.env.GATOR_PERMISSIONS_PAGE = originalEnv; } }); From 8fe9420162bd288b2bdde2b22e8feeb3f405494e Mon Sep 17 00:00:00 2001 From: Idris Bowman <34751375+V00D00-child@users.noreply.github.com> Date: Thu, 21 Aug 2025 16:16:02 -0400 Subject: [PATCH 09/12] Fix lint error --- .../gator-permissions-page.tsx | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx index db636059a106..ba609e443b8c 100644 --- a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx @@ -20,9 +20,7 @@ import { TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; -import { - DEFAULT_ROUTE, -} from '../../../../helpers/constants/routes'; +import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; export const GatorPermissionsPage = () => { const t = useI18nContext(); @@ -55,30 +53,30 @@ export const GatorPermissionsPage = () => { + + {t('permissionsPageEmptyContent')} + + - - {t('permissionsPageEmptyContent')} - - - {t('permissionsPageEmptySubContent')} - - + {t('permissionsPageEmptySubContent')} + + ); From 1c143559687a342ccc75f1ef641ee9b69f46fd7a Mon Sep 17 00:00:00 2001 From: Idris Bowman <34751375+V00D00-child@users.noreply.github.com> Date: Fri, 22 Aug 2025 11:06:01 -0400 Subject: [PATCH 10/12] Fix lint errors in GatorPermissionsPage --- .../pages/gator-permissions/gator-permissions-page.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx index ba609e443b8c..458370393fa3 100644 --- a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React from 'react'; import { useHistory } from 'react-router-dom'; import { Content, Header, Page } from '../page'; import { @@ -8,11 +8,10 @@ import { IconName, Text, } from '../../../component-library'; -import { useI18nContext } from '../../../../hooks/useI18nContext'; import { + IconColor, BackgroundColor, BlockSize, - Color, Display, FlexDirection, JustifyContent, @@ -20,12 +19,12 @@ import { TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; export const GatorPermissionsPage = () => { const t = useI18nContext(); const history = useHistory(); - const headerRef = useRef(); return ( @@ -36,7 +35,7 @@ export const GatorPermissionsPage = () => { ariaLabel={t('back')} iconName={IconName.ArrowLeft} className="connections-header__start-accessory" - color={Color.iconDefault} + color={IconColor.iconDefault} onClick={() => history.push(DEFAULT_ROUTE)} size={ButtonIconSize.Sm} /> @@ -51,7 +50,6 @@ export const GatorPermissionsPage = () => { - Date: Fri, 22 Aug 2025 11:53:56 -0400 Subject: [PATCH 11/12] Use string values for GATOR_PERMISSIONS_PAGE feature flag --- builds.yml | 8 ++++---- ui/pages/routes/routes.component.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/builds.yml b/builds.yml index 68bf1b8dd45d..5b54f26acd4f 100644 --- a/builds.yml +++ b/builds.yml @@ -113,8 +113,8 @@ buildTypes: - GOOGLE_CLIENT_ID_REF: GOOGLE_FLASK_CLIENT_ID - APPLE_CLIENT_ID_REF: APPLE_FLASK_CLIENT_ID - # For testing gator permissions page - - GATOR_PERMISSIONS_PAGE: false + # Enables gator permissions page + - GATOR_PERMISSIONS_PAGE: 'false' isPrerelease: true manifestOverrides: ./app/build-types/flask/manifest/ buildNameOverride: MetaMask Flask @@ -334,8 +334,8 @@ env: - METAMASK_RAMP_API_CONTENT_BASE_URL: https://on-ramp-content.api.cx.metamask.io - # For testing gator permissions page - - GATOR_PERMISSIONS_PAGE: false + # Enables gator permissions page + - GATOR_PERMISSIONS_PAGE: 'false' ### # Meta variables diff --git a/ui/pages/routes/routes.component.tsx b/ui/pages/routes/routes.component.tsx index 5d39a0c13c84..d7748fa6454a 100644 --- a/ui/pages/routes/routes.component.tsx +++ b/ui/pages/routes/routes.component.tsx @@ -592,7 +592,7 @@ export default function Routes() { Date: Wed, 27 Aug 2025 16:10:56 -0400 Subject: [PATCH 12/12] Expose isGatorPermissionsFeatureEnabled function in shared modules --- builds.yml | 8 ++-- shared/modules/environment.test.ts | 19 +++++++- shared/modules/environment.ts | 9 ++++ .../gator-permissions-page.test.tsx | 4 +- .../gator-permissions-page.tsx | 44 ++++--------------- ui/pages/routes/routes.component.test.js | 28 ------------ ui/pages/routes/routes.component.tsx | 3 +- 7 files changed, 43 insertions(+), 72 deletions(-) diff --git a/builds.yml b/builds.yml index 5b54f26acd4f..acbf9a526179 100644 --- a/builds.yml +++ b/builds.yml @@ -113,8 +113,8 @@ buildTypes: - GOOGLE_CLIENT_ID_REF: GOOGLE_FLASK_CLIENT_ID - APPLE_CLIENT_ID_REF: APPLE_FLASK_CLIENT_ID - # Enables gator permissions page - - GATOR_PERMISSIONS_PAGE: 'false' + # Enables gator permissions feature + - GATOR_PERMISSIONS_ENABLED: false isPrerelease: true manifestOverrides: ./app/build-types/flask/manifest/ buildNameOverride: MetaMask Flask @@ -334,8 +334,8 @@ env: - METAMASK_RAMP_API_CONTENT_BASE_URL: https://on-ramp-content.api.cx.metamask.io - # Enables gator permissions page - - GATOR_PERMISSIONS_PAGE: 'false' + # Enables gator permissions feature + - GATOR_PERMISSIONS_ENABLED: false ### # Meta variables diff --git a/shared/modules/environment.test.ts b/shared/modules/environment.test.ts index a6d8128cc764..c8494f045abc 100644 --- a/shared/modules/environment.test.ts +++ b/shared/modules/environment.test.ts @@ -1,5 +1,5 @@ import { ENVIRONMENT } from '../../development/build/constants'; -import { isProduction } from './environment'; +import { isGatorPermissionsFeatureEnabled, isProduction } from './environment'; describe('isProduction', () => { let originalMetaMaskEnvironment: string | undefined; @@ -27,3 +27,20 @@ describe('isProduction', () => { expect(isProduction()).toBe(false); }); }); + +describe('isGatorPermissionsFeatureEnabled', () => { + it('should return true when GATOR_PERMISSIONS_ENABLED is "true"', () => { + process.env.GATOR_PERMISSIONS_ENABLED = 'true'; + expect(isGatorPermissionsFeatureEnabled()).toBe(true); + }); + + it('should return false when GATOR_PERMISSIONS_ENABLED is "false"', () => { + process.env.GATOR_PERMISSIONS_ENABLED = 'false'; + expect(isGatorPermissionsFeatureEnabled()).toBe(false); + }); + + it('should return false when GATOR_PERMISSIONS_ENABLED is undefined', () => { + delete process.env.GATOR_PERMISSIONS_ENABLED; + expect(isGatorPermissionsFeatureEnabled()).toBe(false); + }); +}); diff --git a/shared/modules/environment.ts b/shared/modules/environment.ts index 4efcbbd0fa4b..133f749c5886 100644 --- a/shared/modules/environment.ts +++ b/shared/modules/environment.ts @@ -10,3 +10,12 @@ export const isProduction = (): boolean => { export const getIsSeedlessOnboardingFeatureEnabled = (): boolean => { return process.env.SEEDLESS_ONBOARDING_ENABLED?.toString() === 'true'; }; + +/** + * Returns true if the gator permissions feature is enabled + * + * @returns true if the gator permissions feature is enabled, false otherwise + */ +export const isGatorPermissionsFeatureEnabled = (): boolean => { + return process.env.GATOR_PERMISSIONS_ENABLED?.toString() === 'true'; +}; diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx index b606096c8d83..80b8f60242f2 100644 --- a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.test.tsx @@ -4,9 +4,9 @@ import { GatorPermissionsPage } from './gator-permissions-page'; describe('Gator Permissions Page', () => { describe('render', () => { - it('renders no connections message when user has no connections', () => { + it('renders Gator Permissions page title', () => { const { getByTestId } = renderWithProvider(); - expect(getByTestId('no-connections')).toBeInTheDocument(); + expect(getByTestId('gator-permissions-page-title')).toBeInTheDocument(); }); }); }); diff --git a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx index 458370393fa3..0a47f807a84a 100644 --- a/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx +++ b/ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; -import { Content, Header, Page } from '../page'; +import { Header, Page } from '../page'; import { - Box, ButtonIcon, ButtonIconSize, IconName, @@ -11,12 +10,7 @@ import { import { IconColor, BackgroundColor, - BlockSize, - Display, - FlexDirection, - JustifyContent, TextAlign, - TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; import { useI18nContext } from '../../../../hooks/useI18nContext'; @@ -27,7 +21,11 @@ export const GatorPermissionsPage = () => { const history = useHistory(); return ( - +
{ as="span" variant={TextVariant.headingMd} textAlign={TextAlign.Center} + data-testid="gator-permissions-page-title" > - {t('permissions')} + Gator Permissions
- - - - {t('permissionsPageEmptyContent')} - - - {t('permissionsPageEmptySubContent')} - - - ); }; diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js index 2f9d7f4f1e9c..fd84caf153d5 100644 --- a/ui/pages/routes/routes.component.test.js +++ b/ui/pages/routes/routes.component.test.js @@ -380,31 +380,3 @@ describe('toast display', () => { expect(toastContainer).toBeInTheDocument(); }); }); - -describe('Gator permissions page build-time feature flag', () => { - const originalEnv = process.env.GATOR_PERMISSIONS_PAGE; - - afterEach(() => { - // Restore original environment variable - if (originalEnv === undefined) { - delete process.env.GATOR_PERMISSIONS_PAGE; - } else { - process.env.GATOR_PERMISSIONS_PAGE = originalEnv; - } - }); - - it('should use PermissionsPage when GATOR_PERMISSIONS_PAGE is not set to true', () => { - process.env.GATOR_PERMISSIONS_PAGE = 'false'; - expect(process.env.GATOR_PERMISSIONS_PAGE).toBe('false'); - }); - - it('should use PermissionsPageV2 when GATOR_PERMISSIONS_PAGE is set to true', () => { - process.env.GATOR_PERMISSIONS_PAGE = 'true'; - expect(process.env.GATOR_PERMISSIONS_PAGE).toBe('true'); - }); - - it('should default to PermissionsPage when GATOR_PERMISSIONS_PAGE is undefined', () => { - delete process.env.GATOR_PERMISSIONS_PAGE; - expect(process.env.GATOR_PERMISSIONS_PAGE).toBeUndefined(); - }); -}); diff --git a/ui/pages/routes/routes.component.tsx b/ui/pages/routes/routes.component.tsx index d7748fa6454a..4c928c4e417d 100644 --- a/ui/pages/routes/routes.component.tsx +++ b/ui/pages/routes/routes.component.tsx @@ -142,6 +142,7 @@ import { SmartAccountUpdate } from '../confirmations/components/confirm/smart-ac import { MultichainAccountDetails } from '../multichain-accounts/account-details'; import { AddressQRCode } from '../multichain-accounts/address-qr-code'; import { AccountList } from '../multichain-accounts/account-list'; +import { isGatorPermissionsFeatureEnabled } from '../../../shared/modules/environment'; import { getConnectingLabel, hideAppHeader, @@ -592,7 +593,7 @@ export default function Routes() {