Skip to content

Commit

Permalink
Enhancement: Update cookie's blocking status enum and UI (#507)
Browse files Browse the repository at this point in the history 
* ref: add enums for blocking status

* fix: update deriveBlocking utils

* feat: add icons and the extractors

* feat: conditionally render icons

* test-fix: update deriveBlockingStatus test

* fix: don't hightlight rows when not using CDP

* ref: update comment

* fix: decrease padding

* fix:manage expiring cookies

---------

Co-authored-by: nirwalayush <coding.carrots@gmail.com>
Co-authored-by: sayedtaqui <sayedwp@gmail.com>
  • Loading branch information
@mayan-000 @ayushnirwal @mohdsayed
3 people authored Feb 19, 2024
1 parent 4fea486 commit dd1b286
Show file tree
Hide file tree
Showing 22 changed files with 394 additions and 219 deletions.
15 changes: 11 additions & 4 deletions packages/common/src/cookies.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,19 +74,26 @@ export enum REQUEST_EVENT {
CDP_REQUEST_WILL_BE_SENT_EXTRA_INFO = 'CDP_REQUEST_WILL_BE_SENT_EXTRA_INFO',
}

export enum BLOCK_STATUS {
UNKNOWN = 'UNKNOWN',
BLOCKED_IN_ALL_EVENTS = 'BLOCKED_IN_ALL_EVENTS',
BLOCKED_IN_SOME_EVENTS = 'BLOCKED_IN_SOME_EVENTS',
NOT_BLOCKED = 'NOT_BLOCKED',
}

export type requestEvent = {
type: REQUEST_EVENT;
requestId: string;
url: string;
blocked: boolean | null;
blocked: boolean;
timeStamp: number;
};

export type responsEvent = {
type: RESPONSE_EVENT;
requestId: string;
url: string;
blocked: boolean | null;
blocked: boolean;
timeStamp: number;
};

Expand All @@ -109,8 +116,8 @@ export type CookieData = {
warningReasons?: Protocol.Audits.CookieWarningReason[];
isBlocked?: boolean | null;
blockingStatus?: {
inboundBlock: boolean | null;
outboundBlock: boolean | null;
inboundBlock: BLOCK_STATUS;
outboundBlock: BLOCK_STATUS;
};
};

Expand Down
6 changes: 1 addition & 5 deletions packages/common/src/utils/parseRequestWillBeSentExtraInfo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function parseRequestWillBeSentExtraInfo(
}

const singleCookie: CookieData = {
isBlocked: !(blockedReasons.length === 0),
isBlocked: blockedReasons.length !== 0,
parsedCookie: {
...cookie,
expires: effectiveExpirationDate,
Expand All @@ -83,10 +83,6 @@ export default function parseRequestWillBeSentExtraInfo(
],
responseEvents: [],
},
blockingStatus: {
inboundBlock: null,
outboundBlock: blockedReasons.length !== 0,
},
blockedReasons,
analytics: cookieDB ? findAnalyticsMatch(cookie.name, cookieDB) : null, // In case CDP gets cookie first.
url,
Expand Down
4 changes: 0 additions & 4 deletions packages/common/src/utils/parseResponseReceivedExtraInfo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,6 @@ export default function parseResponseReceivedExtraInfo(
},
],
},
blockingStatus: {
inboundBlock: blockedCookie ? true : false,
outboundBlock: null,
},
analytics: cookieDB
? findAnalyticsMatch(parsedCookie.name, cookieDB)
: null,
Expand Down
178 changes: 136 additions & 42 deletions packages/design-system/src/components/cookieDetails/details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,21 @@
import React, { useState } from 'react';
import classNames from 'classnames';
import {
BLOCK_STATUS,
cookieIssueDetails,
type CookieTableData,
} from '@ps-analysis-tool/common';
import { Warning } from '../../icons';

/**
* Internal dependencies.
*/
import {
InboundIcon,
OutboundIcon,
OutboundInboundColoredIcon,
OutboundInboundIcon,
QuestionMark,
} from '../../icons';

