diff --git a/package.json b/package.json index f74a74f61..655371789 100644 --- a/package.json +++ b/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 ", diff --git a/packages/cli-dashboard/src/dummyData/PSAT_DATA.js b/packages/cli-dashboard/src/dummyData/PSAT_DATA.js index 588e45b89..abaa281e0 100644 --- a/packages/cli-dashboard/src/dummyData/PSAT_DATA.js +++ b/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', }; diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts index e752c5e11..a705deaf0 100644 --- a/packages/cli/src/index.ts +++ b/packages/cli/src/index.ts @@ -294,12 +294,12 @@ program.parse(); 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', { diff --git a/packages/cli/src/utils/saveReports.ts b/packages/cli/src/utils/saveReports.ts index 8868a8748..ac284e9d5 100644 --- a/packages/cli/src/utils/saveReports.ts +++ b/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')); diff --git a/packages/cli/src/utils/saveResultAsHTML.ts b/packages/cli/src/utils/saveResultAsHTML.ts index a3b5351a3..f00b78d54 100644 --- a/packages/cli/src/utils/saveResultAsHTML.ts +++ b/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('')) + @@ -95,6 +101,8 @@ const saveResultsAsHTML = async ( type: isSiteMap ? 'sitemap' : 'url', selectedSite: outDir?.trim()?.slice(6) ?? '', translations: messages, + dateTime, + siteMapUrl: isSiteMap ? sitemapUrl : '', })}` + htmlText.substring(htmlText.indexOf('')); diff --git a/packages/extension/src/utils/downloadReport.ts b/packages/extension/src/utils/downloadReport.ts index 0ec20910f..63a8340d7 100644 --- a/packages/extension/src/utils/downloadReport.ts +++ b/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; diff --git a/packages/extension/src/view/report/dashboardApp.tsx b/packages/extension/src/view/report/dashboardApp.tsx index 02c7a2d8a..6315af39f 100644 --- a/packages/extension/src/view/report/dashboardApp.tsx +++ b/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={ diff --git a/packages/report/src/dashboard/components/header/index.tsx b/packages/report/src/dashboard/components/header/index.tsx new file mode 100644 index 000000000..4887d1ba3 --- /dev/null +++ b/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 ( +
+
+ +
+ {url &&

{url}

} +

{dateTime}

+
+
+
+ {isExtension ? 'PSAT Extension Analysis' : 'PSAT CLI Analysis'} +
+
+ ); +}; + +export default Header; diff --git a/packages/report/src/dashboard/components/siteMapReport/cookies.tsx b/packages/report/src/dashboard/components/siteMapReport/cookies.tsx index 05387c8a0..58ec45fb0 100644 --- a/packages/report/src/dashboard/components/siteMapReport/cookies.tsx +++ b/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} /> ) : ( 1 + ? selectedSite + : completeJson?.[0]?.pageUrl, }, }; diff --git a/packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/landing.tsx b/packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/landing.tsx index d2e861499..6204d84b2 100644 --- a/packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/landing.tsx +++ b/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 } }) => (
diff --git a/packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx b/packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx index 858f26d4b..97cdba762 100644 --- a/packages/report/src/dashboard/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx +++ b/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((acc, cookie) => { @@ -103,6 +109,7 @@ const AssembledCookiesLanding = ({ return (
+
)} diff --git a/packages/report/src/dashboard/components/utils/reportDownloader/utils.ts b/packages/report/src/dashboard/components/utils/reportDownloader/utils.ts index 589fa6c6e..d4d7c4bfa 100644 --- a/packages/report/src/dashboard/components/utils/reportDownloader/utils.ts +++ b/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, }; diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 88612b7b3..29269e5a2 100644 --- a/tailwind.config.cjs +++ b/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}'