From 11a940f4a731ca72641e60b259c83b0c57544c52 Mon Sep 17 00:00:00 2001 From: milan-deepfence Date: Fri, 21 Jun 2024 19:11:53 +0530 Subject: [PATCH] Update table and checkbox style to not trim off some portion of checkbox --- .../integrations/components/ReportsTable.tsx | 30 +++---- .../integrations/pages/AIIntegrationList.tsx | 2 +- .../malwares/pages/MalwareScanResults.tsx | 12 +-- .../features/malwares/pages/MalwareScans.tsx | 12 +-- .../src/features/postures/pages/Accounts.tsx | 6 +- .../secrets/pages/SecretScanResults.tsx | 12 +-- .../features/secrets/pages/SecretScans.tsx | 18 ++-- .../settings/pages/UserManagement.tsx | 8 +- .../tables/KubernetesTable.tsx | 87 ++++++++++--------- .../pages/VulnerabilityScanResults.tsx | 18 ++-- .../pages/VulnerabilityScans.tsx | 12 +-- .../src/components/table/Table.tsx | 19 ++-- 12 files changed, 123 insertions(+), 113 deletions(-) diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/ReportsTable.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/ReportsTable.tsx index 422b5a9c7b..fb757c213c 100644 --- a/deepfence_frontend/apps/dashboard/src/features/integrations/components/ReportsTable.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/integrations/components/ReportsTable.tsx @@ -211,9 +211,9 @@ export const ReportTable = ({ const columns = useMemo(() => { const columns = [ getRowSelectionColumn(columnHelper, { - minSize: 15, - size: 20, - maxSize: 30, + minSize: 10, + size: 10, + maxSize: 10, }), columnHelper.display({ id: 'actions', @@ -237,26 +237,26 @@ export const ReportTable = ({ ); }, header: () => '', - minSize: 20, - size: 25, - maxSize: 30, + minSize: 15, + size: 15, + maxSize: 15, enableResizing: false, }), columnHelper.accessor('type', { enableSorting: true, cell: (cell) => {cell.getValue()}, header: () => 'Report type', - minSize: 30, - size: 40, - maxSize: 55, + minSize: 50, + size: 70, + maxSize: 80, }), columnHelper.accessor('created_at', { enableSorting: true, cell: (cell) => formatMilliseconds(cell.getValue() ?? ''), header: () => 'Created at', - minSize: 40, - size: 50, - maxSize: 70, + minSize: 50, + size: 70, + maxSize: 80, }), columnHelper.display({ id: 'duration', @@ -279,9 +279,9 @@ export const ReportTable = ({ enableSorting: true, cell: (cell) => , header: () => 'Status', - minSize: 30, - size: 40, - maxSize: 70, + minSize: 50, + size: 70, + maxSize: 80, }), columnHelper.accessor('filters', { enableSorting: false, diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/AIIntegrationList.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/AIIntegrationList.tsx index 22bdb138eb..848d716d1b 100644 --- a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/AIIntegrationList.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/AIIntegrationList.tsx @@ -445,7 +445,7 @@ const AIIntegrationTable = () => { header: () => '', minSize: 30, size: 30, - maxSize: 35, + maxSize: 30, enableResizing: false, }), columnHelper.accessor('integration_type', { diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx index 680d6a9343..08df11e699 100644 --- a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx @@ -1423,9 +1423,9 @@ const MalwareTable = ({ const columns = useMemo(() => { const columns = [ getRowSelectionColumn(columnHelper, { - size: 45, - minSize: 45, - maxSize: 45, + size: 35, + minSize: 35, + maxSize: 35, }), columnHelper.display({ id: 'actions', @@ -1448,9 +1448,9 @@ const MalwareTable = ({ /> ), header: () => '', - size: 55, - minSize: 40, - maxSize: 55, + size: 35, + minSize: 35, + maxSize: 35, enableResizing: false, }), columnHelper.accessor('node_id', { diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx index c18a5b468e..5ca030f4c5 100644 --- a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx @@ -698,9 +698,9 @@ const ScansTable = ({ const columns = useMemo(() => { const columns = [ getRowSelectionColumn(columnHelper, { - size: 45, - minSize: 45, - maxSize: 45, + size: 35, + minSize: 35, + maxSize: 35, }), columnHelper.display({ id: 'actions', @@ -719,9 +719,9 @@ const ScansTable = ({ /> ), header: () => '', - size: 30, - minSize: 30, - maxSize: 50, + size: 35, + minSize: 35, + maxSize: 35, enableResizing: false, }), columnHelper.accessor('node_type', { diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx index 2199285c50..cad2d1eebd 100644 --- a/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx @@ -1223,9 +1223,9 @@ const AccountTable = ({ ); }, header: () => '', - size: 20, - minSize: 20, - maxSize: 20, + minSize: 15, + size: 15, + maxSize: 15, enableResizing: false, }), columnHelper.accessor('node_name', { diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx index 50f7ea41cd..02c6f892e3 100644 --- a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx @@ -1417,9 +1417,9 @@ const SecretTable = ({ const columns = useMemo(() => { const columns = [ getRowSelectionColumn(columnHelper, { - size: 40, - minSize: 40, - maxSize: 40, + size: 35, + minSize: 35, + maxSize: 35, }), columnHelper.display({ id: 'actions', @@ -1442,9 +1442,9 @@ const SecretTable = ({ /> ), header: () => '', - size: 45, - minSize: 40, - maxSize: 55, + size: 35, + minSize: 35, + maxSize: 35, enableResizing: false, }), columnHelper.accessor('node_id', { diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx index 54b9f4050f..2495582a27 100644 --- a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx @@ -696,9 +696,9 @@ const ScansTable = ({ const columns = useMemo(() => { const columns = [ getRowSelectionColumn(columnHelper, { - size: 45, - minSize: 45, - maxSize: 45, + size: 35, + minSize: 35, + maxSize: 35, }), columnHelper.display({ id: 'actions', @@ -708,18 +708,16 @@ const ScansTable = ({ row={cell.row.original} onTableAction={onTableAction} trigger={ - } /> ), header: () => '', - size: 30, - minSize: 30, - maxSize: 50, + size: 35, + minSize: 35, + maxSize: 35, enableResizing: false, }), columnHelper.accessor('node_type', { diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx index e4d77f9acf..cfad6896a1 100644 --- a/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx @@ -776,10 +776,8 @@ const UsersTable = ({ user={cell.row.original} onTableAction={onTableAction} trigger={ - } /> @@ -795,7 +793,7 @@ const UsersTable = ({ cell: (cell) => cell.getValue(), header: () => 'ID', minSize: 30, - size: 30, + size: 40, maxSize: 85, }), columnHelper.accessor('first_name', { diff --git a/deepfence_frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx b/deepfence_frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx index aa978aaa46..d78cabb589 100644 --- a/deepfence_frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx @@ -385,8 +385,52 @@ const DataTable = ({ () => [ getRowSelectionColumn(columnHelper, { minSize: 20, - size: 25, - maxSize: 40, + size: 20, + maxSize: 20, + }), + columnHelper.display({ + id: 'actions', + enableSorting: false, + cell: (cell) => ( + + + + Go to hosts + + + + + Go to containers + + + + + Go to pods + + + + } + > +
+ +
+ + ), + header: () => '', + size: 35, + minSize: 35, + maxSize: 35, + enableResizing: false, }), columnHelper.accessor('node_name', { cell: (info) => { @@ -396,44 +440,7 @@ const DataTable = ({ } else { name = info.row.original.node_id; } - return ( -
- - - - Go to hosts - - - - - Go to containers - - - - - Go to pods - - - - } - > -
- -
- - -
- ); + return ; }, header: () => 'Name', minSize: 140, diff --git a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx index d96e892b6b..1234bfb5ea 100644 --- a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx @@ -1767,9 +1767,9 @@ const CVETable = ({ const columns = useMemo(() => { const columns = [ getRowSelectionColumn(columnHelper, { - size: 35, - minSize: 35, - maxSize: 35, + size: 30, + minSize: 30, + maxSize: 30, }), columnHelper.display({ id: 'actions', @@ -1783,18 +1783,16 @@ const CVETable = ({ nodeType={nodeType} isDockerImageNameEmpty={isDockerImageNameEmpty} trigger={ - } /> ), header: () => '', - size: 40, - minSize: 40, - maxSize: 40, + size: 30, + minSize: 30, + maxSize: 30, enableResizing: false, }), columnHelper.accessor('cve_id', { diff --git a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx index aa2df1812d..5223ba2126 100644 --- a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx +++ b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx @@ -432,9 +432,9 @@ const ScansTable = ({ const columns = useMemo(() => { const columns = [ getRowSelectionColumn(columnHelper, { - size: 45, - minSize: 45, - maxSize: 45, + size: 35, + minSize: 35, + maxSize: 35, }), columnHelper.display({ id: 'actions', @@ -453,9 +453,9 @@ const ScansTable = ({ /> ), header: () => '', - size: 50, - minSize: 50, - maxSize: 60, + size: 35, + minSize: 35, + maxSize: 35, enableResizing: false, }), columnHelper.accessor('node_type', { diff --git a/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx b/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx index ad1f4d9775..06bd8854c3 100644 --- a/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx +++ b/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx @@ -101,6 +101,10 @@ function useTableContext() { const PAGE_RESIZE_OPTIONS = [10, 25, 50, 100, 250]; +function isInTruncationRequiredField(columnName: string) { + return !['selection', 'actions'].includes(columnName); +} + const CustomTable = ( props: TableProps, ref: Ref>, @@ -366,25 +370,29 @@ function Th({ className={cn( 'relative border-0 text-text-text-and-icon', 'border-b-[1.5px] dark:border-bg-grid-border border-[#dcdcdc]', - 'text-p11', + 'text-p11 px-4', { 'cursor-pointer select-none': header.column.getCanSort() }, )} style={{ width: header.getSize() }} onClick={header.column.getToggleSortingHandler()} >
- +
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} - +
{header.column.getCanSort() ? ( {header.column.getIsSorted() === 'asc' ? ( @@ -502,13 +510,14 @@ function Td({ key={cell.id} style={{ width: cell.column.getSize() }} className={cn( - `text-[13px] font-medium leading-[18px] text-text-text-and-icon px-4 truncate min-w-0`, + `text-[13px] font-medium leading-[18px] text-text-text-and-icon px-4 min-w-0`, { 'border-b border-bg-grid-border': rowIdx !== totalRows - 1, ['h-[48px]']: size === 'default', ['h-[36px]']: size === 'compact', ['h-[42px]']: size === 'medium', ['h-[54px]']: size === 'relaxed', + truncate: isInTruncationRequiredField(cell.column.id), }, rest.className ?? '', )}