MNTOR-2540 - Show expanded data class details for data broker exposur… (

#3814) * MNTOR-2540 - Show expanded data class details for data broker exposures for premium users * rearrange address format * add ui tweaks * consolidate breachdataclass and databrokerdataclass * clean up comments * add more detailed comments * change classnames * use index * lint * unit test ignore * add test igonre * use let instead of useState/useEffect * use early guard clauses instead of switch case * fix lint * use exposure instead of type * use flex/gap instead of bottom padding
mozilla · Dec 5, 2023 · 36b0b32 · 36b0b32
1 parent 7777788
commit 36b0b32
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 119 deletions.
diff --git a/src/app/components/client/ExposureCard.module.scss b/src/app/components/client/ExposureCard.module.scss
@@ -158,13 +158,13 @@
         }
 
         .exposedInfoTitle {
+          align-self: start;
+
           @media screen and (min-width: $screen-lg) {
-            align-self: center;
             flex: 0 0 90px; // fix width of categories title
           }
 
           @media screen and (min-width: $screen-xl) {
-            align-self: center;
             flex: 0 0 150px;
           }
         }
@@ -198,7 +198,7 @@
         @media screen and (min-width: $screen-lg) {
           display: flex;
           flex-direction: row;
-          align-items: center;
+          align-items: start;
           gap: $layout-xs;
           flex-wrap: wrap;
           justify-content: flex-start;
@@ -215,15 +215,18 @@
             }
           }
 
