ntp: privacy stats ordering + translations (#1242)

* added test for rendering order

* ntp: privacy stats ordering + translations

---------

Co-authored-by: Shane Osbourne <[email protected]>

Author: shakyShane

special-pages/messages/new-tab/examples/stats.js

@@ -4,9 +4,10 @@
 const privacyStatsData = {
     totalCount: 12345,
     trackerCompanies: [
+        { displayName: 'Tracker Co. C', count: 91011 },
         { displayName: 'Tracker Co. A', count: 1234 },
+        { displayName: '__other__', count: 89901 },
         { displayName: 'Tracker Co. B', count: 5678 },
-        { displayName: 'Tracker Co. C', count: 91011 },
     ],
 };
 

special-pages/pages/new-tab/app/privacy-stats/PrivacyStats.js

@@ -7,6 +7,8 @@ import { useVisibility } from '../widget-list/widget-config.provider.js';
 import { viewTransition } from '../utils.js';
 import { ShowHideButton } from '../components/ShowHideButton.jsx';
 import { useCustomizer } from '../customizer/Customizer.js';
+import { DDG_STATS_OTHER_COMPANY_IDENTIFIER } from './constants.js';
+import { sortStatsForDisplay } from './privacy-stats.utils.js';
 
 /**
  * @typedef {import('../../../../types/new-tab').TrackerCompany} TrackerCompany
@@ -135,23 +137,29 @@ export function Heading({ expansion, trackerCompanies, totalCount, onToggle, but
 // eslint-disable-next-line no-redeclare
 export function Body({ trackerCompanies, listAttrs = {} }) {
     const max = trackerCompanies[0]?.count ?? 0;
+    const { t } = useTypedTranslation();
     const [formatter] = useState(() => new Intl.NumberFormat());
+    const sorted = sortStatsForDisplay(trackerCompanies);
 
     return (
-        <ul {...listAttrs} class={styles.list}>
-            {trackerCompanies.map((company) => {
+        <ul {...listAttrs} class={styles.list} data-testid="CompanyList">
+            {sorted.map((company) => {
                 const percentage = Math.min((company.count * 100) / max, 100);
                 const valueOrMin = Math.max(percentage, 10);
                 const inlineStyles = {
                     width: `${valueOrMin}%`,
                 };
                 const countText = formatter.format(company.count);
+                // prettier-ignore
+                const displayName = company.displayName === DDG_STATS_OTHER_COMPANY_IDENTIFIER
+                        ? t('trackerStatsOtherCompanyName')
+                        : company.displayName;
                 return (
                     <li key={company.displayName}>
                         <div class={styles.row}>
                             <div class={styles.company}>
-                                <CompanyIcon company={company} />
-                                <span class={styles.name}>{company.displayName}</span>
+                                <CompanyIcon displayName={company.displayName} />
+                                <span class={styles.name}>{displayName}</span>
                             </div>
                             <span class={styles.count}>{countText}</span>
                             <span class={styles.bar}></span>
@@ -210,15 +218,19 @@ export function PrivacyStatsConsumer() {
     return null;
 }
 
-function CompanyIcon({ company }) {
-    const icon = company.displayName.toLowerCase().split('.')[0];
+/**
+ * @param {object} props
+ * @param {string} props.displayName
+ */
+function CompanyIcon({ displayName }) {
+    const icon = displayName.toLowerCase().split('.')[0];
     const cleaned = icon.replace(/ /g, '-');
     const firstChar = icon[0];
 
     return (
         <span className={styles.icon}>
-            {icon === 'other' && <Other />}
-            {icon !== 'other' && (
+            {icon === DDG_STATS_OTHER_COMPANY_IDENTIFIER && <Other />}
+            {icon !== DDG_STATS_OTHER_COMPANY_IDENTIFIER && (
                 <img
                     src={`./company-icons/${cleaned}.svg`}
                     alt={icon + ' icon'}

special-pages/pages/new-tab/app/privacy-stats/constants.js

@@ -0,0 +1,4 @@
+/**
+ * @module Privacy Stats Constants
+ */
+export const DDG_STATS_OTHER_COMPANY_IDENTIFIER = '__other__';

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

@@ -14,5 +14,13 @@ test.describe('newtab privacy stats', () => {
         expect(calls1.length).toBe(1);
         expect(calls2.length).toBe(1);
         expect(calls3.length).toBe(1);
+
+        const listItems = page.getByTestId('CompanyList').locator('li');
+        expect(await listItems.count()).toBe(5);
+        expect(await listItems.nth(0).textContent()).toBe('Facebook310');
+        expect(await listItems.nth(1).textContent()).toBe('Google279');
+        expect(await listItems.nth(2).textContent()).toBe('Amazon67');
+        expect(await listItems.nth(3).textContent()).toBe('Google Ads2');
+        expect(await listItems.nth(4).textContent()).toBe('Other210');
     });
 });

special-pages/pages/new-tab/app/privacy-stats/mocks/stats.js

@@ -1,4 +1,9 @@
-// todo: add schema for types here.
+import { DDG_STATS_OTHER_COMPANY_IDENTIFIER } from '../constants.js';
+
+/**
+ * @import { PrivacyStatsData } from "../../../../../types/new-tab";
+ * @type {Record<string, PrivacyStatsData>}
+ */
 export const stats = {
     few: {
         totalCount: 481_113,
@@ -11,6 +16,10 @@ export const stats = {
                 displayName: 'Google',
                 count: 279,
             },
+            {
+                displayName: DDG_STATS_OTHER_COMPANY_IDENTIFIER,
+                count: 210,
+            },
             {
                 displayName: 'Amazon',
                 count: 67,
@@ -19,12 +28,7 @@ export const stats = {
                 displayName: 'Google Ads',
                 count: 2,
             },
-            {
-                displayName: 'Other',
-                count: 210,
-            },
         ],
-        trackerCompaniesPeriod: 'last-day',
     },
     single: {
         totalCount: 481_113,
@@ -34,16 +38,13 @@ export const stats = {
                 count: 1,
             },
         ],
-        trackerCompaniesPeriod: 'last-day',
     },
     norecent: {
         totalCount: 481_113,
         trackerCompanies: [],
-        trackerCompaniesPeriod: 'last-day',
     },
     none: {
         totalCount: 0,
         trackerCompanies: [],
-        trackerCompaniesPeriod: 'last-day',
     },
 };

special-pages/pages/new-tab/app/privacy-stats/privacy-stats.md

@@ -30,6 +30,27 @@ title: Privacy Stats
       }
       ```
 
-## Examples:
-The following examples show the data types in JSON format:
+## Example:
+
+Note: The frontend will re-order the list based on the following two rules:
+
+* First, descending order, from the highest count to lowest
+* Second, the special entry `__other__` will always be placed at the end.
+
+So, the following input is fine, no need for the native side to put the list into any order 
+
+```json
+{
+  "totalCount": 12345,
+  "trackerCompanies": [
+    { "displayName": "__other__", "count": 89901 },
+    { "displayName": "Tracker Co. C", "count": 91011 },
+    { "displayName": "Tracker Co. A", "count": 1234 },
+    { "displayName": "Tracker Co. B", "count": 5678 }
+  ]
+}
+```
+
+The following examples show the data types in JSON format (these are type-checked, so can be replied upon)
 [messages/new-tab/examples/stats.js](../../../../messages/new-tab/examples/stats.js)
+

special-pages/pages/new-tab/app/privacy-stats/privacy-stats.utils.js

@@ -0,0 +1,18 @@
+import { DDG_STATS_OTHER_COMPANY_IDENTIFIER } from './constants.js';
+
+/**
+ * Sort into descending order + place __other__ at the end.
+ *
+ * @import { TrackerCompany } from "../../../../types/new-tab"
+ * @param {TrackerCompany[]} stats
+ * @return {TrackerCompany[]}
+ */
+export function sortStatsForDisplay(stats) {
+    const sorted = stats.sort((a, b) => b.count - a.count);
+    const other = sorted.findIndex((x) => x.displayName === DDG_STATS_OTHER_COMPANY_IDENTIFIER);
+    if (other > -1) {
+        const popped = sorted.splice(other, 1);
+        sorted.push(popped[0]);
+    }
+    return sorted;
+}

special-pages/pages/new-tab/app/privacy-stats/unit-tests/stats-ordering.js

@@ -0,0 +1,48 @@
+import { describe, it } from 'node:test';
+import { deepEqual } from 'node:assert/strict';
+import { stats } from '../mocks/stats.js';
+import { sortStatsForDisplay } from '../privacy-stats.utils.js';
+
+/**
+ * @import { TrackerCompany } from "../../../../../types/new-tab"
+ */
+
+describe('stats re-ordering', () => {
+    it('orders based on count + places __other__ at the end of the list', () => {
+        /** @type {TrackerCompany[]} */
+        const input = stats.few.trackerCompanies;
+        const expected = [
+            { displayName: 'Facebook', count: 310 },
+            { displayName: 'Google', count: 279 },
+            { displayName: 'Amazon', count: 67 },
+            { displayName: 'Google Ads', count: 2 },
+            { displayName: '__other__', count: 210 },
+        ];
+        const actual = sortStatsForDisplay(input);
+        deepEqual(actual, expected);
+    });
+    it('orders when other is absent', () => {
+        /** @type {TrackerCompany[]} */
+        const input = [
+            { displayName: 'Google', count: 279 },
+            { displayName: 'Google Ads', count: 2 },
+            { displayName: 'Amazon', count: 67 },
+            { displayName: 'Facebook', count: 310 },
+        ];
+        const expected = [
+            { displayName: 'Facebook', count: 310 },
+            { displayName: 'Google', count: 279 },
+            { displayName: 'Amazon', count: 67 },
+            { displayName: 'Google Ads', count: 2 },
+        ];
+        const actual = sortStatsForDisplay(input);
+        deepEqual(actual, expected);
+    });
+    it('sorts a single item', () => {
+        /** @type {TrackerCompany[]} */
+        const input = [{ displayName: 'Google', count: 279 }];
+        const expected = [{ displayName: 'Google', count: 279 }];
+        const actual = sortStatsForDisplay(input);
+        deepEqual(actual, expected);
+    });
+});

special-pages/pages/new-tab/src/locales/en/newtab.json

@@ -61,6 +61,10 @@
     "title": "Hide recent activity",
     "note": "The aria-label text for a toggle button that hides the detailed activity feed"
   },
+  "trackerStatsOtherCompanyName": {
+    "title": "Other",
+    "note": "A placeholder to represent an aggregated count of entries, not present in the rest of the list. For example, 'Other: 200', which would mean 200 entries excluding the ones already shown"
+  },
   "favorites_show_less": {
     "title": "Show less",
     "note": ""
@@ -181,4 +185,4 @@
     "title": "Pinned to Taskbar!",
     "note": "Button text after clicking on the Next Steps card for adding DDG app to OS dock"
   }
-}
+}