From 8333be1e266d83062d78aa998ad63ff88a482022 Mon Sep 17 00:00:00 2001 From: jpople Date: Wed, 21 Aug 2024 11:13:31 -0500 Subject: [PATCH] Add "data type" column to D&D tables (#5218) --- CHANGELOG.md | 1 + .../hooks/useDetectionResultColumns.tsx | 34 +++++++++++------ .../hooks/useDiscoveryResultColumns.tsx | 37 ++++++++++++------- .../tables/ActivityTable.tsx | 12 +++--- .../cells/DetectionItemActionsCell.tsx} | 16 ++++---- .../cells/DiscoveryItemActionsCell.tsx} | 8 ++-- .../cells/EditCategoryCell.tsx} | 12 +++--- .../tables/cells/FieldDataTypeCell.tsx | 13 +++++++ .../{ => cells}/ResultStatusBadgeCell.tsx | 0 .../tables/{ => cells}/ResultStatusCell.tsx | 0 10 files changed, 85 insertions(+), 48 deletions(-) rename clients/admin-ui/src/features/data-discovery-and-detection/{DetectionItemActions.tsx => tables/cells/DetectionItemActionsCell.tsx} (89%) rename clients/admin-ui/src/features/data-discovery-and-detection/{DiscoveryItemActions.tsx => tables/cells/DiscoveryItemActionsCell.tsx} (92%) rename clients/admin-ui/src/features/data-discovery-and-detection/{TaxonomyDisplayAndEdit.tsx => tables/cells/EditCategoryCell.tsx} (92%) create mode 100644 clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/FieldDataTypeCell.tsx rename clients/admin-ui/src/features/data-discovery-and-detection/tables/{ => cells}/ResultStatusBadgeCell.tsx (100%) rename clients/admin-ui/src/features/data-discovery-and-detection/tables/{ => cells}/ResultStatusCell.tsx (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index e0ee27b3b2..9dc53acfe6 100644 --- a/CHANGELOG.md +++ b/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) 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 901bee74bc..fda31fd7c1 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 @@ -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(); + const columnHelper = createColumnHelper(); - const defaultColumns: ColumnDef[] = []; + const defaultColumns: ColumnDef[] = []; if (!resourceType) { return { columns: defaultColumns }; @@ -59,7 +60,9 @@ const useDetectionResultColumns = ({ }), columnHelper.display({ id: "actions", - cell: (props) => , + cell: (props) => ( + + ), header: "Actions", }), ]; @@ -75,7 +78,7 @@ const useDetectionResultColumns = ({ }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => , header: (props) => , }), columnHelper.display({ @@ -95,7 +98,9 @@ const useDetectionResultColumns = ({ }), columnHelper.display({ id: "actions", - cell: (props) => , + cell: (props) => ( + + ), header: "Actions", }), ]; @@ -109,9 +114,14 @@ const useDetectionResultColumns = ({ cell: (props) => , header: (props) => , }), + columnHelper.accessor((row) => row.source_data_type, { + id: "data-type", + cell: (props) => , + header: (props) => , + }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => , header: (props) => , }), columnHelper.display({ @@ -131,7 +141,9 @@ const useDetectionResultColumns = ({ }), columnHelper.display({ id: "actions", - cell: (props) => , + cell: (props) => ( + + ), header: "Actions", }), ]; 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 ec2472f811..7be2426bf3 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 @@ -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(); + const columnHelper = createColumnHelper(); - const defaultColumns: ColumnDef[] = []; + const defaultColumns: ColumnDef[] = []; if (resourceType === StagedResourceType.SCHEMA) { const columns = [ @@ -67,7 +69,7 @@ const useDiscoveryResultColumns = ({ id: "action", cell: (props) => props.row.original.diff_status !== DiffStatus.MUTED ? ( - + ) : ( ), @@ -105,7 +107,7 @@ const useDiscoveryResultColumns = ({ }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => , header: (props) => , }), columnHelper.display({ @@ -125,7 +127,9 @@ const useDiscoveryResultColumns = ({ }), columnHelper.display({ id: "actions", - cell: (props) => , + cell: (props) => ( + + ), header: "Actions", }), ]; @@ -139,9 +143,14 @@ const useDiscoveryResultColumns = ({ cell: (props) => , header: (props) => , }), + columnHelper.accessor((row) => row.source_data_type, { + id: "data-type", + cell: (props) => , + header: (props) => , + }), columnHelper.accessor((row) => row.description, { id: "description", - cell: (props) => , + cell: (props) => , header: (props) => , }), columnHelper.display({ @@ -157,7 +166,7 @@ const useDiscoveryResultColumns = ({ columnHelper.display({ id: "classifications", cell: ({ row }) => { - return ; + return ; }, meta: { overflow: "visible", disableRowClick: true }, header: "Data category", @@ -170,7 +179,9 @@ const useDiscoveryResultColumns = ({ }), columnHelper.display({ id: "actions", - cell: (props) => , + cell: (props) => ( + + ), header: "Actions", }), ]; 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 a7660fac06..08d4bf9ba1 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 @@ -23,8 +23,8 @@ 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, @@ -32,12 +32,12 @@ import { 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 ? ( - + ) : ( - + ), header: (props) => , }), diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/DetectionItemActions.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DetectionItemActionsCell.tsx similarity index 89% rename from clients/admin-ui/src/features/data-discovery-and-detection/DetectionItemActions.tsx rename to clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DetectionItemActionsCell.tsx index 3e6423f2f4..2f3841b266 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/DetectionItemActions.tsx +++ b/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; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryItemActions.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx similarity index 92% rename from clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryItemActions.tsx rename to clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx index e76e753708..8c18fe00f4 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryItemActions.tsx +++ b/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; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/TaxonomyDisplayAndEdit.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx similarity index 92% rename from clients/admin-ui/src/features/data-discovery-and-detection/TaxonomyDisplayAndEdit.tsx rename to clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx index 3330696559..f6e922172a 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/TaxonomyDisplayAndEdit.tsx +++ b/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) => ( ( /> ); -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) => { ); }; -export default TaxonomyDisplayAndEdit; +export default EditCategoriesCell; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/FieldDataTypeCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/FieldDataTypeCell.tsx new file mode 100644 index 0000000000..66f7810a53 --- /dev/null +++ b/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 }) => ( + + {!!type && ( + + {type} + + )} + +); + +export default FieldDataTypeCell; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/ResultStatusBadgeCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell.tsx similarity index 100% rename from clients/admin-ui/src/features/data-discovery-and-detection/tables/ResultStatusBadgeCell.tsx rename to clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusBadgeCell.tsx diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/ResultStatusCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusCell.tsx similarity index 100% rename from clients/admin-ui/src/features/data-discovery-and-detection/tables/ResultStatusCell.tsx rename to clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/ResultStatusCell.tsx