From 03e8acd64cc754f7099f495d9e77af5f5635be46 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Thu, 14 Dec 2023 00:21:20 +0530 Subject: [PATCH 1/5] Add the capability to copy network filter string. --- .../table/components/tableBody/bodyCell.tsx | 81 ++++++++++++++++++- .../table/components/tableBody/bodyRow.tsx | 2 + 2 files changed, 81 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx index 12a408e62..72852aab6 100644 --- a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx +++ b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx @@ -17,28 +17,74 @@ /** * External dependencies. */ -import React from 'react'; +import React, { useState, useCallback } from 'react'; +import { createPortal } from 'react-dom'; /** * Internal dependencies. */ -import type { InfoType } from '../../useTable'; +import type { InfoType, TableRow } from '../../useTable'; +import { CookieTableData } from '@ps-analysis-tool/common'; interface BodyCellProps { cell: React.JSX.Element | InfoType; width: number; isHighlighted?: boolean; isRowFocused: boolean; + row: TableRow; + onRowClick: () => void; } const BodyCell = ({ + onRowClick, + row, cell, width, isRowFocused, isHighlighted = false, }: BodyCellProps) => { + const [contextMenuOpen, setContextMenuOpen] = useState(false); + const [columnPosition, setColumnPosition] = useState({ + x: 0, + y: 0, + }); + + const handleRightClick = useCallback( + (e: React.MouseEvent) => { + e.preventDefault(); + const x = e.clientX, + y = e.clientY; + onRowClick(); + setColumnPosition({ x, y }); + document.body.style.overflow = contextMenuOpen ? 'auto' : 'hidden'; + setContextMenuOpen(!contextMenuOpen); + }, + [contextMenuOpen, onRowClick] + ); + + const handleCopy = useCallback(() => { + try { + const domain = (row?.originalData as CookieTableData)?.parsedCookie + ?.domain; + const name = (row?.originalData as CookieTableData)?.parsedCookie?.name; + + // Need to do this since chrome doesnt allow the clipboard access in extension. + const copyFrom = document.createElement('textarea'); + copyFrom.textContent = `cookie-domain:${domain} cookie-name:${name}`; + document.body.appendChild(copyFrom); + copyFrom.select(); + document.execCommand('copy'); + copyFrom.blur(); + document.body.removeChild(copyFrom); + setContextMenuOpen(false); + } catch (error) { + //Fail silently + } + }, [row?.originalData]); + return (
{cell} + <> + {contextMenuOpen && + createPortal( +
+
+ +
+
+ +
setContextMenuOpen(false)} + className="absolute w-screen h-screen z-10 top-0 left-0" + /> +
, + document.body + )} +
); }; 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 8bfbbc9b8..20a24410d 100644 --- a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx +++ b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx @@ -81,10 +81,12 @@ const BodyRow = ({ {columns.map(({ accessorKey, width }, idx) => ( ))}
From c4e83b75bf92cc1c8c37d179ad7d2db56d114b00 Mon Sep 17 00:00:00 2001 From: Amoghavarsha Kudaligi Date: Thu, 14 Dec 2023 00:37:57 +0530 Subject: [PATCH 2/5] Add conditional opening of contextmenu. --- .../src/components/cookieTable/index.tsx | 3 +++ .../src/components/table/components/index.tsx | 3 +++ .../table/components/tableBody/bodyCell.tsx | 23 +++++++++++-------- .../table/components/tableBody/bodyRow.tsx | 3 +++ .../table/components/tableBody/index.tsx | 3 +++ .../cookieTableContainer/index.tsx | 1 + 6 files changed, 27 insertions(+), 9 deletions(-) diff --git a/packages/design-system/src/components/cookieTable/index.tsx b/packages/design-system/src/components/cookieTable/index.tsx index a1b01431c..c9bb76aa5 100644 --- a/packages/design-system/src/components/cookieTable/index.tsx +++ b/packages/design-system/src/components/cookieTable/index.tsx @@ -62,6 +62,7 @@ interface CookieTableProps { columnSorting?: SortingState[]; columnSizing?: Record; selectedColumns?: Record; + isExtension?: boolean; } const CookieTable = ({ @@ -78,6 +79,7 @@ const CookieTable = ({ columnSorting, columnSizing, selectedColumns, + isExtension = false, }: CookieTableProps) => { useEffect(() => { if (selectedFrame && selectedFrameCookie) { @@ -149,6 +151,7 @@ const CookieTable = ({ (row?.originalData as CookieTableData).parsedCookie ) as string } + isExtension={isExtension} onRowClick={onRowClick} /> diff --git a/packages/design-system/src/components/table/components/index.tsx b/packages/design-system/src/components/table/components/index.tsx index 2522826ec..6d089cb29 100644 --- a/packages/design-system/src/components/table/components/index.tsx +++ b/packages/design-system/src/components/table/components/index.tsx @@ -45,6 +45,7 @@ interface TableProps { ) => void; showTopBar?: boolean; disableFiltering?: boolean; + isExtension?: boolean; } const Table = ({ @@ -55,6 +56,7 @@ const Table = ({ updatePreference = noop, showTopBar = false, disableFiltering = false, + isExtension = false, }: TableProps) => { const [showColumnsMenu, setShowColumnsMenu] = useState(false); const [showFilterSidebar, setShowFilterSidebar] = useState(false); @@ -152,6 +154,7 @@ const Table = ({ setIsRowFocused={setIsRowFocused} /> void; } @@ -41,6 +42,7 @@ const BodyCell = ({ width, isRowFocused, isHighlighted = false, + isExtension = false, }: BodyCellProps) => { const [contextMenuOpen, setContextMenuOpen] = useState(false); const [columnPosition, setColumnPosition] = useState({ @@ -50,15 +52,17 @@ const BodyCell = ({ const handleRightClick = useCallback( (e: React.MouseEvent) => { - e.preventDefault(); - const x = e.clientX, - y = e.clientY; - onRowClick(); - setColumnPosition({ x, y }); - document.body.style.overflow = contextMenuOpen ? 'auto' : 'hidden'; - setContextMenuOpen(!contextMenuOpen); + if (isExtension) { + e.preventDefault(); + const x = e.clientX, + y = e.clientY; + onRowClick(); + setColumnPosition({ x, y }); + document.body.style.overflow = contextMenuOpen ? 'auto' : 'hidden'; + setContextMenuOpen(!contextMenuOpen); + } }, - [contextMenuOpen, onRowClick] + [contextMenuOpen, isExtension, onRowClick] ); const handleCopy = useCallback(() => { @@ -96,7 +100,8 @@ const BodyCell = ({ > {cell} <> - {contextMenuOpen && + {isExtension && + contextMenuOpen && createPortal(
string; onRowClick: () => void; onKeyDown: (e: React.KeyboardEvent, index: number) => void; + isExtension?: boolean; } const BodyRow = ({ @@ -47,6 +48,7 @@ const BodyRow = ({ isRowFocused, onRowClick, onKeyDown, + isExtension = false, }: BodyRowProps) => { const cookieKey = getRowObjectKey(row); const isHighlighted = (row.originalData as CookieTableData)?.highlighted; @@ -80,6 +82,7 @@ const BodyRow = ({ > {columns.map(({ accessorKey, width }, idx) => ( void; selectedKey: string | undefined | null; onRowClick: (key: TableData | null) => void; + isExtension?: boolean; } const TableBody = ({ @@ -42,6 +43,7 @@ const TableBody = ({ setIsRowFocused, selectedKey, onRowClick, + isExtension = false, }: TableBodyProps) => { const tableBodyRef = useRef(null); @@ -126,6 +128,7 @@ const TableBody = ({
{table.rows.map((row, index) => ( Date: Thu, 14 Dec 2023 13:05:50 +0530 Subject: [PATCH 3/5] Remove isExtension --- .../src/components/cookieTable/index.tsx | 3 -- .../src/components/table/components/index.tsx | 3 -- .../table/components/tableBody/bodyCell.tsx | 39 ++++++++++--------- .../table/components/tableBody/bodyRow.tsx | 3 -- .../table/components/tableBody/index.tsx | 3 -- .../cookieTableContainer/index.tsx | 1 - 6 files changed, 20 insertions(+), 32 deletions(-) diff --git a/packages/design-system/src/components/cookieTable/index.tsx b/packages/design-system/src/components/cookieTable/index.tsx index c9bb76aa5..a1b01431c 100644 --- a/packages/design-system/src/components/cookieTable/index.tsx +++ b/packages/design-system/src/components/cookieTable/index.tsx @@ -62,7 +62,6 @@ interface CookieTableProps { columnSorting?: SortingState[]; columnSizing?: Record; selectedColumns?: Record; - isExtension?: boolean; } const CookieTable = ({ @@ -79,7 +78,6 @@ const CookieTable = ({ columnSorting, columnSizing, selectedColumns, - isExtension = false, }: CookieTableProps) => { useEffect(() => { if (selectedFrame && selectedFrameCookie) { @@ -151,7 +149,6 @@ const CookieTable = ({ (row?.originalData as CookieTableData).parsedCookie ) as string } - isExtension={isExtension} onRowClick={onRowClick} />
diff --git a/packages/design-system/src/components/table/components/index.tsx b/packages/design-system/src/components/table/components/index.tsx index 6d089cb29..2522826ec 100644 --- a/packages/design-system/src/components/table/components/index.tsx +++ b/packages/design-system/src/components/table/components/index.tsx @@ -45,7 +45,6 @@ interface TableProps { ) => void; showTopBar?: boolean; disableFiltering?: boolean; - isExtension?: boolean; } const Table = ({ @@ -56,7 +55,6 @@ const Table = ({ updatePreference = noop, showTopBar = false, disableFiltering = false, - isExtension = false, }: TableProps) => { const [showColumnsMenu, setShowColumnsMenu] = useState(false); const [showFilterSidebar, setShowFilterSidebar] = useState(false); @@ -154,7 +152,6 @@ const Table = ({ setIsRowFocused={setIsRowFocused} /> void; } @@ -42,7 +41,6 @@ const BodyCell = ({ width, isRowFocused, isHighlighted = false, - isExtension = false, }: BodyCellProps) => { const [contextMenuOpen, setContextMenuOpen] = useState(false); const [columnPosition, setColumnPosition] = useState({ @@ -52,25 +50,27 @@ const BodyCell = ({ const handleRightClick = useCallback( (e: React.MouseEvent) => { - if (isExtension) { - e.preventDefault(); - const x = e.clientX, - y = e.clientY; - onRowClick(); - setColumnPosition({ x, y }); - document.body.style.overflow = contextMenuOpen ? 'auto' : 'hidden'; - setContextMenuOpen(!contextMenuOpen); - } + e.preventDefault(); + const x = e.clientX, + y = e.clientY; + onRowClick(); + setColumnPosition({ x, y }); + document.body.style.overflow = contextMenuOpen ? 'auto' : 'hidden'; + setContextMenuOpen(!contextMenuOpen); }, - [contextMenuOpen, isExtension, onRowClick] + [contextMenuOpen, onRowClick] + ); + + const [domain, name] = useMemo( + () => [ + (row?.originalData as CookieTableData)?.parsedCookie?.domain, + (row?.originalData as CookieTableData)?.parsedCookie?.name, + ], + [row?.originalData] ); const handleCopy = useCallback(() => { try { - const domain = (row?.originalData as CookieTableData)?.parsedCookie - ?.domain; - const name = (row?.originalData as CookieTableData)?.parsedCookie?.name; - // Need to do this since chrome doesnt allow the clipboard access in extension. const copyFrom = document.createElement('textarea'); copyFrom.textContent = `cookie-domain:${domain} cookie-name:${name}`; @@ -83,7 +83,7 @@ const BodyCell = ({ } catch (error) { //Fail silently } - }, [row?.originalData]); + }, [domain, name]); return (
{cell} <> - {isExtension && + {!domain && + !name && contextMenuOpen && createPortal(
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 18ae168d5..20a24410d 100644 --- a/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx +++ b/packages/design-system/src/components/table/components/tableBody/bodyRow.tsx @@ -36,7 +36,6 @@ interface BodyRowProps { getRowObjectKey: (row: TableRow) => string; onRowClick: () => void; onKeyDown: (e: React.KeyboardEvent, index: number) => void; - isExtension?: boolean; } const BodyRow = ({ @@ -48,7 +47,6 @@ const BodyRow = ({ isRowFocused, onRowClick, onKeyDown, - isExtension = false, }: BodyRowProps) => { const cookieKey = getRowObjectKey(row); const isHighlighted = (row.originalData as CookieTableData)?.highlighted; @@ -82,7 +80,6 @@ const BodyRow = ({ > {columns.map(({ accessorKey, width }, idx) => ( void; selectedKey: string | undefined | null; onRowClick: (key: TableData | null) => void; - isExtension?: boolean; } const TableBody = ({ @@ -43,7 +42,6 @@ const TableBody = ({ setIsRowFocused, selectedKey, onRowClick, - isExtension = false, }: TableBodyProps) => { const tableBodyRef = useRef(null); @@ -128,7 +126,6 @@ const TableBody = ({
{table.rows.map((row, index) => ( Date: Thu, 14 Dec 2023 17:25:25 +0530 Subject: [PATCH 4/5] Fix condition. --- .../src/components/table/components/tableBody/bodyCell.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx index 9c341dd2b..e84ac29e1 100644 --- a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx +++ b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx @@ -100,8 +100,8 @@ const BodyCell = ({ > {cell} <> - {!domain && - !name && + {domain && + name && contextMenuOpen && createPortal(
From cccf5fdb8dfbdeaf313a2b7d9e3ff6499766b25c Mon Sep 17 00:00:00 2001 From: ayushnirwal Date: Thu, 14 Dec 2023 17:35:05 +0530 Subject: [PATCH 5/5] style-fix: table body cell context menu --- .../src/components/table/components/tableBody/bodyCell.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx index e84ac29e1..61e2bc49a 100644 --- a/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx +++ b/packages/design-system/src/components/table/components/tableBody/bodyCell.tsx @@ -116,11 +116,10 @@ const BodyCell = ({ > -