ntp: fixed the empty state of activity widget when trackers are present

Author: shakyShane

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

@@ -31,6 +31,15 @@ export const activityExamples = {
             </Activity>
         ),
     },
+    'activity.noActivity.someTrackers': {
+        factory: () => (
+            <Activity expansion={'collapsed'} itemCount={0} trackerCount={56} toggle={noop('toggle')} batched={false}>
+                <Mock size={0}>
+                    <ActivityBody canBurn={false} visibility={'visible'} />
+                </Mock>
+            </Activity>
+        ),
+    },
 };
 
 /**

special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js

@@ -426,4 +426,13 @@ export class ActivityPage {
             - paragraph: Past 7 days
         `);
     }
+
+    async hasTrackingInfoWithoutButtons() {
+        const { page } = this;
+        await expect(page.getByTestId('ActivityHeading')).toMatchAriaSnapshot(`
+          - img "Privacy Shield"
+          - heading "56 tracking attempts blocked" [level=2]
+          - paragraph: Past 7 days
+      `);
+    }
 }

special-pages/pages/new-tab/app/activity/integration-tests/activity.spec.js

@@ -219,9 +219,35 @@ test.describe('activity widget', () => {
             });
 
             await widget.hasRows(5);
-            await batching.removesItem(0);
+            await batching.itemRemovedViaPatch(0);
             await widget.hasRows(4);
         });
+        test('patching removes last item and maintains tracker count', async ({ page }, workerInfo) => {
+            test.info().annotations.push({
+                type: 'link',
+                description: 'https://app.asana.com/1/137249556945/project/1207414201589134/task/1210188026604205?focus=true',
+            });
+            test.info().annotations.push({
+                type: 'info',
+                description: `
+                    This test simulates removing the last item in the list. When that occurs, the tracker count
+                    should remain if it was greater than zero. The bug here was that we'd reset back to 'no tracking activity'.
+                `,
+            });
+            const ntp = NewtabPage.create(page, workerInfo);
+            await ntp.reducedMotion();
+
+            const widget = new ActivityPage(page, ntp);
+            const batching = new BatchingPage(page, ntp, widget);
+
+            await ntp.openPage({
+                additional: { feed: 'activity', 'activity.api': 'batched', platform: 'windows', activity: 'singleWithTrackers' },
+            });
+
+            await widget.hasRows(1);
+            await batching.removesItem({ index: 0, nextTrackerCount: 56 }); // from activity/mocks/activity.mocks.js
+            await widget.hasTrackingInfoWithoutButtons();
+        });
         test('items are fetched to replace patched removals', async ({ page }, workerInfo) => {
             const ntp = NewtabPage.create(page, workerInfo);
             await ntp.reducedMotion();

special-pages/pages/new-tab/app/activity/integration-tests/batching.page.js

@@ -106,13 +106,28 @@ export class BatchingPage {
      *
      * @param {number} index - The index of the item to remove from the sample data array.
      */
