Refactor: Update table storage and prefix icon type (#546)

* ref: update prefix icon type and render component directly * ref: use session storage for persistence
GoogleChromeLabs · Mar 11, 2024 · 8a59d4e · 8a59d4e
1 parent 8ad44f0
commit 8a59d4e
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 23 deletions.
diff --git a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx
@@ -32,19 +32,24 @@ interface BodyCellProps {
   row: TableRow;
   hasIcon?: boolean;
   showIcon?: boolean | null;
-  icon?: () => React.JSX.Element;
+  icon?: {
+    Element: (props: any) => React.JSX.Element;
+  };
   onRowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 const BodyCell = ({
   cell,
   width,
   isRowFocused,
+  row,
   hasIcon = false,
   showIcon = false,
   icon,
   isHighlighted = false,
 }: BodyCellProps) => {
+  const IconElement = icon?.Element;
+
   return (
     <div
       tabIndex={0}
@@ -72,7 +77,13 @@ const BodyCell = ({
     >
       {hasIcon && (
         <div className="h-full grid place-items-center min-w-[15px] pr-1">
-          {Boolean(showIcon) && icon?.()}
+          {Boolean(showIcon) && IconElement && (
+            <IconElement
+              {...{
+                originalData: row.originalData,
+              }}
+            />
+          )}
         </div>
       )}
       {cell?.() ?? ''}

diff --git a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx
@@ -122,9 +122,7 @@ const BodyRow = ({
             showIcon={
               showBodyCellPrefixIcon ? showBodyCellPrefixIcon(row) : false
             }
-            icon={
-              bodyCellPrefixIcon ? () => bodyCellPrefixIcon(row) : undefined
-            }
+            icon={bodyCellPrefixIcon ?? undefined}
           />
         )
       )}

diff --git a/packages/design-system/src/components/table/persistentSettingsStore/utils/extractStorage.ts b/packages/design-system/src/components/table/persistentSettingsStore/utils/extractStorage.ts
@@ -45,14 +45,12 @@ const extractChromeStorage = async (
 ): Promise<TablePersistentSettingsStoreContext['state']> => {
   const tabId = chrome.devtools.inspectedWindow.tabId.toString();
 
-  const data = await chrome.storage.local.get();
-  const tableData = data?.[tabId];
+  const data = await chrome.storage.session.get();
+  const tableData = data?.[tabId + persistenceKey];
   if (tableData) {
-    const persistenceData = tableData?.[persistenceKey];
-    if (persistenceData) {
-      return persistenceData;
-    }
+    return tableData;
   }
+
   return {} as TablePersistentSettingsStoreContext['state'];
 };
 

diff --git a/packages/design-system/src/components/table/persistentSettingsStore/utils/updateStorage.ts b/packages/design-system/src/components/table/persistentSettingsStore/utils/updateStorage.ts
@@ -93,10 +93,10 @@ const updateChromeStorage = async (
   }
   const tabId = chrome.devtools.inspectedWindow.tabId.toString();
 
-  const data = await chrome.storage.local.get();
+  const data = await chrome.storage.session.get();
 
   let tableData: TablePersistentSettingsStoreContext['state'] =
-    data?.[tabId]?.[TABLE_PERSISTENT_SETTINGS_STORE_KEY];
+    data?.[tabId + TABLE_PERSISTENT_SETTINGS_STORE_KEY];
   let requiredData = tableData?.[persistenceKey];
 
   if (requiredData) {
@@ -108,9 +108,9 @@ const updateChromeStorage = async (
     requiredData = storageData;
   }
 
-  if (!tableData && data[tabId]) {
-    data[tabId][TABLE_PERSISTENT_SETTINGS_STORE_KEY] = {};
-    tableData = data[tabId][TABLE_PERSISTENT_SETTINGS_STORE_KEY];
+  if (!tableData) {
+    data[tabId + TABLE_PERSISTENT_SETTINGS_STORE_KEY] = {};
+    tableData = data[tabId + TABLE_PERSISTENT_SETTINGS_STORE_KEY];
   }
 
   if (tableData && !tableData[persistenceKey]) {
@@ -120,7 +120,7 @@ const updateChromeStorage = async (
     tableData[persistenceKey] = requiredData;
   }
 
-  await chrome.storage.local.set(data);
+  await chrome.storage.session.set(data);
 
   return tableData;
 };

diff --git a/packages/design-system/src/components/table/useTable/types.ts b/packages/design-system/src/components/table/useTable/types.ts
@@ -30,7 +30,9 @@ export type TableColumn = {
   cell: (info: InfoType, details?: TableData) => React.JSX.Element | InfoType;
   enableHiding?: boolean;
   enableBodyCellPrefixIcon?: boolean;
-  bodyCellPrefixIcon?: (row: TableRow) => React.JSX.Element;
+  bodyCellPrefixIcon?: {
+    Element: (props: any) => React.JSX.Element;
+  };
   showBodyCellPrefixIcon?: (row: TableRow) => boolean;
   widthWeightagePercentage?: number;
   width?: number; // For internal use only

diff --git a/.../extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/index.tsx b/.../extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/index.tsx
@@ -38,7 +38,7 @@ import {
 import { useCookieStore } from '../../../../stateProviders/syncCookieStore';
 import useHighlighting from './useHighlighting';
 import { useSettingsStore } from '../../../../stateProviders/syncSettingsStore';
-import namePrefixIconSelector from './namePrefixIconSelector';
+import NamePrefixIconSelector from './namePrefixIconSelector';
 
 const useCookieListing = (domainsInAllowList: Set<string>) => {
   const { selectedFrame, cookies, getCookiesSetByJavascript } = useCookieStore(
@@ -64,7 +64,9 @@ const useCookieListing = (domainsInAllowList: Set<string>) => {
         enableHiding: false,
         widthWeightagePercentage: 13,
         enableBodyCellPrefixIcon: isUsingCDP,
-        bodyCellPrefixIcon: namePrefixIconSelector,
+        bodyCellPrefixIcon: {
+          Element: NamePrefixIconSelector,
+        },
         showBodyCellPrefixIcon: (row: TableRow) => {
           const isBlocked = Boolean(
             (row.originalData as CookieTableData)?.blockingStatus

diff --git a/...ew/devtools/components/cookies/cookiesListing/useCookieListing/namePrefixIconSelector.tsx b/...ew/devtools/components/cookies/cookiesListing/useCookieListing/namePrefixIconSelector.tsx
@@ -20,7 +20,6 @@
 import React from 'react';
 import { BLOCK_STATUS, type CookieTableData } from '@ps-analysis-tool/common';
 import {
-  type TableRow,
   GreenTick,
   InboundIcon,
   OutboundIcon,
@@ -29,7 +28,13 @@ import {
   OutboundInboundColoredIcon,
 } from '@ps-analysis-tool/design-system';
 
-const namePrefixIconSelector = ({ originalData }: TableRow) => {
+interface NamePrefixIconSelectorProps {
+  originalData: CookieTableData;
+}
+
+const NamePrefixIconSelector = ({
+  originalData,
+}: NamePrefixIconSelectorProps) => {
   const data = originalData as CookieTableData;
 
   const isDomainInAllowList = data?.isDomainInAllowList;
@@ -93,4 +98,4 @@ const namePrefixIconSelector = ({ originalData }: TableRow) => {
   return <></>;
 };
 
-export default namePrefixIconSelector;
+export default NamePrefixIconSelector;