feat: disable metametrics when disabling basic functionality

ui/components/app/basic-configuration-modal/basic-configuration-modal.test.tsx

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { useLocation } from 'react-router-dom';
+import configureStore from '../../../store/store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import * as Actions from '../../../store/actions';
+import {
+  hideBasicFunctionalityModal,
+  onboardingToggleBasicFunctionalityOff,
+} from '../../../ducks/app/app';
+import { ONBOARDING_PRIVACY_SETTINGS_ROUTE } from '../../../helpers/constants/routes';
+import { BasicConfigurationModal } from './basic-configuration-modal';
+
+jest.mock('../../../store/actions', () => ({
+  setDataCollectionForMarketing: jest.fn(),
+  setParticipateInMetaMetrics: jest.fn(),
+  toggleExternalServices: jest.fn(),
+}));
+
+jest.mock('../../../ducks/app/app', () => ({
+  hideBasicFunctionalityModal: jest.fn(),
+  onboardingToggleBasicFunctionalityOff: jest.fn(),
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    ...actual,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn(),
+}));
+
+type StateOverrides<T extends boolean> = {
+  metamask: {
+    useExternalServices: T;
+  };
+};
+
+type ArrangeMocksParams<T extends boolean> = {
+  isOnboarding?: boolean;
+  stateOverrides?: StateOverrides<T>;
+};
+
+type ArrangeMocksReturn<T extends boolean> = {
+  toggleBasicFunctionalityButton: HTMLElement;
+  cancelButton: HTMLElement;
+  agreementCheckbox: T extends true ? HTMLElement : null;
+};
+
+const arrangeMocks = <T extends boolean>({
+  isOnboarding = false,
+  stateOverrides,
+}: ArrangeMocksParams<T> = {}): ArrangeMocksReturn<T> => {
+  jest.clearAllMocks();
+
+  (useLocation as jest.Mock).mockReturnValue({
+    pathname: isOnboarding
+      ? ONBOARDING_PRIVACY_SETTINGS_ROUTE
+      : '/any-other-path',
+  });
+
+  const store = configureStore({
+    ...stateOverrides,
+  });
+  const { getByTestId, getByTitle } = renderWithProvider(
+    <BasicConfigurationModal />,
+    store,
+  );
+
+  const agreementCheckbox = stateOverrides?.metamask.useExternalServices
+    ? getByTitle('basic-configuration-checkbox')
+    : null;
+  const toggleBasicFunctionalityButton = getByTestId(
+    'basic-configuration-modal-toggle-button',
+  );
+  const cancelButton = getByTestId('basic-configuration-modal-cancel-button');
+
+  return {
+    toggleBasicFunctionalityButton,
+    cancelButton,
+    agreementCheckbox,
+  } as ArrangeMocksReturn<T>;
+};
+
+describe('BasicConfigurationModal', () => {
+  it('should call hideBasicFunctionalityModal when the cancel button is clicked', () => {
+    const { cancelButton } = arrangeMocks();
+
+    expect(cancelButton).toBeEnabled();
+
+    fireEvent.click(cancelButton);
+
+    expect(hideBasicFunctionalityModal).toHaveBeenCalledTimes(1);
+  });
+
+  describe('during onboarding', () => {
+    it('should render the basic configuration modal', async () => {
+      const {
+        agreementCheckbox,
+        cancelButton,
+        toggleBasicFunctionalityButton,
+      } = arrangeMocks({
+        isOnboarding: true,
+        stateOverrides: {
+          metamask: {
+            useExternalServices: true,
+          },
+        },
+      });
+
+      expect(agreementCheckbox).toBeInTheDocument();
+      expect(cancelButton).toBeInTheDocument();
+      expect(toggleBasicFunctionalityButton).toBeInTheDocument();
+    });
+
+    it('should call appropriate actions when the turn off button is clicked', () => {
+      const { agreementCheckbox, toggleBasicFunctionalityButton } =
+        arrangeMocks({
+          isOnboarding: true,
+          stateOverrides: {
+            metamask: {
+              useExternalServices: true,
+            },
+          },
+        });
+
+      fireEvent.click(agreementCheckbox, {
+        target: { checked: true },
+      });
+
+      expect(toggleBasicFunctionalityButton).toBeEnabled();
+
+      fireEvent.click(toggleBasicFunctionalityButton);
+
+      expect(hideBasicFunctionalityModal).toHaveBeenCalledTimes(1);
+      expect(onboardingToggleBasicFunctionalityOff).toHaveBeenCalledTimes(1);
+      expect(Actions.setParticipateInMetaMetrics).toHaveBeenCalledTimes(1);
+      expect(Actions.setParticipateInMetaMetrics).toHaveBeenCalledWith(false);
+      expect(Actions.setDataCollectionForMarketing).toHaveBeenCalledTimes(1);
+      expect(Actions.setDataCollectionForMarketing).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('outside onboarding', () => {
+    it('should render the basic configuration modal', async () => {
+      const {
+        agreementCheckbox,
+        cancelButton,
+        toggleBasicFunctionalityButton,
+      } = arrangeMocks({
+        isOnboarding: false,
+        stateOverrides: {
+          metamask: {
+            useExternalServices: true,
+          },
+        },
+      });
+
+      expect(agreementCheckbox).toBeInTheDocument();
+      expect(cancelButton).toBeInTheDocument();
+      expect(toggleBasicFunctionalityButton).toBeInTheDocument();
+    });
+
+    it('should call appropriate actions when the turn off button is clicked', () => {
+      const { agreementCheckbox, toggleBasicFunctionalityButton } =
+        arrangeMocks({
+          stateOverrides: {
+            metamask: {
+              useExternalServices: true,
+            },
+          },
+        });
+
+      fireEvent.click(agreementCheckbox, {
+        target: { checked: true },
+      });
+
+      waitFor(() => {
+        expect(toggleBasicFunctionalityButton).toBeEnabled();
+      });
+
+      fireEvent.click(toggleBasicFunctionalityButton);
+
+      expect(hideBasicFunctionalityModal).toHaveBeenCalledTimes(1);
+      expect(Actions.setParticipateInMetaMetrics).toHaveBeenCalledTimes(1);
+      expect(Actions.setParticipateInMetaMetrics).toHaveBeenCalledWith(false);
+      expect(Actions.setDataCollectionForMarketing).toHaveBeenCalledTimes(1);
+      expect(Actions.setDataCollectionForMarketing).toHaveBeenCalledWith(false);
+      expect(Actions.toggleExternalServices).toHaveBeenCalledTimes(1);
+      expect(Actions.toggleExternalServices).toHaveBeenCalledWith(false);
+    });
+
+    it('should call the appropriate actions when the turn on button is clicked', () => {
+      const { toggleBasicFunctionalityButton } = arrangeMocks({
+        stateOverrides: {
+          metamask: {
+            useExternalServices: false,
+          },
+        },
+      });
+
+      expect(toggleBasicFunctionalityButton).toBeEnabled();
+
+      fireEvent.click(toggleBasicFunctionalityButton);
+
+      expect(hideBasicFunctionalityModal).toHaveBeenCalledTimes(1);
+      expect(Actions.setParticipateInMetaMetrics).toHaveBeenCalledTimes(0);
+      expect(Actions.setDataCollectionForMarketing).toHaveBeenCalledTimes(0);
+      expect(Actions.toggleExternalServices).toHaveBeenCalledTimes(1);
+      expect(Actions.toggleExternalServices).toHaveBeenCalledWith(true);
+    });
+  });
+});

ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx

@@ -12,7 +12,11 @@ import {
   FontWeight,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { toggleExternalServices } from '../../../store/actions';
+import {
+  setDataCollectionForMarketing,
+  setParticipateInMetaMetrics,
+  toggleExternalServices,
+} from '../../../store/actions';
 import {
   ModalOverlay,
   ModalContent,
@@ -135,6 +139,7 @@ export function BasicConfigurationModal() {
               size={ButtonSize.Lg}
               width={BlockSize.Half}
               variant={ButtonVariant.Secondary}
+              data-testid="basic-configuration-modal-cancel-button"
               onClick={closeModal}
             >
               {t('cancel')}
@@ -144,6 +149,7 @@ export function BasicConfigurationModal() {
               disabled={!hasAgreed && isExternalServicesEnabled}
               width={BlockSize.Half}
               variant={ButtonVariant.Primary}
+              data-testid="basic-configuration-modal-toggle-button"
               onClick={() => {
                 const event = onboardingFlow
                   ? {
@@ -172,6 +178,11 @@ export function BasicConfigurationModal() {
 
                 trackEvent(event);
 
+                if (isExternalServicesEnabled || onboardingFlow) {
+                  dispatch(setParticipateInMetaMetrics(false));
+                  dispatch(setDataCollectionForMarketing(false));
+                }
+
                 if (onboardingFlow) {
                   dispatch(hideBasicFunctionalityModal());
                   dispatch(onboardingToggleBasicFunctionalityOff());

ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap

@@ -1424,18 +1424,16 @@ exports[`Security Tab should match snapshot 1`] = `
       >
         <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"
-          data-testid="profileSyncToggle"
+          data-testid="participate-in-meta-metrics-container"
         >
           <div
             class="settings-page__content-item"
-            id="profileSyncLabel"
           >
             <span>
               Participate in MetaMetrics
             </span>
             <div
               class="settings-page__content-description"
-              data-testid="profileSyncDescription"
             >
               Participate in MetaMetrics to help us make MetaMask better
             </div>
@@ -1445,7 +1443,7 @@ exports[`Security Tab should match snapshot 1`] = `
             data-testid="participate-in-meta-metrics-toggle"
           >
             <label
-              class="toggle-button toggle-button--off"
+              class="toggle-button toggle-button--off toggle-button--disabled"
               tabindex="0"
             >
               <div
@@ -1469,7 +1467,6 @@ exports[`Security Tab should match snapshot 1`] = `
                   />
                 </div>
                 <input
-                  data-testid="participate-in-meta-metrics-toggle-button"
                   style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                   type="checkbox"
                   value="false"
@@ -1515,7 +1512,7 @@ exports[`Security Tab should match snapshot 1`] = `
           data-testid="data-collection-for-marketing-toggle"
         >
           <label
-            class="toggle-button toggle-button--off"
+            class="toggle-button toggle-button--off toggle-button--disabled"
             tabindex="0"
           >
             <div