MNTOR-2867 - Differentiate exposure card description depending on status #4215

codemist · 2024-02-15T20:55:38Z

References:

Jira: MNTOR-2867
Figma: https://www.figma.com/file/CaEKIhvSJqf6KNIMzSkt40/Concepts-for-Monitor-MVP-Redesign?type=design&node-id=1398-75640&mode=design&t=Dnr6IkRIcYtUko9j-4

Description

Contextualizes the exposure card description for both data broker and data breach depending on the exposure card's status, as well as (in the case of data broker cards), whether the user is on the manually resolve page or the dashboard.

The ExposureCard.tsx was beginning to become unwieldy in length, so I decided to break it up into two files, one for the data broker instance, and the other for data breach.

How to test

Checklist (Definition of Done)

Localization strings (if needed) have been added.
Commits in this PR are minimal and have descriptive commit messages.
I've added or updated the relevant sections in readme and/or code comments
I've added a unit test to test for potential regressions of this bug.
Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
All acceptance criteria are met.
Jira ticket has been updated (if needed) to match changes made during the development process.
Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.

src/constants.ts

pdehaan · 2024-02-15T22:05:43Z

src/app/components/client/ExposureCard.tsx

+            },
+          },
+        );
+    }


Does this need a default case to catch any unexpected scanResult.status values? (or is that already covered elsewhere by TypeScript types?)

pdehaan · 2024-02-15T22:12:45Z

src/app/components/client/ExposureCard.tsx

