Feature: Add known breakages section in aggregated report (#754)

* Remove conditional addition of knownbreakages section * Calculate knownBreakages and pass onto landing page and report object * Update conditions for caclculating libraryMatches in sitemap * Pass urls count and use knownbreakages section instead of librarydetection component * Add count inside circle and pass props * Add color to known breakages * Add color mapping in library detection component * Add publicPath to report build
GoogleChromeLabs · Jul 15, 2024 · 4faec45 · 4faec45
1 parent 629aed9
commit 4faec45
Show file tree

Hide file tree

Showing 24 changed files with 295 additions and 51 deletions.
diff --git a/extension.webpack.config.cjs b/extension.webpack.config.cjs
@@ -110,6 +110,7 @@ const report = {
   output: {
     path: path.resolve(__dirname, './dist/extension/report'),
     filename: '[name].js',
+    publicPath: '/',
   },
   plugins: [
     new WebpackBar({

diff --git a/packages/cli-dashboard/src/components/siteMapReport/layout.tsx b/packages/cli-dashboard/src/components/siteMapReport/layout.tsx
@@ -135,6 +135,38 @@ const Layout = ({
     return store;
   }, [completeJson]);
 
+  const [siteMapLibraryMatches, libraryMatchesUrlCount] = useMemo(() => {
+    const _libraryMatchesUrlCount: {
+      [key: string]: number;
+    } = {};
+
+    const _siteMapLibraryMatches = completeJson?.reduce<
+      CompleteJson['libraryMatches']
+    >((acc, data) => {
+      const _libraryMatches = data.libraryMatches;
+
+      Object.keys(_libraryMatches).forEach((key) => {
+        acc[key] =
+          // @ts-ignore
+          acc[key]?.matches?.length || acc[key]?.domQuerymatches?.length
+            ? acc[key]
+            : _libraryMatches[key];
+
+        if (
+          Object.keys(_libraryMatches[key]?.matches ?? {}).length ||
+          Object.keys(_libraryMatches[key]?.domQuerymatches ?? {}).length
+        ) {
+          _libraryMatchesUrlCount[key] =
+            (_libraryMatchesUrlCount[key] || 0) + 1;
+        }
+      });
+
+      return acc;
+    }, {});
+
+    return [_siteMapLibraryMatches, _libraryMatchesUrlCount];
+  }, [completeJson]);
+
   useEffect(() => {
     setSidebarData((prev) => {
       const _data = { ...prev };
@@ -143,13 +175,14 @@ const Layout = ({
         Element: CookiesLandingContainer,
         props: {
           tabCookies: reshapedCookies,
-          isSiteMapLandingContainer: true,
           tabFrames: sites.reduce<TabFrames>((acc, site) => {
             acc[site] = {} as TabFrames[string];
 
             return acc;
           }, {}),
           cookiesWithIssues,
+          libraryMatches: siteMapLibraryMatches,
+          libraryMatchesUrlCount,
           downloadReport: () => {
             if (!Array.isArray(completeJson)) {
               return;
@@ -208,16 +241,18 @@ const Layout = ({
       return _data;
     });
   }, [
-    libraryMatches,
     completeJson,
     cookiesWithIssues,
     doesSiteHaveCookies,
+    libraryMatches,
+    libraryMatchesUrlCount,
     path,
     reshapedCookies,
     setSidebarData,
     siteFilteredCompleteJson,
     siteFilteredCookies,
     siteFilteredTechnologies,
+    siteMapLibraryMatches,
     sites,
   ]);
 

diff --git a/...mponents/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/knownBreakages.tsx b/...mponents/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/knownBreakages.tsx
@@ -24,9 +24,15 @@ import { I18n } from '@google-psat/i18n';
 
 interface KnownBreakagesProps {
   libraryMatches: LibraryData;
+  libraryMatchesUrlCount?: {
+    [url: string]: number;
+  };
 }
 
-const KnownBreakages = ({ libraryMatches }: KnownBreakagesProps) => {
+const KnownBreakages = ({
+  libraryMatches,
+  libraryMatchesUrlCount,
+}: KnownBreakagesProps) => {
   const names = Object.keys(libraryMatches);
 
   const detectedLibraryNames = names.filter(
@@ -39,7 +45,13 @@ const KnownBreakages = ({ libraryMatches }: KnownBreakagesProps) => {
     {
       title: I18n.getMessage('knownBreakages'),
       count: Number(detectedLibraryNames.length),
-      data: [{ count: 1, color: COLOR_MAP.uncategorized.color }],
+      data: detectedLibraryNames.map((name) => ({
+        count:
+          libraryMatches[name as keyof LibraryData]?.matches?.length ||
+          libraryMatches[name as keyof LibraryData]?.domQuerymatches?.length ||
+          0,
+        color: COLOR_MAP[name].color,
+      })),
     },
   ];
 
@@ -64,6 +76,7 @@ const KnownBreakages = ({ libraryMatches }: KnownBreakagesProps) => {
               key={library.name}
               matches={matches}
               domQueryMatches={domQueryMatches}
+              urlCount={libraryMatchesUrlCount?.[library.name]}
             />
           );
         })}

diff --git a/...es/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx b/...es/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx
@@ -42,6 +42,9 @@ interface CookiesLandingContainerProps {
   cookiesWithIssues: TabCookies;
   downloadReport?: () => void;
   libraryMatches: LibraryData | null;
+  libraryMatchesUrlCount?: {
+    [url: string]: number;
+  };
   isSiteMapLandingContainer?: boolean;
   menuBarScrollContainerId?: string;
 }
@@ -52,7 +55,7 @@ const CookiesLandingContainer = ({
   cookiesWithIssues,
   downloadReport,
   libraryMatches,
-  isSiteMapLandingContainer = false,
+  libraryMatchesUrlCount,
   menuBarScrollContainerId = 'dashboard-layout-container',
 }: CookiesLandingContainerProps) => {
   const cookieStats = prepareCookiesCount(tabCookies);
@@ -93,29 +96,27 @@ const CookiesLandingContainer = ({
           },
         },
       },
-    ];
-
-    if (!isSiteMapLandingContainer) {
-      baseSections.push({
+      {
         name: I18n.getMessage('knownBreakages'),
         link: 'known-breakages',
         panel: {
           Element: KnownBreakages,
           props: {
             libraryMatches: libraryMatches ?? {},
+            libraryMatchesUrlCount,
           },
         },
-      });
-    }
+      },
+    ];
 
     return baseSections;
   }, [
     tabCookies,
     tabFrames,
     cookiesWithIssues,
     cookieStats,
-    isSiteMapLandingContainer,
     libraryMatches,
+    libraryMatchesUrlCount,
   ]);
 
   const menuData: MenuData = useMemo(

diff --git a/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts b/packages/cli-dashboard/src/components/utils/reportDownloader/utils.ts
@@ -198,11 +198,38 @@ function generateSitemapReportObject(
     },
   ];
 
+  const libraryMatchesUrlCount: {
+    [key: string]: number;
+  } = {};
+  const libraryMatches = analysisData.reduce<CompleteJson['libraryMatches']>(
+    (acc, data) => {
+      const _libraryMatches = data.libraryMatches;
+
+      Object.keys(_libraryMatches).forEach((key) => {
+        acc[key] =
+          // @ts-ignore
+          acc[key]?.matches?.length || acc[key]?.domQuerymatches?.length
+            ? acc[key]
+            : _libraryMatches[key];
+
+        if (
+          Object.keys(_libraryMatches[key]?.matches ?? {}).length ||
+          Object.keys(_libraryMatches[key]?.domQuerymatches ?? {}).length
+        ) {
+          libraryMatchesUrlCount[key] = (libraryMatchesUrlCount[key] || 0) + 1;
+        }
+      });
+
+      return acc;
+    },
+    {}
+  );
+
   return {
     cookieClassificationDataMapping,
     tabCookies,
     cookiesStatsComponents,
-    libraryDetection: {},
+    libraryMatches,
     tabFrames,
     showInfoIcon: true,
     showHorizontalMatrix: false,
@@ -213,6 +240,7 @@ function generateSitemapReportObject(
     showFramesSection: false,
     showBlockedCategory: true,
     url: sitemapURL,
+    libraryMatchesUrlCount,
     // @ts-ignore - 'typeof globalThis' has no index signature
     translations: globalThis?.PSAT_DATA?.translations,
   };

diff --git a/packages/design-system/src/icons/ellipse.svg b/packages/design-system/src/icons/ellipse.svg
diff --git a/packages/design-system/src/theme/colors.ts b/packages/design-system/src/theme/colors.ts
@@ -215,4 +215,32 @@ export const COLOR_MAP: {
     color: '#840032',
     className: 'text-maroon-claret',
   },
+  gsiV2: {
+    color: '#25ACAD',
+    className: 'text-greenland-green',
+  },
+  gis: {
+    color: '#C5A06A',
+    className: 'text-good-life',
+  },
+  'fb-comments': {
+    color: '#AF7AA3',
+    className: 'text-victorian-violet',
+  },
+  'fb-likes': {
+    color: '#F54021',
+    className: 'text-strawberry-spinach-red',
+  },
+  'disqus-comments': {
+    color: '#A98307',
+    className: 'text-chestnut-gold',
+  },
+  'jetpack-comments': {
+    color: '#7D8471',
+    className: 'text-battle-dress',
+  },
+  'jetpack-likes': {
+    color: '#C5A06A',
+    className: 'text-good-life',
+  },
 };
diff --git a/packages/library-detection/src/components/accordion/accordionHeading.tsx b/packages/library-detection/src/components/accordion/accordionHeading.tsx
@@ -30,6 +30,7 @@ interface AccodionHeadingProps {
   loading: boolean;
   isOpen: boolean;
   featuresText: string;
+  urlCount?: number;
 }
 
 const AccordionHeading = ({
@@ -38,14 +39,25 @@ const AccordionHeading = ({
   loading,
   isOpen,
   featuresText,
+  urlCount = 0,
 }: AccodionHeadingProps) => {
   return (
     <div
       onClick={() => setIsOpen(!isOpen)}
-      className="transition-colors flex py-3 cursor-pointer hover:opacity-90 active:opacity-60 hover:bg-[#f5f5f5] hover:dark:bg-[#1d1d1d] rounded-md"
+      className="transition-colors flex items-center py-3 cursor-pointer hover:opacity-90 active:opacity-60 hover:bg-[#f5f5f5] hover:dark:bg-[#1d1d1d] rounded-md"
     >
-      <span className="flex items-center px-2">
-        <Ellipse />
+      <span className="flex items-center px-2 relative">
+        <Ellipse className={urlCount ? 'w-6 h-6' : ''} />
+        {urlCount !== 0 && (
+          <span
+            className={`${
+              urlCount > 9 ? 'text-xxxs' : 'text-xs'
+            } text-gray dark:text-bright-gray font-semibold absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`}
+            title={`${urlCount} URL(s) have this known breakage.`}
+          >
+            {urlCount > 9 ? '9+' : urlCount}
+          </span>
+        )}
       </span>
       <p className="flex-1 dark:text-bright-gray font-medium">
         {title}

diff --git a/packages/library-detection/src/components/accordion/index.tsx b/packages/library-detection/src/components/accordion/index.tsx
@@ -30,13 +30,15 @@ interface AccordionProps {
   title: string;
   isLoading?: boolean;
   featuresText?: string;
+  urlCount?: number;
 }
 
 const Accordion = ({
   children,
   title,
   isLoading = false,
   featuresText = '',
+  urlCount,
 }: AccordionProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -52,6 +54,7 @@ const Accordion = ({
         loading={isLoading}
         title={title}
         featuresText={featuresText}
+        urlCount={urlCount}
       />
       <AccordionContent isOpen={isOpen}>{children}</AccordionContent>
     </div>

diff --git a/packages/library-detection/src/components/libraryDetection/index.tsx b/packages/library-detection/src/components/libraryDetection/index.tsx
@@ -54,7 +54,13 @@ const LibraryDetection = memo(function LibraryDetection() {
     {
       title: I18n.getMessage('knownBreakages'),
       count: Number(detectedLibraryNames.length),
-      data: [{ count: 1, color: COLOR_MAP.uncategorized.color }],
+      data: detectedLibraryNames.map((name) => ({
+        count:
+          libraryMatches[name as keyof LibraryData]?.matches?.length ||
+          libraryMatches[name as keyof LibraryData]?.domQuerymatches?.length ||
+          0,
+        color: COLOR_MAP[name].color,
+      })),
     },
   ];
 

diff --git a/packages/library-detection/src/libraries/disqus-comments/accordion.tsx b/packages/library-detection/src/libraries/disqus-comments/accordion.tsx
@@ -17,16 +17,19 @@
  * External dependencies.
  */
 import React from 'react';
+import { I18n } from '@google-psat/i18n';
 
 /**
  * Internal dependencies.
  */
 import { Accordion, DetectionMessage } from '../../components';
 import type { AccordionProps } from '../../types';
 import { DISQUS_COMMENTS_HELP_URL } from './constants';
-import { I18n } from '@google-psat/i18n';
 
-const DisqusCommentsAccordion = ({ domQueryMatches }: AccordionProps) => {
+const DisqusCommentsAccordion = ({
+  domQueryMatches,
+  urlCount,
+}: AccordionProps) => {
   if (!domQueryMatches) {
     return null;
   }
@@ -42,6 +45,7 @@ const DisqusCommentsAccordion = ({ domQueryMatches }: AccordionProps) => {
       title={I18n.getMessage('disqusComments')}
       isLoading={false}
       featuresText=""
+      urlCount={urlCount}
     >
       <DetectionMessage
         libraryName={I18n.getMessage('disqusComments')}

diff --git a/packages/library-detection/src/libraries/fb-comments/accordion.tsx b/packages/library-detection/src/libraries/fb-comments/accordion.tsx
@@ -26,7 +26,7 @@ import type { AccordionProps } from '../../types';
 import { FB_COMMENTS_HELP_URL } from './constants';
 import { I18n } from '@google-psat/i18n';
 
-const FBCommentsAccordion = ({ domQueryMatches }: AccordionProps) => {
+const FBCommentsAccordion = ({ domQueryMatches, urlCount }: AccordionProps) => {
   if (!domQueryMatches) {
     return null;
   }
@@ -42,6 +42,7 @@ const FBCommentsAccordion = ({ domQueryMatches }: AccordionProps) => {
       title={I18n.getMessage('fBComments')}
       isLoading={false}
       featuresText=""
+      urlCount={urlCount}
     >
       <DetectionMessage
         libraryName={I18n.getMessage('fBCommentsPlugin')}