diff --git a/packages/design-system/src/components/cookieTable/index.tsx b/packages/design-system/src/components/cookieTable/index.tsx index 4f9942ed4..e53eb0ff3 100644 --- a/packages/design-system/src/components/cookieTable/index.tsx +++ b/packages/design-system/src/components/cookieTable/index.tsx @@ -25,12 +25,14 @@ import React, { useReducer, } from 'react'; import { CookieTableData, getCookieKey } from '@ps-analysis-tool/common'; +import { saveAs } from 'file-saver'; /** * Internal dependencies. */ import { Table, TableColumn, TableData, TableFilter, TableRow } from '../table'; import { TableProvider } from '../table/useTable'; +import { generateCookieTableCSV } from '../table/utils'; interface CookieTableProps { data: TableData[]; @@ -39,8 +41,6 @@ interface CookieTableProps { tableSearchKeys?: string[]; tablePersistentSettingsKey?: string; selectedFrame: string | null; - showTopBar?: boolean; - hideExport?: boolean; selectedFrameCookie: { [frame: string]: CookieTableData | null; } | null; @@ -68,8 +68,6 @@ const CookieTable = forwardRef< tableSearchKeys, tablePersistentSettingsKey, data: cookies, - showTopBar, - hideExport = false, selectedFrame, selectedFrameCookie, setSelectedFrameCookie, @@ -100,6 +98,30 @@ const CookieTable = forwardRef< [selectedFrame, setSelectedFrameCookie] ); + const onRowContextMenuHandler = useCallback( + (e: React.MouseEvent, row: TableRow) => { + onRowContextMenu?.(e, row); + onRowClick(row?.originalData); + }, + [onRowClick, onRowContextMenu] + ); + + const exportCookies = useCallback((rows: TableRow[]) => { + const _cookies = rows.map(({ originalData }) => originalData); + if (_cookies.length > 0 && 'parsedCookie' in _cookies[0]) { + const csvTextBlob = generateCookieTableCSV(_cookies as CookieTableData[]); + saveAs(csvTextBlob, 'Cookies Report.csv'); + } + }, []); + + const getRowObjectKey = useCallback( + (row: TableRow) => + getCookieKey( + (row?.originalData as CookieTableData).parsedCookie + ) as string, + [] + ); + useImperativeHandle( ref, () => { @@ -132,29 +154,18 @@ const CookieTable = forwardRef< tableFilterData={tableFilters} tableSearchKeys={tableSearchKeys} tablePersistentSettingsKey={tablePersistentSettingsKey} + onRowClick={onRowClick} + onRowContextMenu={onRowContextMenuHandler} + getRowObjectKey={getRowObjectKey} + exportTableData={exportCookies} > - getCookieKey( - (row?.originalData as CookieTableData).parsedCookie - ) as string - } - onRowClick={onRowClick} extraInterfaceToTopBar={extraInterfaceToTopBar} - onRowContextMenu={( - e: React.MouseEvent, - row: TableRow - ) => { - onRowContextMenu?.(e, row); - onRowClick(row?.originalData); - }} /> diff --git a/packages/design-system/src/components/table/components/index.tsx b/packages/design-system/src/components/table/components/index.tsx index 22e22d898..c18117646 100644 --- a/packages/design-system/src/components/table/components/index.tsx +++ b/packages/design-system/src/components/table/components/index.tsx @@ -19,8 +19,6 @@ */ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { Resizable } from 're-resizable'; -import { saveAs } from 'file-saver'; -import { CookieTableData } from '@ps-analysis-tool/common'; /** * Internal dependencies. @@ -28,40 +26,29 @@ import { CookieTableData } from '@ps-analysis-tool/common'; import TableHeader from './tableHeader'; import TableBody from './tableBody'; import ColumnMenu from './columnMenu'; -import { TableData, TableRow, useTable } from '../useTable'; +import { useTable } from '../useTable'; import TableTopBar from './tableTopBar'; import ChipsBar from './filtersSidebar/chips'; import FiltersSidebar from './filtersSidebar'; -import { generateCookieTableCSV } from '../utils'; interface TableProps { selectedKey: string | undefined | null; - getRowObjectKey: (row: TableRow) => string; - onRowClick: (row: TableData | null) => void; - onRowContextMenu?: ( - e: React.MouseEvent, - row: TableRow - ) => void; - showTopBar?: boolean; hideFiltering?: boolean; - hideExport?: boolean; extraInterfaceToTopBar?: React.ReactNode; } const Table = ({ selectedKey, - getRowObjectKey, - onRowClick, - onRowContextMenu = () => undefined, - showTopBar = false, hideFiltering = false, - hideExport = false, extraInterfaceToTopBar, }: TableProps) => { - const { rows, tableContainerRef } = useTable(({ state }) => ({ - rows: state.rows, - tableContainerRef: state.tableContainerRef, - })); + const { rows, tableContainerRef, exportTableData } = useTable( + ({ state, actions }) => ({ + rows: state.rows, + tableContainerRef: state.tableContainerRef, + exportTableData: actions.exportTableData, + }) + ); const [showColumnsMenu, setShowColumnsMenu] = useState(false); const [showFilterSidebar, setShowFilterSidebar] = useState(false); @@ -104,27 +91,19 @@ const Table = ({ [showColumnsMenu] ); - const exportCookies = useCallback(() => { - const cookies = rows.map(({ originalData }) => originalData); - if (cookies.length > 0 && 'parsedCookie' in cookies[0]) { - const csvTextBlob = generateCookieTableCSV(cookies as CookieTableData[]); - saveAs(csvTextBlob, 'Cookies Report.csv'); - } - }, [rows]); - return (
- {showTopBar && ( - - )} + exportTableData(rows) : undefined + } + />
{showFilterSidebar && ( @@ -157,12 +136,9 @@ const Table = ({ setIsRowFocused={setIsRowFocused} />
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 2f9344f3d..c81131fa9 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,7 @@ interface BodyRowProps { getRowObjectKey: (row: TableRow) => string; onRowClick: (e: React.MouseEvent) => void; onKeyDown: (e: React.KeyboardEvent, index: number) => void; - onRowContextMenu?: ( + onRowContextMenu: ( e: React.MouseEvent, row: TableRow ) => void; @@ -52,7 +52,7 @@ const BodyRow = ({ isRowFocused, onRowClick, onKeyDown, - onRowContextMenu = () => undefined, + onRowContextMenu, }: BodyRowProps) => { const cookieKey = getRowObjectKey(row); const isBlocked = diff --git a/packages/design-system/src/components/table/components/tableBody/index.tsx b/packages/design-system/src/components/table/components/tableBody/index.tsx index b5f49e893..a680a7dad 100644 --- a/packages/design-system/src/components/table/components/tableBody/index.tsx +++ b/packages/design-system/src/components/table/components/tableBody/index.tsx @@ -24,35 +24,27 @@ import classNames from 'classnames'; * Internal dependencies. */ import BodyRow from './bodyRow'; -import { useTable, type TableData, type TableRow } from '../../useTable'; +import { useTable } from '../../useTable'; interface TableBodyProps { - getRowObjectKey: (row: TableRow) => string; isRowFocused: boolean; setIsRowFocused: (state: boolean) => void; selectedKey: string | undefined | null; - onRowClick: ( - key: TableData | null, - e?: React.MouseEvent - ) => void; - onRowContextMenu?: ( - e: React.MouseEvent, - row: TableRow - ) => void; } const TableBody = ({ - getRowObjectKey, isRowFocused, setIsRowFocused, selectedKey, - onRowClick, - onRowContextMenu = () => undefined, }: TableBodyProps) => { - const { rows, columns } = useTable(({ state }) => ({ - rows: state.rows, - columns: state.columns, - })); + const { rows, columns, onRowClick, onRowContextMenu, getRowObjectKey } = + useTable(({ state, actions }) => ({ + rows: state.rows, + columns: state.columns, + onRowClick: actions.onRowClick, + onRowContextMenu: actions.onRowContextMenu, + getRowObjectKey: actions.getRowObjectKey, + })); const tableBodyRef = useRef(null); @@ -148,8 +140,8 @@ const TableBody = ({ selectedKey={selectedKey} getRowObjectKey={getRowObjectKey} isRowFocused={isRowFocused} - onRowClick={(e: React.MouseEvent) => { - onRowClick(row?.originalData, e); + onRowClick={() => { + onRowClick(row?.originalData); setIsRowFocused(true); }} onKeyDown={handleKeyDown} diff --git a/packages/design-system/src/components/table/components/tableTopBar/index.tsx b/packages/design-system/src/components/table/components/tableTopBar/index.tsx index 83709278c..c4de43eff 100644 --- a/packages/design-system/src/components/table/components/tableTopBar/index.tsx +++ b/packages/design-system/src/components/table/components/tableTopBar/index.tsx @@ -34,7 +34,7 @@ interface TableTopBarProps { disableFiltering?: boolean; disableExport?: boolean; extraInterface?: React.ReactNode; - exportCookies?: () => void; + exportTableData?: () => void; } const TableTopBar = ({ @@ -45,7 +45,7 @@ const TableTopBar = ({ disableFiltering = false, disableExport = false, extraInterface = null, - exportCookies, + exportTableData, }: TableTopBarProps) => { const { searchValue, setSearchValue } = useTable(({ state, actions }) => ({ searchValue: state.searchValue, @@ -90,11 +90,11 @@ const TableTopBar = ({
{extraInterface} - {exportCookies && ( + {exportTableData && ( )}
diff --git a/packages/design-system/src/components/table/useTable/index.tsx b/packages/design-system/src/components/table/useTable/index.tsx index acfe2ad34..5f1bb2ba1 100644 --- a/packages/design-system/src/components/table/useTable/index.tsx +++ b/packages/design-system/src/components/table/useTable/index.tsx @@ -96,6 +96,13 @@ interface useTableProps { tableFilterData?: TableFilter; tableSearchKeys?: string[]; tablePersistentSettingsKey?: string; + onRowClick: (row: TableData | null) => void; + onRowContextMenu: ( + e: React.MouseEvent, + row: TableRow + ) => void; + getRowObjectKey: (row: TableRow) => string; + exportTableData?: (rows: TableRow[]) => void; } export interface TableStoreContext { @@ -126,6 +133,10 @@ export interface TableStoreContext { resetFilters: TableFilteringOutput['resetFilters']; isSelectAllFilterSelected: TableFilteringOutput['isSelectAllFilterSelected']; setSearchValue: TableSearchOutput['setSearchValue']; + onRowClick: useTableProps['onRowClick']; + onRowContextMenu: useTableProps['onRowContextMenu']; + getRowObjectKey: useTableProps['getRowObjectKey']; + exportTableData?: useTableProps['exportTableData']; }; } @@ -157,6 +168,9 @@ const initialState: TableStoreContext = { resetFilters: noop, isSelectAllFilterSelected: () => false, setSearchValue: noop, + onRowClick: noop, + onRowContextMenu: noop, + getRowObjectKey: () => '', }, }; @@ -168,6 +182,10 @@ export const TableProvider = ({ tableFilterData, tableSearchKeys, tablePersistentSettingsKey, + onRowClick, + onRowContextMenu, + getRowObjectKey, + exportTableData, children, }: PropsWithChildren) => { const commonKey = useMemo(() => { @@ -278,6 +296,10 @@ export const TableProvider = ({ resetFilters, isSelectAllFilterSelected, setSearchValue, + onRowClick, + onRowContextMenu, + getRowObjectKey, + exportTableData, }, }} >