Feature: Filter navigation from aggregated report (#736)

* Implement query in sitemap report and pass as props * Memo the cookies and calculate persistence key earlier * Pass sidebar key rather than calculating again * Make category filter static and update tests * Fix lint * Fix lint action
GoogleChromeLabs · Jul 15, 2024 · 0ebc1fb · 0ebc1fb
1 parent 4faec45
commit 0ebc1fb
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 34 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -39,8 +39,8 @@
   },
   "ignorePatterns": [
     "**/node_modules/**",
-    "dist/**",
-    "dist-types/**",
+    "**/dist/**",
+    "**/dist-types/**",
     "out/**",
     "data/**",
     "coverage/**"

diff --git a/packages/cli-dashboard/src/components/siteMapReport/layout.tsx b/packages/cli-dashboard/src/components/siteMapReport/layout.tsx
@@ -96,6 +96,7 @@ const Layout = ({
     }));
 
   const { Element: PanelElement, props } = activePanel.panel;
+  const { query, clearQuery } = activePanel;
 
   const [
     siteFilteredCookies,
@@ -212,6 +213,8 @@ const Layout = ({
                 selectedSite: site,
                 path,
                 libraryMatches: libraryMatches ? libraryMatches[site] : {},
+                query,
+                clearQuery,
               },
             },
             children: {},
@@ -254,6 +257,8 @@ const Layout = ({
     siteFilteredTechnologies,
     siteMapLibraryMatches,
     sites,
+    query,
+    clearQuery,
   ]);
 
   useEffect(() => {

diff --git a/packages/cli-dashboard/src/components/siteReport/components/layout.tsx b/packages/cli-dashboard/src/components/siteReport/components/layout.tsx
@@ -29,6 +29,7 @@ import {
   SIDEBAR_ITEMS_KEYS,
 } from '@google-psat/design-system';
 import { I18n } from '@google-psat/i18n';
+import { noop } from '@google-psat/common';
 
 /**
  * Internal dependencies.
@@ -41,9 +42,16 @@ import Technologies from '../tabs/technologies';
 interface LayoutProps {
   selectedSite: string | null;
   setSidebarData: React.Dispatch<React.SetStateAction<SidebarItems>>;
+  query?: string;
+  clearQuery?: () => void;
 }
 
-const Layout = ({ selectedSite, setSidebarData }: LayoutProps) => {
+const Layout = ({
+  selectedSite,
+  setSidebarData,
+  query = '',
+  clearQuery = noop,
+}: LayoutProps) => {
   const { technologies, completeJson } = useContentStore(({ state }) => ({
     technologies: state.technologies,
     completeJson: state.completeJson,
@@ -80,18 +88,14 @@ const Layout = ({ selectedSite, setSidebarData }: LayoutProps) => {
         },
       };
 
-      const selectedFrameUrl = frameUrls.find(
-        (url) => url === keys[keys.length - 1]
-      );
-
       _data[SIDEBAR_ITEMS_KEYS.COOKIES].children = frameUrls.reduce(
         (acc: SidebarItems, url: string): SidebarItems => {
           acc[url] = {
             title: url,
             panel: {
               Element: CookiesTab,
               props: {
-                selectedFrameUrl,
+                selectedFrameUrl: keys[keys.length - 1],
                 selectedSite,
               },
             },
@@ -167,6 +171,13 @@ const Layout = ({ selectedSite, setSidebarData }: LayoutProps) => {
     }
   }, [selectedSite, updateSelectedItemKey]);
 
+  useEffect(() => {
+    if (query) {
+      updateSelectedItemKey(frameUrls[0], query);
+      clearQuery();
+    }
+  }, [query, clearQuery, updateSelectedItemKey, frameUrls]);
+
   return (
     <div className="w-full h-full flex">
       <Resizable

diff --git a/packages/cli-dashboard/src/components/siteReport/index.tsx b/packages/cli-dashboard/src/components/siteReport/index.tsx
@@ -18,11 +18,12 @@
  * External dependencies
  */
 import React, { useState } from 'react';
-import type {
-  CompleteJson,
-  CookieJsonDataType,
-  LibraryData,
-  TechnologyData,
+import {
+  noop,
+  type CompleteJson,
+  type CookieJsonDataType,
+  type LibraryData,
+  type TechnologyData,
 } from '@google-psat/common';
 import { SidebarProvider, type SidebarItems } from '@google-psat/design-system';
 
@@ -44,6 +45,8 @@ interface SiteReportProps {
   selectedSite: string | null;
   path: string;
   libraryMatches: LibraryData | null;
+  query?: string;
+  clearQuery?: () => void;
 }
 
 const SiteReport = ({
@@ -53,8 +56,11 @@ const SiteReport = ({
   selectedSite,
   path,
   libraryMatches,
+  query = '',
+  clearQuery = noop,
 }: SiteReportProps) => {
   const [data, setData] = useState<SidebarItems>(Tabs);
+
   return (
     <ContentStoreProvider
       cookies={cookies}
@@ -64,7 +70,12 @@ const SiteReport = ({
       path={path}
     >
       <SidebarProvider data={data}>
-        <Layout selectedSite={selectedSite} setSidebarData={setData} />
+        <Layout
+          selectedSite={selectedSite}
+          setSidebarData={setData}
+          query={query}
+          clearQuery={clearQuery}
+        />
       </SidebarProvider>
     </ContentStoreProvider>
   );

diff --git a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/index.tsx b/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/index.tsx
@@ -58,16 +58,18 @@ const CookiesListing = ({
     [tabCookies, selectedFrameUrl]
   );
 
+  const memoTabCookies = useMemo(() => Object.values(tabCookies), [tabCookies]);
+
   const {
     tableColumns,
     filters,
     searchKeys,
     tablePersistentSettingsKey,
     isSidebarOpen,
   } = useCookieListing(
-    Object.values(tabCookies),
+    memoTabCookies,
     selectedFrameUrl,
-    'cookiesListing' + selectedSite,
+    'cookiesListing',
     selectedSite
   );
 

diff --git a/packages/cli-dashboard/src/hooks/useCookieListing/index.tsx b/packages/cli-dashboard/src/hooks/useCookieListing/index.tsx
@@ -55,6 +55,14 @@ const useCookieListing = (
     [activePanelQuery]
   );
 
+  const tablePersistentSettingsKey = useMemo(() => {
+    if (selectedSite) {
+      return persistenceKey + '#' + selectedSite + selectedFrameUrl;
+    }
+
+    return persistenceKey + '#' + selectedFrameUrl;
+  }, [persistenceKey, selectedFrameUrl, selectedSite]);
+
   const tableColumns = useMemo<TableColumn[]>(
     () => [
       {
@@ -170,12 +178,24 @@ const useCookieListing = (
         title: I18n.getMessage('category'),
         hasStaticFilterValues: true,
         hasPrecalculatedFilterValues: true,
-        filterValues: calculateDynamicFilterValues(
+        filterValues: evaluateStaticFilterValues(
+          {
+            [I18n.getMessage('analytics')]: {
+              selected: false,
+            },
+            [I18n.getMessage('functional')]: {
+              selected: false,
+            },
+            [I18n.getMessage('marketing')]: {
+              selected: false,
+            },
+            [I18n.getMessage('uncategorized')]: {
+              selected: false,
+            },
+          },
           'analytics.category',
-          tabCookies,
-          parsedQuery?.filter?.['analytics.category'],
-          clearActivePanelQuery,
-          true
+          parsedQuery,
+          clearActivePanelQuery
         ),
         sortValues: true,
         useGenericPersistenceKey: true,
@@ -382,14 +402,6 @@ const useCookieListing = (
     []
   );
 
-  const tablePersistentSettingsKey = useMemo(() => {
-    if (selectedSite) {
-      return persistenceKey + '#' + selectedSite + selectedFrameUrl;
-    }
-
-    return persistenceKey + '#' + selectedFrameUrl;
-  }, [persistenceKey, selectedFrameUrl, selectedSite]);
-
   return {
     tableColumns,
     filters,

diff --git a/.../extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/index.tsx b/.../extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/index.tsx
@@ -256,12 +256,24 @@ const useCookieListing = (domainsInAllowList: Set<string>) => {
         title: I18n.getMessage('category'),
         hasStaticFilterValues: true,
         hasPrecalculatedFilterValues: true,
-        filterValues: calculateDynamicFilterValues(
+        filterValues: evaluateStaticFilterValues(
+          {
+            [I18n.getMessage('analytics')]: {
+              selected: false,
+            },
+            [I18n.getMessage('functional')]: {
+              selected: false,
+            },
+            [I18n.getMessage('marketing')]: {
+              selected: false,
+            },
+            [I18n.getMessage('uncategorized')]: {
+              selected: false,
+            },
+          },
           'analytics.category',
-          Object.values(cookies),
-          parsedQuery?.filter?.['analytics.category'],
-          clearActivePanelQuery,
-          true
+          parsedQuery,
+          clearActivePanelQuery
         ),
         sortValues: true,
         useGenericPersistenceKey: true,

diff --git a/...ew/devtools/components/cookies/cookiesListing/useCookieListing/tests/useCookieListing.tsx b/...ew/devtools/components/cookies/cookiesListing/useCookieListing/tests/useCookieListing.tsx
@@ -73,6 +73,12 @@ describe('useCookieListing', () => {
     uncategorized: {
       message: 'Uncategorized',
     },
+    analytics: {
+      message: 'Analytics',
+    },
+    functional: {
+      message: 'Functional',
+    },
     true: {
       message: 'True',
     },
@@ -115,6 +121,12 @@ describe('useCookieListing', () => {
       result.current.filters['analytics.category'].hasPrecalculatedFilterValues
     ).toBe(true);
     expect(result.current.filters['analytics.category'].filterValues).toEqual({
+      Analytics: {
+        selected: false,
+      },
+      Functional: {
+        selected: false,
+      },
       Marketing: {
         selected: false,
       },