From 7b96529b67fb97a2bef475c2d3214ee796e3011b Mon Sep 17 00:00:00 2001 From: Ayush Nirwal <53055971+ayushnirwal@users.noreply.github.com> Date: Tue, 6 Feb 2024 14:40:43 +0530 Subject: [PATCH 1/2] Style Fix: Rearrange and rename components in CLI dashboard. (#469) * fix: style cli-dashboard * fix: title update * chore: update tests --------- Co-authored-by: sayedtaqui --- .../tabs/cookies/cookiesLandingContainer/index.tsx | 8 +------- .../src/components/cookiesLanding/cookiesMatrix/index.tsx | 2 +- .../cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx | 6 +++--- .../design-system/src/components/cookiesLanding/index.tsx | 7 +++++-- .../src/components/cookiesLanding/landingHeader/index.tsx | 4 +++- .../components/cookiesLanding/tests/cookiesLanding.tsx | 4 +--- 6 files changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx b/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx index 4aab4ca61..8d45e44d9 100644 --- a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx +++ b/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx @@ -59,11 +59,9 @@ const CookiesLandingContainer = ({ associatedCookiesCount={Object.values(tabFrames).length} showMessageBoxBody={false} showBlockedCookiesSection + cookieClassificationTitle="Categories" >
-

- Comparative Insights -

diff --git a/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx b/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx index d936d19b6..8fcb96a22 100644 --- a/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx +++ b/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx @@ -56,7 +56,7 @@ const CookiesMatrix = ({ tabCookies, tabFrames, componentData = [], - title = 'Cookie Classification', + title = 'Categories', description = '', showHorizontalMatrix = true, showMatrix = true, diff --git a/packages/design-system/src/components/cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx b/packages/design-system/src/components/cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx index 2fe5a481f..79e43674f 100644 --- a/packages/design-system/src/components/cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx +++ b/packages/design-system/src/components/cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx @@ -31,17 +31,17 @@ describe('CookiesMatrix', () => { it('should render the cookies insights', () => { const tabCookies = mockResponse.tabCookies; const tabFrames = mockResponse.tabFrames; + const title = 'Title'; const { getByTestId } = render( ); - expect( - getByTestId('cookies-matrix-Cookie Classification') - ).toBeInTheDocument(); + expect(getByTestId(`cookies-matrix-${title}`)).toBeInTheDocument(); }); }); diff --git a/packages/design-system/src/components/cookiesLanding/index.tsx b/packages/design-system/src/components/cookiesLanding/index.tsx index 2ea8e49e3..cf406c2a6 100644 --- a/packages/design-system/src/components/cookiesLanding/index.tsx +++ b/packages/design-system/src/components/cookiesLanding/index.tsx @@ -47,6 +47,7 @@ interface CookiesLandingProps { }; showFramesSection?: boolean; description?: React.ReactNode; + cookieClassificationTitle?: string; } const CookiesLanding = ({ @@ -62,6 +63,7 @@ const CookiesLanding = ({ showHorizontalMatrix = false, description = '', additionalComponents = {}, + cookieClassificationTitle, }: CookiesLandingProps) => { const cookieStats = prepareCookiesCount(tabCookies); const cookiesStatsComponents = prepareCookieStatsComponents(cookieStats); @@ -112,6 +114,7 @@ const CookiesLanding = ({ /> ))} - {children &&
{children}
} {showBlockedCookiesSection && ( )} + {children &&
{children}
} )} {/* TODO: This is not scalable. Refactor code so that components can be added from the the extension or dashboard package. */} - {Object.keys(additionalComponents).length && + {Boolean(Object.keys(additionalComponents).length) && Object.keys(additionalComponents).map((key: string) => { const Component = additionalComponents[key]; return ; diff --git a/packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx b/packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx index efba35f10..5123927a4 100644 --- a/packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx +++ b/packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx @@ -35,7 +35,9 @@ interface LandingHeaderProps { const LandingHeader = ({ dataMapping = [] }: LandingHeaderProps) => { return (
diff --git a/packages/design-system/src/components/cookiesLanding/tests/cookiesLanding.tsx b/packages/design-system/src/components/cookiesLanding/tests/cookiesLanding.tsx index 0ce5354aa..14617e4b2 100644 --- a/packages/design-system/src/components/cookiesLanding/tests/cookiesLanding.tsx +++ b/packages/design-system/src/components/cookiesLanding/tests/cookiesLanding.tsx @@ -39,8 +39,6 @@ describe('CookiesLanding', () => { expect(getByTestId('cookies-landing')).toBeInTheDocument(); expect(getAllByTestId('cookies-landing-header')[0]).toBeInTheDocument(); - expect( - getByTestId('cookies-matrix-Cookie Classification') - ).toBeInTheDocument(); + expect(getByTestId('cookies-matrix-Categories')).toBeInTheDocument(); }); }); From 0f05f4f3e4aa360eb73306e58b0b2929fa895191 Mon Sep 17 00:00:00 2001 From: Kudaligi Amoghavarsha Date: Tue, 6 Feb 2024 16:49:14 +0530 Subject: [PATCH 2/2] Fix: Errors appearing on extension page. (#472) * Fix cannot set properties of newUpdates of undefined * Fix uncaught in promise tab doesnt exist. * Fix failing tests. * Remove console.warn. * Modify comment. --- packages/extension/src/serviceWorker/index.ts | 42 ++++++++++++------- .../src/store/synchnorousCookieStore.ts | 29 ++++++++----- .../src/store/tests/synchnorousCookieStore.ts | 3 +- .../src/store/utils/updateCookieBadgeText.ts | 16 +++++-- .../stateProviders/syncCookieStore/index.tsx | 23 ++++++---- 5 files changed, 73 insertions(+), 40 deletions(-) diff --git a/packages/extension/src/serviceWorker/index.ts b/packages/extension/src/serviceWorker/index.ts index 62f0870f3..a280deec1 100644 --- a/packages/extension/src/serviceWorker/index.ts +++ b/packages/extension/src/serviceWorker/index.ts @@ -34,6 +34,7 @@ import { fetchDictionary } from '../utils/fetchCookieDictionary'; import { ALLOWED_NUMBER_OF_TABS } from '../constants'; import SynchnorousCookieStore from '../store/synchnorousCookieStore'; import canProcessCookies from '../utils/canProcessCookies'; +import { getTab } from '../utils/getTab'; let cookieDB: CookieDatabase | null = null; let syncCookieStore: SynchnorousCookieStore | undefined; @@ -547,8 +548,7 @@ chrome.runtime.onMessage.addListener(async (request) => { !syncCookieStore?.tabs[request.payload.tabId] && tabMode === 'unlimited' ) { - const tabs = await chrome.tabs.query({}); - const currentTab = tabs.find((tab) => tab.id === request.payload.tabId); + const currentTab = await getTab(request.payload.tabId); syncCookieStore?.addTabData(request?.payload?.tabId); syncCookieStore?.updateUrl( @@ -641,8 +641,9 @@ chrome.storage.sync.onChanged.addListener( } tabMode = changes.allowedNumberOfTabs.newValue; + const tabs = await chrome.tabs.query({}); + if (changes?.allowedNumberOfTabs?.newValue === 'single') { - const tabs = await chrome.tabs.query({}); tabToRead = ''; chrome.runtime.sendMessage({ @@ -670,12 +671,13 @@ chrome.storage.sync.onChanged.addListener( tabId: tab?.id, text: '', }); + syncCookieStore?.removeTabData(tab.id); + chrome.tabs.reload(Number(tab?.id), { bypassCache: true }); return tab; }); } else { - const tabs = await chrome.tabs.query({}); chrome.runtime.sendMessage({ type: 'ServiceWorker::Popup::INITIAL_SYNC', payload: { @@ -683,6 +685,7 @@ chrome.storage.sync.onChanged.addListener( tabToRead: tabToRead, }, }); + chrome.runtime.sendMessage({ type: 'ServiceWorker::DevTools::INITIAL_SYNC', payload: { @@ -732,26 +735,37 @@ chrome.storage.sync.onChanged.addListener( }, }); + const tabs = await chrome.tabs.query({}); + if (!changes?.isUsingCDP?.newValue) { await Promise.all( - Object.keys(syncCookieStore?.tabsData ?? {}).map(async (key) => { + tabs.map(async (tab) => { + if (!tab.id) { + return; + } + try { - await chrome.debugger.detach({ tabId: Number(key) }); - syncCookieStore?.removeCookieData(Number(key)); - syncCookieStore?.sendUpdatedDataToPopupAndDevTools(Number(key)); + await chrome.debugger.detach({ tabId: tab.id }); + syncCookieStore?.removeCookieData(tab.id); + syncCookieStore?.sendUpdatedDataToPopupAndDevTools(tab.id); } catch (error) { - // Fail silently + // eslint-disable-next-line no-console + console.warn(error); } finally { - await chrome.tabs.reload(Number(key), { bypassCache: true }); + await chrome.tabs.reload(tab.id, { bypassCache: true }); } }) ); } else { await Promise.all( - Object.keys(syncCookieStore?.tabsData ?? {}).map(async (key) => { - syncCookieStore?.removeCookieData(Number(key)); - syncCookieStore?.sendUpdatedDataToPopupAndDevTools(Number(key)); - await chrome.tabs.reload(Number(key), { bypassCache: true }); + tabs.map(async (tab) => { + if (!tab.id) { + return; + } + + syncCookieStore?.removeCookieData(tab.id); + syncCookieStore?.sendUpdatedDataToPopupAndDevTools(tab.id); + await chrome.tabs.reload(tab.id, { bypassCache: true }); }) ); } diff --git a/packages/extension/src/store/synchnorousCookieStore.ts b/packages/extension/src/store/synchnorousCookieStore.ts index 4d57d2f28..6565df844 100644 --- a/packages/extension/src/store/synchnorousCookieStore.ts +++ b/packages/extension/src/store/synchnorousCookieStore.ts @@ -126,11 +126,7 @@ class SynchnorousCookieStore { this.tabsData[tabId][cookieKey] = cookie; } } - //@ts-ignore Since this is for debugging the data to check the data being collected by the storage. - globalThis.PSAT = { - tabsData: this.tabsData, - tabs: this.tabs, - }; + updateCookieBadgeText(this.tabsData[tabId], tabId); } catch (error) { //Fail silently @@ -299,6 +295,10 @@ class SynchnorousCookieStore { * @param {number} tabId The active tab id. */ removeCookieData(tabId: number) { + if (!this.tabs[tabId] || !this.tabsData[tabId]) { + return; + } + delete this.tabsData[tabId]; this.tabsData[tabId] = {}; this.tabs[tabId].newUpdates = 0; @@ -313,6 +313,11 @@ class SynchnorousCookieStore { if (this.tabsData[tabId] && this.tabs[tabId]) { return; } + //@ts-ignore Since this is for debugging the data to check the data being collected by the storage. + globalThis.PSAT = { + tabsData: this.tabsData, + tabs: this.tabs, + }; this.tabsData[tabId] = {}; this.tabs[tabId] = { @@ -356,6 +361,9 @@ class SynchnorousCookieStore { tabId: number, overrideForInitialSync = false ) { + if (!this.tabs[tabId] || !this.tabsData[tabId]) { + return; + } let sentMessageAnyWhere = false; try { @@ -387,13 +395,12 @@ class SynchnorousCookieStore { }, }); } - } catch (error) { - // eslint-disable-next-line no-console - console.warn(error); - } - if (sentMessageAnyWhere) { - this.tabs[tabId].newUpdates = 0; + if (sentMessageAnyWhere) { + this.tabs[tabId].newUpdates = 0; + } + } catch (error) { + //Fail silently. Ignoring the console.warn here because the only error this will throw is of "Error: Could not establish connection". } } } diff --git a/packages/extension/src/store/tests/synchnorousCookieStore.ts b/packages/extension/src/store/tests/synchnorousCookieStore.ts index 0dd52bf7f..eefb085f7 100644 --- a/packages/extension/src/store/tests/synchnorousCookieStore.ts +++ b/packages/extension/src/store/tests/synchnorousCookieStore.ts @@ -24,16 +24,15 @@ let synchnorousCookieStore: SynchnorousCookieStore; describe('SynchnorousCookieStore:', () => { beforeAll(() => { globalThis.chrome = SinonChrome as unknown as typeof chrome; + synchnorousCookieStore = new SynchnorousCookieStore(); }); beforeEach(() => { - synchnorousCookieStore = new SynchnorousCookieStore(); synchnorousCookieStore.addTabData(123456); synchnorousCookieStore.updateUrl(123456, 'https://bbc.com'); }); afterEach(() => { - synchnorousCookieStore = new SynchnorousCookieStore(); synchnorousCookieStore.clear(); }); diff --git a/packages/extension/src/store/utils/updateCookieBadgeText.ts b/packages/extension/src/store/utils/updateCookieBadgeText.ts index 5ea9fee88..0ee66b01d 100644 --- a/packages/extension/src/store/utils/updateCookieBadgeText.ts +++ b/packages/extension/src/store/utils/updateCookieBadgeText.ts @@ -38,10 +38,18 @@ export default function updateCookieBadgeText( storage[cookieKey].frameIdList?.length >= 1 ).length; if (numCookies >= 0) { - chrome.action.setBadgeText({ - tabId: tabId, - text: numCookies.toString(), - }); + chrome.action.setBadgeText( + { + tabId: tabId, + text: numCookies.toString(), + }, + () => { + if (chrome.runtime.lastError) { + // eslint-disable-next-line no-console + console.warn(chrome.runtime.lastError); + } + } + ); } } catch (error) { // do nothing diff --git a/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx b/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx index c74882804..0fa6e8dc9 100644 --- a/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx +++ b/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx @@ -369,15 +369,20 @@ export const Provider = ({ children }: PropsWithChildren) => { ); const tabRemovedListener = useCallback(async () => { - const availableTabs = await chrome.tabs.query({}); - - if ( - availableTabs.length === ALLOWED_NUMBER_OF_TABS && - availableTabs.filter( - (processingTab) => processingTab.id?.toString() === tabToRead - ) - ) { - setReturningToSingleTab(true); + try { + const availableTabs = await chrome.tabs.query({}); + + if ( + availableTabs.length === ALLOWED_NUMBER_OF_TABS && + availableTabs.filter( + (processingTab) => processingTab.id?.toString() === tabToRead + ) + ) { + setReturningToSingleTab(true); + } + } catch (error) { + // eslint-disable-next-line no-console + console.warn(error); } }, [tabToRead]);