Feat: Add report header

package.json

@@ -4,7 +4,7 @@
 	"description": "Cookie Analysis Tool and CLI for analysis and understanding of cookie usage on web pages.",
 	"scripts": {
 		"build-storybook": "storybook build",
-		"build:all": "run-p build:tsc-packages webpack:build:cli webpack:build:ext",
+		"build:all": "run-p build:tsc-packages build:cli-dashboard webpack:build:cli webpack:build:ext",
 		"build:tsc-packages": "npm run build:i18n && npm run build:common && npm run build:design-system && npm run build:library-detection && npm run build:analysis-utils && npm run build:report",
 		"dev:tsc-packages": "run-p dev:i18n dev:common dev:design-system dev:library-detection dev:analysis-utils dev:report",
 		"publish:all:local": "npm run build:all && npm run publish:local --workspaces",
@@ -24,7 +24,7 @@
 		"webpack:dev:cli": "npm run dev -w @google-psat/cli",
 		"dev:cli": "run-p dev:tsc-packages webpack:dev:cli",
 		"webpack:build:cli": "cross-env NODE_ENV=production npm run build -w @google-psat/cli",
-		"build:cli": "npm run build:tsc-packages && webpack:build:cli",
+		"build:cli": "npm run build:tsc-packages && npm run webpack:build:cli",
 		"build:cli:dashboard": "run-p build:cli build:cli-dashboard",
 		"cli": "node packages/cli/dist/main.js",
 		"build:report": "npm run build -w @google-psat/report",
@@ -35,7 +35,7 @@
 		"webpack:dev:ext":"npm run dev -w @google-psat/extension",
 		"dev:ext": "run-p dev:tsc-packages webpack:dev:ext",
 		"webpack:build:ext": "cross-env NODE_ENV=production npm run build -w @google-psat/extension",
-		"build:ext": "npm run build:tsc-packages && webpack:build:ext",
+		"build:ext": "npm run build:tsc-packages && npm run webpack:build:ext",
 		"lint": "npm-run-all --parallel lint:*",
 		"lint:js": "eslint .",
 		"lint:types": "tsc ",

packages/cli-dashboard/src/dummyData/PSAT_DATA.js

@@ -11593,4 +11593,5 @@ export default {
       useGenericPersistenceKey: true,
     },
   },
+  dateTime: '24 July, 2024, 12:12:04pm Asia/Calcutta',
 };

packages/cli/src/index.ts

