feat(27255): allow local modification for remote feature flags

.gitignore

@@ -52,6 +52,9 @@ notes.txt
 .metamaskrc
 .metamaskprodrc
 
+# Manifest customizated configuration
+.manifest-flags.json
+
 # Test results
 test-results/
 

.manifest-flags.json.dist

@@ -0,0 +1,5 @@
+  // This configuration file is used to manage values passing to _flags that will be injected into manifest.json
+{
+  "remoteFeatureFlags": {
+  }
+}

README.md

@@ -56,6 +56,17 @@ If you are not a MetaMask Internal Developer, or are otherwise developing on a f
   - If debugging MetaMetrics, you'll need to add a value for `SEGMENT_WRITE_KEY` [Segment write key](https://segment.com/docs/connections/find-writekey/), see [Developing on MetaMask - Segment](./development/README.md#segment).
   - If debugging unhandled exceptions, you'll need to add a value for `SENTRY_DSN` [Sentry Dsn](https://docs.sentry.io/product/sentry-basics/dsn-explainer/), see [Developing on MetaMask - Sentry](./development/README.md#sentry).
   - Optionally, replace the `PASSWORD` value with your development wallet password to avoid entering it each time you open the app.
+- Duplicate `manifest-flags.json.dist` within the root and rename it to `manifest-flags.json` by running `cp .manifest-flags.json{.dist,}`. This file is used to add flags to `.manifest.json` build files for the extension. You can add flags to the file to be used in the build process, for example:
+  ```json
+  {
+    "remoteFeatureFlags": {
+      "testFlagForThreshold": {
+        "name": "test-flag",
+        "value": "test-value"
+      }
+    }
+  }
+  ```
 - Run `yarn install` to install the dependencies.
 - Build the project to the `./dist/` folder with `yarn dist` (for Chromium-based browsers) or `yarn dist:mv2` (for Firefox)
 

app/scripts/lib/setupSentry.js

@@ -3,8 +3,8 @@ import * as Sentry from '@sentry/browser';
 import { logger } from '@sentry/utils';
 import browser from 'webextension-polyfill';
 import { isManifestV3 } from '../../../shared/modules/mv3.utils';
+import { getManifestFlags } from '../../../shared/lib/manifestFlags';
 import extractEthjsErrorMessage from './extractEthjsErrorMessage';
-import { getManifestFlags } from './manifestFlags';
 import { filterEvents } from './sentry-filter-events';
 
 const projectLogger = createProjectLogger('sentry');

development/build/manifest.js

@@ -18,6 +18,29 @@ const { getEnvironment, getBuildName } = require('./utils');
 
 module.exports = createManifestTasks;
 
