Feature: Setup multi-seller auction table (#917)

* Fix replacer function. * Uplift multiseller state * Memoise data for unnecessary side effects * Add auction events for multi-seller. * Use state instead of constant. * Fix transformer. * Fix Ad Unit Code and Ad Container Size in Bids tab in the bottom table shouldn’t be empty * Update data for ad unit and time --------- Co-authored-by: Amoghavarsha Kudaligi <[email protected]> Co-authored-by: sayedtaqui <[email protected]>
GoogleChromeLabs · Jan 21, 2025 · 5e1f565 · 5e1f565
1 parent 98e8c62
commit 5e1f565
Show file tree

Hide file tree

Showing 10 changed files with 268 additions and 159 deletions.
diff --git a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js
@@ -41,13 +41,13 @@ const setUpAdUnitCode = (steps, index) => {
         },
         {
           title: 'adunit-code',
-          description: 'div-200-1',
+          description: 'div-200-2',
           type: 'box',
           color: colors.box.browser,
         },
         {
           title: 'adunit-code',
-          description: 'div-200-1',
+          description: 'div-200-3',
           type: 'box',
           color: colors.box.browser,
         },

diff --git a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setupBranches.js b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setupBranches.js
@@ -28,18 +28,18 @@ const setupBranches = (steps, index) => {
       currentIndex: index,
       branches: [
         {
-          date: '2024-10-02',
-          time: '10:00:22PM',
+          date: 'Sun, 01 October 2023',
+          time: '6:30:00 GMT',
           type: 'datetime',
         },
         {
-          date: '2024-10-03',
-          time: '11:00:22PM',
+          date: 'Sun, 01 October 2023',
+          time: '6:31:00 GMT',
           type: 'datetime',
         },
         {
-          date: '2024-10-03',
-          time: '11:00:22PM',
+          date: 'Sun, 01 October 2023',
+          time: '6:32:00 GMT',
           type: 'datetime',
         },
       ],

diff --git a/.../src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx b/.../src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx
@@ -29,7 +29,7 @@ import React from 'react';
  */
 import AuctionPanel from './panel';
 import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context';
-import type { AdUnitLiteral } from '../explorableExplanation';
+import type { AdUnitLiteral } from '../explorableExplanation/auctionEventTransformers';
 
 interface AuctionsContainerProps {
   auctionEvents: {

diff --git a/...sion/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/index.tsx b/...sion/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/index.tsx
@@ -16,7 +16,7 @@
 /**
  * External dependencies.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   SIDEBAR_ITEMS_KEYS,
   useSidebar,
@@ -65,6 +65,12 @@ const Auctions = () => {
     updateSelectedItemKey: actions.updateSelectedItemKey,
   }));
 
+  const auctionData = useMemo(() => {
+    return {
+      auctionData: auctionEvents,
+    };
+  }, [auctionEvents]);
+
   if (!isUsingCDP) {
     return (
       <div className="w-full h-full flex items-center justify-center">
@@ -102,9 +108,7 @@ const Auctions = () => {
       <Breakpoints />
       <div className="overflow-auto flex-1">
         <AuctionsContainer
-          auctionEvents={{
-            auctionData: auctionEvents,
-          }}
+          auctionEvents={auctionData}
           sidebarData={sidebarData}
           setSidebarData={setSidebarData}
         />

diff --git a/...rc/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx b/...rc/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx
@@ -36,7 +36,7 @@ import type { AuctionEventsType } from '../../../../../stateProviders/protectedA
 import AuctionTable from '../table';
 import AdunitPanel from '../adunitPanel';
 import AdunitSubPanel from '../adunitPanel/panel';
-import type { AdUnitLiteral } from '../../explorableExplanation';
+import type { AdUnitLiteral } from '../../explorableExplanation/auctionEventTransformers';
 
 interface AuctionPanelProps {
   auctionEvents: {
@@ -78,7 +78,6 @@ const AuctionPanel = ({
             ...adUnitChildren[time]?.children,
           } as SidebarItems;
           const sellerUrl = Object.keys(auctionEventsData[adUnit][time])[0];
-
           const entries = Object.entries(
             auctionEventsData[adUnit][time][sellerUrl]
           )