@@ -250,7 +250,7 @@
     'Done analyzing cookies!'
   );
 
   let technologyAnalysisData: any = null;
 
   if (shouldDoTechnologyAnalysis) {
     spinnies.add('technology-spinner', {
@@ -294,12 +294,12 @@
   const isSiteMap = sitemapUrl || filePath ? true : false;
 
   if (outDir) {
-    await saveReports(path.resolve(outputDir), result);
+    await saveReports(path.resolve(outputDir), result, sitemapUrl);
     console.log('Reports created successfully!');
     process.exit(0);
   }
 
-  await saveResultsAsHTML(outputDir, result, isSiteMap);
+  await saveResultsAsHTML(outputDir, result, isSiteMap, null, sitemapUrl);
 })().catch((error) => {
   const spinnies = new Spinnies();
   spinnies.add('error-line-1', {

packages/cli/src/utils/saveReports.ts

@@ -40,9 +40,13 @@ const getFolderName = (pageUrl: string) => {
   return folderName;
 };
 
-const saveReports = async (outDir: string, result: CompleteJson[]) => {
+const saveReports = async (
+  outDir: string,
+  result: CompleteJson[],
+  sitemapUrl: string
+) => {
   if (result.length > 1) {
-    await saveResultAsHTML(outDir, result, true, 'report.html');
+    await saveResultAsHTML(outDir, result, true, 'report.html', sitemapUrl);
     // Sitemap report
     await Promise.all(
       result.map(async (siteReport) => {
@@ -59,7 +63,13 @@ const saveReports = async (outDir: string, result: CompleteJson[]) => {
         await writeFile(path.join(fileDir, 'cookies.csv'), allCookiesCSV);
 
         await ensureFile(path.join(fileDir, 'report.html'));
-        await saveResultAsHTML(fileDir, [siteReport], false, 'report.html');
+        await saveResultAsHTML(
+          fileDir,
+          [siteReport],
+          false,
+          'report.html',
+          sitemapUrl
+        );
 
         if (technologyDataCSV) {
           await ensureFile(path.join(fileDir, 'technologies.csv'));

packages/cli/src/utils/saveResultAsHTML.ts

@@ -16,13 +16,14 @@
 /**
  * External dependencies
  */
-import { CompleteJson } from '@google-psat/common';
+import { CompleteJson, getCurrentDateAndTime } from '@google-psat/common';
 import { I18n } from '@google-psat/i18n';
 import { ensureDir } from 'fs-extra';
 import { existsSync, writeFile } from 'node:fs';
 import path from 'node:path';
 import URL from 'node:url';
 import fs from 'fs';
+
 /**
  * Internal dependencies
  */
@@ -35,12 +36,14 @@ const isProduction = process.env.NODE_ENV === 'production';
  * @param result The completeJSON of the output.
  * @param isSiteMap Whether the output is sitemap of not
  * @param fileName Optional filename to use used for the output file.
+ * @param sitemapUrl Sitemap URL
  */
 const saveResultsAsHTML = async (
   outDir: string,
   result: CompleteJson[],
   isSiteMap: boolean,
-  fileName?: string | null
+  fileName?: string | null,
+  sitemapUrl?: string | undefined
 ) => {
   let htmlText = '';
 
@@ -86,6 +89,9 @@ const saveResultsAsHTML = async (
   }
 
   const messages = I18n.getMessages();
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const dateTime =
+    getCurrentDateAndTime('DD MMMM, YYYY, hh:mm:ssam/pm') + ' ' + timeZone;
 
   const html =
     htmlText.substring(0, htmlText.indexOf('</head>')) +
@@ -95,6 +101,8 @@ const saveResultsAsHTML = async (
         type: isSiteMap ? 'sitemap' : 'url',
         selectedSite: outDir?.trim()?.slice(6) ?? '',
         translations: messages,
+        dateTime,
+        siteMapUrl: isSiteMap ? sitemapUrl : '',
       })}</script>` +
     htmlText.substring(htmlText.indexOf('</head>'));
 

packages/extension/src/utils/downloadReport.ts

@@ -82,6 +82,10 @@ export const generateDashboard = async (
   const locale = I18n.getLocale();
   const translations = await I18n.fetchMessages(locale);
 
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const dateTime =
+    getCurrentDateAndTime('DD MMMM, YYYY, hh:mm:ssam/pm') + ' ' + timeZone;
+
   const code = `
   window.PSAT_EXTENSION = true;
   window.PSAT_DATA = ${JSON.stringify({
@@ -92,6 +96,7 @@ export const generateDashboard = async (
       : '',
     translations,
     appliedFilters,
+    dateTime,
   })}`;
 
   script.text = code;

packages/extension/src/view/report/dashboardApp.tsx

@@ -82,7 +82,7 @@ const App = () => {
         cookies={cookies}
         technologies={[]}
         // @ts-ignore
-        selectedSite={globalThis?.PSAT_DATA?.selectedSite}
+        selectedSite={completeJsonReport[0].pageUrl}
         // @ts-ignore
         path={globalThis?.PSAT_DATA?.selectedSite}
         libraryMatches={

packages/report/src/dashboard/components/header/index.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import { PrivacySandboxColoredIcon } from '@google-psat/design-system';
+
+interface HeaderProps {
+  url: string | undefined | null;
+  dateTime: string;
+}
+
+const Header = ({ url, dateTime }: HeaderProps) => {
+  // @ts-ignore - Global object.
+  const isExtension = globalThis?.PSAT_EXTENSION;
+
+  return (
+    <div className="flex justify-between gap-3 px-4 py-2">
+      <div className="flex gap-2 items-center">
+        <PrivacySandboxColoredIcon className="w-[40px] h-[40px]" />
+        <div>
+          {url && <p className="text-xs mb-[1px]">{url}</p>}
+          <p className="text-xs mb-[1px]">{dateTime}</p>
+        </div>
+      </div>
+      <div className="flex items-center text-cente">
+        {isExtension ? 'PSAT Extension Analysis' : 'PSAT CLI Analysis'}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

packages/report/src/dashboard/components/siteMapReport/cookies.tsx

@@ -117,6 +117,10 @@ const CookiesTab = ({
     return [_cookies, _technologies, [reportData]];
   }, [completeJson, isKeySelected]);
 
+  const sitemapPath =
+    // @ts-ignore - Global object
+    globalThis?.PSAT_DATA?.siteMapUrl || globalThis?.PSAT_DATA?.selectedSite;
+
   return (
     <>
       {!selectedSite ? (
@@ -130,6 +134,7 @@ const CookiesTab = ({
           setAppliedFilters={setAppliedFilters}
           query={query}
           clearQuery={clearQuery}
+          url={sitemapPath}
         />
       ) : (
         <SiteReport

packages/report/src/dashboard/components/siteReport/components/layout.tsx

@@ -91,6 +91,10 @@ const Layout = ({
           isSiteMapLandingContainer: false,
           query,
           clearQuery: _clearQuery,
+          url:
+            completeJson && completeJson?.length > 1
+              ? selectedSite
+              : completeJson?.[0]?.pageUrl,
         },
       };
 

packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/landing.tsx

@@ -140,6 +140,7 @@ const Landing = ({
         }
         menuData={menuData}
         scrollContainerId={menuBarScrollContainerId}
+        extraClasses="top-[85px]"
       />
       {sections.map(({ link, panel: { Element, props } }) => (
         <div id={link} key={link} className="cookie-landing-section">

packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 /**
  * External dependencies.
  */
@@ -35,10 +34,12 @@ import {
   useGlobalFiltering,
   FilterIcon,
 } from '@google-psat/design-system';
+
 /**
  * Internal dependencies.
  */
 import Landing from './cookieLanding/landing';
+import Header from '../../../../header';
 
 interface AssembledCookiesLandingProps {
   tabCookies: TabCookies;
@@ -53,6 +54,7 @@ interface AssembledCookiesLandingProps {
   menuBarScrollContainerId?: string;
   query?: string;
   clearQuery?: () => void;
+  url: string | undefined | null;
 }
 
 const AssembledCookiesLanding = ({
@@ -65,10 +67,14 @@ const AssembledCookiesLanding = ({
   menuBarScrollContainerId = 'dashboard-layout-container',
   query = '',
   clearQuery = noop,
+  url,
 }: AssembledCookiesLandingProps) => {
   const cookies = useMemo(() => Object.values(tabCookies || {}), [tabCookies]);
   const filterOutput = useGlobalFiltering(cookies, query, clearQuery);
 
+  // @ts-ignore Using global variable.
+  const { dateTime } = globalThis?.PSAT_DATA || {};
+
   const cookiesByKey = useMemo(() => {
     return (
       filterOutput.filteredData.reduce<TabCookies>((acc, cookie) => {
@@ -103,6 +109,7 @@ const AssembledCookiesLanding = ({
 
   return (
     <div className="h-full flex flex-col">
+      <Header url={url} dateTime={dateTime} />
       <div className="flex justify-center items-center flex-1 border-b border-gray-300 dark:border-quartz bg-anti-flash-white dark:bg-raisin-black">
         <button
           className="w-3 h-3 m-1 pl-1"
@@ -126,7 +133,7 @@ const AssembledCookiesLanding = ({
       <div
         className="flex grow-0"
         style={{
-          height: 'calc(100% - 26px)',
+          height: 'calc(100% - 82px)',
         }}
       >
         {showFilterSidebar && (

packages/report/src/dashboard/components/siteReport/tabs/cookies/index.tsx

@@ -30,13 +30,15 @@ interface CookiesTabProps {
   selectedSite?: string | null;
   query?: string;
   clearQuery?: () => void;
+  url?: string;
 }
 
 const CookiesTab = ({
   selectedFrameUrl,
   selectedSite,
   query = '',
   clearQuery = noop,
+  url = '',
 }: CookiesTabProps) => {
   const { tabCookies, completeJson, libraryMatches } = useContentStore(
     ({ state }) => ({
@@ -51,9 +53,9 @@ const CookiesTab = ({
   const tabFrames = useMemo(() => {
     const frames = Object.keys(
       completeJson?.[0].cookieData ?? {}
-    ).reduce<TabFrames>((acc, url) => {
-      if (url?.includes('http')) {
-        acc[url] = {} as TabFrames[string];
+    ).reduce<TabFrames>((acc, _url) => {
+      if (_url?.includes('http')) {
+        acc[_url] = {} as TabFrames[string];
       }
 
       return acc;
@@ -95,6 +97,7 @@ const CookiesTab = ({
             setAppliedFilters={setAppliedFilters}
             query={query}
             clearQuery={clearQuery}
+            url={url}
           />
         </div>
       )}

packages/report/src/dashboard/components/utils/reportDownloader/utils.ts

@@ -86,6 +86,8 @@ const generateHTMLFile = (
     selectedSite: globalThis?.PSAT_DATA?.selectedSite ?? '',
     translations,
     appliedFilters,
+    // @ts-ignore -- because this data will already be injected from cli or the extension.
+    dateTime: globalThis?.PSAT_DATA.dateTime,
     hideDownloadButton: true,
   };
 

tailwind.config.cjs

@@ -31,6 +31,7 @@ module.exports = {
     path.resolve(__dirname, './packages/extension/src/**/*.{tsx,ts,js}'),
     path.resolve(__dirname, './packages/design-system/src/**/*.{tsx,ts,js}'),
     path.resolve(__dirname, './packages/cli-dashboard/src/**/*.{tsx,ts,js}'),
+    path.resolve(__dirname, './packages/report/src/**/*.{tsx,ts,js}'),
     path.resolve(
       __dirname,
       './packages/library-detection/src/**/*.{tsx,ts,js}'