+async function loadManifestFlags() {
+  try {
+    return JSON.parse(
+      await fs.readFile(
+        path.join(__dirname, '../../.manifest-flags.json'),
+        'utf8',
+      ),
+    );
+  } catch (error) {
+    return { remoteFeatureFlags: {} };
+  }
+}
+
+// Initialize with default value
+let manifestFlags = { remoteFeatureFlags: {} };
+
+// Load flags asynchronously
+loadManifestFlags().then((flags) => {
+  manifestFlags = flags;
+});
+
+module.exports = createManifestTasks;
+
 function createManifestTasks({
   browserPlatforms,
   browserVersionMap,
@@ -47,8 +70,10 @@ function createManifestTasks({
           browserVersionMap[platform],
           await getBuildModifications(buildType, platform),
           customArrayMerge,
+          {
+            _flags: manifestFlags,
+          },
         );
-
         modifyNameAndDescForNonProd(result);
 
         const dir = path.join('.', 'dist', platform);

development/lib/get-manifest-flag.ts

@@ -6,7 +6,7 @@ import { exec as callbackExec } from 'node:child_process';
 import { hasProperty } from '@metamask/utils';
 import { merge } from 'lodash';
 
-import type { ManifestFlags } from '../../app/scripts/lib/manifestFlags';
+import type { ManifestFlags } from '../../shared/lib/manifestFlags';
 
 const exec = promisify(callbackExec);
 const PR_BODY_FILEPATH = path.resolve(

development/webpack/test/plugins.ManifestPlugin.test.ts

@@ -232,7 +232,7 @@ describe('ManifestPlugin', () => {
       function runTest(baseManifest: Combination<typeof manifestMatrix>) {
         const manifest = baseManifest as unknown as chrome.runtime.Manifest;
         const hasTabsPermission = (manifest.permissions || []).includes('tabs');
-        const transform = transformManifest(args);
+        const transform = transformManifest(args, false);
 
         if (args.test && hasTabsPermission) {
           it("throws in test mode when manifest already contains 'tabs' permission", () => {

development/webpack/test/webpack.config.test.ts

@@ -78,7 +78,7 @@ ${Object.entries(env)
   }
 
   it('should have the correct defaults', () => {
-    const config: Configuration = getWebpackConfig();
+    const config: Configuration = getWebpackConfig([]);
     // check that options are valid
     const { options } = webpack(config);
     assert.strictEqual(options.name, 'MetaMask – development');
@@ -163,6 +163,9 @@ ${Object.entries(env)
         manifest_version: 3,
         name: 'name',
         version: '1.2.3',
+        _flags: {
+          remoteFeatureFlags: {},
+        },
         content_scripts: [
           {
             js: ['scripts/contentscript.js', 'scripts/inpage.js'],
@@ -191,6 +194,7 @@ ${Object.entries(env)
         '--no-progress',
         '--no-cache',
         '--zip',
+        '--test',
         ...removeUnsupportedFeatures,
       ],
       {
@@ -231,7 +235,7 @@ ${Object.entries(env)
     assert.deepStrictEqual(manifestPlugin.options.description, null);
     assert.deepStrictEqual(manifestPlugin.options.zip, true);
     assert(manifestPlugin.options.zipOptions, 'Zip options should be present');
-    assert.strictEqual(manifestPlugin.options.transform, undefined);
+    assert.notEqual(manifestPlugin.options.transform, undefined);
 
     const progressPlugin = instance.options.plugins.find(
       (plugin) => plugin && plugin.constructor.name === 'ProgressPlugin',

development/webpack/utils/plugins/ManifestPlugin/helpers.ts

@@ -1,3 +1,10 @@
+let manifestFlags: { remoteFeatureFlags: Record<string, unknown> };
+try {
+  manifestFlags = require('../../../../../.manifest-flags.json');
+} catch (error) {
+  manifestFlags = { remoteFeatureFlags: {} };
+}
+
 /**
  * Returns a function that will transform a manifest JSON object based on the
  * given build args.
@@ -9,11 +16,15 @@
  * @param args
  * @param args.lockdown
  * @param args.test
+ * @param isDevelopment
  * @returns a function that will transform the manifest JSON object
  * @throws an error if the manifest already contains the "tabs" permission and
  * `test` is `true`
  */
-export function transformManifest(args: { lockdown: boolean; test: boolean }) {
+export function transformManifest(
+  args: { lockdown: boolean; test: boolean },
+  isDevelopment: boolean,
+) {
   const transforms: ((manifest: chrome.runtime.Manifest) => void)[] = [];
 
   function removeLockdown(browserManifest: chrome.runtime.Manifest) {
@@ -29,6 +40,20 @@ export function transformManifest(args: { lockdown: boolean; test: boolean }) {
     transforms.push(removeLockdown);
   }
 
+  /**
+   * This function sets predefined flags in the manifest's _flags property.
+   *
+   * @param browserManifest - The Chrome extension manifest object to modify
+   */
+  function addManifestFlags(browserManifest: chrome.runtime.Manifest) {
+    browserManifest._flags = manifestFlags;
+  }
+
+  if (isDevelopment) {
+    // Add manifest flags only for development builds
+    transforms.push(addManifestFlags);
+  }
+
   function addTabsPermission(browserManifest: chrome.runtime.Manifest) {
     if (browserManifest.permissions) {
       if (browserManifest.permissions.includes('tabs')) {

development/webpack/webpack.config.ts

@@ -131,7 +131,7 @@ const plugins: WebpackPluginInstance[] = [
     version: version.version,
     versionName: version.versionName,
     browsers: args.browser,
-    transform: transformManifest(args),
+    transform: transformManifest(args, isDevelopment),
     zip: args.zip,
     ...(args.zip
       ? {

app/scripts/lib/manifestFlags.ts → shared/lib/manifestFlags.ts

@@ -60,6 +60,18 @@ export type ManifestFlags = {
      */
     forceEnable?: boolean;
   };
+  /**
+   * Feature flags to control business logic behavior
+   */
+  remoteFeatureFlags?: {
+    /**
+     * A test remote featureflag for threshold
+     */
+    testFlagForThreshold: {
+      name: string;
+      value: string;
+    };
+  };
 };
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions -- you can't extend a type, we want this to be an interface

test/e2e/constants.ts

@@ -87,3 +87,21 @@ export enum ACCOUNT_TYPE {
 /* Meta metricsId generated by generateMetaMetricsId */
 export const MOCK_META_METRICS_ID =
   '0x86bacb9b2bf9a7e8d2b147eadb95ac9aaa26842327cd24afc8bd4b3c1d136420';
+
+/* Mock remote feature flags response */
+export const MOCK_REMOTE_FEATURE_FLAGS_RESPONSE = {
+  feature1: true,
+  feature2: false,
+  feature3: {
+    name: 'groupC',
+    value: 'valueC',
+  },
+};
+
+/* Mock customized remote feature flags response*/
+export const MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS = {
+  feature3: {
+    name: 'groupA',
+    value: 'valueA',
+  },
+};

test/e2e/page-objects/pages/developer-options-page.ts

@@ -1,4 +1,9 @@
+import { strict as assert } from 'assert';
 import { Driver } from '../../webdriver/driver';
+import {
+  MOCK_REMOTE_FEATURE_FLAGS_RESPONSE,
+  MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS,
+} from '../../constants';
 
 class DevelopOptions {
   private readonly driver: Driver;
@@ -12,6 +17,9 @@ class DevelopOptions {
     css: 'h4',
   };
 
+  private readonly developerOptionsRemoteFeatureFlagsState: string =
+    '[data-testid="developer-options-remote-feature-flags"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -33,6 +41,21 @@ class DevelopOptions {
     console.log('Generate a page crash in Developer option page');
     await this.driver.clickElement(this.generatePageCrashButton);
   }
+
+  async validateRemoteFeatureFlagState(): Promise<void> {
+    console.log('Validate remote feature flags state in Developer option page');
+    const element = await this.driver.findElement(
+      this.developerOptionsRemoteFeatureFlagsState,
+    );
+    const remoteFeatureFlagsState = await element.getText();
+    assert.equal(
+      remoteFeatureFlagsState,
+      JSON.stringify({
+        ...MOCK_REMOTE_FEATURE_FLAGS_RESPONSE,
+        ...MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS,
+      }),
+    );
+  }
 }
 
 export default DevelopOptions;

test/e2e/set-manifest-flags.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import { merge } from 'lodash';
-import { ManifestFlags } from '../../app/scripts/lib/manifestFlags';
+import { ManifestFlags } from '../../shared/lib/manifestFlags';
 import { fetchManifestFlagsFromPRAndGit } from '../../development/lib/get-manifest-flag';
 
 export const folder = `dist/${process.env.SELENIUM_BROWSER}`;

test/e2e/tests/remote-feature-flag/remote-feature-flag.spec.ts

@@ -4,8 +4,14 @@ import { getCleanAppState, withFixtures } from '../../helpers';
 import FixtureBuilder from '../../fixture-builder';
 import { TestSuiteArguments } from '../confirmations/transactions/shared';
 import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
-import { MOCK_META_METRICS_ID } from '../../constants';
-import { MOCK_REMOTE_FEATURE_FLAGS_RESPONSE } from './mock-data';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import SettingsPage from '../../page-objects/pages/settings/settings-page';
+import DevelopOptions from '../../page-objects/pages/developer-options-page';
+import {
+  MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS,
+  MOCK_META_METRICS_ID,
+  MOCK_REMOTE_FEATURE_FLAGS_RESPONSE,
+} from '../../constants';
 
 describe('Remote feature flag', function (this: Suite) {
   it('should be fetched with threshold value when basic functionality toggle is on', async function () {
@@ -45,4 +51,33 @@ describe('Remote feature flag', function (this: Suite) {
       },
     );
   });
+
+  it('offers the option to pass into manifest file for developers along with original response', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withMetaMetricsController({
+            metaMetricsId: MOCK_META_METRICS_ID,
+            participateInMetaMetrics: true,
+          })
+          .build(),
+        manifestFlags: {
+          remoteFeatureFlags: MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS,
+        },
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: TestSuiteArguments) => {
+        await loginWithBalanceValidation(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        await headerNavbar.openSettingsPage();
+        const settingsPage = new SettingsPage(driver);
+        await settingsPage.check_pageIsLoaded();
+        await settingsPage.goToDevelopOptionSettings();
+
+        const developOptionsPage = new DevelopOptions(driver);
+        await developOptionsPage.check_pageIsLoaded();
+        await developOptionsPage.validateRemoteFeatureFlagState();
+      },
+    );
+  });
 });

ui/helpers/utils/mm-lazy.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line import/no-restricted-paths
-import { getManifestFlags } from '../../../app/scripts/lib/manifestFlags';
+import { getManifestFlags } from '../../../shared/lib/manifestFlags';
 import { endTrace, trace, TraceName } from '../../../shared/lib/trace';
 
 type DynamicImportType = () => Promise<{ default: React.ComponentType }>;

ui/pages/settings/developer-options-tab/__snapshots__/developer-options-tab.test.tsx.snap

@@ -10,6 +10,45 @@ exports[`Develop options tab should match snapshot 1`] = `
     >
       States
     </p>
+    <p
+      class="mm-box mm-text settings-page__security-tab-sub-header mm-text--body-md mm-box--padding-top-6 mm-box--color-text-alternative"
+    >
+      Current States
+    </p>
+    <div
+      class="settings-page__content-padded"
+    >
+      <div
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
+      >
+        <div
+          class="settings-page__content-item"
+        >
+          <span>
+            Remote feature flags
+          </span>
+          <div
+            class="settings-page__content-description"
+          >
+            The remote feature flags here by 
+            <b>
+              getRemoteFeatureFlags()
+            </b>
+             is retrieved from one of the following sources:
+            <br />
+            1) manifest-flags.json file 2) RemoteFeatureFlagsController
+            <br />
+            Modify the manifest-flags.json file will change the state locally.
+          </div>
+        </div>
+        <div
+          class="settings-page__content-description"
+          data-testid="developer-options-remote-feature-flags"
+        >
+          {"feature1":"value1"}
+        </div>
+      </div>
+    </div>
     <p
       class="mm-box mm-text settings-page__security-tab-sub-header mm-text--body-md mm-box--padding-top-6 mm-box--color-text-alternative"
     >