Merge pull request #238 from GoogleChromeLabs/develop

v0.3.2
GoogleChromeLabs · Nov 6, 2023 · 1d87f7c · 1d87f7c
2 parents 44ff812 + eafeffb
commit 1d87f7c
Show file tree

Hide file tree

Showing 47 changed files with 415 additions and 364 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -128,4 +128,21 @@
 * Fix: Frame overlay issues https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/190
 * Update landing page's UI/UX https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/195
 * Fix: Frame overlay tooltip calculation issue https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/210
-* Refactor: Update package name https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/191
+* Refactor: Update package name https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/191
+
+
+# v0.3.2
+
+## Cookies
+* Enhancement: Add cross icon to cookie accepted column https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/231
+* Fix: Update checkbox dimensions and resize visibility https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/234
+* Fix: Trim out whitespace from the cookie key. https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/237
+* Enhancement : Add reactive refresh button in devtools header https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/236
+
+## CLI
+* Fix : Add missing description in analytics https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/230
+
+## Privacy Sandbox API
+* Update `RWS` submission steps text https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/229
+* Fix: opaque origin error when using in https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/235
+* Refactor: Make functional components in landing page non-collapsible https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/232
diff --git a/data/PSInfo.json b/data/PSInfo.json
@@ -37,7 +37,7 @@
     "proposal": "https://github.com/WICG/first-party-sets",
     "publicDiscussion": "https://github.com/WICG/first-party-sets/issues",
     "videoOverview": "https://www.youtube.com/watch?v=cNJ8mZ-J3F8",