-    async removesItem(index) {
+    async itemRemovedViaPatch(index) {
         const data = generateSampleData(this.ap.entries);
         data.splice(index, 1);
         const update = toPatch(data);
         await this.ntp.mocks.simulateSubscriptionMessage(sub('activity_onDataPatch'), update);
     }
 
+    /**
+     * Simulates removing all items
+     * @param {object} params
+     * @param {number} params.index - The index of the item to remove from the sample data array.
+     * @param {number} params.nextTrackerCount
+     */
+    async removesItem({ index, nextTrackerCount }) {
+        const { page } = this;
+        await page.locator('button[data-action="remove"]').nth(index).click();
+
+        const update = toPatch([]);
+        update.totalTrackersBlocked = nextTrackerCount;
+        await this.ntp.mocks.simulateSubscriptionMessage(sub('activity_onDataPatch'), update);
+    }
+
     async fillsHoleWhenItemRemoved() {
         if (this.ap.entries !== 6) throw new Error('this scenario expects 6 initial items');
 
@@ -131,7 +146,7 @@ export class BatchingPage {
         });
 
         // now remove the first item via subscription
-        await this.removesItem(0);
+        await this.itemRemovedViaPatch(0);
 
         // now there must have been 2 calls
         const [, second] = await this.ntp.mocks.waitForCallCount({ method: 'activity_getDataForUrls', count: 2 });

special-pages/pages/new-tab/app/activity/mocks/activity.mock-transport.js

@@ -36,6 +36,17 @@ export function activityMockTransport() {
             /** @type {import('../../../types/new-tab.ts').NewTabMessages['notifications']} */
             const msg = /** @type {any} */ (_msg);
             switch (msg.method) {
+                case 'activity_removeItem': {
+                    const oldCount = dataset.activity.reduce((acc, item) => acc + item.trackingStatus.totalCount, 0);
+                    dataset.activity = dataset.activity.filter((x) => x.url !== msg.params.url);
+                    const cb = subs.get('activity_onDataPatch');
+                    const p = toPatch(dataset.activity);
+                    p.totalTrackersBlocked = oldCount;
+                    setTimeout(() => {
+                        cb(p);
+                    }, 0);
+                    break;
+                }
                 default: {
                     console.warn('unhandled notification', msg);
                 }
@@ -53,6 +64,9 @@ export function activityMockTransport() {
             if (sub === 'activity_onDataUpdate') {
                 subs.set('activity_onDataUpdate', cb);
             }
+            if (sub === 'activity_onDataPatch') {
+                subs.set('activity_onDataPatch', cb);
+            }
             if (sub === 'activity_onDataUpdate' && url.searchParams.has('flood')) {
                 let count = 0;
                 const int = setInterval(() => {

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

@@ -40,6 +40,23 @@ export const activityMocks = {
             },
         ],
     },
+    singleWithTrackers: {
+        activity: [
+            {
+                favicon: { src: 'selco-icon.png' },
+                url: 'https://example.com',
+                title: 'example.com',
+                etldPlusOne: 'example.com',
+                favorite: false,
+                trackersFound: true,
+                trackingStatus: {
+                    trackerCompanies: [{ displayName: 'Google' }, { displayName: 'Facebook' }, { displayName: 'Amazon' }],
+                    totalCount: 56,
+                },
+                history: [],
+            },
+        ],
+    },
     few: {
         activity: [
             {

special-pages/pages/new-tab/app/privacy-stats/components/ActivityHeading.js

@@ -24,8 +24,8 @@ export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount,
     const [formatter] = useState(() => new Intl.NumberFormat());
     const adBlocking = useAdBlocking();
 
-    const none = itemCount === 0;
-    const someItems = itemCount > 0;
+    const none = itemCount === 0 && trackerCount === 0;
+    const some = itemCount > 0 || trackerCount > 0;
     const trackerCountFormatted = formatter.format(trackerCount);
 
     let allTimeString;
@@ -46,7 +46,7 @@ export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount,
                 <img src={adBlocking ? './icons/shield-green.svg' : './icons/shield.svg'} alt="Privacy Shield" />
             </span>
             {none && <h2 className={styles.title}>{t('activity_noRecent_title')}</h2>}
-            {someItems && (
+            {some && (
                 <h2 className={styles.title}>
                     <Trans str={allTimeString} values={{ count: trackerCountFormatted }} />
                 </h2>
@@ -64,12 +64,12 @@ export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount,
                     />
                 </span>
             )}
-            {itemCount === 0 && (
+            {none && (
                 <p className={cn(styles.subtitle, { [styles.indented]: !adBlocking })}>
                     {adBlocking ? t('activity_noRecentAdsAndTrackers_subtitle') : t('activity_noRecent_subtitle')}
                 </p>
             )}
-            {itemCount > 0 && (
+            {some && (
                 <p className={cn(styles.subtitle, styles.indented, { [styles.uppercase]: !adBlocking })}>
                     {t('stats_feedCountBlockedPeriod')}
                 </p>