Enhancement: HTML report

packages/cli-dashboard/src/components/siteMapReport/layout.tsx

@@ -138,7 +138,7 @@ const Layout = ({
               return;
             }
 
-            generateSiteMapReportandDownload(completeJson);
+            generateSiteMapReportandDownload(completeJson, '');
           },
         },
       };

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);
 

packages/cli-dashboard/src/components/utils/reportDownloader/generateSiteReportandDownload.ts

@@ -61,7 +61,7 @@ const generateSiteReportandDownload = async (
     return;
   }
 
-  createZip(siteAnalysisData, zipFolder);
+  createZip(siteAnalysisData, zipFolder, JSONReport[0].pageUrl);
 
   const content = await zip.generateAsync({ type: 'blob' });
   saveAs(

packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts

@@ -60,10 +60,12 @@
 
 /**
  *
- * @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)
   );
@@ -127,15 +129,21 @@
     showBlockedInfoIcon: true,
     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
   );
@@ -200,18 +208,20 @@
     frameStateCreator,
     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');
 
   // Injections
   const script = reportDom.createElement('script');
 
-  const reportData = generateReportObject(analysisData);
+  const reportData = generateReportObject(analysisData, url);
 
   const code = `window.PSAT_DATA = ${JSON.stringify(reportData)}`;
 
@@ -224,15 +234,18 @@
   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');
 
   // Injections
   const script = reportDom.createElement('script');
 
-  const reportData = generateSitemapReportObject(analysisData);
+  const reportData = generateSitemapReportObject(analysisData, sitemapURL);
 
   const code = `window.PSAT_DATA = ${JSON.stringify(reportData)}`;
 
@@ -245,15 +258,19 @@
   return html;
 };
 
-export const createZip = (analysisData: CompleteJson, zipObject: JSZip) => {
+export const createZip = (
+  analysisData: CompleteJson,
+  zipObject: JSZip,
+  url: string
+) => {
   const {
     allCookiesCSV,
     technologyDataCSV,
     cookiesWithIssuesDataCSV,
     summaryDataCSV,
   } = generateCSVFiles(analysisData);
 
-  const file = generateHTMLFile(analysisData);
+  const file = generateHTMLFile(analysisData, url);
 
   zipObject.file('cookies.csv', allCookiesCSV);
   if (technologyDataCSV) {

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';

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)}`;

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);
@@ -91,5 +93,7 @@ export default function generateReportObject(
     libraryMatches,
     exemptedCookiesDataMapping,
     showFramesSection: true,
+    showBlockedCategory: false,
+    url,
   };
 }

packages/extension/src/utils/tests/data.mock.ts

@@ -7453,4 +7453,6 @@ export const data = {
     },
   ],
   showFramesSection: true,
+  url: 'http://example.com',
+  showBlockedCategory: false,
 };

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);
   });
 });

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
@@ -36,6 +37,12 @@ const App = () => {
 
   return (
     <div className="h-full w-full flex flex-col">
+      {data?.url && (
+        <div className="flex gap-2 items-center px-4 py-2">
+          <PrivacySandboxColoredIcon className="w-6 h-6" />
+          <p className="text-sm">{data.url}</p>
+        </div>
+      )}
       <CookiesSection />
       <BlockedCookiesSection />
       {data && data?.cookiesStatsComponents?.exempted?.length > 0 && (

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)."
           />
-          <div className="flex flex-col mt-8">
-            <div className="pt-4">
-              <MatrixContainer
-                matrixData={blockedDataComponents}
-                allowExpand={false}
-              />
+          {data.showBlockedCategory && (
+            <div className="flex flex-col mt-8">
+              <div className="pt-4">
+                <MatrixContainer
+                  matrixData={blockedDataComponents}
+                  allowExpand={false}
+                />
+              </div>
             </div>
-          </div>
+          )}
         </>
       )}
     </CookiesLandingWrapper>

packages/report/src/stateProviders/data/context.ts

@@ -42,6 +42,8 @@ export interface DataStoreContext {
       libraryMatches: LibraryData;
       exemptedCookiesDataMapping: DataMapping[];
       showFramesSection: boolean;
+      showBlockedCategory: boolean;
+      url: string;
     } | null;
   };
 }
@@ -71,6 +73,9 @@ const initialState: DataStoreContext = {
       },
       libraryMatches: {},
       exemptedCookiesDataMapping: [],
+      showBlockedCategory: false,
+      showFramesSection: false,
+      url: '',
     },
     isDataLoaded: false,
   },

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);