export interface DetailsProps {
isUsingCDP: boolean;
Expand All @@ -36,8 +47,10 @@ const Details = ({ selectedCookie, isUsingCDP }: DetailsProps) => {

let blockedReasons = '';
let warningReasons = '';
const inboundBlock = selectedCookie.blockingStatus?.inboundBlock;
const outboundBlock = selectedCookie.blockingStatus?.outboundBlock;
const inboundBlock =
selectedCookie.blockingStatus?.inboundBlock !== BLOCK_STATUS.NOT_BLOCKED;
const outboundBlock =
selectedCookie.blockingStatus?.outboundBlock !== BLOCK_STATUS.NOT_BLOCKED;
const hasValidBlockedReason =
selectedCookie.blockedReasons && selectedCookie.blockedReasons.length !== 0;

Expand Down Expand Up @@ -88,8 +101,7 @@ const Details = ({ selectedCookie, isUsingCDP }: DetailsProps) => {
</p>
</div>
)}

{(outboundBlock || inboundBlock || inboundBlock === null) &&
{(outboundBlock || inboundBlock) &&
hasValidBlockedReason &&
isUsingCDP && (
<>
Expand All @@ -103,53 +115,136 @@ const Details = ({ selectedCookie, isUsingCDP }: DetailsProps) => {
</>
)}

{inboundBlock === null &&
{(outboundBlock || inboundBlock) &&
!hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center mb-4">
<QuestionMark />
<p className="text-outer-space-crayola dark:text-bright-gray">
We could not identify this cookie&apos;s blocking status.
</p>
<br />
</div>
)}

{selectedCookie?.blockingStatus?.inboundBlock ===
BLOCK_STATUS.BLOCKED_IN_SOME_EVENTS &&
!outboundBlock &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 my-4">
<Warning className="h-4 text-warning-orange" />
<div className="flex gap-1 items-center my-4">
<InboundIcon className="stroke-[#FE8455]" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was rejected by the browser in atleast one of the
response headers.
This cookie was blocked in at least one of the responses.
</p>
<br />
</div>
)}

{inboundBlock === null && !hasValidBlockedReason && isUsingCDP && (
<div className="flex gap-1 my-4">
<Warning className="h-4 text-warning-orange" />
<p className="text-outer-space-crayola dark:text-bright-gray">
We could not identify whether this cookie was blocked or not. Please
take a look at the network panel by copying the filter string from
the cookie&apos;s right-click context menu.
</p>
<br />
</div>
)}
{selectedCookie?.blockingStatus?.inboundBlock ===
BLOCK_STATUS.BLOCKED_IN_ALL_EVENTS &&
!outboundBlock &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center my-4">
<InboundIcon className="stroke-[#D8302F]" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was blocked in all responses.
</p>
<br />
</div>
)}

{inboundBlock !== null && inboundBlock && isUsingCDP && (
<div className="flex gap-1 my-4">
<Warning className="h-4 text-warning-orange" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was rejected by the browser in all of the response
headers.
</p>
<br />
</div>
)}
{selectedCookie?.blockingStatus?.outboundBlock ===
BLOCK_STATUS.BLOCKED_IN_SOME_EVENTS &&
!inboundBlock &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center my-4">
<OutboundIcon className="stroke-[#FE8455]" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was blocked in at least one of the requests.
</p>
<br />
</div>
)}

{outboundBlock !== null && outboundBlock && isUsingCDP && (
<div className="flex gap-1 my-4">
<Warning className="h-4 text-warning-orange" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was rejected by the browser in one of the request
headers.
</p>
<br />
</div>
)}
{selectedCookie?.blockingStatus?.outboundBlock ===
BLOCK_STATUS.BLOCKED_IN_ALL_EVENTS &&
!inboundBlock &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center my-4">
<OutboundIcon className="stroke-[#D8302F]" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was blocked in all requests.
</p>
<br />
</div>
)}

