From ed2bb2f24b68e08bdf8114bbb10c34f805c678f1 Mon Sep 17 00:00:00 2001 From: dddddanica Date: Mon, 3 Feb 2025 17:07:24 +0000 Subject: [PATCH] feat(3765): Add modal to include metric id before redirecting to support page --- app/_locales/en/messages.json | 12 ++ test/e2e/page-objects/pages/error-page.ts | 26 +++- .../metrics/developer-options-sentry.spec.ts | 36 ++++- ui/components/app/modals/index.scss | 1 + .../visit-support-data.test.tsx.snap | 83 +++++++++++ .../index.scss | 10 ++ .../visit-support-data-consent-modal/index.ts | 1 + ...sit-support-data-consent-modal.stories.tsx | 16 +++ .../visit-support-data-consent-modal.tsx | 129 +++++++++++++++++ .../visit-support-data.test.tsx | 131 ++++++++++++++++++ ui/helpers/utils/window.ts | 2 +- ui/pages/error-page/error-page.component.tsx | 27 ++-- .../settings/info-tab/info-tab.component.js | 34 +++-- ui/pages/settings/info-tab/info-tab.test.tsx | 18 ++- 14 files changed, 481 insertions(+), 45 deletions(-) create mode 100644 ui/components/app/modals/visit-support-data-consent-modal/__snapshots__/visit-support-data.test.tsx.snap create mode 100644 ui/components/app/modals/visit-support-data-consent-modal/index.scss create mode 100644 ui/components/app/modals/visit-support-data-consent-modal/index.ts create mode 100644 ui/components/app/modals/visit-support-data-consent-modal/visit-support-data-consent-modal.stories.tsx create mode 100644 ui/components/app/modals/visit-support-data-consent-modal/visit-support-data-consent-modal.tsx create mode 100644 ui/components/app/modals/visit-support-data-consent-modal/visit-support-data.test.tsx diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0eb802250fbb..3c9e08eabc11 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -6211,6 +6211,18 @@ "visitSite": { "message": "Visit site" }, + "visitSupportDataConsentModalAccept": { + "message": "Confirm" + }, + "visitSupportDataConsentModalDescription": { + "message": "Do you want to share your MetaMask Identifier and app version with our Support Center? This can help us better solve your problem, but is optional." + }, + "visitSupportDataConsentModalReject": { + "message": "Don’t share" + }, + "visitSupportDataConsentModalTitle": { + "message": "Share device details with support" + }, "visitWebSite": { "message": "Visit our website" }, diff --git a/test/e2e/page-objects/pages/error-page.ts b/test/e2e/page-objects/pages/error-page.ts index 17b3f6714186..909f1f4684b6 100644 --- a/test/e2e/page-objects/pages/error-page.ts +++ b/test/e2e/page-objects/pages/error-page.ts @@ -35,6 +35,15 @@ class ErrorPage { private readonly sentryFeedbackSuccessModal = '[data-testid="error-page-sentry-feedback-success-modal"]'; + private readonly visitSupportDataConsentModal = + '[data-testid="visit-support-data-consent-modal"]'; + + private readonly visitSupportDataConsentModalAcceptButton = + '[data-testid="visit-support-data-consent-modal-accept-button"]'; + + private readonly visitSupportDataConsentModalRejectButton = + '[data-testid="visit-support-data-consent-modal-reject-button"]'; + constructor(driver: Driver) { this.driver = driver; } @@ -78,14 +87,29 @@ class ErrorPage { ); } - async contactAndValidateMetaMaskSupport(): Promise { + async contactAndValidateMetamaskSupport(): Promise { console.log(`Contact metamask support form in a separate page`); await this.driver.waitUntilXWindowHandles(1); await this.driver.clickElement(this.contactSupportButton); + } + + async consentDataToMetamaskSupport(): Promise { + await this.driver.waitForSelector(this.visitSupportDataConsentModal); + await this.driver.clickElementAndWaitToDisappear( + this.visitSupportDataConsentModalAcceptButton, + ); // metamask, help page await this.driver.waitUntilXWindowHandles(2); } + async rejectDataToMetamaskSupport(): Promise { + await this.driver.waitForSelector(this.visitSupportDataConsentModal); + await this.driver.clickElementAndWaitToDisappear( + this.visitSupportDataConsentModalRejectButton, + ); + await this.driver.waitUntilXWindowHandles(2); + } + async waitForSentrySuccessModal(): Promise { await this.driver.waitForSelector(this.sentryFeedbackSuccessModal); await this.driver.assertElementNotPresent(this.sentryFeedbackSuccessModal); diff --git a/test/e2e/tests/metrics/developer-options-sentry.spec.ts b/test/e2e/tests/metrics/developer-options-sentry.spec.ts index eaad1c4760e3..31ff69b6b67f 100644 --- a/test/e2e/tests/metrics/developer-options-sentry.spec.ts +++ b/test/e2e/tests/metrics/developer-options-sentry.spec.ts @@ -8,6 +8,7 @@ import SettingsPage from '../../page-objects/pages/settings/settings-page'; import HeaderNavbar from '../../page-objects/pages/header-navbar'; import DevelopOptions from '../../page-objects/pages/developer-options-page'; import ErrorPage from '../../page-objects/pages/error-page'; +import { MOCK_META_METRICS_ID } from '../../constants'; const triggerCrash = async (driver: Driver): Promise => { const headerNavbar = new HeaderNavbar(driver); @@ -41,7 +42,7 @@ describe('Developer Options - Sentry', function (this: Suite) { { fixtures: new FixtureBuilder() .withMetaMetricsController({ - metaMetricsId: 'fake-metrics-id', + metaMetricsId: MOCK_META_METRICS_ID, participateInMetaMetrics: true, }) .build(), @@ -64,7 +65,35 @@ describe('Developer Options - Sentry', function (this: Suite) { ); }); - it('gives option to cause a page crash and offer contact support option', async function () { + it('gives option to cause a page crash and offer contact support option with consenting to share data', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withMetaMetricsController({ + metaMetricsId: MOCK_META_METRICS_ID, + participateInMetaMetrics: true, + }) + .build(), + title: this.test?.fullTitle(), + ignoredConsoleErrors: [ + 'Error#1: Unable to find value of key "developerOptions" for locale "en"', + 'React will try to recreate this component tree from scratch using the error boundary you provided, Index.', + ], + }, + async ({ driver }: { driver: Driver }) => { + await loginWithBalanceValidation(driver); + await triggerCrash(driver); + + const errorPage = new ErrorPage(driver); + await errorPage.check_pageIsLoaded(); + + await errorPage.contactAndValidateMetamaskSupport(); + await errorPage.consentDataToMetamaskSupport(); + }, + ); + }); + + it('gives option to cause a page crash and offer contact support option with rejecting to share data', async function () { await withFixtures( { fixtures: new FixtureBuilder().build(), @@ -81,7 +110,8 @@ describe('Developer Options - Sentry', function (this: Suite) { const errorPage = new ErrorPage(driver); await errorPage.check_pageIsLoaded(); - await errorPage.contactAndValidateMetaMaskSupport(); + await errorPage.contactAndValidateMetamaskSupport(); + await errorPage.rejectDataToMetamaskSupport(); }, ); }); diff --git a/ui/components/app/modals/index.scss b/ui/components/app/modals/index.scss index a97b83d9cebe..75b8a8b97148 100644 --- a/ui/components/app/modals/index.scss +++ b/ui/components/app/modals/index.scss @@ -7,6 +7,7 @@ @import 'transaction-confirmed/index'; @import 'customize-nonce/index'; @import 'convert-token-to-nft-modal/index'; +@import 'visit-support-data-consent-modal/index'; .modal { z-index: 1050; diff --git a/ui/components/app/modals/visit-support-data-consent-modal/__snapshots__/visit-support-data.test.tsx.snap b/ui/components/app/modals/visit-support-data-consent-modal/__snapshots__/visit-support-data.test.tsx.snap new file mode 100644 index 000000000000..50cc07057872 --- /dev/null +++ b/ui/components/app/modals/visit-support-data-consent-modal/__snapshots__/visit-support-data.test.tsx.snap @@ -0,0 +1,83 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VisitSupportDataConsentModal renders the modal correctly when open 1`] = ` +
+