Wire up mock data and provide fallback for platforms not ready for update

Author: jsoningram

special-pages/pages/new-tab/app/activity/NormalizeDataProvider.js

@@ -36,6 +36,7 @@ import { ACTION_BURN } from '../burning/BurnProvider.js';
  * @property {Record<string, boolean>} favorites
  * @property {string[]} urls
  * @property {number} totalTrackers
+ * @property {DomainActivity['cookiePopUpBlocked']} cookiePopUpBlocked
  */
 
 /**
@@ -52,6 +53,7 @@ export function normalizeData(prev, incoming) {
         trackingStatus: {},
         urls: [],
         totalTrackers: incoming.totalTrackers,
+        cookiePopUpBlocked: null,
     };
 
     if (shallowDiffers(prev.urls, incoming.urls)) {
@@ -64,6 +66,7 @@ export function normalizeData(prev, incoming) {
         const id = item.url;
 
         output.favorites[id] = item.favorite;
+        output.cookiePopUpBlocked = item.cookiePopUpBlocked;
 
         /** @type {Item} */
         const next = {
@@ -73,6 +76,7 @@ export function normalizeData(prev, incoming) {
             faviconMax: item.favicon?.maxAvailableSize ?? DDG_DEFAULT_ICON_SIZE,
             favoriteSrc: item.favicon?.src,
             trackersFound: item.trackersFound,
+            // cookiePopUpBlocked: item.cookiePopUpBlocked,
         };
         const differs = shallowDiffers(next, prev.items[id] || {});
         output.items[id] = differs ? next : prev.items[id] || {};
@@ -83,12 +87,14 @@ export function normalizeData(prev, incoming) {
         const prevItem = prev.trackingStatus[id] || {
             totalCount: 0,
             trackerCompanies: [],
+            cookiePopUpBlocked: null,
         };
         const trackersDiffer = shallowDiffers(item.trackingStatus.trackerCompanies, prevItem.trackerCompanies);
         if (prevItem.totalCount !== item.trackingStatus.totalCount || trackersDiffer) {
             const next = {
                 totalCount: item.trackingStatus.totalCount,
                 trackerCompanies: [...item.trackingStatus.trackerCompanies],
+                cookiePopUpBlocked: item.cookiePopUpBlocked,
             };
             output.trackingStatus[id] = next;
         } else {

special-pages/pages/new-tab/app/activity/activity.md

@@ -48,7 +48,8 @@ title: Activity
           "url": "https://youtube.com/watch?v=abc",
           "relativeTime": "Just now"
         }
-      ]
+      ],
+      "cookiePopUpBlocked": true,
     }
   ]
 }