{selectedCookie?.blockingStatus?.outboundBlock ===
BLOCK_STATUS.BLOCKED_IN_ALL_EVENTS &&
selectedCookie?.blockingStatus?.inboundBlock ===
BLOCK_STATUS.BLOCKED_IN_ALL_EVENTS &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center my-4">
<OutboundInboundIcon className="stroke-[#D8302F] scale-150" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was blocked in all of the requests and responses.
</p>
<br />
</div>
)}

{selectedCookie?.blockingStatus?.outboundBlock ===
BLOCK_STATUS.BLOCKED_IN_SOME_EVENTS &&
selectedCookie?.blockingStatus?.inboundBlock ===
BLOCK_STATUS.BLOCKED_IN_SOME_EVENTS &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center my-4">
<OutboundInboundIcon className="stroke-[#FE8455] scale-150" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was blocked in at least one of the requests and at
least one of the responses.
</p>
<br />
</div>
)}

{selectedCookie?.blockingStatus?.outboundBlock ===
BLOCK_STATUS.BLOCKED_IN_ALL_EVENTS &&
selectedCookie?.blockingStatus?.inboundBlock ===
BLOCK_STATUS.BLOCKED_IN_SOME_EVENTS &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center my-4">
<OutboundInboundColoredIcon className="scale-150" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was blocked in all requests and at least one of the
responses.
</p>
<br />
</div>
)}

{selectedCookie?.blockingStatus?.outboundBlock ===
BLOCK_STATUS.BLOCKED_IN_SOME_EVENTS &&
selectedCookie?.blockingStatus?.inboundBlock ===
BLOCK_STATUS.BLOCKED_IN_ALL_EVENTS &&
hasValidBlockedReason &&
isUsingCDP && (
<div className="flex gap-1 items-center my-4">
<OutboundInboundColoredIcon className="rotate-180 scale-150" />
<p className="text-outer-space-crayola dark:text-bright-gray">
This cookie was blocked in at least one of the requests and all of
the responses.
</p>
<br />
</div>
)}

{selectedCookie?.warningReasons &&
selectedCookie?.warningReasons?.length > 0 && (
Expand All @@ -163,7 +258,6 @@ const Details = ({ selectedCookie, isUsingCDP }: DetailsProps) => {
/>
</>
)}

<p className="font-bold text-raising-black dark:text-bright-gray mb-1 text-semibold flex items-center">
<span>Cookie Value</span>
<label className="text-raising-black dark:text-bright-gray text-xs font-normal flex items-center">
Expand Down
9 changes: 4 additions & 5 deletions packages/design-system/src/components/table/components/tableBody/bodyCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import React from 'react';
* Internal dependencies.
*/
import type { InfoType, TableRow } from '../../useTable';
import { Warning } from '../../../../icons';

interface BodyCellProps {
cell: React.JSX.Element | InfoType;
Expand All @@ -33,6 +32,7 @@ interface BodyCellProps {
row: TableRow;
hasIcon?: boolean;
showWarningIcon?: boolean | null;
icon?: () => React.JSX.Element;
onRowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
}

Expand All @@ -42,6 +42,7 @@ const BodyCell = ({
isRowFocused,
hasIcon = false,
showWarningIcon = false,
icon,
isHighlighted = false,
}: BodyCellProps) => {
return (
Expand Down Expand Up @@ -70,10 +71,8 @@ const BodyCell = ({
} cursor-default flex-1`}
>
{hasIcon && (
<div className="w-4 min-w-[1rem] h-3 mr-1 mt-[-2px]">
{Boolean(showWarningIcon) && (
<Warning className="text-warning-orange w-4" />
)}
<div className="h-full grid place-items-center min-w-[15px] pr-1">
{Boolean(showWarningIcon) && icon?.()}
</div>
)}
{cell}
Expand Down
Loading

0 comments on commit dd1b286

Please sign in to comment.