+          {
+            elems: {
+              data_broker_profile: dataBrokerProfileLink,
+              upsell_link: upsellLink,


Not sure this needs the upsell_link element.

blurts-server/locales/en/exposure-card.ftl

Line 32 in e922200

exposure-card-description-info-for-sale-action-needed-dashboard = This site is publicly publishing and selling <data_broker_profile>these details about you</data_broker_profile>. Remove this profile to protect your privacy.

Good catch! fixed in 59f3a88

codemist · 2024-02-21T17:38:23Z

src/app/components/client/ScanResultCard.tsx

+  resolutionCta: ReactNode;
+  isPremiumUser: boolean;
+  isExpanded: boolean;
+  isOnManualRemovePage?: boolean;


Added a prop here to check if the data broker object is on the manual removal page, which is handled by the RemovalCard.tsx component, since the description within the cards on that page reflect different content than the ones on the dashboard.

https://deploy-preview-4215--fx-monitor-storybook.netlify.app/?path=/story/pages-guided-resolution-1c-manually-resolve-brokers--manual-remove-view-story

If components or functions have exceptions for a single caller, that's often an indication that the abstraction might not be a great fit - they can make things harder to follow, as half of the code you're looking at might be irrelevant to the particular situation you're investigating.

A way to avoid that is by lifting the logic up to the caller, i.e. have it pass in the string to render directly. That way, there's no need for an if anywhere.

(This isn't a blocker, but it's a good exercise to get a better feel for software architecture 🙂 )

codemist · 2024-02-22T09:18:03Z

src/app/components/client/stories/ExposureCard.stories.ts

+export const DataBrokerRemoved: Story = {
+  args: {
+    exposureImg: FamilyTreeImage,
+    exposureData: ScanMockItemRemoved,
+  },
+};
+
+export const DataBrokerManualRemoved: Story = {
+  args: {
+    exposureImg: FamilyTreeImage,
+    exposureData: ScanMockItemManualRemoved,
+  },
+};
+
+export const DataBrokerInProgress: Story = {
+  args: {
+    exposureImg: FamilyTreeImage,
+    exposureData: ScanMockItemInProgress,
+  },
+};
+
+export const DataBreachActionNeeded: Story = {
+  args: {
+    exposureImg: TwitterImage,
+    exposureData: BreachMockItemNew,
+  },
+};
+
+export const DataBreachFixed: Story = {
  args: {
    exposureImg: TwitterImage,
-    exposureData: BreachMockItem,
+    exposureData: BreachMockItemRemoved,
  },
 };


Each exposure card permutation can be viewed on storybook.

flodolo

What's the reason to keep around the obsolete strings?

flodolo · 2024-02-22T09:41:08Z

locales/en/exposure-card.ftl

@@ -24,13 +24,27 @@ exposure-card-credit-card = Credit Card
 exposure-card-password = Password
 exposure-card-ip-address = IP Address
 exposure-card-other = Other
+# deprecated


Obsolete is more accurate.

Not entirely sure - I was following a previous pattern that we had, but I'll bring it up in a tech meeting how we may go about deleting obsolete strings (if we should prune them on the go, or do a clean-up every once in a while).

flodolo · 2024-02-22T09:41:47Z

locales/en/exposure-card.ftl

 exposure-card-description-info-for-sale-part-two = Remove this profile to protect your privacy.
+exposure-card-description-info-for-sale-action-needed-manual-fix-page = This site is selling <data_broker_profile>these details about you.</data_broker_profile> Contact the site for removal, or <upsell_link>subscribe to { -brand-monitor-plus }</upsell_link> and we’ll do it for you.


Should this be exposed to all locales? Removal is only US.

flodolo · 2024-02-22T09:42:48Z

locales/en/exposure-card.ftl

+exposure-card-description-info-for-sale-action-needed-manual-fix-page = This site is selling <data_broker_profile>these details about you.</data_broker_profile> Contact the site for removal, or <upsell_link>subscribe to { -brand-monitor-plus }</upsell_link> and we’ll do it for you.
+exposure-card-description-info-for-sale-action-needed-dashboard = This site is publicly publishing and selling <data_broker_profile>these details about you.</data_broker_profile> Remove this profile to protect your privacy.
+exposure-card-description-info-for-sale-in-progress = We’ve started our auto-removal process of <data_broker_profile>this profile</data_broker_profile> to protect your information. <removal_info>Removals typically take 7-14 days.</removal_info>
+exposure-card-description-info-for-sale-fixed = As a { -brand-premium } member, we’ve <data_broker_profile>removed this profile</data_broker_profile> for you and will continually monitor to make sure they don’t add you back.


I assume we shouldn't be using Premium anymore.

Added -brand-plus in 7648ce8

flodolo · 2024-02-22T09:43:00Z

locales/en/exposure-card.ftl

+exposure-card-description-info-for-sale-action-needed-dashboard = This site is publicly publishing and selling <data_broker_profile>these details about you.</data_broker_profile> Remove this profile to protect your privacy.
+exposure-card-description-info-for-sale-in-progress = We’ve started our auto-removal process of <data_broker_profile>this profile</data_broker_profile> to protect your information. <removal_info>Removals typically take 7-14 days.</removal_info>
+exposure-card-description-info-for-sale-fixed = As a { -brand-premium } member, we’ve <data_broker_profile>removed this profile</data_broker_profile> for you and will continually monitor to make sure they don’t add you back.
+exposure-card-description-info-for-sale-fixed-manually-fixed =  You marked this profile as fixed.  Be sure you’ve followed all instructions on <data_broker_profile>the site</data_broker_profile> to ensure they remove your personal info.


No double space after a period.

codemist · 2024-02-22T15:17:08Z

src/app/components/client/ScanResultCard.tsx

+          );
+        }
+        if (props.isOnManualRemovePage) {
+          /* c8 ignore start */


I noticed we don't run any unit tests on ExposureCard, I captured that tech debt here: https://mozilla-hub.atlassian.net/jira/software/c/projects/MNTOR/boards/447?selectedIssue=MNTOR-2981

We do have tests for the overall dashboard, but since we're expecting new permutations (and telemetry) for the various exposure card description states, it's probably best to have unit tests for just that component specifically.

They're mostly part of Dashboard.test.tsx, though this one should probably be part of ManualRemove.test.tsx. Could you try adding one there?

Going to add the tests as part of another ticket, will probably couple in the re-abstraction of the ScanResultCard in that too.

Vinnl

The ExposureCard.tsx was beginning to become unwieldy in length, so I decided to break it up into two files, one for the data broker instance, and the other for data breach.

It was getting unwieldy indeed, thanks for that! Since the three components and pretty closely related, maybe it makes sense to group them together in an ExposureCard/ folder?

But the changes look good to me! I do think you can write the unit test though 😁

Vinnl · 2024-02-26T14:38:40Z

locales-pending/dashboard-premium.ftl

+exposure-card-description-info-for-sale-action-needed-manual-fix-page = This site is selling <data_broker_profile>these details about you.</data_broker_profile> Contact the site for removal, or <upsell_link>subscribe to { -brand-monitor-plus }</upsell_link> and we’ll do it for you.
+exposure-card-description-info-for-sale-action-needed-dashboard = This site is publicly publishing and selling <data_broker_profile>these details about you.</data_broker_profile> Remove this profile to protect your privacy.


Nit, but the .s shouldn't be part of the links :)

Suggested change

exposure-card-description-info-for-sale-action-needed-manual-fix-page = This site is selling <data_broker_profile>these details about you.</data_broker_profile> Contact the site for removal, or <upsell_link>subscribe to { -brand-monitor-plus }</upsell_link> and we’ll do it for you.

exposure-card-description-info-for-sale-action-needed-dashboard = This site is publicly publishing and selling <data_broker_profile>these details about you.</data_broker_profile> Remove this profile to protect your privacy.

exposure-card-description-info-for-sale-action-needed-manual-fix-page = This site is selling <data_broker_profile>these details about you</data_broker_profile>. Contact the site for removal, or <upsell_link>subscribe to { -brand-monitor-plus }</upsell_link> and we’ll do it for you.

exposure-card-description-info-for-sale-action-needed-dashboard = This site is publicly publishing and selling <data_broker_profile>these details about you</data_broker_profile>. Remove this profile to protect your privacy.

Vinnl · 2024-02-26T14:39:47Z

locales/en/app.ftl

@@ -871,6 +871,7 @@ ad-unit-6-before-you-complete = Before you complete that next signup, use an ema
 -brand-relay = Firefox Relay
 -brand-mozilla-monitor = Mozilla Monitor
 -brand-monitor-plus = Monitor Plus
+-brand-plus = Plus


Might be worth a check with Mel whether we want to use "Plus" as a standalone term - it feels a bit more awkward than "Premium" to me.

Checked with Mel - reverted back to Monitor Plus here. Good catch!

Vinnl · 2024-02-26T14:41:05Z

locales/en/exposure-card.ftl

+# obsolete
 exposure-card-description-info-for-sale-part-one = This site is selling and publishing <data_broker_link>details about you.</data_broker_link>
+# obsolete
 exposure-card-description-info-for-sale-part-two = Remove this profile to protect your privacy.
+# obsolete
 # Variables:
 # $data_breach_company is the company associated with the data breach.
 # $data_breach_date is the date of the data breach.
 exposure-card-description-data-breach-part-one = Your information was exposed in the <data_breach_link>{ $data_breach_company } data breach on { $data_breach_date }.</data_breach_link>
+# obsolete
 exposure-card-description-data-breach-part-two = We’ll walk you through the steps to fix it.


I you removed the references to these, you can just remove them right away. (We couldn't do that in Relay because it was in a separate repository, so it could happen that the changes to the .ftl files would be merged before the removal of references to them were merged. But since both happen in the same PR now, we should be good.)

Suggested change

# obsolete

exposure-card-description-info-for-sale-part-one = This site is selling and publishing <data_broker_link>details about you.</data_broker_link>

# obsolete

exposure-card-description-info-for-sale-part-two = Remove this profile to protect your privacy.

# obsolete

# Variables:

# $data_breach_company is the company associated with the data breach.

# $data_breach_date is the date of the data breach.

exposure-card-description-data-breach-part-one = Your information was exposed in the <data_breach_link>{ $data_breach_company } data breach on { $data_breach_date }.</data_breach_link>

# obsolete

exposure-card-description-data-breach-part-two = We’ll walk you through the steps to fix it.

Vinnl · 2024-02-26T14:42:48Z

...enticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/RemovalCard.tsx

@@ -48,14 +48,14 @@ export const RemovalCard = (props: Props) => {
  }

  return (
-    <ExposureCard
-      exposureData={{
+    <ScanResultCard


Praise: oh heh, this is neat - of course we never need a data breach card on the data broker removal card, nice cleanup.

Vinnl · 2024-02-26T14:49:18Z

src/app/components/client/ScanResultCard.tsx

Small heads-up: I can't see in the diff here what is just code that is moved, and what are changes that are actually specific to the PR. So apologies for potentially bringing up things that were already there.

(And potentially for the future: if there had been a separate commit at the start that split them out, then I could've chosen to view just those commits that followed it. Rebasing is a Git concept that makes that easier, if you're looking for something to study :) )

Update: OK well, that wasn't too bad. It's a good refactoring anyway, this is a far more reasonable component!

Vinnl · 2024-02-26T14:57:07Z

src/app/components/client/ScanResultCard.tsx

+          );
+        }
+        if (props.isOnManualRemovePage) {
+          /* c8 ignore start */


They're mostly part of Dashboard.test.tsx, though this one should probably be part of ManualRemove.test.tsx. Could you try adding one there?

Vinnl · 2024-02-26T15:07:30Z

src/app/components/client/ScanResultCard.tsx

+  resolutionCta: ReactNode;
+  isPremiumUser: boolean;
+  isExpanded: boolean;
+  isOnManualRemovePage?: boolean;


If components or functions have exceptions for a single caller, that's often an indication that the abstraction might not be a great fit - they can make things harder to follow, as half of the code you're looking at might be irrelevant to the particular situation you're investigating.

A way to avoid that is by lifting the logic up to the caller, i.e. have it pass in the string to render directly. That way, there's no need for an if anywhere.

(This isn't a blocker, but it's a good exercise to get a better feel for software architecture 🙂 )

Vinnl · 2024-02-26T15:14:13Z

src/app/components/client/stories/ExposureCard.stories.ts

+export const DataBrokerRemoved: Story = {
+  args: {
+    exposureImg: FamilyTreeImage,
+    exposureData: ScanMockItemRemoved,
+  },
+};
+
+export const DataBrokerManualRemoved: Story = {
+  args: {
+    exposureImg: FamilyTreeImage,
+    exposureData: ScanMockItemManualRemoved,
+  },
+};
+
+export const DataBrokerInProgress: Story = {
+  args: {
+    exposureImg: FamilyTreeImage,
+    exposureData: ScanMockItemInProgress,
+  },
+};
+
+export const DataBreachActionNeeded: Story = {
+  args: {
+    exposureImg: TwitterImage,
+    exposureData: BreachMockItemNew,
+  },
+};
+
+export const DataBreachFixed: Story = {
  args: {
    exposureImg: TwitterImage,
-    exposureData: BreachMockItem,
+    exposureData: BreachMockItemRemoved,
  },
 };


pdehaan reviewed Feb 15, 2024

View reviewed changes

codemist marked this pull request as ready for review February 21, 2024 17:34

codemist requested a review from flodolo as a code owner February 21, 2024 17:34

codemist requested review from Vinnl and flozia February 21, 2024 17:34

codemist commented Feb 21, 2024

View reviewed changes

codemist commented Feb 22, 2024

View reviewed changes

flodolo reviewed Feb 22, 2024

View reviewed changes

flodolo self-requested a review February 22, 2024 14:34

codemist added 13 commits February 22, 2024 10:02

MNTOR-2867 - Differentiate exposure card description depending on status

ae408fb

telemetry link add upsell

63d3905

lint

d111405

pass status val in exposurecard

ef9e0c2

rely on bedrock for localization

d912f7d

fix breaking test

63cee90

standardize data_broker_profile string

370f773

lint

130ef28

remove upsell link var

695394d

revert statuspill changes

7442fc5

add l10n changes

35edba6

add condition to manual remove page desc

ea1c772

ignore test

865125d

codemist force-pushed the mntor-2867 branch from 9bc7afa to 865125d Compare February 22, 2024 15:10

codemist commented Feb 22, 2024

View reviewed changes

flodolo approved these changes Feb 23, 2024

View reviewed changes

Vinnl approved these changes Feb 26, 2024

View reviewed changes

codemist added 3 commits February 29, 2024 04:18

remove obsolete strings

9d68b5f

move period outside of link

96a07ba

remove brand-plus name, default to full brand name

5786d24

codemist force-pushed the mntor-2867 branch from 1774ca3 to 5786d24 Compare March 4, 2024 05:26

add progress card test

f56895f

codemist force-pushed the mntor-2867 branch from 7ab5654 to f56895f Compare March 4, 2024 05:48

Merge branch 'main' into mntor-2867

745a7a0

codemist merged commit 7e15840 into main Mar 4, 2024
16 checks passed

codemist deleted the mntor-2867 branch March 4, 2024 06:07

codemist mentioned this pull request Mar 4, 2024

Place exposure card assets into one folder #4290

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MNTOR-2867 - Differentiate exposure card description depending on status #4215

MNTOR-2867 - Differentiate exposure card description depending on status #4215

codemist commented Feb 15, 2024 •

edited

Loading

pdehaan Feb 15, 2024

pdehaan Feb 15, 2024

codemist Feb 21, 2024

codemist Feb 21, 2024 •

edited

Loading

Vinnl Feb 26, 2024

codemist Feb 22, 2024

Vinnl Feb 26, 2024

flodolo left a comment

flodolo Feb 22, 2024

codemist Feb 22, 2024

flodolo Feb 22, 2024

flodolo Feb 22, 2024

codemist Feb 22, 2024

flodolo Feb 22, 2024

codemist Feb 22, 2024 •

edited

Loading

Vinnl Feb 26, 2024

codemist Mar 4, 2024

Vinnl left a comment

Vinnl Feb 26, 2024

Vinnl Feb 26, 2024

codemist Mar 4, 2024

Vinnl Feb 26, 2024

Vinnl Feb 26, 2024

Vinnl Feb 26, 2024

Vinnl Feb 26, 2024

Vinnl Feb 26, 2024

Vinnl Feb 26, 2024

Vinnl Feb 26, 2024

		exposure-card-description-info-for-sale-part-two = Remove this profile to protect your privacy.
		exposure-card-description-info-for-sale-action-needed-manual-fix-page = This site is selling <data_broker_profile>these details about you.</data_broker_profile> Contact the site for removal, or <upsell_link>subscribe to { -brand-monitor-plus }</upsell_link> and we’ll do it for you.

MNTOR-2867 - Differentiate exposure card description depending on status #4215

MNTOR-2867 - Differentiate exposure card description depending on status #4215

Conversation

codemist commented Feb 15, 2024 • edited Loading

References:

Description

How to test

Checklist (Definition of Done)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codemist Feb 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flodolo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codemist Feb 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vinnl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codemist commented Feb 15, 2024 •

edited

Loading

codemist Feb 21, 2024 •

edited

Loading

codemist Feb 22, 2024 •

edited

Loading