Fix: CLI fixes in v0.5.0 regression testing (#481)

* fix: details section showing up empty * fix: accessor key in cookie listing in cli dashboard * fix:add truncation in technologies description * fix:effective expiry date * fix:highlighting problem * fix:wrong values in csv for affected cookie value
GoogleChromeLabs · Feb 7, 2024 · bdfb3a1 · bdfb3a1
1 parent 85e22c7
commit bdfb3a1
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 21 deletions.
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
@@ -80,6 +80,7 @@ const CookiesListing = ({
         className="h-full flex"
       >
         <CookieTable
+          useIsBlockedToHighlight={true}
           data={cookies}
           tableColumns={tableColumns}
           showTopBar={true}
@@ -92,7 +93,10 @@ const CookiesListing = ({
           setSelectedFrameCookie={setSelectedFrameCookie}
         />
       </Resizable>
-      <CookieDetails selectedFrameCookie={selectedFrameCookie} />
+      <CookieDetails
+        isUsingCDP={true}
+        selectedFrameCookie={selectedFrameCookie}
+      />
     </div>
   );
 };

diff --git a/packages/cli-dashboard/src/components/siteReport/tabs/technologies/index.tsx b/packages/cli-dashboard/src/components/siteReport/tabs/technologies/index.tsx
@@ -54,7 +54,11 @@ const Technologies = ({ selectedSite }: TechnologiesProps) => {
       {
         header: 'Description',
         accessorKey: 'description',
-        cell: (info: InfoType) => <p title={info as string}>{info}</p>,
+        cell: (info: InfoType) => (
+          <p title={info as string} className="truncate">
+            {info}
+          </p>
+        ),
       },
       {
         header: 'Confidence',
@@ -132,18 +136,26 @@ const Technologies = ({ selectedSite }: TechnologiesProps) => {
       <div className="flex-1 border border-gray-300 dark:border-quartz shadow h-full min-w-[10rem]">
         {selectedRow ? (
           <div className="text-xs py-1 px-1.5">
-            <p className="font-bold text-granite-gray dark:text-manatee mb-1 text-semibold flex items-center">
-              <span>Technology Details</span>
-            </p>
-            <p className="mb-4 break-words text-outer-space-crayola dark:text-bright-gray">
-              {selectedRow.name}
-            </p>
-            <p className="font-bold text-granite-gray dark:text-manatee mb-1">
-              Description
-            </p>
-            <p className="text-outer-space-crayola dark:text-bright-gray">
-              {selectedRow.description}
-            </p>
+            {selectedRow.name && (
+              <>
+                <p className="font-bold text-granite-gray dark:text-manatee mb-1 text-semibold flex items-center">
+                  <span>Technology Details</span>
+                </p>
+                <p className="mb-4 break-words text-outer-space-crayola dark:text-bright-gray">
+                  {selectedRow.name}
+                </p>
+              </>
+            )}
+            {selectedRow.name && (
+              <>
+                <p className="font-bold text-granite-gray dark:text-manatee mb-1">
+                  Description
+                </p>
+                <p className="text-outer-space-crayola dark:text-bright-gray">
+                  {selectedRow.description}
+                </p>
+              </>
+            )}
           </div>
         ) : (
           <div className="h-full p-8 flex items-center">

diff --git a/packages/cli-dashboard/src/hooks/useCookieListing.tsx/index.tsx b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/index.tsx
@@ -23,7 +23,10 @@ import type {
   TableColumn,
   TableFilter,
 } from '@ps-analysis-tool/design-system';
-import { type CookieTableData } from '@ps-analysis-tool/common';
+import {
+  calculateEffectiveExpiryDate,
+  type CookieTableData,
+} from '@ps-analysis-tool/common';
 import calculateDynamicFilterValues from './utils/calculateDynamicFilterValues';
 import calculateBlockedReasonsFilterValues from './utils/calculateBlockedReasonsFilterValues';
 
@@ -66,7 +69,7 @@ const useCookieListing = (
       },
       {
         header: 'SameSite',
-        accessorKey: 'parsedCookie.samesite',
+        accessorKey: 'parsedCookie.sameSite',
         cell: (info: InfoType) => <span className="capitalize">{info}</span>,
         widthWeightagePercentage: 8,
       },
@@ -117,7 +120,8 @@ const useCookieListing = (
       {
         header: 'Expires / Max-Age',
         accessorKey: 'parsedCookie.expires',
-        cell: (info: InfoType) => (info ? info : 'Session'),
+        cell: (info: InfoType) =>
+          info ? calculateEffectiveExpiryDate(info as string) : 'Session',
         widthWeightagePercentage: 7,
       },
     ],

diff --git a/packages/common/src/utils/generateReports/generateAffectedCookiesCSV.ts b/packages/common/src/utils/generateReports/generateAffectedCookiesCSV.ts
@@ -18,6 +18,7 @@
  * Internal dependencies
  */
 import { CompleteJson, CookieJsonDataType } from '../../cookies.types';
+import calculateEffectiveExpiryDate from '../calculateEffectiveExpiryDate';
 import sanitizeCsvRecord from '../sanitizeCsvRecord';
 
 export const AFFECTED_COOKIES_DATA_HEADERS = [
@@ -66,7 +67,7 @@ const generateAffectedCookiesCSV = (siteAnalysisData: CompleteJson): string => {
       cookie.parsedCookie.secure ? 'Yes' : 'No',
       cookie.parsedCookie.value,
       cookie.parsedCookie.path,
-      cookie.parsedCookie.expires,
+      calculateEffectiveExpiryDate(cookie.parsedCookie.expires),
       cookie.analytics.GDPR || 'NA',
     ].map(sanitizeCsvRecord);
 

diff --git a/packages/common/src/utils/generateReports/generateAllCookiesCSV.ts b/packages/common/src/utils/generateReports/generateAllCookiesCSV.ts
@@ -22,6 +22,7 @@ import sanitizeCsvRecord from '../sanitizeCsvRecord';
  * Internal dependencies
  */
 import type { CompleteJson, CookieJsonDataType } from '../../cookies.types';
+import calculateEffectiveExpiryDate from '../calculateEffectiveExpiryDate';
 
 export const COOKIES_DATA_HEADER = [
   'Name',
@@ -68,7 +69,7 @@ const generateAllCookiesCSV = (siteAnalysisData: CompleteJson): string => {
       cookie.parsedCookie.secure ? 'Yes' : 'No',
       cookie.parsedCookie.value,
       cookie.parsedCookie.path,
-      cookie.parsedCookie.expires,
+      calculateEffectiveExpiryDate(cookie.parsedCookie.expires),
       cookie.isBlocked ? 'Yes' : 'No',
       cookie.analytics.GDPR || 'NA',
     ].map(sanitizeCsvRecord);

diff --git a/packages/design-system/src/components/cookieTable/index.tsx b/packages/design-system/src/components/cookieTable/index.tsx
@@ -39,6 +39,7 @@ import {
 } from '../table';
 
 interface CookieTableProps {
+  useIsBlockedToHighlight?: boolean;
   data: TableData[];
   tableColumns: TableColumn[];
   tableFilters?: TableFilter;
@@ -69,6 +70,7 @@ const CookieTable = forwardRef<
   CookieTableProps
 >(function CookieTable(
   {
+    useIsBlockedToHighlight = false,
     tableColumns,
     tableFilters,
     tableSearchKeys,
@@ -141,6 +143,7 @@ const CookieTable = forwardRef<
   return (
     <div className="flex-1 w-full h-full overflow-x-auto text-outer-space-crayola border-x border-american-silver dark:border-quartz">
       <Table
+        useIsBlockedToHighlight={useIsBlockedToHighlight}
         table={table}
         showTopBar={showTopBar}
         selectedKey={

diff --git a/packages/design-system/src/components/table/components/index.tsx b/packages/design-system/src/components/table/components/index.tsx
@@ -35,6 +35,7 @@ import FiltersSidebar from './filtersSidebar';
 import { generateCookieTableCSV } from '../utils';
 
 interface TableProps {
+  useIsBlockedToHighlight: boolean;
   table: TableOutput;
   selectedKey: string | undefined | null;
   getRowObjectKey: (row: TableRow) => string;
@@ -50,6 +51,7 @@ interface TableProps {
 }
 
 const Table = ({
+  useIsBlockedToHighlight,
   table,
   selectedKey,
   getRowObjectKey,
@@ -167,6 +169,7 @@ const Table = ({
               setIsRowFocused={setIsRowFocused}
             />
             <TableBody
+              useIsBlockedToHighlight={useIsBlockedToHighlight}
               table={table}
               getRowObjectKey={getRowObjectKey}
               isRowFocused={isRowFocused}

diff --git a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx
@@ -28,6 +28,7 @@ import BodyCell from './bodyCell';
 import type { TableColumn, TableRow } from '../../useTable';
 
 interface BodyRowProps {
+  useIsBlockedToHighlight: boolean;
   row: TableRow;
   columns: TableColumn[];
   index: number;
@@ -44,6 +45,7 @@ interface BodyRowProps {
 
 // eslint-disable-next-line complexity
 const BodyRow = ({
+  useIsBlockedToHighlight,
   row,
   columns,
   index,
@@ -55,8 +57,9 @@ const BodyRow = ({
   onRowContextMenu = () => undefined,
 }: BodyRowProps) => {
   const cookieKey = getRowObjectKey(row);
-  const isBlocked = (row.originalData as CookieTableData)?.blockingStatus
-    ?.inboundBlock;
+  const isBlocked = useIsBlockedToHighlight
+    ? (row.originalData as CookieTableData)?.isBlocked
+    : (row.originalData as CookieTableData)?.blockingStatus?.inboundBlock;
   const isHighlighted = (row.originalData as CookieTableData)?.highlighted;
   const isDomainInAllowList = (row.originalData as CookieTableData)
     ?.isDomainInAllowList;

diff --git a/packages/design-system/src/components/table/components/tableBody/index.tsx b/packages/design-system/src/components/table/components/tableBody/index.tsx
@@ -27,6 +27,7 @@ import BodyRow from './bodyRow';
 import type { TableData, TableOutput, TableRow } from '../../useTable';
 
 interface TableBodyProps {
+  useIsBlockedToHighlight: boolean;
   table: TableOutput;
   getRowObjectKey: (row: TableRow) => string;
   isRowFocused: boolean;
@@ -43,6 +44,7 @@ interface TableBodyProps {
 }
 
 const TableBody = ({
+  useIsBlockedToHighlight,
   table,
   getRowObjectKey,
   isRowFocused,
@@ -138,6 +140,7 @@ const TableBody = ({
     >
       {table.rows.map((row, index) => (
         <BodyRow
+          useIsBlockedToHighlight={useIsBlockedToHighlight}
           key={index}
           index={index}
           row={row}