Feature: Bridge PA data to UI panels (#864)

* Update types, row height class, sorting and resizing logic * Update tables column, filters config, UI changes to tables, add bottom tray and handle prettyJson * Update colors, tabs, and pill classes * Add frameoverlay for auctions table * Update type and dependency * Update data providers to handle PA data * Fix tests * Conditionally reset data * Remove the word date and minor refactoring --------- Co-authored-by: sayedtaqui <[email protected]>
GoogleChromeLabs · Nov 5, 2024 · 6485fc6 · 6485fc6
1 parent 621e115
commit 6485fc6
Show file tree

Hide file tree

Showing 42 changed files with 1,589 additions and 334 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/common/src/protectedAudience.types.ts b/packages/common/src/protectedAudience.types.ts
@@ -75,6 +75,9 @@ export type AdsAndBiddersType = {
     adUnitCode: string;
     bidders: string[];
     mediaContainerSize: number[][];
+    winningBid: number;
+    bidCurrency: string;
+    winningBidder: string;
   };
 };
 

diff --git a/packages/design-system/src/components/pill/index.tsx b/packages/design-system/src/components/pill/index.tsx
@@ -25,7 +25,7 @@ interface PillProps {
 
 const Pill = ({ title }: PillProps) => {
   return (
-    <div className="h-5 p-2 text-raisin-black dark:text-bright-gray border border-gray-300 dark:border-quartz rounded-full">
+    <div className="h-fit p-1 dark:text-bright-gray border border-gray-400 dark:border-dark-gray-x11 rounded-full">
       {title}
     </div>
   );

diff --git a/packages/design-system/src/components/table/components/index.tsx b/packages/design-system/src/components/table/components/index.tsx
@@ -38,6 +38,7 @@ interface TableProps {
   extraInterfaceToTopBar?: () => React.JSX.Element;
   minWidth?: string;
   hideSearch?: boolean;
+  rowHeightClass?: string;
 }
 
 const Table = ({
@@ -47,6 +48,7 @@ const Table = ({
   extraInterfaceToTopBar,
   minWidth,
   hideSearch,
+  rowHeightClass,
 }: TableProps) => {
   const {
     tableContainerRef,
@@ -122,7 +124,7 @@ const Table = ({
         extraInterface={extraInterfaceToTopBar}
         hideSearch={hideSearch}
       />
-      {!hideFiltering && (
+      {hideFiltering ? null : (
         <ChipsBar
           selectedFilters={selectedFilters}
           resetFilters={resetFilters}
@@ -137,6 +139,7 @@ const Table = ({
             enable={{
               right: true,
             }}
+            className="overflow-auto h-full"
           >
             <FiltersSidebar
               filters={filters}
@@ -171,6 +174,7 @@ const Table = ({
               isRowFocused={isRowFocused}
               setIsRowFocused={setIsRowFocused}
               selectedKey={selectedKey}
+              rowHeightClass={rowHeightClass}
             />
           </div>
         </div>

diff --git a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx
@@ -36,6 +36,7 @@ interface BodyCellProps {
     Element: (props: any) => React.JSX.Element;
   };
   onRowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  rowHeightClass?: string;
 }
 
 const BodyCell = ({
@@ -47,6 +48,7 @@ const BodyCell = ({
   showIcon = false,
   icon,
   isHighlighted = false,
+  rowHeightClass,
 }: BodyCellProps) => {
   const IconElement = icon?.Element;
   const cellValue = cell?.() ?? '';
@@ -68,13 +70,13 @@ const BodyCell = ({
           e.stopPropagation();
         }
       }}
-      className={`flex box-border outline-0 px-1 py-px h-5 text-xs ${
+      className={`flex box-border outline-0 px-1 py-px text-xs ${
         isHighlighted
           ? `${
               isRowFocused ? 'text-white' : 'dark:text-dirty-red text-dirty-red'
             }`
           : 'dark:text-bright-gray'
-      } cursor-default flex-1`}
+      } cursor-default flex-1 ${rowHeightClass ?? 'h-5'}`}
     >
       {hasIcon && (
         <div className="h-full grid place-items-center min-w-[15px] pr-1">

diff --git a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx
@@ -41,6 +41,7 @@ interface BodyRowProps {
     e: React.MouseEvent<HTMLDivElement>,
     row: TableRow
   ) => void;
+  rowHeightClass?: string;
 }
 
 const BodyRow = ({
@@ -55,6 +56,7 @@ const BodyRow = ({
   onRowClick,
   onKeyDown,
   onRowContextMenu,
+  rowHeightClass,
 }: BodyRowProps) => {
   const rowKey = getRowObjectKey(row);
   const isHighlighted = row.originalData?.highlighted;
@@ -123,6 +125,7 @@ const BodyRow = ({
               showBodyCellPrefixIcon ? showBodyCellPrefixIcon(row) : false
             }
             icon={bodyCellPrefixIcon ?? undefined}
+            rowHeightClass={rowHeightClass}
           />
         )
       )}

diff --git a/packages/design-system/src/components/table/components/tableBody/index.tsx b/packages/design-system/src/components/table/components/tableBody/index.tsx
@@ -30,12 +30,14 @@ interface TableBodyProps {
   isRowFocused: boolean;
   setIsRowFocused: (state: boolean) => void;
   selectedKey: string | undefined | null;
+  rowHeightClass?: string;
 }
 
 const TableBody = ({
   isRowFocused,
   setIsRowFocused,
   selectedKey,
+  rowHeightClass,
 }: TableBodyProps) => {
   const {
     rows,
@@ -125,7 +127,8 @@ const TableBody = ({
   );
 
   const tableRowClassName = classNames(
-    'h-5 outline-0 flex divide-x divide-american-silver dark:divide-quartz',
+    'outline-0 flex divide-x divide-american-silver dark:divide-quartz',
+    rowHeightClass ?? 'h-5',
     selectedKey === null &&
       (isRowFocused
         ? 'bg-gainsboro dark:bg-outer-space'
@@ -163,6 +166,7 @@ const TableBody = ({
           }}
           onKeyDown={handleKeyDown}
           onRowContextMenu={onRowContextMenu}
+          rowHeightClass={rowHeightClass}
         />
       ))}
       <div

diff --git a/packages/design-system/src/components/table/useTable/types.ts b/packages/design-system/src/components/table/useTable/types.ts
@@ -16,9 +16,23 @@
 /**
  * External dependencies.
  */
-import type { CookieTableData, ErroredOutUrlsData } from '@google-psat/common';
+import type {
+  AdsAndBiddersType,
+  CookieTableData,
+  InterestGroups,
+  NoBidsType,
+  singleAuctionEvent,
+  ErroredOutUrlsData,
+} from '@google-psat/common';
 
-export type TableData = (CookieTableData | ErroredOutUrlsData) & {
+export type TableData = (
+  | CookieTableData
+  | InterestGroups
+  | singleAuctionEvent
+  | NoBidsType[keyof NoBidsType]
+  | AdsAndBiddersType[keyof AdsAndBiddersType]
+  | ErroredOutUrlsData
+) & {
   highlighted?: boolean;
 };
 

diff --git a/packages/design-system/src/components/table/useTable/useColumnResizing/index.tsx b/packages/design-system/src/components/table/useTable/useColumnResizing/index.tsx
@@ -202,10 +202,6 @@ const useColumnResizing = (
         );
       }
     }
-
-    return () => {
-      setColumns([]);
-    };
   }, [getPreferences, setColumnsCallback, tablePersistentSettingsKey]);
 
   useEffect(() => {

diff --git a/packages/design-system/src/components/table/useTable/useColumnSorting/index.tsx b/packages/design-system/src/components/table/useTable/useColumnSorting/index.tsx
@@ -74,8 +74,8 @@ const useColumnSorting = (
     )?.sortingComparator;
 
     const _sortedData = [...data].sort((a, b) => {
-      let candidateA = getValueByKey(sortKey, a);
-      let candidateB = getValueByKey(sortKey, b);
+      let candidateA = getValueByKey(sortKey, a) ?? '';
+      let candidateB = getValueByKey(sortKey, b) ?? '';
 
       if (sortingComparator) {
         return sortingComparator(candidateA, candidateB) * (ascending ? 1 : -1);

diff --git a/packages/design-system/src/components/tabs/index.tsx b/packages/design-system/src/components/tabs/index.tsx
@@ -69,7 +69,7 @@ const Tabs = ({ items, activeTab, setActiveTab }: TabsProps) => {
             onClick={() => setActiveTab(index)}
             onKeyDown={handleKeyDown}
             className={classNames(
-              'pb-1.5 px-3 border-b-2 hover:opacity-80 outline-none text-sm',
+              'pb-1.5 px-1.5 border-b-2 hover:opacity-80 outline-none text-sm text-nowrap',
               {
                 'border-bright-navy-blue dark:border-jordy-blue text-bright-navy-blue dark:text-jordy-blue':
                   index === activeTab,

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -40,6 +40,7 @@
     "marked-alert": "^2.0.2",
     "mermaid": "^11.2.0",
     "p-queue": "^7.3.4",
+		"pretty-print-json": "^3.0.2",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",

diff --git a/packages/extension/src/contentScript/index.ts b/packages/extension/src/contentScript/index.ts
@@ -88,6 +88,11 @@ class WebpageContentScript {
    */
   isInspecting = false;
 
+  /**
+   * If true, the page is currently being inspected.
+   */
+  mode = 'Cookies';
+
   /**
    * If true, the mouse is currently hovering over the page.
    */
@@ -320,11 +325,18 @@ class WebpageContentScript {
    */
   onMessage = (response: ResponseType) => {
     this.isInspecting = response.isInspecting;
+    if (response?.selectedAdUnit) {
+      this.mode = 'PA';
+    }
 
     if (response.isInspecting) {
       this.removeEventListeners();
       this.addEventListeners();
-      toggleFrameHighlighting(true);
+      toggleFrameHighlighting(
+        true,
+        response?.selectedAdUnit,
+        this.mode === 'PA'
+      );
       this.insertPopovers(response);
     } else {
       this.abortInspection();
@@ -352,6 +364,78 @@ class WebpageContentScript {
     return overlay;
   }
 
+  /**
+   * Insert tooltip.
+   * @param {ResponseType} response Response.
+   * @returns {HTMLElement} Tooltip.
+   */
+  insertProtectedAudienceTooltip(response: ResponseType): HTMLElement | null {
+    if (!response.selectedAdUnit) {
+      return null;
+    }
+
+    const frame = document.getElementById(response.selectedAdUnit);
+
+    if (!frame) {
+      return null;
+    }
+    removeAllPopovers();
+    this.insertOverlay(frame);
+
+    const tooltip = addTooltip(frame, response, 0, 0);
+
+    const arrowElement = document.getElementById('ps-content-tooltip-arrow');
+
+    if (frame && tooltip && arrowElement) {
+      this.cleanup = autoUpdate(frame, tooltip, () => {
+        computePosition(frame, tooltip, {
+          platform: platform,
+          placement: 'top',
+          middleware: [
+            shift({
+              boundary: document.querySelector('body'),
+            }),
+            flip({
+              boundary: document.querySelector('body'),
+            }),
+            arrow({
+              element: arrowElement,
+            }),
+          ],
+        }).then(({ x, y, middlewareData, placement }) => {
+          Object.assign(tooltip.style, {
+            top: `${y}px`,
+            left: `${x}px`,
+          });
+          const side = placement.split('-')[0];
+
+          const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+          }[side];
+
+          if (middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+            Object.assign(arrowElement.style, {
+              left: arrowX ? `${arrowX - 15}px` : '',
+              top: arrowY ? `${arrowY}px` : '',
+              right: '',
+              bottom: '',
+              [staticSide as string]: `${arrowElement.offsetWidth / 2}px`,
+              transform: 'rotate(45deg)',
+            });
+          }
+          return tooltip;
+        });
+      });
+    }
+
+    return tooltip;
+  }
+
   /**
    * Insert tooltip.
    * @param {HTMLElement} frame Frame
@@ -477,6 +561,7 @@ class WebpageContentScript {
     this.port?.onMessage.removeListener(this.onMessage);
     this.port = null;
     this.abortInspection();
+    this.mode = 'Cookies';
   };
 
   /**
@@ -586,6 +671,12 @@ class WebpageContentScript {
    * @param {ResponseType} response - The incoming message/response from the port.
    */
   insertPopovers(response: ResponseType) {
+    if (response.isForProtectedAudience) {
+      const tooltip = this.insertProtectedAudienceTooltip(response);
+      tooltip?.scrollIntoView();
+      return;
+    }
+
     // If the no frame was selected in devtool.
     if (response.removeAllFramePopovers && !response.selectedFrame) {
       removeAllPopovers();
@@ -638,6 +729,10 @@ class WebpageContentScript {
    */
   // eslint-disable-next-line complexity
   handleHoverEvent = (event: MouseEvent) => {
+    if (this.mode === 'PA') {
+      return;
+    }
+
     const target = event.target as HTMLElement;
     const isNonIframeElement = target.tagName !== 'IFRAME';
     const isTooltipElement =