feat: Adding delete metametrics data to security and privacy tab

privacy-snapshot.json

@@ -33,6 +33,7 @@
   "mainnet.infura.io",
   "metamask.eth",
   "metamask.github.io",
+  "metametrics.metamask.test",
   "min-api.cryptocompare.com",
   "nft.api.cx.metamask.io",
   "oidc.api.cx.metamask.io",
@@ -42,6 +43,7 @@
   "portfolio.metamask.io",
   "price.api.cx.metamask.io",
   "proxy.api.cx.metamask.io",
+  "proxy.dev-api.cx.metamask.io",
   "raw.githubusercontent.com",
   "registry.npmjs.org",
   "responsive-rpc.test",

shared/constants/metametrics.ts

@@ -536,6 +536,7 @@ export enum MetaMetricsEventName {
   EncryptionPublicKeyApproved = 'Encryption Approved',
   EncryptionPublicKeyRejected = 'Encryption Rejected',
   EncryptionPublicKeyRequested = 'Encryption Requested',
+  ErrorOccured = 'Error occured',
   ExternalLinkClicked = 'External Link Clicked',
   KeyExportSelected = 'Key Export Selected',
   KeyExportRequested = 'Key Export Requested',
@@ -552,6 +553,7 @@ export enum MetaMetricsEventName {
   MarkAllNotificationsRead = 'Notifications Marked All as Read',
   MetricsOptIn = 'Metrics Opt In',
   MetricsOptOut = 'Metrics Opt Out',
+  MetricsDataDeletionRequest = 'Delete MetaMetrics Data Request Submitted',
   NavAccountMenuOpened = 'Account Menu Opened',
   NavConnectedSitesOpened = 'Connected Sites Opened',
   NavMainMenuOpened = 'Main Menu Opened',

test/e2e/tests/metrics/delete-metametrics-data.spec.ts

@@ -0,0 +1,246 @@
+import { strict as assert } from 'assert';
+import { MockedEndpoint, Mockttp } from 'mockttp';
+import { Suite } from 'mocha';
+import {
+  defaultGanacheOptions,
+  withFixtures,
+  getEventPayloads,
+  unlockWallet,
+} from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import { Driver } from '../../webdriver/driver';
+import { TestSuiteArguments } from '../confirmations/transactions/shared';
+import { WebElementWithWaitForElementState } from '../../webdriver/types';
+
+const selectors = {
+  accountOptionsMenuButton: '[data-testid="account-options-menu-button"]',
+  globalMenuSettingsButton: '[data-testid="global-menu-settings"]',
+  securityAndPrivacySettings: { text: 'Security & privacy', tag: 'div' },
+  experimentalSettings: { text: 'Experimental', tag: 'div' },
+  deletMetaMetricsSettings: '[data-testid="delete-metametrics-data-button"]',
+  deleteMetaMetricsDataButton: {
+    text: 'Delete MetaMetrics data',
+    tag: 'button',
+  },
+  clearButton: { text: 'Clear', tag: 'button' },
+  backButton: '[data-testid="settings-back-button"]',
+};
+
+/**
+ * mocks the segment api multiple times for specific payloads that we expect to
+ * see when these tests are run. In this case we are looking for
+ * 'Permissions Requested' and 'Permissions Received'. Do not use the constants
+ * from the metrics constants files, because if these change we want a strong
+ * indicator to our data team that the shape of data will change.
+ *
+ * @param mockServer
+ * @returns
+ */
+const mockSegment = async (mockServer: Mockttp) => {
+  return [
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [
+          { type: 'track', event: 'Delete MetaMetrics Data Request Submitted' },
+        ],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+    await mockServer
+      .forPost('https://metametrics.metamask.test/regulations/sources/test')
+      .withHeaders({ 'Content-Type': 'application/vnd.segment.v1+json' })
+      .withBodyIncluding(
+        JSON.stringify({
+          regulationType: 'DELETE_ONLY',
+          subjectType: 'USER_ID',
+          subjectIds: ['fake-metrics-id'],
+        }),
+      )
+      .thenCallback(() => ({
+        statusCode: 200,
+        json: { data: { regulateId: 'fake-delete-regulation-id' } },
+      })),
+    await mockServer
+      .forGet(
+        'https://metametrics.metamask.test/regulations/fake-delete-regulation-id',
+      )
+      .withHeaders({ 'Content-Type': 'application/vnd.segment.v1+json' })
+      .thenCallback(() => ({
+        statusCode: 200,
+        json: {
+          data: {
+            regulation: {
+              overallStatus: 'FINISHED',
+            },
+          },
+        },
+      })),
+  ];
+};
+/**
+ * Scenarios:
+ * 1. Deletion while Metrics is Opted in.
+ * 2. Deletion while Metrics is Opted out.
+ * 3. Deletion when user never opted for metrics.
+ */
+describe('Delete MetaMetrics Data @no-mmi', function (this: Suite) {
+  it('while user has opted in for metrics tracking', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withMetaMetricsController({
+            metaMetricsId: 'fake-metrics-id',
+            participateInMetaMetrics: true,
+          })
+          .build(),
+        defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+        testSpecificMock: mockSegment,
+      },
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: TestSuiteArguments) => {
+        await unlockWallet(driver);
+
+        await driver.clickElement(selectors.accountOptionsMenuButton);
+        await driver.clickElement(selectors.globalMenuSettingsButton);
+        await driver.clickElement(selectors.securityAndPrivacySettings);
+
+        await driver.findElement(selectors.deletMetaMetricsSettings);
+        await driver.clickElement(selectors.deleteMetaMetricsDataButton);
+
+        // there is a race condition, where we need to wait before clicking clear button otherwise an error is thrown in the background
+        // we cannot wait for a UI conditon, so we a delay to mitigate this until another solution is found
+        await driver.delay(3000);
+        await driver.clickElementAndWaitToDisappear(selectors.clearButton);
+
+        const deleteMetaMetricsDataButton = await driver.findElement(
+          selectors.deleteMetaMetricsDataButton,
+        );
+        await (
+          deleteMetaMetricsDataButton as WebElementWithWaitForElementState
+        ).waitForElementState('disabled');
+
+        const events = await getEventPayloads(
+          driver,
+          mockedEndpoints as MockedEndpoint[],
+        );
+        assert.equal(events.length, 3);
+        assert.deepStrictEqual(events[0].properties, {
+          category: 'Settings',
+          locale: 'en',
+          chain_id: '0x539',
+          environment_type: 'fullscreen',
+        });
+
+        await driver.clickElementAndWaitToDisappear(
+          '.mm-box button[aria-label="Close"]',
+        );
+        await driver.clickElement(selectors.accountOptionsMenuButton);
+        await driver.clickElement(selectors.globalMenuSettingsButton);
+        await driver.clickElement(selectors.securityAndPrivacySettings);
+
+        const deleteMetaMetricsDataButtonRefreshed =
+          await driver.findClickableElement(
+            selectors.deleteMetaMetricsDataButton,
+          );
+        assert.equal(
+          await deleteMetaMetricsDataButtonRefreshed.isEnabled(),
+          true,
+          'Delete MetaMetrics data button is enabled',
+        );
+      },
+    );
+  });
+  it('while user has opted out for metrics tracking', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withMetaMetricsController({
+            metaMetricsId: 'fake-metrics-id',
+          })
+          .build(),
+        defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+        testSpecificMock: mockSegment,
+      },
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: TestSuiteArguments) => {
+        await unlockWallet(driver);
+
+        await driver.clickElement(selectors.accountOptionsMenuButton);
+        await driver.clickElement(selectors.globalMenuSettingsButton);
+        await driver.clickElement(selectors.securityAndPrivacySettings);
+
+        await driver.findElement(selectors.deletMetaMetricsSettings);
+        await driver.clickElement(selectors.deleteMetaMetricsDataButton);
+
+        // there is a race condition, where we need to wait before clicking clear button otherwise an error is thrown in the background
+        // we cannot wait for a UI conditon, so we a delay to mitigate this until another solution is found
+        await driver.delay(3000);
+        await driver.clickElementAndWaitToDisappear(selectors.clearButton);
+
+        const deleteMetaMetricsDataButton = await driver.findElement(
+          selectors.deleteMetaMetricsDataButton,
+        );
+        await (
+          deleteMetaMetricsDataButton as WebElementWithWaitForElementState
+        ).waitForElementState('disabled');
+
+        const events = await getEventPayloads(
+          driver,
+          mockedEndpoints as MockedEndpoint[],
+        );
+        assert.equal(events.length, 2);
+
+        await driver.clickElementAndWaitToDisappear(
+          '.mm-box button[aria-label="Close"]',
+        );
+        await driver.clickElement(selectors.accountOptionsMenuButton);
+        await driver.clickElement(selectors.globalMenuSettingsButton);
+        await driver.clickElement(selectors.securityAndPrivacySettings);
+
+        const deleteMetaMetricsDataButtonRefreshed = await driver.findElement(
+          selectors.deleteMetaMetricsDataButton,
+        );
+        await (
+          deleteMetaMetricsDataButtonRefreshed as WebElementWithWaitForElementState
+        ).waitForElementState('disabled');
+      },
+    );
+  });
+  it('when the user has never opted in for metrics', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+        testSpecificMock: mockSegment,
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+
+        await driver.clickElement(selectors.accountOptionsMenuButton);
+        await driver.clickElement(selectors.globalMenuSettingsButton);
+        await driver.clickElement(selectors.securityAndPrivacySettings);
+        await driver.findElement(selectors.deletMetaMetricsSettings);
+
+        const deleteMetaMetricsDataButton = await driver.findElement(
+          selectors.deleteMetaMetricsDataButton,
+        );
+        assert.equal(
+          await deleteMetaMetricsDataButton.isEnabled(),
+          false,
+          'Delete MetaMetrics data button is disabled',
+        );
+      },
+    );
+  });
+});