@@ -178,4 +179,4 @@ example payload without id (for example, on history items)
 ```
 
 ### `activity_burnAnimationComplete`
-- Sent when the burn animation completes
+- Sent when the burn animation completes

special-pages/pages/new-tab/app/activity/components/Activity.js

@@ -1,12 +1,17 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import styles from './Activity.module.css';
+// @todo legacyProtections: `stylesLegacy` can be removed once all platforms
+// are ready for the new Protections Report
+import stylesLegacy from './ActivityLegacy.module.css';
 import { useContext, useEffect, useRef } from 'preact/hooks';
 import { memo } from 'preact/compat';
 import { ActivityContext, ActivityServiceContext } from '../ActivityProvider.js';
 import { useTypedTranslationWith } from '../../types.js';
 import { useOnMiddleClick } from '../../utils.js';
 import { useAdBlocking, useBatchedActivityApi, usePlatformName } from '../../settings.provider.js';
-import { ActivityItem } from './ActivityItem.js';
+import { CompanyIcon } from '../../components/CompanyIcon.js';
+import { Trans } from '../../../../../shared/components/TranslationsProvider.js';
+import { ActivityItem, ActivityItemLegacy } from './ActivityItem.js';
 import { ActivityBurningSignalContext, BurnProvider } from '../../burning/BurnProvider.js';
 import { useEnv } from '../../../../../shared/components/EnvironmentProvider.js';
 import { useComputed } from '@preact/signals';
@@ -54,8 +59,9 @@ export function ActivityEmptyState() {
  * @param {object} props
  * @param {boolean} props.canBurn
  * @param {DocumentVisibilityState} props.visibility
+ * @param {boolean} props.shouldDisplayLegacyActivity
  */
-export function ActivityBody({ canBurn, visibility }) {
+export function ActivityBody({ canBurn, visibility, shouldDisplayLegacyActivity }) {
     const { isReducedMotion } = useEnv();
     const { keys } = useContext(NormalizedDataContext);
     const { burning, exiting } = useContext(ActivityBurningSignalContext);
@@ -70,8 +76,33 @@ export function ActivityBody({ canBurn, visibility }) {
     return (
         <ul class={styles.activity} data-busy={busy} ref={ref} onClick={didClick}>
             {keys.value.map((id, _index) => {
-                if (canBurn && !isReducedMotion) return <BurnableItem id={id} key={id} documentVisibility={visibility} />;
-                return <RemovableItem id={id} key={id} canBurn={canBurn} documentVisibility={visibility} />;
+                if (canBurn && !isReducedMotion) {
+                    return (
+                        <BurnableItem
+                            id={id}
+                            key={id}
+                            documentVisibility={visibility}
+                            // @todo legacyProtections:
+                            // `shouldDisplayLegacyActivity` can be removed once
+                            // all platforms are ready for the new protections
+                            // report
+                            shouldDisplayLegacyActivity={shouldDisplayLegacyActivity}
+                        />
+                    );
+                }
+
+                return (
+                    <RemovableItem
+                        id={id}
+                        key={id}
+                        canBurn={canBurn}
+                        documentVisibility={visibility}
+                        // @todo legacyProtections:
+                        // `shouldDisplayLegacyActivity` can be removed once all
+                        // platforms are ready for the new protections report
+                        shouldDisplayLegacyActivity={shouldDisplayLegacyActivity}
+                    />
+                );
             })}
         </ul>
     );
@@ -110,16 +141,25 @@ const BurnableItem = memo(
      * @param {object} props
      * @param {string} props.id
      * @param {'visible' | 'hidden'} props.documentVisibility
+     * @param {boolean} props.shouldDisplayLegacyActivity
      */
-    function BurnableItem({ id, documentVisibility }) {
+    function BurnableItem({ id, documentVisibility, shouldDisplayLegacyActivity }) {
         const { activity } = useContext(NormalizedDataContext);
         const item = useComputed(() => activity.value.items[id]);
+
         if (!item.value) {
             return null;
         }
+
+        // @todo legacyProtections: Once all platforms are ready for the new
+        // protections report we can use `ActivityItem` 
+        const ActivityItemComponent = shouldDisplayLegacyActivity
+            ? ActivityItemLegacy
+            : ActivityItem;
+
         return (
             <ActivityItemAnimationWrapper url={id}>
-                <ActivityItem
+                <ActivityItemComponent
                     title={item.value.title}
                     url={id}
                     favoriteSrc={item.value.favoriteSrc}
@@ -128,9 +168,22 @@ const BurnableItem = memo(
                     canBurn={true}
                     documentVisibility={documentVisibility}
                 >
-                    <TrackerStatus id={id} trackersFound={item.value.trackersFound} />
+                    {shouldDisplayLegacyActivity ? (
+                        // @todo legacyProtections: `TrackerStatusLegacy` and
+                        // supporting prop can be removed once all platforms are
+                        // ready for the new protections report
+                        <TrackerStatusLegacy
+                            id={id}
+                            trackersFound={item.value.trackersFound}
+                        />
+                    ) : (
+                        <TrackerStatus
+                            id={id}
+                            trackersFound={item.value.trackersFound}
+                        />
+                    )}
                     <HistoryItems id={id} />
-                </ActivityItem>
+                </ActivityItemComponent>
             </ActivityItemAnimationWrapper>
         );
     },
@@ -142,8 +195,9 @@ const RemovableItem = memo(
      * @param {string} props.id
      * @param {boolean} props.canBurn
      * @param {"visible" | "hidden"} props.documentVisibility
+     * @param {boolean} props.shouldDisplayLegacyActivity
      */
-    function RemovableItem({ id, canBurn, documentVisibility }) {
+    function RemovableItem({ id, canBurn, documentVisibility, shouldDisplayLegacyActivity }) {
         const { activity } = useContext(NormalizedDataContext);
         const item = useComputed(() => activity.value.items[id]);
         if (!item.value) {
@@ -153,8 +207,15 @@ const RemovableItem = memo(
                 </p>
             );
         }
+
+        // @todo legacyProtections: Once all platforms are ready for the new
+        // protections report we can use `ActivityItem` 
+        const ActivityItemComponent = shouldDisplayLegacyActivity
+            ? ActivityItemLegacy
+            : ActivityItem;
+
         return (
-            <ActivityItem
+            <ActivityItemComponent
                 title={item.value.title}
                 url={id}
                 favoriteSrc={item.value.favoriteSrc}
@@ -163,9 +224,22 @@ const RemovableItem = memo(
                 canBurn={canBurn}
                 documentVisibility={documentVisibility}
             >
-                <TrackerStatus id={id} trackersFound={item.value.trackersFound} />
+                {shouldDisplayLegacyActivity ? (
+                    // @todo legacyProtections: `TrackerStatusLegacy` and
+                    // supporting prop can be removed once all platforms are
+                    // ready for the new protections report
+                    <TrackerStatusLegacy
+                        id={id}
+                        trackersFound={item.value.trackersFound}
+                    />
+                ) : (
+                    <TrackerStatus
+                        id={id}
+                        trackersFound={item.value.trackersFound}
+                    />
+                )}
                 <HistoryItems id={id} />
-            </ActivityItem>
+            </ActivityItemComponent>
         );
     },
 );
@@ -180,7 +254,8 @@ function TrackerStatus({ id, trackersFound }) {
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     const { activity } = useContext(NormalizedDataContext);
     const status = useComputed(() => activity.value.trackingStatus[id]);
-    const {totalCount, trackerCompanies, cookiePopUpBlocked} = status.value;
+    const cookiePopUpBlocked = useComputed(() => activity.value.cookiePopUpBlocked);
+    const {totalCount, trackerCompanies} = status.value;
     const other = trackerCompanies.slice(DDG_MAX_TRACKER_ICONS - 1);
     const adBlocking = useAdBlocking();
 
@@ -195,12 +270,10 @@ function TrackerStatus({ id, trackersFound }) {
     }
 
     if (totalCount === 0) {
-        let text;
-        if (trackersFound) {
-            text = adBlocking ? t('activity_no_adsAndTrackers_blocked') : t('activity_no_trackers_blocked');
-        } else {
-            text = adBlocking ? t('activity_no_adsAndTrackers') : t('activity_no_trackers');
-        }
+        const text = trackersFound
+            ? t('activity_no_trackers_blocked')
+            : t('activity_no_trackers')
+
         return (
             <p class={styles.companiesIconRow} data-testid="TrackerStatus">
                 <TickPill text={text} displayTick={false}/>
@@ -228,6 +301,67 @@ function TrackerStatus({ id, trackersFound }) {
     );
 }
 
+// @todo legacyProtections: `TrackerStatusLegacy` can be removed once all
+// platforms are ready for the new protections report
+
+/**
+ * @param {object} props
+ * @param {string} props.id
+ * @param {boolean} props.trackersFound
+ */
+function TrackerStatusLegacy({ id, trackersFound }) {
+    const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
+    const { activity } = useContext(NormalizedDataContext);
+    const status = useComputed(() => activity.value.trackingStatus[id]);
+    const other = status.value.trackerCompanies.slice(DDG_MAX_TRACKER_ICONS - 1);
+    const companyIconsMax = other.length === 0 ? DDG_MAX_TRACKER_ICONS : DDG_MAX_TRACKER_ICONS - 1;
+    const adBlocking = useAdBlocking();
+
+    const icons = status.value.trackerCompanies.slice(0, companyIconsMax).map((item, _index) => {
+        return <CompanyIcon displayName={item.displayName} key={item} />;
+    });
+
+    let otherIcon = null;
+    if (other.length > 0) {
+        const title = other.map((item) => item.displayName).join('\n');
+        otherIcon = (
+            <span title={title} class={stylesLegacy.otherIcon}>
+                +{other.length}
+            </span>
+        );
+    }
+
+    if (status.value.totalCount === 0) {
+        let text;
+        if (trackersFound) {
+            text = adBlocking ? t('activity_no_adsAndTrackers_blocked') : t('activity_no_trackers_blocked');
+        } else {
+            text = adBlocking ? t('activity_no_adsAndTrackers') : t('activity_no_trackers');
+        }
+        return (
+            <p class={stylesLegacy.companiesIconRow} data-testid="TrackerStatus">
+                {text}
+            </p>
+        );
+    }
+
+    return (
+        <div class={stylesLegacy.companiesIconRow} data-testid="TrackerStatus">
+            <div class={stylesLegacy.companiesIcons}>
+                {icons}
+                {otherIcon}
+            </div>
+            <div class={stylesLegacy.companiesText}>
+                {adBlocking ? (
+                    <Trans str={t('activity_countBlockedAdsAndTrackersPlural', { count: String(status.value.totalCount) })} values={{}} />
+                ) : (
+                    <Trans str={t('activity_countBlockedPluralLegacy', { count: String(status.value.totalCount) })} values={{}} />
+                )}
+            </div>
+        </div>
+    );
+}
+
 /**
  * @param {object} props
  * @param {import("preact").ComponentChild} props.children
@@ -261,8 +395,9 @@ export function ActivityConfigured({ children }) {
  * ```
  * @param {object} props
  * @param {boolean} props.showBurnAnimation
