Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Make CLI dashboard filters dynamic #455

Merged
merged 8 commits into from
Feb 2, 2024
Merged

Feature: Make CLI dashboard filters dynamic #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
15c6091
feat: make blocked reasons filter dynamic in dashboard
mayan-000 Jan 25, 2024
0a2f6b6
Merge branch 'filters-3' into filters-4
mayan-000 Jan 29, 2024
cf93a65
Merge branch 'develop' into filters-4
mayan-000 Jan 31, 2024
4b60238
ref: use common hook for listing cookie table and affected table
mayan-000 Jan 31, 2024
3694053
test: add testcases for utils
mayan-000 Jan 31, 2024
f3ea921
ref: if isBlocked not boolean don't highlight
mayan-000 Jan 31, 2024
b1a4299
Merge branch 'develop' into filters-4
mayan-000 Feb 2, 2024
7fbdadd
fix: fix merge conflict wrong conflict
mayan-000 Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
279 changes: 10 additions & 269 deletions packages/cli-dashboard/src/components/affectedCookies/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +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 {
BLOCKED_REASON_LIST,
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[];
Expand All @@ -41,263 +37,8 @@ const AffectedCookies = ({ cookies, selectedSite }: AffectedCookiesProps) => {
[frame: string]: CookieTableData | null;
} | null>(null);

const tableColumns = useMemo<TableColumn[]>(
() => [
{
header: 'Name',
accessorKey: 'parsedCookie.name',
cell: (info: InfoType) => info,
enableHiding: false,
widthWeightagePercentage: 15,
},
{
header: 'Scope',
accessorKey: 'isFirstParty',
cell: (info: InfoType) => (
<p className="truncate w-full">
{!info ? 'Third Party' : 'First Party'}
</p>
),
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) => <span className="capitalize">{info}</span>,
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) => (
<p className="flex justify-center items-center">
{info ? <span className="font-serif">✓</span> : ''}
</p>
),
widthWeightagePercentage: 5,
},
{
header: 'Secure',
accessorKey: 'parsedCookie.secure',
cell: (info: InfoType) => (
<p className="flex justify-center items-center">
{info ? <span className="font-serif">✓</span> : ''}
</p>
),
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<{
[key: string]: { selected: boolean };
}>(() => {
const filterValues: { [key: string]: { selected: boolean } } = {};

BLOCKED_REASON_LIST.forEach((reason) => {
filterValues[reason] = { selected: false };
});
return filterValues;
}, []);

const filters = useMemo<TableFilter>(
() => ({
'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',
description: 'Reason why the cookies were blocked.',
hasStaticFilterValues: true,
filterValues: blockedReasonFilterValues,
comparator: (value: InfoType, filterValue: string) => {
return (value as string[])?.includes(filterValue);
},
},
}),
[blockedReasonFilterValues]
);

const searchKeys = useMemo<string[]>(
() => ['parsedCookie.name', 'parsedCookie.domain'],
[]
);

const tablePersistentSettingsKey = useMemo<string>(() => {
if (selectedSite) {
return `affectedCookiesListing#${selectedSite}`;
}

return 'affectedCookiesListing';
}, [selectedSite]);
const { tableColumns, filters, searchKeys, tablePersistentSettingsKey } =
useCookieListing(cookies, 'frame', 'affectedCookiesListing', selectedSite);

return (
<div className="w-full h-full flex flex-col">
Expand Down
35 changes: 26 additions & 9 deletions packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesListing/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,20 @@
/**
* 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';

/**
* Internal dependencies
*/
import useCookieListing from './useCookieListing';
import useCookieListing from '../../../../../hooks/useCookieListing.tsx';
import { useContentStore } from '../../../stateProviders/contentStore';

/**
* Internal dependencies
*/

interface CookiesListingProps {
selectedFrameUrl: string;
Expand All @@ -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 (
<div className="w-full h-full flex flex-col">
Expand Down
Loading
Loading