Feature: Add context menu to copy network filter string to filter network requests

packages/design-system/src/components/cookieTable/index.tsx

@@ -62,6 +62,7 @@ interface CookieTableProps {
   columnSorting?: SortingState[];
   columnSizing?: Record<string, number>;
   selectedColumns?: Record<string, boolean>;
+  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}
       />
     </div>

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}
             />
             <TableBody
+              isExtension={isExtension}
               table={table}
               getRowObjectKey={getRowObjectKey}
               isRowFocused={isRowFocused}

packages/design-system/src/components/table/components/tableBody/bodyCell.tsx

@@ -17,28 +17,78 @@
 /**
  * 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;
+  isExtension?: boolean;
+  row: TableRow;
+  onRowClick: () => void;
 }
 
 const BodyCell = ({
+  onRowClick,
+  row,
   cell,
   width,
   isRowFocused,
   isHighlighted = false,
+  isExtension = false,
 }: BodyCellProps) => {
+  const [contextMenuOpen, setContextMenuOpen] = useState(false);
+  const [columnPosition, setColumnPosition] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const handleRightClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      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, isExtension, 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 (
     <div
       tabIndex={0}
+      onContextMenu={handleRightClick}
       style={{ maxWidth: width }}
       className={`box-border outline-0 px-1 py-px truncate h-5 text-xs ${
         isHighlighted
@@ -49,6 +99,38 @@ const BodyCell = ({
       } cursor-default flex-1`}
     >
       {cell}
+      <>
+        {isExtension &&
+          contextMenuOpen &&
+          createPortal(
+            <div className="transition duration-100" data-testid="column-menu">
+              <div
+                className="absolute z-50 text-raisin-black dark:text-bright-gray rounded-md backdrop-blur-2xl w-screen max-w-[13rem] p-1.5 mr-2 divide-neutral-300 dark:divide-neutral-500 max-h-[78vh] overflow-auto bg-stone-200 dark:bg-neutral-700 shadow-3xl"
+                style={{
+                  left:
+                    'min( calc( 100vw - 15rem),' + columnPosition.x + 'px )',
+                  top: columnPosition.y + 'px',
+                  border: '0.5px solid rgba(0, 0, 0, 0.20)',
+                }}
+              >
+                <button
+                  onClick={handleCopy}
+                  className="w-full text-xs rounded px-1 py-[3px] mb-1.5 flex items-center hover:bg-royal-blue hover:text-white cursor-default"
+                >
+                  <span>Copy network filter string.</span>
+                </button>
+                <div></div>
+              </div>
+
+              <div
+                data-testid="column-menu-overlay"
+                onClick={() => setContextMenuOpen(false)}
+                className="absolute w-screen h-screen z-10 top-0 left-0"
+              />
+            </div>,
+            document.body
+          )}
+      </>
     </div>
   );
 };

packages/design-system/src/components/table/components/tableBody/bodyRow.tsx

@@ -36,6 +36,7 @@ interface BodyRowProps {
   getRowObjectKey: (row: TableRow) => string;
   onRowClick: () => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, 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,11 +82,14 @@ const BodyRow = ({
     >
       {columns.map(({ accessorKey, width }, idx) => (
         <BodyCell
+          isExtension={isExtension}
           key={idx}
+          onRowClick={onRowClick}
           cell={row[accessorKey]?.value || ''}
           width={width || 0}
           isHighlighted={isHighlighted}
           isRowFocused={cookieKey === selectedKey}
+          row={row}
         />
       ))}
     </div>

packages/design-system/src/components/table/components/tableBody/index.tsx

@@ -33,6 +33,7 @@ interface TableBodyProps {
   setIsRowFocused: (state: boolean) => 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 = ({
     <div ref={tableBodyRef} className="h-full flex flex-col">
       {table.rows.map((row, index) => (
         <BodyRow
+          isExtension={isExtension}
           key={index}
           index={index}
           row={row}

packages/extension/src/view/devtools/components/cookies/cookiesListing/cookieTableContainer/index.tsx

@@ -277,6 +277,7 @@ const CookieTableContainer = ({
 
   return (
     <CookieTable
+      isExtension
       tableColumns={tableColumns}
       data={Object.values(tableData)}
       selectedFrame={selectedFrame}