-    "devDocumentation": "https://developer.chrome.com/docs/privacy-sandbox/first-party-sets/"
+    "devDocumentation": "https://developer.chrome.com/docs/privacy-sandbox/related-website-sets/"
   },
   "shared-storage": {
     "name": "Shared Storage",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ps-analysis-tool",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"description": "Cookie Analysis Tool and CLI for analysis and understanding of cookie usage on web pages.",
 	"scripts": {
 		"cli:prebuild": "node ./scripts/delete-build-artifacts.cjs",

diff --git a/...oard/src/components/siteReport/tabs/cookies/cookiesListing/cookieTableContainer/index.tsx b/...oard/src/components/siteReport/tabs/cookies/cookiesListing/cookieTableContainer/index.tsx
@@ -119,7 +119,11 @@ const CookieTableContainer = ({
         accessorKey: 'isCookieSet',
         cell: (info: InfoType) => (
           <p className="flex justify-center items-center">
-            {!info ? <span className="font-serif">✓</span> : ''}
+            {!info ? (
+              <span className="font-serif">✓</span>
+            ) : (
+              <span className="font-serif">✗</span>
+            )}
           </p>
         ),
       },

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ps-analysis-tool/cli",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "CLI tool for analysis",
   "main": "index.js",
   "scripts": {

diff --git a/packages/cli/src/procedures/analyzeCookieUrls.ts b/packages/cli/src/procedures/analyzeCookieUrls.ts
@@ -86,6 +86,7 @@ export const analyzeCookiesUrls = async (
           frameCookies[key].platform = analytics?.platform || 'Unknown';
           frameCookies[key].category = analytics?.category || 'Uncategorized';
           frameCookies[key].GDPR = analytics?.gdprUrl || '';
+          frameCookies[key].description = analytics?.description;
 
           // some cookies may have their expires value in epoch. Convert them to string
           const expires = frameCookies[key].expires;

diff --git a/packages/cli/src/utils/browserManagement/types.ts b/packages/cli/src/utils/browserManagement/types.ts
@@ -25,6 +25,7 @@ export type Cookie = {
   secure: boolean;
   isBlocked?: boolean;
   platform?: string;
+  description?: string;
   category?: string;
   GDPR?: string;
   isFirstParty?: boolean;

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ps-analysis-tool/common",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A package for common utilities that are being used in multiple packages",
   "main": "./dist/index.js",
   "types": "./dist-types/index.d.ts",

diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
@@ -20,6 +20,7 @@ export { default as filterCookiesByFrame } from './utils/filterCookiesByFrame';
 export { default as prepareCookiesCount } from './utils/prepareCookiesCount';
 export { default as prepareCookieStatsComponents } from './utils/prepareCookieStatsComponents';
 export { default as getCookieKey } from './utils/getCookieKey';
+export { default as fetchLocalData } from './utils/fetchLocalData';
 export { default as noop } from './utils/noop';
 export * from './cookies.types';
 export const UNKNOWN_FRAME_KEY = 'Unknown frame(s)';
diff --git a/...ges/extension/src/utils/fetchLocalData.ts → packages/common/src/utils/fetchLocalData.ts b/...ges/extension/src/utils/fetchLocalData.ts → packages/common/src/utils/fetchLocalData.ts
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
@@ -15,6 +15,7 @@
  */
 
 export { default as Button } from './button';
+export { default as RefreshButton } from './refreshButton';
 export { default as ProgressBar } from './progressBar';
 export { default as Accordion } from './accordion';
 export { default as AccordionChildren } from './accordion/accordionChildren';
@@ -30,6 +31,8 @@ export { default as CookieDetails } from './cookieDetails';
 export { default as Details } from './cookieDetails/details';
 export { default as CookieTable } from './cookieTable';
 export { default as LandingPage } from './landingPage';
+export { default as InfoCard } from './landingPage/infoCard';
+export * from './landingPage/infoCard/fetchPSInfo';
 export { default as ErrorFallback } from './errorFallback';
 export { default as ExtensionReloadNotification } from './errorFallback/extensionReloadNotification';
 export * from './table';
diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx
@@ -17,116 +17,99 @@
 /**
  * External dependencies.
  */
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import classNames from 'classnames';
-import { XMLParser } from 'fast-xml-parser';
 
 /**
  * Internal dependencies.
  */
-import { ArrowUp, ChevronRight } from '../../icons';
+import { ArrowUp } from '../../icons';
 import ProgressBar from '../progressBar';
-import BulletList from '../bulletList';
-import { QUICK_LINKS } from './constants';
+import QuickLinksList from './quickLinksList';
+import { PSInfoKeyType } from './infoCard/fetchPSInfo';
+import InfoCard from './infoCard';
 
 interface LandingPageProps {
   title?: string;
   children?: ReactNode;
-  isLoading?: boolean;
+  psInfoKey?: PSInfoKeyType;
+  iframeSrc?: string;
+  iframeBorderClass?: string;
+  extraClasses?: string;
 }
 
-const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
+const LandingPage = ({
+  title,
+  psInfoKey,
+  iframeSrc,
+  iframeBorderClass,
+  children,
+  extraClasses,
+}: LandingPageProps) => {
+  const [loading, setLoading] = useState(iframeSrc ? true : false);
   const [open, setOpen] = useState(true);
-  const [news, setNews] = useState<BulletListItem[]>([]);
-
-  const fetchLatestNews = async () => {
-    try {
-      const response = await fetch('https://privacysandbox.com/rss/');
-      const xmlResponse = await response.text();
-
-      const parser = new XMLParser();
-      const parsedFeed = parser.parse(xmlResponse);
-
-      const items = parsedFeed?.rss?.channel?.item;
-
-      if (items) {
-        const newsArray = items
-          .map((item: BulletListItem) => ({
-            title: item.title,
-            link: item.link,
-            date: item.pubDate ? new Date(item.pubDate).toISOString() : '',
-          })) // @ts-ignore
-          .sort((a, b) => b.date.localeCompare(a.date));
-
-        setNews(newsArray);
-      }
-    } catch (error) {
-      // Currently logging, but ideally inform user through UI.
-      console.warn('Error fetching latest news', error);
-    }
-  };
-
-  useEffect(() => {
-    fetchLatestNews();
-  }, []);
 
   return (
     <>
-      {isLoading && <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />}
-      <div className={classNames(isLoading && 'hidden')}>
-        <div className="flex flex-col">
-          <div className="p-4 border-b border-hex-gray dark:border-quartz">
-            <button
-              className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray cursor-pointer"
-              onClick={() => setOpen((prevOpen) => !prevOpen)}
-            >
-              {title && <h1 className="text-left">{title}</h1>}
-              <div>
-                <ArrowUp
-                  className={classNames(open && 'rotate-180 -translate-y-1')}
-                />
-              </div>
-            </button>
-          </div>
-
-          {/* Section Content */}
+      {loading && <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />}
+      <div
+        className={classNames(
+          { hidden: loading },
+          'divide-y divide-hex-gray dark:divide-quartz'
+        )}
+      >
+        <div className="p-4">
+          <button
+            className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray cursor-pointer"
+            onClick={() => setOpen((prevOpen) => !prevOpen)}
+          >
+            {title && <h1 className="text-left">{title}</h1>}
+            <div>
+              <ArrowUp
+                className={classNames(open && 'rotate-180 -translate-y-1')}
+              />
+            </div>
+          </button>
+        </div>
+        <div className={classNames({ hidden: !open && !children })}>
           <div
+            id="#__psat-collapsible-content"
             className={classNames(
-              !open && 'hidden',
-              'border-b border-hex-gray dark:border-quartz h-full'
+              { hidden: !open },
+              extraClasses,
+              'flex flex-col gap-6 divide-y divide-american-silver dark:divide-quartz px-4 py-6',
+              { 'border-b border-american-silver dark:border-quartz': children }
             )}
           >
-            {children}
-          </div>
-        </div>
-
-        <div className="flex flex-col md:flex-row px-4 pt-6 pb-24 gap-10">
-          {/* Quick Links */}
-          <div className="md:w-[35%] flex flex-col gap-4">
-            <BulletList rows={QUICK_LINKS} heading="Quick Links" />
+            {iframeSrc && (
+              <iframe
+                src={iframeSrc}
+                height="100%"
+                onLoad={() => {
+                  setLoading(false);
+                }}
+                className={classNames(
+                  'w-full md:w-[70%] md:m-auto rounded-xl',
+                  iframeBorderClass
+                )}
+              />
+            )}
+            {psInfoKey && <InfoCard infoKey={psInfoKey} />}
           </div>
-          {/* Latest News */}
-          <div className="md:w-[65%] flex flex-col gap-4">
-            <h2 className="text-xs font-bold uppercase text-darkest-gray dark:text-bright-gray">
-              Latest News
-            </h2>
-            <hr className="border-0 border-b border-hex-gray dark:border-quartz" />
-            <div className="space-y-4">
-              <BulletList rows={news} />
 
-              <div className="ml-6">
-                <a
-                  href="https://privacysandbox.com/news/"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="leading-6 text-sm text-analytics dark:text-medium-persian-blue font-semibold px-3 border border-american-silver dark:border-quartz rounded inline-flex gap-2 items-center"
-                >
-                  View More <ChevronRight />
-                </a>
-              </div>
+          {children && (
+            <div
+              id="#__psat-main-content"
+              className={classNames(
+                'flex flex-col gap-6 divide-y divide-american-silver dark:divide-quartz px-4 py-6',
+                extraClasses
+              )}
+            >
+              {children}
             </div>
-          </div>
+          )}
         </div>
+        <QuickLinksList />
       </div>
     </>
   );

diff --git a/packages/extension/src/utils/fetchPSInfo.ts → ...nents/landingPage/infoCard/fetchPSInfo.ts b/packages/extension/src/utils/fetchPSInfo.ts → ...nents/landingPage/infoCard/fetchPSInfo.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 /**
- * Internal dependencies.
+ * External dependencies.
  */
-import fetchLocalData from './fetchLocalData';
+import { fetchLocalData } from '@ps-analysis-tool/common';
 
 export enum PSInfoKey {
   'Topics' = 'topics',

diff --git a/...sign-system/components/infoCard/index.tsx → ...components/landingPage/infoCard/index.tsx b/...sign-system/components/infoCard/index.tsx → ...components/landingPage/infoCard/index.tsx
@@ -27,31 +27,28 @@ import {
   fetchPSInfo,
   type PSInfo as PSInfoType,
   type PSInfoKeyType,
-} from '../../../../utils/fetchPSInfo';
-import classNames from 'classnames';
+} from './fetchPSInfo';
 
 interface InfoCardProps {
   infoKey: PSInfoKeyType;
-  setTitle?: React.Dispatch<React.SetStateAction<string>>;
   className?: string;
 }
 
-const InfoCard = ({ infoKey, setTitle, className }: InfoCardProps) => {
+const InfoCard = ({ infoKey, className }: InfoCardProps) => {
   const [PSInfo, setPSInfo] = useState({} as PSInfoType);
 
   useEffect(() => {
     (async function () {
       const info = await fetchPSInfo(infoKey);
 
       setPSInfo(info);
-      setTitle?.(info.name);
     })();
-  }, [infoKey, setTitle]);
+  }, [infoKey]);
 
   return (
     <>
       {Object.keys(PSInfo).length ? (
-        <div className={classNames('py-6 ', className)}>
+        <div className={className}>
           <p
             className="mb-3 text-gray-700 dark:text-bright-gray text-sm"
             dangerouslySetInnerHTML={{ __html: PSInfo.description }}