Add "data type" column to D&D tables

CHANGELOG.md

@@ -24,6 +24,7 @@ The types of changes are:
 ### Added
 - Pydantic v1 -> Pydantic v2 upgrade [#5020](https://github.com/ethyca/fides/pull/5020)
 - Added success toast on muting/ignoring resources in D&D tables [#5214](https://github.com/ethyca/fides/pull/5214)
+- Added "data type" column to fields and subfields on D&D tables [#5218](https://github.com/ethyca/fides/pull/5218)
 
 ### Fixed
 - Ignore `404` errors on Oracle Responsys deletions [#5203](https://github.com/ethyca/fides/pull/5203)

clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx

@@ -2,11 +2,12 @@ import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 
 import { DefaultCell, DefaultHeaderCell } from "~/features/common/table/v2";
 import { RelativeTimestampCell } from "~/features/common/table/v2/cells";
-import DetectionItemAction from "~/features/data-discovery-and-detection/DetectionItemActions";
-import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/ResultStatusBadgeCell";
-import ResultStatusCell from "~/features/data-discovery-and-detection/tables/ResultStatusCell";
+import DetectionItemActionsCell from "~/features/data-discovery-and-detection/tables/cells/DetectionItemActionsCell";
+import FieldDataTypeCell from "~/features/data-discovery-and-detection/tables/cells/FieldDataTypeCell";
+import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell";
+import ResultStatusCell from "~/features/data-discovery-and-detection/tables/cells/ResultStatusCell";
+import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
 import { StagedResourceType } from "~/features/data-discovery-and-detection/types/StagedResourceType";
-import { StagedResourceAPIResponse } from "~/types/api";
 
 import findProjectFromUrn from "../utils/findProjectFromUrn";
 
@@ -15,9 +16,9 @@ const useDetectionResultColumns = ({
 }: {
   resourceType?: StagedResourceType;
 }) => {
-  const columnHelper = createColumnHelper<StagedResourceAPIResponse>();
+  const columnHelper = createColumnHelper<DiscoveryMonitorItem>();
 
-  const defaultColumns: ColumnDef<StagedResourceAPIResponse, any>[] = [];
+  const defaultColumns: ColumnDef<DiscoveryMonitorItem, any>[] = [];
 
   if (!resourceType) {
     return { columns: defaultColumns };
@@ -59,7 +60,9 @@ const useDetectionResultColumns = ({
       }),
       columnHelper.display({
         id: "actions",
-        cell: (props) => <DetectionItemAction resource={props.row.original} />,
+        cell: (props) => (
+          <DetectionItemActionsCell resource={props.row.original} />
+        ),
         header: "Actions",
       }),
     ];
@@ -75,7 +78,7 @@ const useDetectionResultColumns = ({
       }),
       columnHelper.accessor((row) => row.description, {
         id: "description",
-        cell: (props) => <DefaultCell value={props.getValue() ?? "--"} />,
+        cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
       }),
       columnHelper.display({
@@ -95,7 +98,9 @@ const useDetectionResultColumns = ({
       }),
       columnHelper.display({
         id: "actions",
-        cell: (props) => <DetectionItemAction resource={props.row.original} />,
+        cell: (props) => (
+          <DetectionItemActionsCell resource={props.row.original} />
+        ),
         header: "Actions",
       }),
     ];
@@ -109,9 +114,14 @@ const useDetectionResultColumns = ({
         cell: (props) => <ResultStatusCell result={props.row.original} />,
         header: (props) => <DefaultHeaderCell value="Field name" {...props} />,
       }),
+      columnHelper.accessor((row) => row.source_data_type, {
+        id: "data-type",
+        cell: (props) => <FieldDataTypeCell type={props.getValue()} />,
+        header: (props) => <DefaultHeaderCell value="Data type" {...props} />,
+      }),
       columnHelper.accessor((row) => row.description, {
         id: "description",
-        cell: (props) => <DefaultCell value={props.getValue() ?? "--"} />,
+        cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
       }),
       columnHelper.display({
@@ -131,7 +141,9 @@ const useDetectionResultColumns = ({
       }),
       columnHelper.display({
         id: "actions",
-        cell: (props) => <DetectionItemAction resource={props.row.original} />,
+        cell: (props) => (
+          <DetectionItemActionsCell resource={props.row.original} />
+        ),
         header: "Actions",
       }),
     ];

clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx

@@ -5,24 +5,26 @@ import {
   IndeterminateCheckboxCell,
   RelativeTimestampCell,
 } from "~/features/common/table/v2/cells";
-import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/ResultStatusBadgeCell";
+import FieldDataTypeCell from "~/features/data-discovery-and-detection/tables/cells/FieldDataTypeCell";
+import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell";
+import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
 import { ResourceChangeType } from "~/features/data-discovery-and-detection/types/ResourceChangeType";
 import { StagedResourceType } from "~/features/data-discovery-and-detection/types/StagedResourceType";
 import findProjectFromUrn from "~/features/data-discovery-and-detection/utils/findProjectFromUrn";
-import { DiffStatus, StagedResourceAPIResponse } from "~/types/api";
+import { DiffStatus } from "~/types/api";
 
-import DiscoveryItemActions from "../DiscoveryItemActions";
-import ResultStatusCell from "../tables/ResultStatusCell";
-import TaxonomyDisplayAndEdit from "../TaxonomyDisplayAndEdit";
+import DiscoveryItemActionsCell from "../tables/cells/DiscoveryItemActionsCell";
+import EditCategoriesCell from "../tables/cells/EditCategoryCell";
+import ResultStatusCell from "../tables/cells/ResultStatusCell";
 
 const useDiscoveryResultColumns = ({
   resourceType,
 }: {
   resourceType: StagedResourceType | undefined;
 }) => {
-  const columnHelper = createColumnHelper<StagedResourceAPIResponse>();
+  const columnHelper = createColumnHelper<DiscoveryMonitorItem>();
 
-  const defaultColumns: ColumnDef<StagedResourceAPIResponse, any>[] = [];
+  const defaultColumns: ColumnDef<DiscoveryMonitorItem, any>[] = [];
 
   if (resourceType === StagedResourceType.SCHEMA) {
     const columns = [
@@ -67,7 +69,7 @@ const useDiscoveryResultColumns = ({
         id: "action",
         cell: (props) =>
           props.row.original.diff_status !== DiffStatus.MUTED ? (
-            <DiscoveryItemActions resource={props.row.original} />
+            <DiscoveryItemActionsCell resource={props.row.original} />
           ) : (
             <DefaultCell value="--" />
           ),
@@ -105,7 +107,7 @@ const useDiscoveryResultColumns = ({
       }),
       columnHelper.accessor((row) => row.description, {
         id: "description",
-        cell: (props) => <DefaultCell value={props.getValue() ?? "--"} />,
+        cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
       }),
       columnHelper.display({
@@ -125,7 +127,9 @@ const useDiscoveryResultColumns = ({
       }),
       columnHelper.display({
         id: "actions",
-        cell: (props) => <DiscoveryItemActions resource={props.row.original} />,
+        cell: (props) => (
+          <DiscoveryItemActionsCell resource={props.row.original} />
+        ),
         header: "Actions",
       }),
     ];
@@ -139,9 +143,14 @@ const useDiscoveryResultColumns = ({
         cell: (props) => <ResultStatusCell result={props.row.original} />,
         header: (props) => <DefaultHeaderCell value="Field name" {...props} />,
       }),
+      columnHelper.accessor((row) => row.source_data_type, {
+        id: "data-type",
+        cell: (props) => <FieldDataTypeCell type={props.getValue()} />,
+        header: (props) => <DefaultHeaderCell value="Data type" {...props} />,
+      }),
       columnHelper.accessor((row) => row.description, {
         id: "description",
-        cell: (props) => <DefaultCell value={props.getValue() ?? "--"} />,
+        cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Description" {...props} />,
       }),
       columnHelper.display({
@@ -157,7 +166,7 @@ const useDiscoveryResultColumns = ({
       columnHelper.display({
         id: "classifications",
         cell: ({ row }) => {
-          return <TaxonomyDisplayAndEdit resource={row.original} />;
+          return <EditCategoriesCell resource={row.original} />;
         },
         meta: { overflow: "visible", disableRowClick: true },
         header: "Data category",
@@ -170,7 +179,9 @@ const useDiscoveryResultColumns = ({
       }),
       columnHelper.display({
         id: "actions",
-        cell: (props) => <DiscoveryItemActions resource={props.row.original} />,
+        cell: (props) => (
+          <DiscoveryItemActionsCell resource={props.row.original} />
+        ),
         header: "Actions",
       }),
     ];

clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx

@@ -23,21 +23,21 @@ import {
 import { RelativeTimestampCell } from "~/features/common/table/v2/cells";
 import { useGetMonitorResultsQuery } from "~/features/data-discovery-and-detection/discovery-detection.slice";
 import IconLegendTooltip from "~/features/data-discovery-and-detection/IndicatorLegend";
-import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/ResultStatusBadgeCell";
-import ResultStatusCell from "~/features/data-discovery-and-detection/tables/ResultStatusCell";
+import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell";
+import ResultStatusCell from "~/features/data-discovery-and-detection/tables/cells/ResultStatusCell";
 import getResourceRowName from "~/features/data-discovery-and-detection/utils/getResourceRowName";
 import {
   DiffStatus,
   StagedResource,
   StagedResourceAPIResponse,
 } from "~/types/api";
 
-import DetectionItemAction from "../DetectionItemActions";
-import DiscoveryItemActions from "../DiscoveryItemActions";
 import { SearchInput } from "../SearchInput";
 import { ResourceActivityTypeEnum } from "../types/ResourceActivityTypeEnum";
 import findProjectFromUrn from "../utils/findProjectFromUrn";
 import findActivityType from "../utils/getResourceActivityLabel";
+import DetectionItemActionsCell from "./cells/DetectionItemActionsCell";
+import DiscoveryItemActionsCell from "./cells/DiscoveryItemActionsCell";
 
 const EMPTY_RESPONSE = {
   items: [],
@@ -157,9 +157,9 @@ const ActivityTable = ({
         cell: (props) =>
           findActivityType(props.getValue()) ===
           ResourceActivityTypeEnum.DATASET ? (
-            <DetectionItemAction resource={props.getValue()} />
+            <DetectionItemActionsCell resource={props.getValue()} />
           ) : (
-            <DiscoveryItemActions resource={props.getValue()} />
+            <DiscoveryItemActionsCell resource={props.getValue()} />
           ),
         header: (props) => <DefaultHeaderCell value="Action" {...props} />,
       }),

clients/admin-ui/src/features/data-discovery-and-detection/DetectionItemActions.tsx → clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DetectionItemActionsCell.tsx

@@ -3,22 +3,22 @@ import { CheckIcon, HStack, ViewIcon, ViewOffIcon } from "fidesui";
 import { useAlert } from "~/features/common/hooks";
 import { DiffStatus, StagedResource } from "~/types/api";
 
-import { MonitorOffIcon } from "../common/Icon/MonitorOffIcon";
-import { MonitorOnIcon } from "../common/Icon/MonitorOnIcon";
-import ActionButton from "./ActionButton";
+import { MonitorOffIcon } from "../../../common/Icon/MonitorOffIcon";
+import { MonitorOnIcon } from "../../../common/Icon/MonitorOnIcon";
+import ActionButton from "../../ActionButton";
 import {
   useConfirmResourceMutation,
   useMuteResourceMutation,
   useUnmuteResourceMutation,
-} from "./discovery-detection.slice";
-import { StagedResourceType } from "./types/StagedResourceType";
-import { findResourceType } from "./utils/findResourceType";
+} from "../../discovery-detection.slice";
+import { StagedResourceType } from "../../types/StagedResourceType";
+import { findResourceType } from "../../utils/findResourceType";
 
 interface DetectionItemActionProps {
   resource: StagedResource;
 }
 
-const DetectionItemAction = ({ resource }: DetectionItemActionProps) => {
+const DetectionItemActionsCell = ({ resource }: DetectionItemActionProps) => {
   const resourceType = findResourceType(resource);
   const [confirmResourceMutation, { isLoading: confirmIsLoading }] =
     useConfirmResourceMutation();
@@ -127,4 +127,4 @@ const DetectionItemAction = ({ resource }: DetectionItemActionProps) => {
   );
 };
 
-export default DetectionItemAction;
+export default DetectionItemActionsCell;

clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryItemActions.tsx → clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx

@@ -4,17 +4,17 @@ import { useAlert } from "~/features/common/hooks";
 import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
 import { DiffStatus } from "~/types/api";
 
-import ActionButton from "./ActionButton";
+import ActionButton from "../../ActionButton";
 import {
   useMuteResourceMutation,
   usePromoteResourceMutation,
-} from "./discovery-detection.slice";
+} from "../../discovery-detection.slice";
 
 interface DiscoveryItemActionsProps {
   resource: DiscoveryMonitorItem;
 }
 
-const DiscoveryItemActions = ({ resource }: DiscoveryItemActionsProps) => {
+const DiscoveryItemActionsCell = ({ resource }: DiscoveryItemActionsProps) => {
   const [promoteResourceMutation, { isLoading: promoteIsLoading }] =
     usePromoteResourceMutation();
   const [muteResourceMutation, { isLoading: muteIsLoading }] =
@@ -89,4 +89,4 @@ const DiscoveryItemActions = ({ resource }: DiscoveryItemActionsProps) => {
   );
 };
 
-export default DiscoveryItemActions;
+export default DiscoveryItemActionsCell;

clients/admin-ui/src/features/data-discovery-and-detection/TaxonomyDisplayAndEdit.tsx → clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx

@@ -16,9 +16,9 @@ import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/ty
 
 import TaxonomySelectDropdown, {
   TaxonomySelectOption,
-} from "../common/dropdown/TaxonomySelectDropdown";
-import { useOutsideClick } from "../common/hooks";
-import { useUpdateResourceCategoryMutation } from "./discovery-detection.slice";
+} from "../../../common/dropdown/TaxonomySelectDropdown";
+import { useOutsideClick } from "../../../common/hooks";
+import { useUpdateResourceCategoryMutation } from "../../discovery-detection.slice";
 
 const AddCategoryButton = (props: ButtonProps) => (
   <IconButton
@@ -34,11 +34,11 @@ const AddCategoryButton = (props: ButtonProps) => (
   />
 );
 
-interface TaxonomyDisplayAndEditProps {
+interface EditCategoryCellProps {
   resource: DiscoveryMonitorItem;
 }
 
-const TaxonomyDisplayAndEdit = ({ resource }: TaxonomyDisplayAndEditProps) => {
+const EditCategoriesCell = ({ resource }: EditCategoryCellProps) => {
   const [isAdding, setIsAdding] = useState(false);
   const { getDataCategoryDisplayName } = useTaxonomies();
   const [updateResourceCategoryMutation] = useUpdateResourceCategoryMutation();
@@ -154,4 +154,4 @@ const TaxonomyDisplayAndEdit = ({ resource }: TaxonomyDisplayAndEditProps) => {
     </Wrap>
   );
 };
-export default TaxonomyDisplayAndEdit;
+export default EditCategoriesCell;

clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/FieldDataTypeCell.tsx

@@ -0,0 +1,13 @@
+import { Badge, Flex } from "fidesui";
+
+const FieldDataTypeCell = ({ type }: { type?: string | null }) => (
+  <Flex align="center" h="full">
+    {!!type && (
+      <Badge fontSize="xs" fontWeight="normal">
+        {type}
+      </Badge>
+    )}
+  </Flex>
+);
+
+export default FieldDataTypeCell;