From b6428304e6379b751b77505a50cd79cd744550c8 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 8 May 2024 12:27:41 +0530 Subject: [PATCH 1/9] fix: conditionally hide blocked reasons category --- .../components/utils/reportDownloader/utils.ts | 2 ++ .../extension/src/utils/generateReportObject.ts | 1 + .../src/components/blockedCookiesSection.tsx | 16 +++++++++------- .../report/src/stateProviders/data/context.ts | 3 +++ 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts b/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts index 47e76452c..e85c05f09 100644 --- a/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts +++ b/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts @@ -127,6 +127,7 @@ function generateReportObject(analysisData: CompleteJson) { showBlockedInfoIcon: true, frameStateCreator, exemptedCookiesDataMapping, + showBlockedCategory: true, }; } @@ -200,6 +201,7 @@ function generateSitemapReportObject(analysisData: CompleteJson[]) { frameStateCreator, exemptedCookiesDataMapping, showFramesSection: false, + showBlockedCategory: true, }; } diff --git a/packages/extension/src/utils/generateReportObject.ts b/packages/extension/src/utils/generateReportObject.ts index 096c89543..173e6c925 100644 --- a/packages/extension/src/utils/generateReportObject.ts +++ b/packages/extension/src/utils/generateReportObject.ts @@ -91,5 +91,6 @@ export default function generateReportObject( libraryMatches, exemptedCookiesDataMapping, showFramesSection: true, + showBlockedCategory: false, }; } diff --git a/packages/report/src/components/blockedCookiesSection.tsx b/packages/report/src/components/blockedCookiesSection.tsx index 000cad671..c59216ea9 100644 --- a/packages/report/src/components/blockedCookiesSection.tsx +++ b/packages/report/src/components/blockedCookiesSection.tsx @@ -89,14 +89,16 @@ const CookiesSection = () => { matrixData={dataComponents} infoIconTitle="Cookies that have been blocked by the browser. (The total count might not be same as cumulative reason count because cookie might be blocked due to more than 1 reason)." /> -
-
- + {data.showBlockedCategory && ( +
+
+ +
-
+ )} )} diff --git a/packages/report/src/stateProviders/data/context.ts b/packages/report/src/stateProviders/data/context.ts index 09e758373..f7d6140e5 100644 --- a/packages/report/src/stateProviders/data/context.ts +++ b/packages/report/src/stateProviders/data/context.ts @@ -42,6 +42,7 @@ export interface DataStoreContext { libraryMatches: LibraryData; exemptedCookiesDataMapping: DataMapping[]; showFramesSection: boolean; + showBlockedCategory: boolean; } | null; }; } @@ -71,6 +72,8 @@ const initialState: DataStoreContext = { }, libraryMatches: {}, exemptedCookiesDataMapping: [], + showBlockedCategory: false, + showFramesSection: false, }, isDataLoaded: false, }, From b29fc8ed681180f8a6c9fb9ac4da1195e8a73f44 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 8 May 2024 12:58:46 +0530 Subject: [PATCH 2/9] Add URL bar in report --- packages/extension/src/utils/downloadReport.ts | 3 ++- packages/extension/src/utils/generateReportObject.ts | 5 ++++- packages/report/src/app.tsx | 7 +++++++ packages/report/src/stateProviders/data/context.ts | 2 ++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/utils/downloadReport.ts b/packages/extension/src/utils/downloadReport.ts index 3e64dcd3d..475735f70 100644 --- a/packages/extension/src/utils/downloadReport.ts +++ b/packages/extension/src/utils/downloadReport.ts @@ -51,7 +51,8 @@ export default async function downloadReport( const reportData = generateReportObject( tabCookies, tabFrames, - libraryMatches + libraryMatches, + url ); const code = `window.PSAT_DATA = ${JSON.stringify(reportData)}`; diff --git a/packages/extension/src/utils/generateReportObject.ts b/packages/extension/src/utils/generateReportObject.ts index 173e6c925..cffb34a14 100644 --- a/packages/extension/src/utils/generateReportObject.ts +++ b/packages/extension/src/utils/generateReportObject.ts @@ -33,12 +33,14 @@ import { * @param tabCookies Tab cookies. * @param tabFrames Tab frames. * @param libraryMatches Library matches + * @param url Top level URL. * @returns Report Object */ export default function generateReportObject( tabCookies: TabCookies, tabFrames: TabFrames, - libraryMatches: LibraryData + libraryMatches: LibraryData, + url: string ) { const cookieStats = prepareCookiesCount(tabCookies); const cookiesStatsComponents = prepareCookieStatsComponents(cookieStats); @@ -92,5 +94,6 @@ export default function generateReportObject( exemptedCookiesDataMapping, showFramesSection: true, showBlockedCategory: false, + url, }; } diff --git a/packages/report/src/app.tsx b/packages/report/src/app.tsx index fe5507d96..753249d68 100644 --- a/packages/report/src/app.tsx +++ b/packages/report/src/app.tsx @@ -30,12 +30,19 @@ import { ExemptedCookiesSection, } from './components'; import { useData } from './stateProviders/data'; +import { PrivacySandboxIcon } from '@ps-analysis-tool/design-system'; const App = () => { const data = useData(({ state }) => state.data); return (
+
+

+ +

+

{data?.url}

+
{data && data?.cookiesStatsComponents?.exempted?.length > 0 && ( diff --git a/packages/report/src/stateProviders/data/context.ts b/packages/report/src/stateProviders/data/context.ts index f7d6140e5..936f536f4 100644 --- a/packages/report/src/stateProviders/data/context.ts +++ b/packages/report/src/stateProviders/data/context.ts @@ -43,6 +43,7 @@ export interface DataStoreContext { exemptedCookiesDataMapping: DataMapping[]; showFramesSection: boolean; showBlockedCategory: boolean; + url: string; } | null; }; } @@ -74,6 +75,7 @@ const initialState: DataStoreContext = { exemptedCookiesDataMapping: [], showBlockedCategory: false, showFramesSection: false, + url: '', }, isDataLoaded: false, }, From 98c827b85e33140ba926c68c4b1ef0cac0c0072e Mon Sep 17 00:00:00 2001 From: nirwalayush Date: Wed, 8 May 2024 13:26:58 +0530 Subject: [PATCH 3/9] style-fix: update report header style --- packages/design-system/src/icons/index.tsx | 1 + .../src/icons/privacy-sandbox-colored.svg | 20 +++++++++++++++++++ packages/report/src/app.tsx | 8 +++----- 3 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 packages/design-system/src/icons/privacy-sandbox-colored.svg diff --git a/packages/design-system/src/icons/index.tsx b/packages/design-system/src/icons/index.tsx index abd1de927..9fff1ea4b 100644 --- a/packages/design-system/src/icons/index.tsx +++ b/packages/design-system/src/icons/index.tsx @@ -52,6 +52,7 @@ export { default as InspectActiveIcon } from './inspect-active.svg'; export { default as InspectWhiteIcon } from './inspect-white.svg'; export { default as PrivacySandboxIcon } from './privacy-sandbox.svg'; export { default as PrivacySandboxIconWhite } from './privacy-sandbox-white.svg'; +export { default as PrivacySandboxColoredIcon } from './privacy-sandbox-colored.svg'; export { default as Add } from './add.svg'; export { default as Cross } from './cross.svg'; export { default as Refresh } from './refresh-icon.svg'; diff --git a/packages/design-system/src/icons/privacy-sandbox-colored.svg b/packages/design-system/src/icons/privacy-sandbox-colored.svg new file mode 100644 index 000000000..52a3c540d --- /dev/null +++ b/packages/design-system/src/icons/privacy-sandbox-colored.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/report/src/app.tsx b/packages/report/src/app.tsx index 753249d68..bdca987ff 100644 --- a/packages/report/src/app.tsx +++ b/packages/report/src/app.tsx @@ -18,6 +18,7 @@ */ import React from 'react'; import { LibraryDetection } from '@ps-analysis-tool/library-detection'; +import { PrivacySandboxColoredIcon } from '@ps-analysis-tool/design-system'; /** * Internal dependencies @@ -30,17 +31,14 @@ import { ExemptedCookiesSection, } from './components'; import { useData } from './stateProviders/data'; -import { PrivacySandboxIcon } from '@ps-analysis-tool/design-system'; const App = () => { const data = useData(({ state }) => state.data); return (
-
-

- -

+
+

{data?.url}

From 3e5481b3b86285c65ed087a6f15ed38908f763c6 Mon Sep 17 00:00:00 2001 From: nirwalayush Date: Wed, 8 May 2024 13:47:53 +0530 Subject: [PATCH 4/9] feat: add url to HTML report from cli dashboard --- .../src/components/siteMapReport/layout.tsx | 2 +- .../generateSiteMapReportandDownload.ts | 9 +++-- .../generateSiteReportandDownload.ts | 2 +- .../utils/reportDownloader/utils.ts | 35 +++++++++++++------ 4 files changed, 33 insertions(+), 15 deletions(-) diff --git a/packages/cli-dashboard/src/components/siteMapReport/layout.tsx b/packages/cli-dashboard/src/components/siteMapReport/layout.tsx index 896f74218..f680a3e79 100644 --- a/packages/cli-dashboard/src/components/siteMapReport/layout.tsx +++ b/packages/cli-dashboard/src/components/siteMapReport/layout.tsx @@ -138,7 +138,7 @@ const Layout = ({ return; } - generateSiteMapReportandDownload(completeJson); + generateSiteMapReportandDownload(completeJson, ''); }, }, }; diff --git a/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteMapReportandDownload.ts b/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteMapReportandDownload.ts index 5d7acc433..6dd53a5b1 100644 --- a/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteMapReportandDownload.ts +++ b/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteMapReportandDownload.ts @@ -26,7 +26,10 @@ import type { CompleteJson } from '@ps-analysis-tool/common'; */ import { createZip, getFolderName, generateSiemapHTMLFile } from './utils'; -const generateSiteMapReportandDownload = async (JSONReport: CompleteJson[]) => { +const generateSiteMapReportandDownload = async ( + JSONReport: CompleteJson[], + sitemapUrl: string +) => { if (!JSONReport.length) { return; } @@ -48,10 +51,10 @@ const generateSiteMapReportandDownload = async (JSONReport: CompleteJson[]) => { return; } - createZip(data, zipFolder); + createZip(data, zipFolder, data.pageUrl); }); - const report = generateSiemapHTMLFile(JSONReport); + const report = generateSiemapHTMLFile(JSONReport, sitemapUrl); zip.file('report.html', report); diff --git a/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts b/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts index 5416e6215..547e2e68b 100644 --- a/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts +++ b/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts @@ -61,7 +61,7 @@ const generateSiteReportandDownload = async ( return; } - createZip(siteAnalysisData, zipFolder); + createZip(siteAnalysisData, zipFolder, selectedPageUrl || ''); const content = await zip.generateAsync({ type: 'blob' }); saveAs( diff --git a/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts b/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts index e85c05f09..537c542d6 100644 --- a/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts +++ b/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts @@ -60,10 +60,12 @@ const generateCSVFiles = (data: CompleteJson) => { /** * - * @param analysisData + * @param analysisData Anaylsis Data + * @param url URL + * @param siteURL * @returns Object Report object required to make HTML report */ -function generateReportObject(analysisData: CompleteJson) { +function generateReportObject(analysisData: CompleteJson, siteURL: string) { const tabCookies = reshapeCookies( extractCookies(analysisData.cookieData, analysisData.pageUrl) ); @@ -128,15 +130,20 @@ function generateReportObject(analysisData: CompleteJson) { frameStateCreator, exemptedCookiesDataMapping, showBlockedCategory: true, + url: siteURL, }; } /** * - * @param analysisData + * @param analysisData Analysis Data + * @param sitemapURL URL for the sitemap * @returns Object Report object required to make HTML report */ -function generateSitemapReportObject(analysisData: CompleteJson[]) { +function generateSitemapReportObject( + analysisData: CompleteJson[], + sitemapURL: string +) { const tabCookies = reshapeCookies( extractReportData(analysisData).landingPageCookies ); @@ -202,10 +209,11 @@ function generateSitemapReportObject(analysisData: CompleteJson[]) { exemptedCookiesDataMapping, showFramesSection: false, showBlockedCategory: true, + url: sitemapURL, }; } -const generateHTMLFile = async (analysisData: CompleteJson) => { +const generateHTMLFile = async (analysisData: CompleteJson, url: string) => { const htmlText = await (await fetch('./report/index.html')).text(); const parser = new DOMParser(); const reportDom = parser.parseFromString(htmlText, 'text/html'); @@ -213,7 +221,7 @@ const generateHTMLFile = async (analysisData: CompleteJson) => { // Injections const script = reportDom.createElement('script'); - const reportData = generateReportObject(analysisData); + const reportData = generateReportObject(analysisData, url); const code = `window.PSAT_DATA = ${JSON.stringify(reportData)}`; @@ -226,7 +234,10 @@ const generateHTMLFile = async (analysisData: CompleteJson) => { return html; }; -export const generateSiemapHTMLFile = async (analysisData: CompleteJson[]) => { +export const generateSiemapHTMLFile = async ( + analysisData: CompleteJson[], + sitemapURL: string +) => { const htmlText = await (await fetch('./report/index.html')).text(); const parser = new DOMParser(); const reportDom = parser.parseFromString(htmlText, 'text/html'); @@ -234,7 +245,7 @@ export const generateSiemapHTMLFile = async (analysisData: CompleteJson[]) => { // Injections const script = reportDom.createElement('script'); - const reportData = generateSitemapReportObject(analysisData); + const reportData = generateSitemapReportObject(analysisData, sitemapURL); const code = `window.PSAT_DATA = ${JSON.stringify(reportData)}`; @@ -247,7 +258,11 @@ export const generateSiemapHTMLFile = async (analysisData: CompleteJson[]) => { return html; }; -export const createZip = (analysisData: CompleteJson, zipObject: JSZip) => { +export const createZip = ( + analysisData: CompleteJson, + zipObject: JSZip, + url: string +) => { const { allCookiesCSV, technologyDataCSV, @@ -255,7 +270,7 @@ export const createZip = (analysisData: CompleteJson, zipObject: JSZip) => { summaryDataCSV, } = generateCSVFiles(analysisData); - const file = generateHTMLFile(analysisData); + const file = generateHTMLFile(analysisData, url); zipObject.file('cookies.csv', allCookiesCSV); if (technologyDataCSV) { From 1efdb28c6ad2e34c8d529b6ba84c8c01a8a7b8c1 Mon Sep 17 00:00:00 2001 From: nirwalayush Date: Wed, 8 May 2024 13:52:53 +0530 Subject: [PATCH 5/9] fix: conditionally render header in cli dashboard --- packages/report/src/app.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/report/src/app.tsx b/packages/report/src/app.tsx index bdca987ff..09d52b7af 100644 --- a/packages/report/src/app.tsx +++ b/packages/report/src/app.tsx @@ -37,10 +37,12 @@ const App = () => { return (
-
- -

{data?.url}

-
+ {data?.url && ( +
+ +

{data.url}

+
+ )} {data && data?.cookiesStatsComponents?.exempted?.length > 0 && ( From ecd56d3e0343cde02605e00e976f231eb2a45a19 Mon Sep 17 00:00:00 2001 From: nirwalayush Date: Wed, 8 May 2024 16:25:15 +0530 Subject: [PATCH 6/9] fix: known breakages not being visible --- packages/report/src/stateProviders/data/dataProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/report/src/stateProviders/data/dataProvider.tsx b/packages/report/src/stateProviders/data/dataProvider.tsx index 67ed2ee22..9aca21194 100644 --- a/packages/report/src/stateProviders/data/dataProvider.tsx +++ b/packages/report/src/stateProviders/data/dataProvider.tsx @@ -41,7 +41,7 @@ const Provider = ({ children }: PropsWithChildren) => { const _data = window.PSAT_DATA; setData(_data); - if (data?.libraryMatches) { + if (_data?.libraryMatches) { setLibraryMatches(_data.libraryMatches); } setShowLoader(false); From 92e187528547d7224d033517015c10d161b6e145 Mon Sep 17 00:00:00 2001 From: nirwalayush Date: Wed, 8 May 2024 16:44:23 +0530 Subject: [PATCH 7/9] fix: url not showing up for a page analysis --- .../utils/reportDownloader/generateSiteReportandDownload.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts b/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts index 547e2e68b..b33d071e1 100644 --- a/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts +++ b/packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts @@ -61,7 +61,7 @@ const generateSiteReportandDownload = async ( return; } - createZip(siteAnalysisData, zipFolder, selectedPageUrl || ''); + createZip(siteAnalysisData, zipFolder, JSONReport[0].pageUrl); const content = await zip.generateAsync({ type: 'blob' }); saveAs( From 853c80ae7b2861b51a8535f209bb3ef3937b2f58 Mon Sep 17 00:00:00 2001 From: nirwalayush Date: Wed, 8 May 2024 17:37:42 +0530 Subject: [PATCH 8/9] fix: fix unit test --- packages/extension/src/utils/tests/generateReportObject.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/extension/src/utils/tests/generateReportObject.ts b/packages/extension/src/utils/tests/generateReportObject.ts index 69042533e..7fea47c62 100644 --- a/packages/extension/src/utils/tests/generateReportObject.ts +++ b/packages/extension/src/utils/tests/generateReportObject.ts @@ -21,7 +21,12 @@ describe('generateReport', () => { it('should generate report object', () => { expect( //@ts-ignore - generateReportObject(tabCookies, tabFrames, libraryMatches) + generateReportObject( + tabCookies, + tabFrames, + libraryMatches, + 'http://example.com' + ) ).toEqual(data); }); }); From 0a1eb1df8094f38d8cf1554261010ce25b2c6f43 Mon Sep 17 00:00:00 2001 From: nirwalayush Date: Wed, 8 May 2024 17:38:06 +0530 Subject: [PATCH 9/9] fix:fix unit test --- packages/extension/src/utils/tests/data.mock.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/extension/src/utils/tests/data.mock.ts b/packages/extension/src/utils/tests/data.mock.ts index b92c33c60..14efa4d97 100644 --- a/packages/extension/src/utils/tests/data.mock.ts +++ b/packages/extension/src/utils/tests/data.mock.ts @@ -7453,4 +7453,6 @@ export const data = { }, ], showFramesSection: true, + url: 'http://example.com', + showBlockedCategory: false, };