test/e2e/webdriver/driver.js

@@ -63,6 +63,8 @@ function wrapElementWithAPI(element, driver) {
         return await driver.wait(until.stalenessOf(element), timeout);
       case 'visible':
         return await driver.wait(until.elementIsVisible(element), timeout);
+      case 'disabled':
+        return await driver.wait(until.elementIsDisabled(element), timeout);
       default:
         throw new Error(`Provided state: '${state}' is not supported`);
     }

test/e2e/webdriver/types.ts

@@ -0,0 +1,5 @@
+import { WebElement, WebElementPromise } from 'selenium-webdriver';
+
+export type WebElementWithWaitForElementState = WebElement & {
+  waitForElementState: (state: unknown, timeout?: unknown) => WebElementPromise;
+};

ui/components/app/clear-metametrics-data/clear-metametrics-data.test.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { fireEvent } from '@testing-library/react';
+import configureStore from '../../../store/store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import * as Actions from '../../../store/actions';
+import { DELETE_METAMETRICS_DATA_MODAL_CLOSE } from '../../../store/actionConstants';
+import ClearMetaMetricsData from './clear-metametrics-data';
+
+const mockCloseDeleteMetaMetricsDataModal = jest.fn().mockImplementation(() => {
+  return {
+    type: DELETE_METAMETRICS_DATA_MODAL_CLOSE,
+  };
+});
+
+jest.mock('../../../store/actions', () => ({
+  createMetaMetricsDataDeletionTask: jest.fn(),
+}));
+
+jest.mock('../../../ducks/app/app.ts', () => {
+  return {
+    hideDeleteMetaMetricsDataModal: () => {
+      return mockCloseDeleteMetaMetricsDataModal();
+    },
+  };
+});
+
+describe('ClearMetaMetricsData', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the data deletion error modal', async () => {
+    const store = configureStore({});
+    const { getByText } = renderWithProvider(<ClearMetaMetricsData />, store);
+
+    expect(getByText('Delete MetaMetrics data?')).toBeInTheDocument();
+    expect(
+      getByText(
+        'We are about to remove all your MetaMetrics data. Are you sure?',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should call createMetaMetricsDataDeletionTask when Clear button is clicked', () => {
+    const store = configureStore({});
+    const { getByText } = renderWithProvider(<ClearMetaMetricsData />, store);
+    expect(getByText('Clear')).toBeEnabled();
+    fireEvent.click(getByText('Clear'));
+    expect(Actions.createMetaMetricsDataDeletionTask).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call hideDeleteMetaMetricsDataModal when Cancel button is clicked', () => {
+    const store = configureStore({});
+    const { getByText } = renderWithProvider(<ClearMetaMetricsData />, store);
+    expect(getByText('Cancel')).toBeEnabled();
+    fireEvent.click(getByText('Cancel'));
+    expect(mockCloseDeleteMetaMetricsDataModal).toHaveBeenCalledTimes(1);
+  });
+});