From 9c4901f85c99056c7e0496c373a886e15aef2f51 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 6 Mar 2024 14:57:24 +0530 Subject: [PATCH 1/2] ref: update prefix icon type and render component directly --- .../table/components/tableBody/bodyCell.tsx | 15 +++++++++++++-- .../table/components/tableBody/bodyRow.tsx | 4 +--- .../src/components/table/useTable/types.ts | 4 +++- .../cookiesListing/useCookieListing/index.tsx | 6 ++++-- .../useCookieListing/namePrefixIconSelector.tsx | 11 ++++++++--- 5 files changed, 29 insertions(+), 11 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 index 7cafb00cc..186525623 100644 --- a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx +++ b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx @@ -32,7 +32,9 @@ interface BodyCellProps { row: TableRow; hasIcon?: boolean; showIcon?: boolean | null; - icon?: () => React.JSX.Element; + icon?: { + Element: (props: any) => React.JSX.Element; + }; onRowClick: (e: React.MouseEvent) => void; } @@ -40,11 +42,14 @@ const BodyCell = ({ cell, width, isRowFocused, + row, hasIcon = false, showIcon = false, icon, isHighlighted = false, }: BodyCellProps) => { + const IconElement = icon?.Element; + return (
{hasIcon && (
- {Boolean(showIcon) && icon?.()} + {Boolean(showIcon) && IconElement && ( + + )}
)} {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 index d40b3ed84..635a10928 100644 --- 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/useTable/types.ts b/packages/design-system/src/components/table/useTable/types.ts index 2960127a8..f85bee424 100644 --- 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/packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/index.tsx b/packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/index.tsx index 65a7126ee..25878988a 100644 --- a/packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/index.tsx +++ b/packages/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) => { const { selectedFrame, cookies, getCookiesSetByJavascript } = useCookieStore( @@ -64,7 +64,9 @@ const useCookieListing = (domainsInAllowList: Set) => { 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/packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/namePrefixIconSelector.tsx b/packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/namePrefixIconSelector.tsx index c457fbf76..4d480fa12 100644 --- a/packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/namePrefixIconSelector.tsx +++ b/packages/extension/src/view/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; From 192ff8bed781127b13ea2491f8bc57ba9c4708b2 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 6 Mar 2024 18:00:59 +0530 Subject: [PATCH 2/2] ref: use session storage for persistence --- .../persistentSettingsStore/utils/extractStorage.ts | 10 ++++------ .../persistentSettingsStore/utils/updateStorage.ts | 12 ++++++------ 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/design-system/src/components/table/persistentSettingsStore/utils/extractStorage.ts b/packages/design-system/src/components/table/persistentSettingsStore/utils/extractStorage.ts index 6817d0d41..09ea92c6c 100644 --- 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 => { 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 index ae2c116e4..3d1e35436 100644 --- 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; };