Make all description table columns expandable (#5340)

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)
 

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";

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 = <T,>({
   value,
+  cellProps,
   ...chakraStyleProps
 }: {
+  cellProps?: FidesCellProps<T>;
   value: string | undefined | number | null | boolean;
-} & TextProps) => (
-  <Flex alignItems="center" height="100%">
+} & TextProps) => {
+  const expandable = !!cellProps?.cell.column.columnDef.meta?.showHeaderMenu;
+  const isExpanded = expandable && !!cellProps?.cellState?.isExpanded;
+  return (
     <Text
       fontSize="xs"
       lineHeight={4}
+      py={1.5}
       fontWeight="normal"
-      overflow="hidden"
       textOverflow="ellipsis"
+      overflow={isExpanded ? undefined : "hidden"}
+      whiteSpace={isExpanded ? "normal" : undefined}
+      title={isExpanded && !!value ? undefined : value?.toString()}
       {...chakraStyleProps}
     >
       {value !== null && value !== undefined ? value.toString() : value}
     </Text>
-  </Flex>
-);
+  );
+};
 
 const FidesBadge = ({ children, ...props }: BadgeProps) => (
   <Badge

clients/admin-ui/src/features/custom-fields/CustomFieldsTable.tsx

@@ -23,6 +23,7 @@ import { useAppSelector } from "~/app/hooks";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import Restrict, { useHasPermission } from "~/features/common/Restrict";
 import {
+  DefaultCell,
   DefaultHeaderCell,
   FidesTableV2,
   GlobalFilterV2,
@@ -34,7 +35,6 @@ import {
   EnableCustomFieldCell,
   FieldTypeCell,
   ResourceTypeCell,
-  ValueTextCell,
 } from "~/features/custom-fields/cells";
 import { CustomFieldActions } from "~/features/custom-fields/CustomFieldActions";
 import { CustomFieldModal } from "~/features/custom-fields/CustomFieldModal";
@@ -119,15 +119,22 @@ export const CustomFieldsTable = ({ ...rest }: BoxProps): JSX.Element => {
       [
         columnHelper.accessor((row) => row.name, {
           id: "name",
-          cell: ValueTextCell,
+          cell: (props) => (
+            <DefaultCell value={props.getValue()} cellProps={props} />
+          ),
           header: (props) => <DefaultHeaderCell value="Label" {...props} />,
         }),
         columnHelper.accessor((row) => row.description, {
           id: "description",
-          cell: ValueTextCell,
+          cell: (props) => (
+            <DefaultCell value={props.getValue()} cellProps={props} />
+          ),
           header: (props) => (
             <DefaultHeaderCell value="Description" {...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 = () => {

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<CustomFieldDefinitionWithId, string>) => (
-  <DefaultCell value={getValue()} />
-);
-
 export const ResourceTypeCell = (
   cellProps: CellContext<CustomFieldDefinitionWithId, ResourceTypes>,
 ) => {

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) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} cellProps={props} />
+        ),
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
+        meta: {
+          showHeaderMenu: true,
+        },
       }),
       columnHelper.display({
         id: "status",
@@ -158,8 +163,13 @@ const useDetectionResultColumns = ({
       }),
       columnHelper.accessor((row) => row.description, {
         id: "description",
-        cell: (props) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} cellProps={props} />
+        ),
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
+        meta: {
+          showHeaderMenu: true,
+        },
       }),
       columnHelper.display({
         id: "status",

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) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} cellProps={props} />
+        ),
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
+        meta: {
+          showHeaderMenu: true,
+        },
       }),
       columnHelper.display({
         id: "status",
@@ -151,8 +156,13 @@ const useDiscoveryResultColumns = ({
       }),
       columnHelper.accessor((row) => row.description, {
         id: "description",
-        cell: (props) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} cellProps={props} />
+        ),
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
+        meta: {
+          showHeaderMenu: true,
+        },
       }),
       columnHelper.display({
         id: "status",

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) {

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) {

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]);

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

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) {

clients/admin-ui/src/features/integrations/configure-monitor/MonitorDatabasePicker.tsx

@@ -96,6 +96,7 @@ const MonitorDatabasePicker = ({
     manualPagination: true,
     data,
     columns,
+    columnResizeMode: "onChange",
   });
 
   return (

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) => {

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) => {

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 (

clients/admin-ui/src/features/properties/PropertiesTable.tsx

@@ -162,6 +162,7 @@ export const PropertiesTable = () => {
     state: {
       expanded: true,
     },
+    columnResizeMode: "onChange",
   });
 
   const onRowClick = (property: Property) => {

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) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} cellProps={props} />
+        ),
         header: (props) => <DefaultHeaderCell value="Description" {...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);

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) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} cellProps={props} />
+        ),
         header: (props) => <DefaultHeaderCell value="Description" {...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);

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) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} cellProps={props} />
+        ),
         header: (props) => <DefaultHeaderCell value="Description" {...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) => {

clients/admin-ui/src/pages/dataset/index.tsx

@@ -143,11 +143,16 @@ const DataSets: NextPage = () => {
         }),
         columnHelper.accessor((row) => row.description, {
           id: "description",
-          cell: (props) => <DefaultCell value={props.getValue()} />,
+          cell: (props) => (
+            <DefaultCell value={props.getValue()} cellProps={props} />
+          ),
           header: (props) => (
             <DefaultHeaderCell value="Description" {...props} />
           ),
           size: 300,
+          meta: {
+            showHeaderMenu: true,
+          },
         }),
 
         columnHelper.display({
@@ -185,6 +190,7 @@ const DataSets: NextPage = () => {
     getSortedRowModel: getSortedRowModel(),
     columns,
     data,
+    columnResizeMode: "onChange",
   });
 
   return (

clients/admin-ui/src/pages/messaging/index.tsx

@@ -170,6 +170,7 @@ const MessagingPage: NextPage = () => {
     getSortedRowModel: getSortedRowModel(),
     columns,
     data: sortedData,
+    columnResizeMode: "onChange",
   });
 
   return (

clients/admin-ui/src/pages/settings/domain-records.tsx

@@ -75,6 +75,7 @@ const DomainRecordsPage: NextPage = () => {
     getCoreRowModel: getCoreRowModel(),
     columns,
     data,
+    columnResizeMode: "onChange",
   });
 
   return (