+ * @param {boolean} props.shouldDisplayLegacyActivity
  */
-export function ActivityConsumer({ showBurnAnimation }) {
+export function ActivityConsumer({ showBurnAnimation, shouldDisplayLegacyActivity }) {
     const { state } = useContext(ActivityContext);
     const service = useContext(ActivityServiceContext);
     const platformName = usePlatformName();
@@ -272,7 +407,11 @@ export function ActivityConsumer({ showBurnAnimation }) {
             return (
                 <SignalStateProvider>
                     <ActivityConfigured>
-                        <ActivityBody canBurn={false} visibility={visibility} />
+                        <ActivityBody
+                            canBurn={false}
+                            visibility={visibility}
+                            shouldDisplayLegacyActivity={shouldDisplayLegacyActivity}
+                        />
                     </ActivityConfigured>
                 </SignalStateProvider>
             );
@@ -281,7 +420,11 @@ export function ActivityConsumer({ showBurnAnimation }) {
             <SignalStateProvider>
                 <BurnProvider service={service} showBurnAnimation={showBurnAnimation}>
                     <ActivityConfigured>
-                        <ActivityBody canBurn={true} visibility={visibility} />
+                        <ActivityBody
+                            canBurn={true}
+                            visibility={visibility}
+                            shouldDisplayLegacyActivity={shouldDisplayLegacyActivity}
+                        />
                     </ActivityConfigured>
                 </BurnProvider>
             </SignalStateProvider>