Skip to content

Commit

Permalink
Feature: Make CLI dashboard filters dynamic (#455)
Browse files Browse the repository at this point in the history 
* feat: make blocked reasons filter dynamic in dashboard

* ref: use common hook for listing cookie table and affected table

* test: add testcases for utils

* ref: if isBlocked not boolean don't highlight

* fix: fix merge conflict wrong conflict
  • Loading branch information
@mayan-000
mayan-000 authored Feb 2, 2024
1 parent 1d184aa commit cb91ca0
Show file tree
Hide file tree
Showing 9 changed files with 259 additions and 386 deletions.
279 changes: 10 additions & 269 deletions packages/cli-dashboard/src/components/affectedCookies/index.tsx
View file
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
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

0 comments on commit cb91ca0

Please sign in to comment.