-          .emails {
+          .dataClassListDetailsWrapper {
             padding-inline-start: var(--exposureDetailsIconWidth);
             font: $text-body-xs;
             font-weight: 600;
 
-            .emailsList {
+            .dataClassListDetails {
               list-style: none;
-              padding: 0;
               margin: 0;
+              padding: $spacing-xs 0 0 $spacing-xs;
+              gap: $spacing-xs;
+              display: flex;
+              flex-direction: column;
 
               li {
                 list-style-type: none;

diff --git a/src/app/components/client/ExposureCard.tsx b/src/app/components/client/ExposureCard.tsx
@@ -26,7 +26,7 @@ import {
   SubscriberBreach,
 } from "../../../utils/subscriberBreaches";
 import { FallbackLogo } from "../server/BreachLogo";
-import { BreachDataClass, DataBrokerDataClass } from "./ExposureCardDataClass";
+import { ExposureCardDataClassLayout } from "./ExposureCardDataClass";
 import { DataBrokerImage } from "./DataBrokerImage";
 
 export type Exposure = OnerepScanResultRow | SubscriberBreach;
@@ -77,67 +77,56 @@ const ScanResultCard = (props: ScanResultCardProps) => {
   // Scan Result Categories
   if (scanResult.relatives.length > 0) {
     exposureCategoriesArray.push(
-      <DataBrokerDataClass
-        scanResultData={scanResult}
+      <ExposureCardDataClassLayout
+        exposure={scanResult}
         key="relatives"
+        dataBrokerDataType="relatives"
         icon={<MultipleUsersIcon alt="" width="13" height="13" />}
-        exposureCategoryLabel={l10n.getString("exposure-card-family-members")}
-        num={scanResult.relatives.length}
+        label={l10n.getString("exposure-card-family-members")}
+        count={scanResult.relatives.length}
         isPremiumUser={props.isPremiumUser}
       />,
     );
   }
   if (scanResult.phones.length > 0) {
     exposureCategoriesArray.push(
-      <DataBrokerDataClass
-        scanResultData={scanResult}
+      <ExposureCardDataClassLayout
+        exposure={scanResult}
         key="phones"
+        dataBrokerDataType="phones"
         icon={<PhoneIcon alt="" width="13" height="13" />}
-        exposureCategoryLabel={l10n.getString("exposure-card-phone-number")}
-        num={scanResult.phones.length}
+        label={l10n.getString("exposure-card-phone-number")}
+        count={scanResult.phones.length}
         isPremiumUser={props.isPremiumUser}
       />,
     );
   }
   if (scanResult.emails.length > 0) {
     exposureCategoriesArray.push(
-      <DataBrokerDataClass
-        scanResultData={scanResult}
+      <ExposureCardDataClassLayout
+        exposure={scanResult}
         key="emails"
+        dataBrokerDataType="emails"
         icon={<EmailIcon alt="" width="13" height="13" />}
-        exposureCategoryLabel={l10n.getString("exposure-card-email")}
-        num={scanResult.emails.length}
+        label={l10n.getString("exposure-card-email")}
+        count={scanResult.emails.length}
         isPremiumUser={props.isPremiumUser}
       />,
     );
   }
   if (scanResult.addresses.length > 0) {
     exposureCategoriesArray.push(
-      <DataBrokerDataClass
-        scanResultData={scanResult}
+      <ExposureCardDataClassLayout
+        exposure={scanResult}
         key="addresses"
+        dataBrokerDataType="addresses"
         icon={<LocationPinIcon alt="" width="13" height="13" />}
-        exposureCategoryLabel={l10n.getString("exposure-card-address")}
-        num={scanResult.addresses.length}
-        isPremiumUser={props.isPremiumUser}
-      />,
-    );
-    // TODO: Add unit test when changing this code:
-    /* c8 ignore next 13 */
-  } else {
-    // "Other" item when none of the conditions above are met
-    exposureCategoriesArray.push(
-      <DataBrokerDataClass
-        scanResultData={scanResult}
-        key="other"
-        icon={<QuestionMarkCircle alt="" width="13" height="13" />}
-        exposureCategoryLabel={l10n.getString("exposure-card-other")}
-        num={0}
+        label={l10n.getString("exposure-card-address")}
+        count={scanResult.addresses.length}
         isPremiumUser={props.isPremiumUser}
       />,
     );
   }
-
   const COMPANY_NAME_MAX_CHARACTER_COUNT = 20;
   const isCompanyNameTooLong =
     scanResult.data_broker.length > COMPANY_NAME_MAX_CHARACTER_COUNT;
@@ -284,53 +273,64 @@ const SubscriberBreachCard = (props: SubscriberBreachCardProps) => {
   subscriberBreach.dataClassesEffected.map((item: DataClassEffected) => {
     const dataClass = Object.keys(item)[0];
 
+    const emailLength = subscriberBreach.emailsAffected.length;
+
     if (dataClass === "email-addresses") {
       exposureCategoriesArray.push(
-        <BreachDataClass
-          subscriberBreachData={subscriberBreach}
+        <ExposureCardDataClassLayout
+          exposure={subscriberBreach}
           key={dataClass}
+          dataBreachDataType={dataClass}
           icon={<EmailIcon alt="" width="13" height="13" />}
-          exposureCategoryLabel={l10n.getString("exposure-card-email")}
+          label={l10n.getString("exposure-card-email")}
+          count={emailLength}
         />,
       );
     } else if (dataClass === "passwords") {
       exposureCategoriesArray.push(
-        <BreachDataClass
-          subscriberBreachData={subscriberBreach}
+        <ExposureCardDataClassLayout
+          exposure={subscriberBreach}
           key={dataClass}
+          dataBreachDataType={dataClass}
           icon={<PasswordIcon alt="" width="13" height="13" />}
-          exposureCategoryLabel={l10n.getString("exposure-card-password")}
+          label={l10n.getString("exposure-card-password")}
+          count={emailLength}
         />,
       );
     } else if (dataClass === "phone-numbers") {
       exposureCategoriesArray.push(
-        <BreachDataClass
-          subscriberBreachData={subscriberBreach}
+        <ExposureCardDataClassLayout
+          exposure={subscriberBreach}
           key={dataClass}
+          dataBreachDataType={dataClass}
           icon={<PhoneIcon alt="" width="13" height="13" />}
-          exposureCategoryLabel={l10n.getString("exposure-card-phone-number")}
+          label={l10n.getString("exposure-card-phone-number")}
+          count={emailLength}
         />,
       );
     } else if (dataClass === "ip-addresses") {
       exposureCategoriesArray.push(
-        <BreachDataClass
-          subscriberBreachData={subscriberBreach}
+        <ExposureCardDataClassLayout
+          exposure={subscriberBreach}
           key={dataClass}
+          dataBreachDataType={dataClass}
           icon={<QuestionMarkCircle alt="" width="13" height="13" />}
-          exposureCategoryLabel={l10n.getString("exposure-card-ip-address")}
+          label={l10n.getString("exposure-card-ip-address")}
+          count={emailLength}
         />,
       );
       // TODO: Add unit test when changing this code:
-      /* c8 ignore next 12 */
+      /* c8 ignore next 13 */
     }
     // Handle all other breach categories
     else {
       exposureCategoriesArray.push(
-        <BreachDataClass
-          subscriberBreachData={subscriberBreach}
+        <ExposureCardDataClassLayout
+          exposure={subscriberBreach}
           key={dataClass}
           icon={<QuestionMarkCircle alt="" width="13" height="13" />} // default icon for categories without a unique one
-          exposureCategoryLabel={l10n.getString(dataClass)} // categories are localized in data-classes.ftl
+          label={l10n.getString(dataClass)} // categories are localized in data-classes.ftl
+          count={emailLength}
         />,
       );
     }