From 15c6091c969f8b38bad5c8e3ec9919438c1daee9 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Thu, 25 Jan 2024 17:28:44 +0530 Subject: [PATCH 1/5] feat: make blocked reasons filter dynamic in dashboard --- .../src/components/affectedCookies/index.tsx | 42 +++++++++----- .../cookiesListing/useCookieListing.tsx | 58 ++++++++++--------- packages/common/src/constants/index.ts | 30 ---------- 3 files changed, 57 insertions(+), 73 deletions(-) diff --git a/packages/cli-dashboard/src/components/affectedCookies/index.tsx b/packages/cli-dashboard/src/components/affectedCookies/index.tsx index 4c369b772..4a8b56ba8 100644 --- a/packages/cli-dashboard/src/components/affectedCookies/index.tsx +++ b/packages/cli-dashboard/src/components/affectedCookies/index.tsx @@ -26,10 +26,7 @@ import { type TableColumn, type TableFilter, } from '@ps-analysis-tool/design-system'; -import { - BLOCKED_REASON_LIST, - type CookieTableData, -} from '@ps-analysis-tool/common'; +import { getValueByKey, type CookieTableData } from '@ps-analysis-tool/common'; interface AffectedCookiesProps { cookies: CookieTableData[]; @@ -120,16 +117,29 @@ const AffectedCookies = ({ cookies, selectedSite }: AffectedCookiesProps) => { [] ); - const blockedReasonFilterValues = useMemo<{ - [key: string]: { selected: boolean }; - }>(() => { - const filterValues: { [key: string]: { selected: boolean } } = {}; + const blockedReasonFilterValues = useMemo( + () => + Object.values(cookies).reduce((acc, cookie) => { + const blockedReason = getValueByKey('blockedReasons', cookie); + + if (!cookie.frameIdList || cookie?.frameIdList?.length === 0) { + return acc; + } + + blockedReason?.forEach((reason: string) => { + if (!acc) { + acc = {}; + } + + acc[reason] = { + selected: false, + }; + }); - BLOCKED_REASON_LIST.forEach((reason) => { - filterValues[reason] = { selected: false }; - }); - return filterValues; - }, []); + return acc; + }, {} as TableFilter[keyof TableFilter]['filterValues']), + [cookies] + ); const filters = useMemo( () => ({ @@ -260,12 +270,14 @@ const AffectedCookies = ({ cookies, selectedSite }: AffectedCookiesProps) => { 'analytics.platform': { title: 'Platform', }, - blockedReasons: { title: 'Blocked Reasons', - description: 'Reason why the cookies were blocked.', hasStaticFilterValues: true, + hasPrecalculatedFilterValues: true, + enableSelectAllOption: true, filterValues: blockedReasonFilterValues, + sortValues: true, + useGenericPersistenceKey: true, comparator: (value: InfoType, filterValue: string) => { return (value as string[])?.includes(filterValue); }, diff --git a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx b/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx index 38407e1ab..198eed5cb 100644 --- a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx +++ b/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx @@ -23,7 +23,7 @@ import type { TableColumn, TableFilter, } from '@ps-analysis-tool/design-system'; -import { BLOCKED_REASON_LIST, getValueByKey } from '@ps-analysis-tool/common'; +import { getValueByKey } from '@ps-analysis-tool/common'; /** * Internal dependencies @@ -147,16 +147,31 @@ const useCookieListing = ( [tabCookies] ); - const blockedReasonFilterValues = useMemo<{ - [key: string]: { selected: boolean }; - }>(() => { - const filterValues: { [key: string]: { selected: boolean } } = {}; + const blockedReasonFilterValues = useMemo( + () => + Object.values(tabCookies).reduce< + TableFilter[keyof TableFilter]['filterValues'] + >((acc, cookie) => { + const blockedReason = getValueByKey('blockedReasons', cookie); + + if (!cookie.frameIdList || cookie?.frameIdList?.length === 0) { + return acc; + } + + blockedReason?.forEach((reason: string) => { + if (!acc) { + acc = {}; + } - BLOCKED_REASON_LIST.forEach((reason) => { - filterValues[reason] = { selected: false }; - }); - return filterValues; - }, []); + acc[reason] = { + selected: false, + }; + }); + + return acc; + }, {}), + [tabCookies] + ); const filters = useMemo( () => ({ @@ -304,31 +319,18 @@ const useCookieListing = ( }, blockedReasons: { title: 'Blocked Reasons', - description: 'Reason why the cookies were blocked.', hasStaticFilterValues: true, + hasPrecalculatedFilterValues: true, + enableSelectAllOption: true, filterValues: blockedReasonFilterValues, + sortValues: true, + useGenericPersistenceKey: true, comparator: (value: InfoType, filterValue: string) => { return (value as string[])?.includes(filterValue); }, }, - isBlocked: { - title: 'Blocked', - hasStaticFilterValues: true, - filterValues: { - True: { - selected: false, - }, - False: { - selected: false, - }, - }, - comparator: (value: InfoType, filterValue: string) => { - const val = !value; - return val === (filterValue === 'False'); - }, - }, }), - [calculate, blockedReasonFilterValues] + [blockedReasonFilterValues, calculate] ); const searchKeys = useMemo( diff --git a/packages/common/src/constants/index.ts b/packages/common/src/constants/index.ts index 495198702..104784c57 100644 --- a/packages/common/src/constants/index.ts +++ b/packages/common/src/constants/index.ts @@ -13,34 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -export const BLOCKED_REASON_LIST = [ - 'SecureOnly', - 'DomainMismatch', - 'NotOnPath', - 'SameSiteStrict', - 'SameSiteLax', - 'SameSiteUnspecifiedTreatedAsLax', - 'SameSiteNoneInsecure', - 'UserPreferences', - 'ThirdPartyPhaseout', - 'ThirdPartyBlockedInFirstPartySet', - 'InvalidDomain', - 'UnknownError', - 'SchemefulSameSiteStrict', - 'SchemefulSameSiteLax', - 'SchemefulSameSiteUnspecifiedTreatedAsLax', - 'SamePartyFromCrossPartyContext', - 'NameValuePairExceedsMaxSize', - 'ExcludeSameSiteUnspecifiedTreatedAsLax', - 'ExcludeSameSiteNoneInsecure', - 'ExcludeSameSiteLax', - 'ExcludeSameSiteStrict', - 'ExcludeInvalidSameParty', - 'ExcludeSamePartyCrossPartyContext', - 'ExcludeDomainNonASCII', - 'ExcludeThirdPartyCookieBlockedInFirstPartySet', - 'ExcludeThirdPartyPhaseout', -]; - export const UNKNOWN_FRAME_KEY = 'Unknown Frame(s)'; From 4b60238ff20006030983fa243726c57e9efc6e96 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 31 Jan 2024 14:45:05 +0530 Subject: [PATCH 2/5] ref: use common hook for listing cookie table and affected table --- .../src/components/affectedCookies/index.tsx | 291 +----------------- .../tabs/cookies/cookiesListing/index.tsx | 35 ++- .../useCookieListing.tsx/index.tsx} | 94 ++---- .../calculateBlockedReasonsFilterValues.tsx | 48 +++ .../utils/calculateDynamicFilterValues.ts | 46 +++ 5 files changed, 149 insertions(+), 365 deletions(-) rename packages/cli-dashboard/src/{components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx => hooks/useCookieListing.tsx/index.tsx} (80%) create mode 100644 packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateBlockedReasonsFilterValues.tsx create mode 100644 packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateDynamicFilterValues.ts diff --git a/packages/cli-dashboard/src/components/affectedCookies/index.tsx b/packages/cli-dashboard/src/components/affectedCookies/index.tsx index 98b6573f6..2164f28ee 100644 --- a/packages/cli-dashboard/src/components/affectedCookies/index.tsx +++ b/packages/cli-dashboard/src/components/affectedCookies/index.tsx @@ -17,16 +17,15 @@ /** * External dependencies. */ -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; import { Resizable } from 're-resizable'; -import { - CookieDetails, - CookieTable, - type InfoType, - type TableColumn, - type TableFilter, -} from '@ps-analysis-tool/design-system'; -import { getValueByKey, type CookieTableData } from '@ps-analysis-tool/common'; +import { CookieDetails, CookieTable } from '@ps-analysis-tool/design-system'; +import { type CookieTableData } from '@ps-analysis-tool/common'; + +/** + * Internal dependencies. + */ +import useCookieListing from '../../hooks/useCookieListing.tsx'; interface AffectedCookiesProps { cookies: CookieTableData[]; @@ -38,278 +37,8 @@ const AffectedCookies = ({ cookies, selectedSite }: AffectedCookiesProps) => { [frame: string]: CookieTableData | null; } | null>(null); - const tableColumns = useMemo( - () => [ - { - header: 'Name', - accessorKey: 'parsedCookie.name', - cell: (info: InfoType) => info, - enableHiding: false, - widthWeightagePercentage: 15, - }, - { - header: 'Scope', - accessorKey: 'isFirstParty', - cell: (info: InfoType) => ( -

- {!info ? 'Third Party' : 'First Party'} -

- ), - widthWeightagePercentage: 8, - }, - { - header: 'Domain', - accessorKey: 'parsedCookie.domain', - cell: (info: InfoType) => info, - widthWeightagePercentage: 9, - }, - { - header: 'Partition Key', - accessorKey: 'parsedCookie.partitionKey', - cell: (info: InfoType) => info, - widthWeightagePercentage: 9, - }, - { - header: 'SameSite', - accessorKey: 'parsedCookie.samesite', - cell: (info: InfoType) => {info}, - widthWeightagePercentage: 8, - }, - { - header: 'Category', - accessorKey: 'analytics.category', - cell: (info: InfoType) => info, - widthWeightagePercentage: 10, - }, - { - header: 'Platform', - accessorKey: 'analytics.platform', - cell: (info: InfoType) => info, - widthWeightagePercentage: 10, - }, - { - header: 'HttpOnly', - accessorKey: 'parsedCookie.httponly', - cell: (info: InfoType) => ( -

- {info ? ✓ : ''} -

- ), - widthWeightagePercentage: 5, - }, - { - header: 'Secure', - accessorKey: 'parsedCookie.secure', - cell: (info: InfoType) => ( -

- {info ? ✓ : ''} -

- ), - widthWeightagePercentage: 5, - }, - { - header: 'Value', - accessorKey: 'parsedCookie.value', - cell: (info: InfoType) => info, - widthWeightagePercentage: 10, - }, - { - header: 'Path', - accessorKey: 'parsedCookie.path', - cell: (info: InfoType) => info, - widthWeightagePercentage: 4, - }, - { - header: 'Expires / Max-Age', - accessorKey: 'parsedCookie.expires', - cell: (info: InfoType) => (info ? info : 'Session'), - widthWeightagePercentage: 7, - }, - ], - [] - ); - - const blockedReasonFilterValues = useMemo( - () => - Object.values(cookies).reduce((acc, cookie) => { - const blockedReason = getValueByKey('blockedReasons', cookie); - - if (!cookie.frameIdList || cookie?.frameIdList?.length === 0) { - return acc; - } - - blockedReason?.forEach((reason: string) => { - if (!acc) { - acc = {}; - } - - acc[reason] = { - selected: false, - }; - }); - - return acc; - }, {} as TableFilter[keyof TableFilter]['filterValues']), - [cookies] - ); - - const filters = useMemo( - () => ({ - 'analytics.category': { - title: 'Category', - }, - isFirstParty: { - title: 'Scope', - hasStaticFilterValues: true, - filterValues: { - 'First Party': { - selected: false, - }, - 'Third Party': { - selected: false, - }, - }, - comparator: (value: InfoType, filterValue: string) => { - const val = value as boolean; - return val === (filterValue === 'First Party'); - }, - }, - 'parsedCookie.domain': { - title: 'Domain', - }, - 'parsedCookie.httponly': { - title: 'HttpOnly', - hasStaticFilterValues: true, - filterValues: { - True: { - selected: false, - }, - False: { - selected: false, - }, - }, - comparator: (value: InfoType, filterValue: string) => { - const val = value as boolean; - return val === (filterValue === 'True'); - }, - }, - 'parsedCookie.samesite': { - title: 'SameSite', - hasStaticFilterValues: true, - filterValues: { - None: { - selected: false, - }, - Lax: { - selected: false, - }, - Strict: { - selected: false, - }, - }, - comparator: (value: InfoType, filterValue: string) => { - const val = value as string; - return val?.toLowerCase() === filterValue.toLowerCase(); - }, - }, - 'parsedCookie.secure': { - title: 'Secure', - hasStaticFilterValues: true, - filterValues: { - True: { - selected: false, - }, - False: { - selected: false, - }, - }, - comparator: (value: InfoType, filterValue: string) => { - const val = value as boolean; - return val === (filterValue === 'True'); - }, - }, - 'parsedCookie.path': { - title: 'Path', - }, - 'parsedCookie.expires': { - title: 'Retention Period', - hasStaticFilterValues: true, - filterValues: { - Session: { - selected: false, - }, - 'Short Term (< 24h)': { - selected: false, - }, - 'Medium Term (24h - 1 week)': { - selected: false, - }, - 'Long Term (1 week - 1 month)': { - selected: false, - }, - 'Extended Term (> 1 month)': { - selected: false, - }, - }, - comparator: (value: InfoType, filterValue: string) => { - let diff = 0; - const val = value as string; - switch (filterValue) { - case 'Session': - return val === 'Session'; - - case 'Short Term (< 24h)': - diff = Date.parse(val) - Date.now(); - return diff < 86400000; - - case 'Medium Term (24h - 1 week)': - diff = Date.parse(val) - Date.now(); - return diff >= 86400000 && diff < 604800000; - - case 'Long Term (1 week - 1 month)': - diff = Date.parse(val) - Date.now(); - return diff >= 604800000 && diff < 2629743833; - - case 'Extended Term (> 1 month)': - diff = Date.parse(val) - Date.now(); - return diff >= 2629743833; - - default: - return false; - } - }, - }, - 'analytics.platform': { - title: 'Platform', - }, - blockedReasons: { - title: 'Blocked Reasons', - hasStaticFilterValues: true, - hasPrecalculatedFilterValues: true, - enableSelectAllOption: true, - filterValues: blockedReasonFilterValues, - sortValues: true, - useGenericPersistenceKey: true, - comparator: (value: InfoType, filterValue: string) => { - return (value as string[])?.includes(filterValue); - }, - }, - }), - [blockedReasonFilterValues] - ); - - const searchKeys = useMemo( - () => ['parsedCookie.name', 'parsedCookie.domain'], - [] - ); - - const tablePersistentSettingsKey = useMemo(() => { - if (selectedSite) { - return `affectedCookiesListing#${selectedSite}`; - } - - return 'affectedCookiesListing'; - }, [selectedSite]); + const { tableColumns, filters, searchKeys, tablePersistentSettingsKey } = + useCookieListing(cookies, 'frame', 'affectedCookiesListing', selectedSite); return (
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 index 7dd0c4de7..10fbc3b9d 100644 --- a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/index.tsx +++ b/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/index.tsx @@ -17,7 +17,7 @@ /** * External dependencies */ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Resizable } from 're-resizable'; import { CookieDetails, CookieTable } from '@ps-analysis-tool/design-system'; import type { CookieTableData } from '@ps-analysis-tool/common'; @@ -25,7 +25,12 @@ import type { CookieTableData } from '@ps-analysis-tool/common'; /** * Internal dependencies */ -import useCookieListing from './useCookieListing'; +import useCookieListing from '../../../../../hooks/useCookieListing.tsx'; +import { useContentStore } from '../../../stateProviders/contentStore'; + +/** + * Internal dependencies + */ interface CookiesListingProps { selectedFrameUrl: string; @@ -40,13 +45,25 @@ const CookiesListing = ({ [frame: string]: CookieTableData | null; } | null>(null); - const { - cookies, - tableColumns, - filters, - searchKeys, - tablePersistentSettingsKey, - } = useCookieListing(selectedFrameUrl, selectedSite); + const { tabCookies } = useContentStore(({ state }) => ({ + tabCookies: state.tabCookies, + })); + + const cookies = useMemo( + () => + Object.values(tabCookies).filter((cookie) => + (cookie.frameUrls as string[]).includes(selectedFrameUrl) + ), + [tabCookies, selectedFrameUrl] + ); + + const { tableColumns, filters, searchKeys, tablePersistentSettingsKey } = + useCookieListing( + Object.values(tabCookies), + selectedFrameUrl, + 'cookiesListing', + selectedSite + ); return (
diff --git a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/index.tsx similarity index 80% rename from packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx rename to packages/cli-dashboard/src/hooks/useCookieListing.tsx/index.tsx index cdc90f126..5d1d5b111 100644 --- a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/useCookieListing.tsx +++ b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/index.tsx @@ -17,35 +17,22 @@ /** * External dependencies */ -import React, { useCallback, useMemo } from 'react'; +import React, { useMemo } from 'react'; import type { InfoType, TableColumn, TableFilter, } from '@ps-analysis-tool/design-system'; -import { getValueByKey } from '@ps-analysis-tool/common'; - -/** - * Internal dependencies - */ -import { useContentStore } from '../../../stateProviders/contentStore'; +import { type CookieTableData } from '@ps-analysis-tool/common'; +import calculateDynamicFilterValues from './utils/calculateDynamicFilterValues'; +import calculateBlockedReasonsFilterValues from './utils/calculateBlockedReasonsFilterValues'; const useCookieListing = ( + tabCookies: CookieTableData[], selectedFrameUrl: string, + persistenceKey = 'cookiesListing', selectedSite?: string | null ) => { - const { tabCookies } = useContentStore(({ state }) => ({ - tabCookies: state.tabCookies, - })); - - const cookies = useMemo( - () => - Object.values(tabCookies).filter((cookie) => - (cookie.frameUrls as string[]).includes(selectedFrameUrl) - ), - [tabCookies, selectedFrameUrl] - ); - const tableColumns = useMemo( () => [ { @@ -137,61 +124,16 @@ const useCookieListing = ( [] ); - const calculate = useCallback( - (key: string): TableFilter[keyof TableFilter]['filterValues'] => - Object.values(tabCookies).reduce< - TableFilter[keyof TableFilter]['filterValues'] - >((acc, cookie) => { - const value = getValueByKey(key, cookie); - - if (!acc) { - acc = {}; - } - - if (value) { - acc[value] = { - selected: false, - }; - } - - return acc; - }, {}), - [tabCookies] - ); - - const blockedReasonFilterValues = useMemo( - () => - Object.values(tabCookies).reduce< - TableFilter[keyof TableFilter]['filterValues'] - >((acc, cookie) => { - const blockedReason = getValueByKey('blockedReasons', cookie); - - if (!cookie.frameIdList || cookie?.frameIdList?.length === 0) { - return acc; - } - - blockedReason?.forEach((reason: string) => { - if (!acc) { - acc = {}; - } - - acc[reason] = { - selected: false, - }; - }); - - return acc; - }, {}), - [tabCookies] - ); - const filters = useMemo( () => ({ 'analytics.category': { title: 'Category', hasStaticFilterValues: true, hasPrecalculatedFilterValues: true, - filterValues: calculate('analytics.category'), + filterValues: calculateDynamicFilterValues( + 'analytics.category', + tabCookies + ), sortValues: true, useGenericPersistenceKey: true, }, @@ -325,7 +267,10 @@ const useCookieListing = ( title: 'Platform', hasStaticFilterValues: true, hasPrecalculatedFilterValues: true, - filterValues: calculate('analytics.platform'), + filterValues: calculateDynamicFilterValues( + 'analytics.platform', + tabCookies + ), sortValues: true, useGenericPersistenceKey: true, }, @@ -334,7 +279,7 @@ const useCookieListing = ( hasStaticFilterValues: true, hasPrecalculatedFilterValues: true, enableSelectAllOption: true, - filterValues: blockedReasonFilterValues, + filterValues: calculateBlockedReasonsFilterValues(tabCookies), sortValues: true, useGenericPersistenceKey: true, comparator: (value: InfoType, filterValue: string) => { @@ -342,7 +287,7 @@ const useCookieListing = ( }, }, }), - [blockedReasonFilterValues, calculate] + [tabCookies] ); const searchKeys = useMemo( @@ -352,14 +297,13 @@ const useCookieListing = ( const tablePersistentSettingsKey = useMemo(() => { if (selectedSite) { - return `cookiesListing#${selectedSite}${selectedFrameUrl}`; + return persistenceKey + '#' + selectedSite + selectedFrameUrl; } - return 'cookiesListing#' + selectedFrameUrl; - }, [selectedFrameUrl, selectedSite]); + return persistenceKey + '#' + selectedFrameUrl; + }, [persistenceKey, selectedFrameUrl, selectedSite]); return { - cookies, tableColumns, filters, searchKeys, diff --git a/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateBlockedReasonsFilterValues.tsx b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateBlockedReasonsFilterValues.tsx new file mode 100644 index 000000000..6af116efb --- /dev/null +++ b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateBlockedReasonsFilterValues.tsx @@ -0,0 +1,48 @@ +/* + * 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 { getValueByKey, type CookieTableData } from '@ps-analysis-tool/common'; +import type { TableFilter } from '@ps-analysis-tool/design-system'; + +const calculateBlockedReasonsFilterValues = (tabCookies: CookieTableData[]) => { + return tabCookies.reduce( + (acc, cookie) => { + const blockedReason = getValueByKey('blockedReasons', cookie); + + if (!cookie.frameIdList || cookie?.frameIdList?.length === 0) { + return acc; + } + + blockedReason?.forEach((reason: string) => { + if (!acc) { + acc = {}; + } + + acc[reason] = { + selected: false, + }; + }); + + return acc; + }, + {} + ); +}; + +export default calculateBlockedReasonsFilterValues; diff --git a/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateDynamicFilterValues.ts b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateDynamicFilterValues.ts new file mode 100644 index 000000000..abc6cfda1 --- /dev/null +++ b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/calculateDynamicFilterValues.ts @@ -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 { getValueByKey, type CookieTableData } from '@ps-analysis-tool/common'; +import type { TableFilter } from '@ps-analysis-tool/design-system'; + +const calculateDynamicFilterValues = ( + key: string, + tabCookies: CookieTableData[] +): TableFilter[keyof TableFilter]['filterValues'] => { + return tabCookies.reduce( + (acc, cookie) => { + const value = getValueByKey(key, cookie); + + if (!acc) { + acc = {}; + } + + if (value) { + acc[value] = { + selected: false, + }; + } + + return acc; + }, + {} + ); +}; + +export default calculateDynamicFilterValues; From 36940537e1a187f456d1ae9e67b81d4b8aa19103 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 31 Jan 2024 14:45:28 +0530 Subject: [PATCH 3/5] test: add testcases for utils --- .../calculateBlockedReasonsFilterValues.ts | 52 +++++++++++++++++++ .../tests/calculateDynamicFilterValues.ts | 52 +++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateBlockedReasonsFilterValues.ts create mode 100644 packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateDynamicFilterValues.ts diff --git a/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateBlockedReasonsFilterValues.ts b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateBlockedReasonsFilterValues.ts new file mode 100644 index 000000000..477edc1d6 --- /dev/null +++ b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateBlockedReasonsFilterValues.ts @@ -0,0 +1,52 @@ +/* + * 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. + */ + +import calculateBlockedReasonsFilterValues from '../calculateBlockedReasonsFilterValues'; + +describe('calculateBlockedReasonsFilterValues', () => { + it('should return an object with values calculated from the tabCookies', () => { + // Arrange + const tabCookies = [ + { + blockedReasons: ['foo', 'bar'], + frameIdList: [1, 2, 3], + }, + { + blockedReasons: ['foo', 'baz'], + frameIdList: [1, 2, 3], + }, + { + blockedReasons: ['zee', 'zoo'], + }, + ]; + + const expected = { + foo: { + selected: false, + }, + bar: { + selected: false, + }, + baz: { + selected: false, + }, + }; + + const result = calculateBlockedReasonsFilterValues(tabCookies); + + expect(result).toEqual(expected); + }); +}); diff --git a/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateDynamicFilterValues.ts b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateDynamicFilterValues.ts new file mode 100644 index 000000000..c67f74b2d --- /dev/null +++ b/packages/cli-dashboard/src/hooks/useCookieListing.tsx/utils/tests/calculateDynamicFilterValues.ts @@ -0,0 +1,52 @@ +/* + * 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. + */ + +import calculateDynamicFilterValues from '../calculateDynamicFilterValues'; + +describe('calculateDynamicFilterValues', () => { + it('should return an object with values calculated from the tabCookies', () => { + // Arrange + const tabCookies = [ + { + keyToExtract: 'value1', + }, + { + keyToExtract: 'value2', + }, + { + keyToExtract: 'value3', + }, + ]; + + const expected = { + value1: { + selected: false, + }, + value2: { + selected: false, + }, + value3: { + selected: false, + }, + }; + + // Act + const result = calculateDynamicFilterValues('keyToExtract', tabCookies); + + // Assert + expect(result).toEqual(expected); + }); +}); From f3ea921caa4e1f7a9c66e146c753706f4f69b5fa Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 31 Jan 2024 15:49:19 +0530 Subject: [PATCH 4/5] ref: if isBlocked not boolean don't highlight --- .../src/components/table/components/tableBody/bodyRow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx index e6478acf3..2f9344f3d 100644 --- a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx +++ b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx @@ -57,7 +57,8 @@ const BodyRow = ({ const cookieKey = getRowObjectKey(row); const isBlocked = (row.originalData as CookieTableData)?.isBlocked || - ((row.originalData as CookieTableData)?.blockedReasons && + (((row.originalData as CookieTableData)?.isBlocked ?? false) && + (row.originalData as CookieTableData)?.blockedReasons && (row.originalData as CookieTableData)?.blockedReasons?.length); const isHighlighted = (row.originalData as CookieTableData)?.highlighted; const isDomainInAllowList = (row.originalData as CookieTableData) From 7fbdadda3e183a6cc25a71d321745843f5fda6b4 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Fri, 2 Feb 2024 20:13:56 +0530 Subject: [PATCH 5/5] fix: fix merge conflict wrong conflict --- packages/common/src/constants/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/src/constants/index.ts b/packages/common/src/constants/index.ts index 104784c57..92c2b2764 100644 --- a/packages/common/src/constants/index.ts +++ b/packages/common/src/constants/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export const UNKNOWN_FRAME_KEY = 'Unknown Frame(s)'; +export const UNKNOWN_FRAME_KEY = 'Unknown Frames';