support trackersFound

shakyShane · shakyShane · commit 401a5e730bd9 · 2025-01-26T21:54:49.000Z
diff --git a/special-pages/pages/new-tab/app/activity/ActivityProvider.js b/special-pages/pages/new-tab/app/activity/ActivityProvider.js
@@ -123,6 +123,7 @@ export function ActivityProvider(props) {
  * @property {string|null|undefined} props.favoriteSrc
  * @property {number} props.faviconMax
  * @property {string} props.etldPlusOne
+ * @property {boolean} props.trackersFound
  */
 
 /**
@@ -155,6 +156,7 @@ function normalizeItems(prev, data) {
                     url: x.url,
                     faviconMax: x.favicon?.maxAvailableSize ?? DDG_DEFAULT_ICON_SIZE,
                     favoriteSrc: x.favicon?.src,
+                    trackersFound: x.trackersFound,
                 };
                 const differs = shallowDiffers(next, prev.items[x.url] || {});
                 return [x.url, differs ? next : prev.items[x.url] || {}];
diff --git a/special-pages/pages/new-tab/app/activity/components/Activity.js b/special-pages/pages/new-tab/app/activity/components/Activity.js
@@ -110,7 +110,7 @@ const BurnableItem = memo(
                     canBurn={true}
                     documentVisibility={documentVisibility}
                 >
-                    <TrackerStatus id={id} />
+                    <TrackerStatus id={id} trackersFound={item.value.trackersFound} />
                     <HistoryItems id={id} />
                 </ActivityItem>
             </ActivityItemAnimationWrapper>
@@ -138,7 +138,7 @@ const RemovableItem = memo(
                 canBurn={canBurn}
                 documentVisibility={documentVisibility}
             >
-                <TrackerStatus id={id} />
+                <TrackerStatus id={id} trackersFound={item.value.trackersFound} />
                 <HistoryItems id={id} />
             </ActivityItem>
         );
@@ -149,20 +149,20 @@ const DDG_MAX_TRACKER_ICONS = 3;
 /**
  * @param {object} props
  * @param {string} props.id
+ * @param {boolean} props.trackersFound
  */
-function TrackerStatus({ id }) {
+function TrackerStatus({ id, trackersFound }) {
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     const { activity } = useContext(SignalStateContext);
     const status = useComputed(() => activity.value.trackingStatus[id]);
     const other = status.value.trackerCompanies.length - DDG_MAX_TRACKER_ICONS;
-    const { env } = useEnv();
-
-    if (env === 'development') {
-        console.groupCollapsed(`trackingStatus ${id}`);
-        console.log('    [total]', status.value.totalCount);
-        console.log('[companies]', status.value.trackerCompanies);
-        console.groupEnd();
-    }
+    // const { env } = useEnv();
+    // if (env === 'development') {
+    //     console.groupCollapsed(`trackingStatus ${id}`);
+    //     console.log('    [total]', status.value.totalCount);
+    //     console.log('[companies]', status.value.trackerCompanies);
+    //     console.groupEnd();
+    // }
 
     const companyIconsMax = other === 0 ? DDG_MAX_TRACKER_ICONS : DDG_MAX_TRACKER_ICONS - 1;
     const icons = status.value.trackerCompanies.slice(0, companyIconsMax).map((item, index) => {
@@ -171,7 +171,10 @@ function TrackerStatus({ id }) {
 
     const otherIcon = other > 0 ? <span class={styles.otherIcon}>+{other + 1}</span> : null;
 
-    if (status.value.totalCount === 0) return <p>{t('activity_no_trackers')}</p>;
+    if (status.value.totalCount === 0) {
+        if (trackersFound) return <p>{t('activity_no_trackers_blocked')}</p>;
+        return <p>{t('activity_no_trackers')}</p>;
+    }
 
     return (
         <div class={styles.companiesIconRow} data-testid="TrackerStatus">
diff --git a/special-pages/pages/new-tab/app/activity/components/ActivityItem.js b/special-pages/pages/new-tab/app/activity/components/ActivityItem.js
@@ -26,7 +26,7 @@ export const ActivityItem = memo(
      */
     function ActivityItem({ canBurn, documentVisibility, title, url, favoriteSrc, faviconMax, etldPlusOne, children }) {
         return (
-            <li key={url} class={cn(styles.item)}>
+            <li key={url} class={cn(styles.item)} data-testid="ActivityItem">
                 <div class={styles.heading}>
                     <a class={styles.favicon} href={url} title={title} data-url={url}>
                         {documentVisibility === 'visible' && (
diff --git a/special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js b/special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js
@@ -210,7 +210,8 @@ export class ActivityPage {
     }
 
     async listsAtMost3TrackerCompanies() {
-        // const { page } = this;
+        const { page } = this;
+        await page.pause();
         // const first = this.context().getByTestId('TrackerStatus').nth(0);
         // const second = this.context().getByTestId('TrackerStatus').nth(1);
         // await expect(second).toMatchAriaSnapshot(`
@@ -223,4 +224,34 @@ export class ActivityPage {
         //         - text: 1 day ago
         // `);
     }
+    async showsEmptyTrackerState() {
+        await expect(this.context().getByTestId('ActivityItem').nth(3)).toMatchAriaSnapshot(`
+          - listitem:
+            - link "t w"
+            - link "twitter.com"
+            - button "Add twitter.com to favorites":
+              - img
+            - button "Clear browsing history and data for twitter.com":
+              - img
+            - paragraph: No trackers blocked
+            - list:
+              - listitem:
+                - link "Trending Topics"
+                - text: 2 days ago`);
+
+        await expect(this.context().getByTestId('ActivityItem').nth(4)).toMatchAriaSnapshot(`
+            - listitem:
+              - link "l i"
+              - link "app.linkedin.com"
+              - button "Add app.linkedin.com to favorites":
+                - img
+              - button "Clear browsing history and data for app.linkedin.com":
+                - img
+              - paragraph: No trackers found
+              - list:
+                - listitem:
+                  - link "Profile Page"
+                  - text: 2 hrs ago
+        `);
+    }
 }
diff --git a/special-pages/pages/new-tab/app/activity/integration-tests/activity.spec.js b/special-pages/pages/new-tab/app/activity/integration-tests/activity.spec.js
@@ -92,6 +92,14 @@ test.describe('activity widget', () => {
         await ap.didRender();
         await ap.listsAtMost3TrackerCompanies();
     });
+    test('supported empty trackers states', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const ap = new ActivityPage(page, ntp);
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { feed: 'activity' } });
+        await ap.didRender();
+        await ap.showsEmptyTrackerState();
+    });
     test('after rendering and navigating to a new tab, data is re-requested on return', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         const ap = new ActivityPage(page, ntp);
diff --git a/special-pages/pages/new-tab/app/activity/mocks/activity.mock-transport.js b/special-pages/pages/new-tab/app/activity/mocks/activity.mock-transport.js
@@ -33,6 +33,7 @@ export function activityMockTransport() {
                         favicon: null,
                         history: [],
                         favorite: false,
+                        trackersFound: false,
                         trackingStatus: { trackerCompanies: [], totalCount: 0 },
                         title: 'example.com',
                     });
diff --git a/special-pages/pages/new-tab/app/activity/mocks/activity.mocks.js b/special-pages/pages/new-tab/app/activity/mocks/activity.mocks.js
@@ -11,6 +11,7 @@ export const activityMocks = {
                 title: 'example.com',
                 etldPlusOne: 'example.com',
                 favorite: false,
+                trackersFound: true,
                 trackingStatus: {
                     trackerCompanies: [{ displayName: 'Google' }, { displayName: 'Facebook' }, { displayName: 'Amazon' }],
                     totalCount: 56,
@@ -44,6 +45,7 @@ export const activityMocks = {
                 title: 'youtube.com',
                 etldPlusOne: 'youtube.com',
                 favorite: true,
+                trackersFound: true,
                 trackingStatus: {
                     trackerCompanies: [
                         { displayName: 'Google' },
@@ -67,6 +69,7 @@ export const activityMocks = {
                 title: 'amazon.com',
                 etldPlusOne: 'amazon.com',
                 favorite: false,
+                trackersFound: true,
                 trackingStatus: {
                     trackerCompanies: [{ displayName: 'Adobe Analytics' }, { displayName: 'Facebook' }],
                     totalCount: 12,
@@ -85,9 +88,10 @@ export const activityMocks = {
                 title: 'twitter.com',
                 etldPlusOne: 'twitter.com',
                 favorite: false,
+                trackersFound: true,
                 trackingStatus: {
-                    trackerCompanies: [{ displayName: 'Google' }, { displayName: 'Meta' }],
-                    totalCount: 8,
+                    trackerCompanies: [],
+                    totalCount: 0,
                 },
                 history: [
                     {
@@ -103,9 +107,10 @@ export const activityMocks = {
                 title: 'app.linkedin.com',
                 etldPlusOne: 'linkedin.com',
                 favorite: false,
+                trackersFound: false,
                 trackingStatus: {
-                    trackerCompanies: [{ displayName: 'LinkedIn Analytics' }],
-                    totalCount: 4,
+                    trackerCompanies: [],
+                    totalCount: 0,
                 },
                 history: [
                     {
diff --git a/special-pages/pages/new-tab/app/activity/strings.json b/special-pages/pages/new-tab/app/activity/strings.json
@@ -1,7 +1,11 @@
 {
   "activity_no_trackers": {
     "title": "No trackers found",
-    "note": "Placeholder message indicating that no trackers are detected or blocked currently"
+    "note": "Placeholder message indicating that no trackers are detected"
+  },
+  "activity_no_trackers_blocked": {
+    "title": "No trackers blocked",
+    "note": "Placeholder message indicating that no trackers are blocked"
   },
   "activity_countBlockedPlural": {
     "title": "<b>{count}</b> tracking attempts blocked",
diff --git a/special-pages/pages/new-tab/messages/types/activity.json b/special-pages/pages/new-tab/messages/types/activity.json
@@ -33,6 +33,10 @@
         "trackingStatus": {
           "$ref": "#/definitions/TrackingStatus"
         },
+        "trackersFound": {
+          "type": "boolean",
+          "description": "Indicates whether trackers were found"
+        },
         "history": {
           "type": "array",
           "items": {
@@ -43,7 +47,7 @@
           "type": "boolean"
         }
       },
-      "required": ["etldPlusOne", "title", "url", "trackingStatus", "history", "favorite", "favicon"]
+      "required": ["etldPlusOne", "title", "url", "trackingStatus", "trackersFound", "history", "favorite", "favicon"]
     },
     "TrackingStatus": {
       "type": "object",
diff --git a/special-pages/pages/new-tab/public/locales/en/new-tab.json b/special-pages/pages/new-tab/public/locales/en/new-tab.json
@@ -275,7 +275,11 @@
   },
   "activity_no_trackers": {
     "title": "No trackers found",
-    "note": "Placeholder message indicating that no trackers are detected or blocked currently"
+    "note": "Placeholder message indicating that no trackers are detected"
+  },
+  "activity_no_trackers_blocked": {
+    "title": "No trackers blocked",
+    "note": "Placeholder message indicating that no trackers are blocked"
   },
   "activity_countBlockedPlural": {
     "title": "<b>{count}</b> tracking attempts blocked",
diff --git a/special-pages/pages/new-tab/types/new-tab.ts b/special-pages/pages/new-tab/types/new-tab.ts
@@ -608,6 +608,10 @@ export interface DomainActivity {
   etldPlusOne: string;
   favicon: Favicon;
   trackingStatus: TrackingStatus;
+  /**
+   * Indicates whether trackers were found
+   */
+  trackersFound: boolean;
   history: HistoryEntry[];
   favorite: boolean;
 }
