From 0f66d7fedd1546dbe49c7e8db26691f3d5197d1b Mon Sep 17 00:00:00 2001 From: Jason Gill Date: Tue, 1 Oct 2024 08:45:47 -0600 Subject: [PATCH] Make all description table columns expandable (#5340) --- CHANGELOG.md | 2 ++ .../features/common/table/v2/FidesTable.tsx | 2 +- .../src/features/common/table/v2/cells.tsx | 19 +++++++++++++------ .../custom-fields/CustomFieldsTable.tsx | 14 +++++++++++--- .../src/features/custom-fields/cells.tsx | 6 ------ .../hooks/useDetectionResultColumns.tsx | 14 ++++++++++++-- .../hooks/useDiscoveryResultColumns.tsx | 14 ++++++++++++-- .../tables/ActivityTable.tsx | 1 + .../tables/DetectionResultTable.tsx | 1 + .../tables/DiscoveryResultTable.tsx | 1 + .../datamap-table/hooks/useDatamapTable.ts | 1 + .../configure-monitor/MonitorConfigTab.tsx | 1 + .../MonitorDatabasePicker.tsx | 1 + .../PrivacyExperiencesTable.tsx | 1 + .../privacy-notices/PrivacyNoticesTable.tsx | 1 + .../privacy-requests/RequestTable.tsx | 1 + .../features/properties/PropertiesTable.tsx | 1 + .../[collectionName]/[subfieldUrn].tsx | 8 +++++++- .../[datasetId]/[collectionName]/index.tsx | 8 +++++++- .../src/pages/dataset/[datasetId]/index.tsx | 8 +++++++- clients/admin-ui/src/pages/dataset/index.tsx | 8 +++++++- .../admin-ui/src/pages/messaging/index.tsx | 1 + .../src/pages/settings/domain-records.tsx | 1 + clients/admin-ui/src/pages/systems/index.tsx | 8 +++++++- 24 files changed, 98 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a65088e21d3..1b3c36cfb23 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,12 +19,14 @@ The types of changes are: ### Added - Implement Soft Delete for PrivacyRequests [#5321](https://github.com/ethyca/fides/pull/5321/files) +- Make all "Description" table columns expandable in Admin UI tables [#5340](https://github.com/ethyca/fides/pull/5340) ### Developer Experience - Migrate toggle switches from Chakra to Ant Design [#5323](https://github.com/ethyca/fides/pull/5323) ### Fixed - Updating the hash migration status check query to use the available indexes [#5336](https://github.com/ethyca/fides/pull/5336) +- Fixed column resize jank on all tables in Admin UI [#5340](https://github.com/ethyca/fides/pull/5340) ## [2.46.0](https://github.com/ethyca/fides/compare/2.45.2...2.46.0) diff --git a/clients/admin-ui/src/features/common/table/v2/FidesTable.tsx b/clients/admin-ui/src/features/common/table/v2/FidesTable.tsx index 8c43f6d8d4d..b9a8d62f01e 100644 --- a/clients/admin-ui/src/features/common/table/v2/FidesTable.tsx +++ b/clients/admin-ui/src/features/common/table/v2/FidesTable.tsx @@ -53,7 +53,7 @@ declare module "@tanstack/table-core" { width?: string; minWidth?: string; maxWidth?: string; - displayText?: string; + displayText?: string; // for column settings modal showHeaderMenu?: boolean; showHeaderMenuWrapOption?: boolean; overflow?: "auto" | "visible" | "hidden"; diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx index 622baebc1bc..db02b0f567e 100644 --- a/clients/admin-ui/src/features/common/table/v2/cells.tsx +++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx @@ -28,25 +28,32 @@ import { RTKResult } from "~/types/errors"; import { FidesCellProps, FidesCellState } from "./FidesCell"; -export const DefaultCell = ({ +export const DefaultCell = ({ value, + cellProps, ...chakraStyleProps }: { + cellProps?: FidesCellProps; value: string | undefined | number | null | boolean; -} & TextProps) => ( - +} & TextProps) => { + const expandable = !!cellProps?.cell.column.columnDef.meta?.showHeaderMenu; + const isExpanded = expandable && !!cellProps?.cellState?.isExpanded; + return ( {value !== null && value !== undefined ? value.toString() : value} - -); + ); +}; const FidesBadge = ({ children, ...props }: BadgeProps) => ( { [ columnHelper.accessor((row) => row.name, { id: "name", - cell: ValueTextCell, + cell: (props) => ( + + ), header: (props) => , }), columnHelper.accessor((row) => row.description, { id: "description", - cell: ValueTextCell, + cell: (props) => ( + + ), header: (props) => ( ), + meta: { + showHeaderMenu: true, + }, }), columnHelper.accessor((row) => row.field_type, { id: "field_type", @@ -177,6 +184,7 @@ export const CustomFieldsTable = ({ ...rest }: BoxProps): JSX.Element => { state: { globalFilter, }, + columnResizeMode: "onChange", }); const handleCloseModal = () => { diff --git a/clients/admin-ui/src/features/custom-fields/cells.tsx b/clients/admin-ui/src/features/custom-fields/cells.tsx index b0a30f43335..4ffbc12df3b 100644 --- a/clients/admin-ui/src/features/custom-fields/cells.tsx +++ b/clients/admin-ui/src/features/custom-fields/cells.tsx @@ -14,12 +14,6 @@ import { import { useUpdateCustomFieldDefinitionMutation } from "~/features/plus/plus.slice"; import { CustomFieldDefinitionWithId, ResourceTypes } from "~/types/api"; -export const ValueTextCell = ({ - getValue, -}: CellContext) => ( - -); - export const ResourceTypeCell = ( cellProps: CellContext, ) => { diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx index 0205071f0b7..e01e585562e 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx @@ -105,8 +105,13 @@ const useDetectionResultColumns = ({ }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => , + meta: { + showHeaderMenu: true, + }, }), columnHelper.display({ id: "status", @@ -158,8 +163,13 @@ const useDetectionResultColumns = ({ }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => , + meta: { + showHeaderMenu: true, + }, }), columnHelper.display({ id: "status", diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx index 15b6debd4d5..6944f66bcd6 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx @@ -108,8 +108,13 @@ const useDiscoveryResultColumns = ({ }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => , + meta: { + showHeaderMenu: true, + }, }), columnHelper.display({ id: "status", @@ -151,8 +156,13 @@ const useDiscoveryResultColumns = ({ }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => , + meta: { + showHeaderMenu: true, + }, }), columnHelper.display({ id: "status", diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx index 08d4bf9ba1e..136a53ebf23 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx @@ -175,6 +175,7 @@ const ActivityTable = ({ columns: resourceColumns, manualPagination: true, data, + columnResizeMode: "onChange", }); if (isLoading) { diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/DetectionResultTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/DetectionResultTable.tsx index 5f3f5591bc2..eae9d130d74 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/DetectionResultTable.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/DetectionResultTable.tsx @@ -160,6 +160,7 @@ const DetectionResultTable = ({ resourceUrn }: MonitorResultTableProps) => { columns: resourceColumns, manualPagination: true, data, + columnResizeMode: "onChange", }); if (isLoading) { diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryResultTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryResultTable.tsx index ed1e9623bfa..41ef6c67b1e 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryResultTable.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryResultTable.tsx @@ -164,6 +164,7 @@ const DiscoveryResultTable = ({ resourceUrn }: MonitorResultTableProps) => { }, getRowId: getResourceRowName, data, + columnResizeMode: "onChange", }); const selectedUrns = Object.keys(rowSelection).filter((k) => rowSelection[k]); diff --git a/clients/admin-ui/src/features/datamap/datamap-table/hooks/useDatamapTable.ts b/clients/admin-ui/src/features/datamap/datamap-table/hooks/useDatamapTable.ts index ba57cf0fbd1..2ae61e8f20c 100644 --- a/clients/admin-ui/src/features/datamap/datamap-table/hooks/useDatamapTable.ts +++ b/clients/admin-ui/src/features/datamap/datamap-table/hooks/useDatamapTable.ts @@ -105,6 +105,7 @@ export const useDatamapTable = () => { getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), manualPagination: true, + columnResizeMode: "onChange", }); // When the table is created for the first time, store a reference to it on diff --git a/clients/admin-ui/src/features/integrations/configure-monitor/MonitorConfigTab.tsx b/clients/admin-ui/src/features/integrations/configure-monitor/MonitorConfigTab.tsx index e171820f6ae..26d3da236a5 100644 --- a/clients/admin-ui/src/features/integrations/configure-monitor/MonitorConfigTab.tsx +++ b/clients/admin-ui/src/features/integrations/configure-monitor/MonitorConfigTab.tsx @@ -204,6 +204,7 @@ const MonitorConfigTab = ({ manualPagination: true, data: monitors, columns, + columnResizeMode: "onChange", }); if (isLoading) { diff --git a/clients/admin-ui/src/features/integrations/configure-monitor/MonitorDatabasePicker.tsx b/clients/admin-ui/src/features/integrations/configure-monitor/MonitorDatabasePicker.tsx index 2cee4ef419d..5d499380acb 100644 --- a/clients/admin-ui/src/features/integrations/configure-monitor/MonitorDatabasePicker.tsx +++ b/clients/admin-ui/src/features/integrations/configure-monitor/MonitorDatabasePicker.tsx @@ -96,6 +96,7 @@ const MonitorDatabasePicker = ({ manualPagination: true, data, columns, + columnResizeMode: "onChange", }); return ( diff --git a/clients/admin-ui/src/features/privacy-experience/PrivacyExperiencesTable.tsx b/clients/admin-ui/src/features/privacy-experience/PrivacyExperiencesTable.tsx index 23cf536e28b..985b33d4e5a 100644 --- a/clients/admin-ui/src/features/privacy-experience/PrivacyExperiencesTable.tsx +++ b/clients/admin-ui/src/features/privacy-experience/PrivacyExperiencesTable.tsx @@ -203,6 +203,7 @@ export const PrivacyExperiencesTable = () => { state: { expanded: true, }, + columnResizeMode: "onChange", }); const onRowClick = ({ id }: ExperienceConfigListViewResponse) => { diff --git a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticesTable.tsx b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticesTable.tsx index 3494ce0670a..cd486b79b78 100644 --- a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticesTable.tsx +++ b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticesTable.tsx @@ -209,6 +209,7 @@ export const PrivacyNoticesTable = () => { state: { expanded: true, }, + columnResizeMode: "onChange", }); const onRowClick = ({ id }: LimitedPrivacyNoticeResponseSchema) => { diff --git a/clients/admin-ui/src/features/privacy-requests/RequestTable.tsx b/clients/admin-ui/src/features/privacy-requests/RequestTable.tsx index 55ede76319f..54c5e4e363e 100644 --- a/clients/admin-ui/src/features/privacy-requests/RequestTable.tsx +++ b/clients/admin-ui/src/features/privacy-requests/RequestTable.tsx @@ -129,6 +129,7 @@ export const RequestTable = ({ ...props }: BoxProps): JSX.Element => { columns: useMemo(() => getRequestTableColumns(hasPlus), [hasPlus]), getRowId: (row) => `${row.status}-${row.id}`, manualPagination: true, + columnResizeMode: "onChange", }); return ( diff --git a/clients/admin-ui/src/features/properties/PropertiesTable.tsx b/clients/admin-ui/src/features/properties/PropertiesTable.tsx index 55cef9d7d96..f6dd6d0c971 100644 --- a/clients/admin-ui/src/features/properties/PropertiesTable.tsx +++ b/clients/admin-ui/src/features/properties/PropertiesTable.tsx @@ -162,6 +162,7 @@ export const PropertiesTable = () => { state: { expanded: true, }, + columnResizeMode: "onChange", }); const onRowClick = (property: Property) => { diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx index eda46defcb9..c067c4ba83c 100644 --- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx +++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx @@ -170,9 +170,14 @@ const FieldsDetailPage: NextPage = () => { }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => , size: 300, + meta: { + showHeaderMenu: true, + }, }), columnHelper.accessor((row) => row.data_categories, { id: "data_categories", @@ -241,6 +246,7 @@ const FieldsDetailPage: NextPage = () => { getSortedRowModel: getSortedRowModel(), columns, data: filteredSubfields, + columnResizeMode: "onChange", }); const [isEditingField, setIsEditingField] = useState(false); diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx index 9caf770d312..704945e7ed4 100644 --- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx +++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx @@ -158,9 +158,14 @@ const FieldsDetailPage: NextPage = () => { }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => , size: 300, + meta: { + showHeaderMenu: true, + }, }), columnHelper.accessor((row) => row.data_categories, { id: "data_categories", @@ -229,6 +234,7 @@ const FieldsDetailPage: NextPage = () => { getSortedRowModel: getSortedRowModel(), columns, data: filteredFields, + columnResizeMode: "onChange", }); const [isEditingField, setIsEditingField] = useState(false); diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx index 9435ff2c944..0c203f30c0f 100644 --- a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx +++ b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx @@ -62,9 +62,14 @@ const DatasetDetailPage: NextPage = () => { }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => , size: 300, + meta: { + showHeaderMenu: true, + }, }), columnHelper.display({ @@ -112,6 +117,7 @@ const DatasetDetailPage: NextPage = () => { getSortedRowModel: getSortedRowModel(), columns, data: filteredCollections, + columnResizeMode: "onChange", }); const handleRowClick = (collection: DatasetCollection) => { diff --git a/clients/admin-ui/src/pages/dataset/index.tsx b/clients/admin-ui/src/pages/dataset/index.tsx index a73378b4674..82c1b0e5a52 100644 --- a/clients/admin-ui/src/pages/dataset/index.tsx +++ b/clients/admin-ui/src/pages/dataset/index.tsx @@ -143,11 +143,16 @@ const DataSets: NextPage = () => { }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => ( + + ), header: (props) => ( ), size: 300, + meta: { + showHeaderMenu: true, + }, }), columnHelper.display({ @@ -185,6 +190,7 @@ const DataSets: NextPage = () => { getSortedRowModel: getSortedRowModel(), columns, data, + columnResizeMode: "onChange", }); return ( diff --git a/clients/admin-ui/src/pages/messaging/index.tsx b/clients/admin-ui/src/pages/messaging/index.tsx index a38b7a120f0..10b78e027e2 100644 --- a/clients/admin-ui/src/pages/messaging/index.tsx +++ b/clients/admin-ui/src/pages/messaging/index.tsx @@ -170,6 +170,7 @@ const MessagingPage: NextPage = () => { getSortedRowModel: getSortedRowModel(), columns, data: sortedData, + columnResizeMode: "onChange", }); return ( diff --git a/clients/admin-ui/src/pages/settings/domain-records.tsx b/clients/admin-ui/src/pages/settings/domain-records.tsx index 84fa3ca6bc3..c51e57eab2d 100644 --- a/clients/admin-ui/src/pages/settings/domain-records.tsx +++ b/clients/admin-ui/src/pages/settings/domain-records.tsx @@ -75,6 +75,7 @@ const DomainRecordsPage: NextPage = () => { getCoreRowModel: getCoreRowModel(), columns, data, + columnResizeMode: "onChange", }); return ( diff --git a/clients/admin-ui/src/pages/systems/index.tsx b/clients/admin-ui/src/pages/systems/index.tsx index 9d80ac1b020..f59fc912f53 100644 --- a/clients/admin-ui/src/pages/systems/index.tsx +++ b/clients/admin-ui/src/pages/systems/index.tsx @@ -158,9 +158,14 @@ const Systems: NextPage = () => { }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , header: (props) => , + cell: (props) => ( + + ), size: 300, + meta: { + showHeaderMenu: true, + }, }), columnHelper.accessor((row) => row.administrating_department, { id: "department", @@ -223,6 +228,7 @@ const Systems: NextPage = () => { getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getSortedRowModel: getSortedRowModel(), + columnResizeMode: "onChange", columns, data, });