feat: Add feature flag for gator permissions page

builds.yml

@@ -107,6 +107,9 @@ buildTypes:
       - APPLE_FLASK_CLIENT_ID
       - GOOGLE_CLIENT_ID_REF: GOOGLE_FLASK_CLIENT_ID
       - APPLE_CLIENT_ID_REF: APPLE_FLASK_CLIENT_ID
+
+      # Enables gator permissions feature
+      - GATOR_PERMISSIONS_ENABLED: false
     isPrerelease: true
     manifestOverrides: ./app/build-types/flask/manifest/
     buildNameOverride: MetaMask Flask
@@ -325,6 +328,9 @@ env:
 
   - METAMASK_RAMP_API_CONTENT_BASE_URL: https://on-ramp-content.api.cx.metamask.io
 
+  # Enables gator permissions feature
+  - GATOR_PERMISSIONS_ENABLED: false
+
   ###
   # Meta variables
   ###

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);
+  });
+});

shared/modules/environment.ts

@@ -18,3 +18,7 @@ export const getIsMetaMaskShieldFeatureEnabled = (): boolean => {
 export const getIsSettingsPageDevOptionsEnabled = (): boolean => {
   return process.env.ENABLE_SETTINGS_PAGE_DEV_OPTIONS?.toString() === 'true';
 };
+
+export const isGatorPermissionsFeatureEnabled = (): boolean => {
+  return process.env.GATOR_PERMISSIONS_ENABLED?.toString() === 'true';
+};

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 Gator Permissions page title', () => {
+      const { getByTestId } = renderWithProvider(<GatorPermissionsPage />);
+      expect(getByTestId('gator-permissions-page-title')).toBeInTheDocument();
+    });
+  });
+});

ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Header, Page } from '../page';
+import {
+  ButtonIcon,
+  ButtonIconSize,
+  IconName,
+  Text,
+} from '../../../component-library';
+import {
+  IconColor,
+  BackgroundColor,
+  TextAlign,
+  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();
+
+  return (
+    <Page
+      className="main-container"
+      data-testid="gator-permissions-page"
+      key="gator-permissions-page"
+    >
+      <Header
+        backgroundColor={BackgroundColor.backgroundDefault}
+        startAccessory={
+          <ButtonIcon
+            ariaLabel={t('back')}
+            iconName={IconName.ArrowLeft}
+            className="connections-header__start-accessory"
+            color={IconColor.iconDefault}
+            onClick={() => history.push(DEFAULT_ROUTE)}
+            size={ButtonIconSize.Sm}
+          />
+        }
+      >
+        <Text
+          as="span"
+          variant={TextVariant.headingMd}
+          textAlign={TextAlign.Center}
+          data-testid="gator-permissions-page-title"
+        >
+          Gator Permissions
+        </Text>
+      </Header>
+    </Page>
+  );
+};

ui/pages/routes/routes.component.tsx

@@ -148,6 +148,7 @@ import { MultichainAccountAddressListPage } from '../multichain-accounts/multich
 import { AccountList } from '../multichain-accounts/account-list';
 import { AddWalletPage } from '../multichain-accounts/add-wallet-page';
 import { WalletDetailsPage } from '../multichain-accounts/wallet-details-page';
+import { isGatorPermissionsFeatureEnabled } from '../../../shared/modules/environment';
 import {
   getConnectingLabel,
   hideAppHeader,
@@ -272,6 +273,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.
   (() =>
@@ -588,7 +596,15 @@ export default function Routes() {
             path={`${CONNECTIONS}/:origin`}
             component={Connections}
           />
-          <Authenticated path={PERMISSIONS} component={PermissionsPage} exact />
+          <Authenticated
+            path={PERMISSIONS}
+            component={
+              isGatorPermissionsFeatureEnabled()
+                ? GatorPermissionsPage
+                : PermissionsPage
+            }
+            exact
+          />
           <Authenticated
             path={`${REVIEW_PERMISSIONS}/:origin`}
             component={ReviewPermissions}