Feat: Add "Private Aggregation" panel

assets/readme.md

@@ -0,0 +1,3 @@
+## Assets Folder
+
+All assets used in this directory are third party.

data/PSInfo.json

@@ -86,5 +86,14 @@
     "publicDiscussion": "https://github.com/miketaylr/user-agent-reduction/issues",
     "videoOverview": "",
     "devDocumentation": "https://developers.google.com/privacy-sandbox/protections/user-agent"
+  },
+  "private-aggregation": {
+    "name": "Private Aggregation",
+    "description": "The Private Aggregation API has been built for aggregating and reporting on cross-site data in a privacy-preserving manner.",
+		"useI18n": false,
+    "proposal": "https://github.com/patcg-individual-drafts/private-aggregation-api",
+    "publicDiscussion": "https://github.com/patcg-individual-drafts/private-aggregation-api/issues",
+		"publicExplainer": "https://github.com/patcg-individual-drafts/private-aggregation-api/blob/main/report_verification.md",
+    "devDocumentation": "https://developers.google.com/privacy-sandbox/relevance/private-aggregation/fundamentals"
   }
 }

packages/design-system/src/components/landingPage/infoCard/fetchPSInfo.ts

@@ -26,6 +26,7 @@ export enum PSInfoKey {
   'UserAgentReduction' = 'user-agent-reduction',
   'RelatedWebsiteSets' = 'related-website-sets',
   'Chips' = 'chips',
+  'PrivateAggregation' = 'private-aggregation',
 }
 
 export type PSInfoKeyType = (typeof PSInfoKey)[keyof typeof PSInfoKey];

packages/design-system/src/components/sidebar/useSidebar/constants.ts

@@ -26,6 +26,7 @@ export enum SIDEBAR_ITEMS_KEYS {
   TOPICS = 'topics',
   ATTRIBUTION = 'attribution',
   PROTECTED_AUDIENCE = 'protected-audience',
+  PRIVATE_AGGREGATION = 'private-aggregation',
   ANTI_COVERT_TRACKING = 'anti-covert-tracking',
   BOUNCE_TRACKING = 'bounce-tracking',
   FINGERPRINTING = 'fingerprinting',

packages/extension/src/view/devtools/components/privateAdvertising/index.ts

@@ -16,3 +16,5 @@
 export { default as Attribution } from './attribution';
 export { default as Topics } from './topics';
 export { default as PrivateAdvertising } from './privateAdvertising';
+export { default as ProtectedAudience } from './protectedAudience';
+export { default as PrivateAggregation } from './privateAggregation';

packages/extension/src/view/devtools/components/privateAdvertising/privateAggregation/index.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { LandingPage, PSInfoKey } from '@google-psat/design-system';
+
+const PrivateAggregation = () => {
+  return (
+    <div data-testid="protected-audience-content" className="h-full w-full">
+      <LandingPage
+        title="Private Aggregation"
+        psInfoKey={PSInfoKey.PrivateAggregation}
+        extraClasses="max-w-2xl h-fit"
+      />
+    </div>
+  );
+};
+
+export default PrivateAggregation;

packages/extension/src/view/devtools/tabs.ts

@@ -54,6 +54,10 @@ import SettingsTab from '../../../../../assets/icons/settings-tab.svg';
 // @ts-ignore
 // eslint-disable-next-line import/no-relative-packages
 import SettingsTabWhite from '../../../../../assets/icons/settings-tab-white.svg';
+// @ts-ignore
+// eslint-disable-next-line import/no-relative-packages
+import PrivateAggregationicon from '../../../../../assets/icons/private-aggregation.svg';
+
 import {
   SiteBoundaries,
   Chips,
@@ -67,9 +71,10 @@ import {
   PrivacySandbox,
   Settings,
   FacilitatedTesting,
+  ProtectedAudience,
+  PrivateAggregation,
 } from './components';
 import { I18n } from '@google-psat/i18n';
-import ProtectedAudience from './components/privateAdvertising/protectedAudience';
 
 const TABS: SidebarItems = {
   [SIDEBAR_ITEMS_KEYS.PRIVACY_SANDBOX]: {
@@ -193,6 +198,25 @@ const TABS: SidebarItems = {
             },
             children: {},
           },
+          [SIDEBAR_ITEMS_KEYS.PRIVATE_AGGREGATION]: {
+            title: 'Private Aggregation',
+            panel: {
+              Element: PrivateAggregation,
+            },
+            icon: {
+              Element: PrivateAggregationicon,
+              props: {
+                className: 'fill-gray',
+              },
+            },
+            selectedIcon: {
+              Element: PrivateAggregationicon,
+              props: {
+                className: 'fill-white',
+              },
+            },
+            children: {},
+          },
         },
       },
       [SIDEBAR_ITEMS_KEYS.ANTI_COVERT_TRACKING]: {