updating the design change for when metametrics id is not available

MetaMask · Jun 13, 2024 · 93ae0f6 · 93ae0f6
1 parent fcfe7c7
commit 93ae0f6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/...tings/security-tab/delete-metametrics-data-toggle/delete-metametrics-data-toggle.test.tsx b/...tings/security-tab/delete-metametrics-data-toggle/delete-metametrics-data-toggle.test.tsx
@@ -120,13 +120,23 @@ describe('DeleteMetaMetricsDataToggle', () => {
       return undefined;
     });
     const store = configureStore({});
-    const { getByRole } = renderWithProvider(
+    const { getByRole, getByText } = renderWithProvider(
       <DeleteMetaMetricsDataToggle />,
       store,
     );
     expect(
       getByRole('button', { name: 'Delete MetaMetrics data' }),
     ).toBeDisabled();
+    expect(
+      getByText(
+        /This will delete historical MetaMetrics data associated with your use on this device. Your wallet and accounts will remain exactly as they are now after this data has been deleted. This process may take up to 30 days. View our/u,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        /Since you've never opted into MetaMetrics, there's no data to delete here./u,
+      ),
+    ).toBeInTheDocument();
   });
 
   // metaMetricsDataDeletionMarked is set to true right after the deletion is performed, it will rest to false when the page unmounts.

diff --git a/...s/settings/security-tab/delete-metametrics-data-toggle/delete-metametrics-data-toggle.tsx b/...s/settings/security-tab/delete-metametrics-data-toggle/delete-metametrics-data-toggle.tsx
@@ -2,10 +2,18 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { CONSENSYS_PRIVACY_LINK } from '../../../../../shared/lib/ui-utils';
 import ClearMetametricsData from '../../../../components/app/clear-metametrics-data';
-import { Box, ButtonPrimary } from '../../../../components/component-library';
+import {
+  Box,
+  ButtonPrimary,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../../../components/component-library';
 import {
   Display,
   FlexDirection,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
@@ -46,7 +54,7 @@ const DeleteMetaMetricsDataToggle = () => {
   );
   const showDataDeletionErrorModal = useSelector(getShowDataDeletionErrorModal);
 
-  let dataDeletionButtonDisabled =
+  let dataDeletionButtonDisabled: boolean =
     metaMetricsDataDeletionMarked || Boolean(!metaMetricsId);
   if (!dataDeletionButtonDisabled && metaMetricsDataDeletionStatus) {
     dataDeletionButtonDisabled =
@@ -57,7 +65,6 @@ const DeleteMetaMetricsDataToggle = () => {
       ].includes(metaMetricsDataDeletionStatus) &&
       !hasMetricsRecordedAfterDeletion;
   }
-
   const privacyPolicyLink = (
     <a
       href={CONSENSYS_PRIVACY_LINK}
@@ -80,7 +87,7 @@ const DeleteMetaMetricsDataToggle = () => {
         <div className="settings-page__content-item">
           <span>{t('deleteMetaMetricsData')}</span>
           <div className="settings-page__content-description">
-            {dataDeletionButtonDisabled
+            {dataDeletionButtonDisabled && Boolean(metaMetricsId)
               ? t('deleteMetaMetricsDataRequestedDescription', [
                   formatedDate,
                   privacyPolicyLink,
@@ -89,6 +96,18 @@ const DeleteMetaMetricsDataToggle = () => {
           </div>
         </div>
         <div className="settings-page__content-item-col">
+          {Boolean(!metaMetricsId) && (
+            <Box display={Display.InlineFlex}>
+              <Icon name={IconName.Info} size={IconSize.Sm} />
+              <Text
+                variant={TextVariant.bodyXs}
+                marginLeft={1}
+                marginBottom={2}
+              >
+                {t('metaMetricsIdNotAvailableError')}
+              </Text>
+            </Box>
+          )}
           <ButtonPrimary
             className="settings-page__button"
             onClick={() => {