From 322430d49e8dd2bf6de2f626dfe5487d3b06f541 Mon Sep 17 00:00:00 2001 From: Florian Zia <zia.florian@gmail.com> Date: Tue, 30 Jul 2024 14:26:17 +0200 Subject: [PATCH 1/2] chore: Add directory certificates to .gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 6aefeddb9f7..a8d1e559161 100644 --- a/.gitignore +++ b/.gitignore @@ -69,3 +69,6 @@ next-env.d.ts # Glean .venv /src/telemetry/generated/ + +# certificates +certificates From f07efdfa89bdf2c5d7ca5bcff9ff28cfafeb053e Mon Sep 17 00:00:00 2001 From: Florian Zia <zia.florian@gmail.com> Date: Tue, 30 Jul 2024 17:26:25 +0200 Subject: [PATCH 2/2] fix: Use TelemetryLink instead of TelemetryButton for petition banner --- .gitignore | 3 -- .../(dashboard)/dashboard/Dashboard.test.tsx | 13 ++------ .../client/PetitionBanner.module.scss | 15 +++++++++ src/app/components/client/PetitionBanner.tsx | 31 ++++++------------- 4 files changed, 27 insertions(+), 35 deletions(-) diff --git a/.gitignore b/.gitignore index a8d1e559161..6aefeddb9f7 100644 --- a/.gitignore +++ b/.gitignore @@ -69,6 +69,3 @@ next-env.d.ts # Glean .venv /src/telemetry/generated/ - -# certificates -certificates diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx index 01018181b6f..ba185bdc9d5 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx @@ -10,7 +10,6 @@ import { queryByRole, render, screen, - waitFor, within, } from "@testing-library/react"; import { userEvent } from "@testing-library/user-event"; @@ -3811,16 +3810,10 @@ describe("CSAT survey banner", () => { }); await user.click(dismissCta); - // The dismissal of the petition banner is being delayed so that the click - // on the “Sign petition” link can get registered before the banner is - // being hidden. As a result we’ll need to wait for the follow-up CSAT - // survey to appear. - await waitFor(() => { - const answerButton = screen.getByRole("button", { - name: "Neutral", - }); - expect(answerButton).toBeInTheDocument(); + const answerButton = screen.getByRole("button", { + name: "Neutral", }); + expect(answerButton).toBeInTheDocument(); }); }); diff --git a/src/app/components/client/PetitionBanner.module.scss b/src/app/components/client/PetitionBanner.module.scss index 3fea104e31e..01ef3d539a1 100644 --- a/src/app/components/client/PetitionBanner.module.scss +++ b/src/app/components/client/PetitionBanner.module.scss @@ -33,6 +33,21 @@ } } + .signLink { + background-color: $color-purple-60; + border-radius: $border-radius-md; + color: $color-white; + font: $text-body-md; + font-weight: 500; + line-height: 1; + padding: $spacing-md $spacing-lg; + text-align: center; + text-decoration: none; + &:hover { + background-color: $color-purple-50; + } + } + .dismissButton { color: $color-white; &:hover { diff --git a/src/app/components/client/PetitionBanner.tsx b/src/app/components/client/PetitionBanner.tsx index 94f9a975d5b..26429546c39 100644 --- a/src/app/components/client/PetitionBanner.tsx +++ b/src/app/components/client/PetitionBanner.tsx @@ -15,6 +15,7 @@ import { TelemetryButton } from "./TelemetryButton"; import { useTelemetry } from "../../hooks/useTelemetry"; import { useViewTelemetry } from "../../hooks/useViewTelemetry"; import { DismissalData } from "../../hooks/useLocalDismissal"; +import { TelemetryLink } from "./TelemetryLink"; export const PetitionBanner = (props: { user: Session["user"]; @@ -48,33 +49,19 @@ export const PetitionBanner = (props: { })} </p> <div className={styles.buttons}> - <TelemetryButton - variant="primary" - className={styles.signButton} - onPress={() => { - // In order to prevent the banner from being hidden before - // the click on the link button is getting registered: Delay the - // dismissal until the next event loop execution. - // A timeout value of `0` should be enough, but unfortunately - // this does not seem to work on iOS — even a value lower than - // `100` should be plenty, but since this is now an arbitrary - // value let’s make extra sure. - setTimeout(() => { - dismiss(); - }, 100); - }} + <TelemetryLink href={CONST_URL_DATA_PRIVACY_PETITION_BANNER} + className={styles.signLink} target="_blank" - event={{ - module: "ctaButton", - name: "click", - data: { - button_id: "sign_petition", - }, + eventData={{ + link_id: "sign_petition", + }} + onClick={() => { + dismiss(); }} > {l10n.getString("petition-banner-data-privacy-button-sign")} - </TelemetryButton> + </TelemetryLink> <TelemetryButton variant="tertiary" className={styles.dismissButton}