From cc24c565881f3cbc4eec3952e3446ae39ed0af23 Mon Sep 17 00:00:00 2001 From: jpople Date: Thu, 6 Feb 2025 22:00:26 -0600 Subject: [PATCH] Data catalog item detail trays (#5729) --- CHANGELOG.md | 1 + .../admin-ui/cypress/e2e/data-catalog.cy.ts | 70 ++++++++++++++++--- .../fixtures/data-catalog/catalog-tables.json | 3 +- .../src/features/common/copy/components.tsx | 8 ++- .../CatalogResourceActionsCell.tsx | 37 +++------- .../data-catalog/CatalogStatusBadgeCell.tsx | 1 + .../datasets/CatalogDatasetDetailDrawer.tsx | 39 +++++++++++ .../datasets/useCatalogDatasetColumns.tsx | 55 ++++++++++++++- .../projects/CatalogProjectsTable.tsx | 22 ++++++ .../CatalogResourceDetailDrawer.tsx | 62 ++++++++++++++++ .../CatalogResourceOverflowMenu.tsx | 42 +++++++++++ .../CatalogResourcesTable.tsx | 11 ++- .../systems/CatalogSystemDetailDrawer.tsx | 53 ++++++++++++++ .../systems/CatalogSystemsTable.tsx | 29 +++++++- .../useCatalogResourceColumns.tsx | 15 +++- .../src/features/data-catalog/utils.ts | 6 +- .../tables/cells/EditCategoryCell.tsx | 2 +- .../projects/[projectUrn]/index.tsx | 15 +++- .../[systemId]/resources/index.tsx | 15 +++- 19 files changed, 429 insertions(+), 57 deletions(-) create mode 100644 clients/admin-ui/src/features/data-catalog/datasets/CatalogDatasetDetailDrawer.tsx create mode 100644 clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceDetailDrawer.tsx create mode 100644 clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceOverflowMenu.tsx create mode 100644 clients/admin-ui/src/features/data-catalog/systems/CatalogSystemDetailDrawer.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index b447a84762..4959d664fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o ### Added - Added a read-only consent category cell to Action Center aggregate system results table [#5737](https://github.com/ethyca/fides/pull/5737) +- Added detail trays to items in data catalog view [#5729](https://github.com/ethyca/fides/pull/5729) ### Changed - Added frequency field to DataHubSchema integration config [#5716](https://github.com/ethyca/fides/pull/5716) diff --git a/clients/admin-ui/cypress/e2e/data-catalog.cy.ts b/clients/admin-ui/cypress/e2e/data-catalog.cy.ts index 25e9799953..fc5e30c740 100644 --- a/clients/admin-ui/cypress/e2e/data-catalog.cy.ts +++ b/clients/admin-ui/cypress/e2e/data-catalog.cy.ts @@ -29,15 +29,6 @@ describe("data catalog", () => { "BigQuery System", ); }); - - it("should be able to navigate to system details via the overflow menu", () => { - cy.getByTestId("row-bigquery_system").within(() => { - cy.getByTestId("system-actions-menu").click(); - cy.getByTestId("view-system-details").click({ force: true }); - cy.url().should("include", "/systems/configure/bigquery_system"); - }); - }); - it("should be able to add a data use", () => { cy.getByTestId("row-bigquery_system-col-data-uses").within(() => { cy.getByTestId("taxonomy-add-btn").click(); @@ -59,6 +50,29 @@ describe("data catalog", () => { cy.wait("@getEmptyAvailableDatabases"); cy.url().should("not.include", "/projects"); }); + + describe("system detail drawer", () => { + it("should be able to navigate to system details via the detail drawer", () => { + cy.getByTestId("row-bigquery_system").within(() => { + cy.getByTestId("system-actions-menu").click(); + cy.getByTestId("view-system-details").click({ force: true }); + }); + cy.getByTestId("system-details").should("be.visible"); + cy.getByTestId("edit-system-btn").click(); + cy.url().should("include", "/systems/configure/bigquery_system"); + }); + + it("should be able to add data uses via the detail drawer", () => { + cy.getByTestId("row-bigquery_system").within(() => { + cy.getByTestId("system-actions-menu").click(); + cy.getByTestId("view-system-details").click({ force: true }); + }); + cy.getByTestId("system-details").within(() => { + cy.getByTestId("taxonomy-add-btn").click(); + cy.get(".select-wrapper").should("be.visible"); + }); + }); + }); }); describe("projects table", () => { @@ -91,6 +105,16 @@ describe("data catalog", () => { "/projects/bigquery_monitor.prj-bigquery-111111", ); }); + + it("should be able to view details in the drawer", () => { + cy.getByTestId( + "row-bigquery_monitor.prj-bigquery-111111-col-actions", + ).within(() => { + cy.getByTestId("actions-menu").click(); + cy.getByTestId("view-resource-details").click({ force: true }); + }); + cy.getByTestId("resource-details").should("be.visible"); + }); }); describe("resource tables", () => { @@ -117,8 +141,8 @@ describe("data catalog", () => { ); cy.getByTestId("row-monitor.project.dataset.table_2-col-actions").within( () => { - cy.getByTestId("resource-actions-menu").click(); - cy.getByTestId("hide-action").click({ force: true }); + cy.getByTestId("actions-menu").click(); + cy.getByTestId("hide-resource").click({ force: true }); cy.wait("@ignoreResource"); }, ); @@ -129,5 +153,29 @@ describe("data catalog", () => { }, ); }); + + describe("resource detail drawer", () => { + it("should be able to view resource details", () => { + cy.getByTestId("row-monitor.project.dataset.table_1").within(() => { + cy.getByTestId("actions-menu").click(); + cy.getByTestId("view-resource-details").click({ force: true }); + }); + cy.getByTestId("resource-details") + .should("be.visible") + .within(() => { + // don't edit categories unless resource has the right status + cy.getByTestId("edit-category-cell").should("not.exist"); + }); + }); + it("should be able to edit data categories where applicable", () => { + cy.getByTestId("row-monitor.project.dataset.table_3").within(() => { + cy.getByTestId("actions-menu").click(); + cy.getByTestId("view-resource-details").click({ force: true }); + }); + cy.getByTestId("resource-details").within(() => { + cy.getByTestId("user-classification-system").should("exist"); + }); + }); + }); }); }); diff --git a/clients/admin-ui/cypress/fixtures/data-catalog/catalog-tables.json b/clients/admin-ui/cypress/fixtures/data-catalog/catalog-tables.json index 56ff2e1f2f..bd7f7e694b 100644 --- a/clients/admin-ui/cypress/fixtures/data-catalog/catalog-tables.json +++ b/clients/admin-ui/cypress/fixtures/data-catalog/catalog-tables.json @@ -13,7 +13,8 @@ { "urn": "monitor.project.dataset.table_3", "name": "table_3", - "diff_status": "classification_addition" + "diff_status": "classification_addition", + "user_assigned_data_categories": ["system"] }, { "urn": "monitor.project.dataset.table_4", diff --git a/clients/admin-ui/src/features/common/copy/components.tsx b/clients/admin-ui/src/features/common/copy/components.tsx index d017d086a1..5623e5e6bc 100644 --- a/clients/admin-ui/src/features/common/copy/components.tsx +++ b/clients/admin-ui/src/features/common/copy/components.tsx @@ -1,6 +1,7 @@ import { Code, Heading, + HeadingProps, Link, OrderedList, Table, @@ -15,8 +16,11 @@ import { } from "fidesui"; import { ReactNode } from "react"; -export const InfoHeading = ({ text }: { text: string }) => ( - +export const InfoHeading = ({ + text, + ...props +}: { text: string } & HeadingProps) => ( + {text} ); diff --git a/clients/admin-ui/src/features/data-catalog/CatalogResourceActionsCell.tsx b/clients/admin-ui/src/features/data-catalog/CatalogResourceActionsCell.tsx index 982bf07835..70e602f9ff 100644 --- a/clients/admin-ui/src/features/data-catalog/CatalogResourceActionsCell.tsx +++ b/clients/admin-ui/src/features/data-catalog/CatalogResourceActionsCell.tsx @@ -1,15 +1,7 @@ -import { - AntButton, - AntButton as Button, - Flex, - Menu, - MenuButton, - MenuItem, - MenuList, - MoreIcon, -} from "fidesui"; +import { AntButton as Button, Flex, Spacer } from "fidesui"; import { useAlert } from "~/features/common/hooks"; +import CatalogResourceOverflowMenu from "~/features/data-catalog/staged-resources/CatalogResourceOverflowMenu"; import { CatalogResourceStatus, getCatalogResourceStatus, @@ -23,8 +15,10 @@ import { StagedResourceAPIResponse } from "~/types/api"; const CatalogResourceActionsCell = ({ resource, + onDetailClick, }: { resource: StagedResourceAPIResponse; + onDetailClick?: () => void; }) => { const { successAlert } = useAlert(); const status = getCatalogResourceStatus(resource); @@ -88,24 +82,11 @@ const CatalogResourceActionsCell = ({ Approve )} - - } - data-testid="resource-actions-menu" - /> - - - Hide - - - + + ); }; diff --git a/clients/admin-ui/src/features/data-catalog/CatalogStatusBadgeCell.tsx b/clients/admin-ui/src/features/data-catalog/CatalogStatusBadgeCell.tsx index ef1cfb4b32..abbeda845d 100644 --- a/clients/admin-ui/src/features/data-catalog/CatalogStatusBadgeCell.tsx +++ b/clients/admin-ui/src/features/data-catalog/CatalogStatusBadgeCell.tsx @@ -6,6 +6,7 @@ const STATUS_COLOR_MAP: Record = { [CatalogResourceStatus.APPROVED]: "green", [CatalogResourceStatus.IN_REVIEW]: "yellow", [CatalogResourceStatus.CLASSIFYING]: "blue", + [CatalogResourceStatus.NONE]: "gray", }; const CatalogStatusBadgeCell = ({ diff --git a/clients/admin-ui/src/features/data-catalog/datasets/CatalogDatasetDetailDrawer.tsx b/clients/admin-ui/src/features/data-catalog/datasets/CatalogDatasetDetailDrawer.tsx new file mode 100644 index 0000000000..4c5fc512c8 --- /dev/null +++ b/clients/admin-ui/src/features/data-catalog/datasets/CatalogDatasetDetailDrawer.tsx @@ -0,0 +1,39 @@ +import { + Drawer, + DrawerBody, + DrawerCloseButton, + DrawerContent, + DrawerHeader, + DrawerOverlay, +} from "fidesui"; + +import { InfoHeading, InfoText } from "~/features/common/copy/components"; +import { StagedResourceAPIResponse } from "~/types/api"; + +const CatalogDatasetDetailDrawer = ({ + dataset, + onClose, +}: { + dataset?: StagedResourceAPIResponse; + onClose: () => void; +}) => ( + + + + {dataset?.name || dataset?.urn} + + + + {dataset?.name ?? dataset?.urn} + {dataset?.description && ( + <> + + {dataset?.description} + + )} + + + +); + +export default CatalogDatasetDetailDrawer; diff --git a/clients/admin-ui/src/features/data-catalog/datasets/useCatalogDatasetColumns.tsx b/clients/admin-ui/src/features/data-catalog/datasets/useCatalogDatasetColumns.tsx index 11ecbc09cd..caf14dc790 100644 --- a/clients/admin-ui/src/features/data-catalog/datasets/useCatalogDatasetColumns.tsx +++ b/clients/admin-ui/src/features/data-catalog/datasets/useCatalogDatasetColumns.tsx @@ -1,6 +1,14 @@ /* eslint-disable react/no-unstable-nested-components */ import { ColumnDef, createColumnHelper } from "@tanstack/react-table"; +import { + AntButton as Button, + Menu, + MenuButton, + MenuItem, + MenuList, + MoreIcon, +} from "fidesui"; import { useMemo } from "react"; import { DefaultCell } from "~/features/common/table/v2"; @@ -12,7 +20,38 @@ import { StagedResourceAPIResponse } from "~/types/api"; const columnHelper = createColumnHelper(); -const useCatalogDatasetColumns = () => { +const CatalogDatasetActionsCell = ({ + onDetailClick, +}: { + onDetailClick?: () => void; +}) => { + return ( + + } + className="w-6 gap-0" + data-testid="dataset-actions" + /> + + + View details + + + + ); +}; + +interface CatalogDatasetColumnsParams { + onDetailClick: (dataset: StagedResourceAPIResponse) => void; +} + +const useCatalogDatasetColumns = ({ + onDetailClick, +}: CatalogDatasetColumnsParams) => { const columns: ColumnDef[] = useMemo( () => [ columnHelper.accessor((row) => row.name, { @@ -41,8 +80,20 @@ const useCatalogDatasetColumns = () => { cell: (props) => , header: "Updated", }), + columnHelper.display({ + id: "actions", + cell: ({ row }) => ( + onDetailClick(row.original)} + /> + ), + size: 25, + meta: { + disableRowClick: true, + }, + }), ], - [], + [onDetailClick], ); return columns; diff --git a/clients/admin-ui/src/features/data-catalog/projects/CatalogProjectsTable.tsx b/clients/admin-ui/src/features/data-catalog/projects/CatalogProjectsTable.tsx index a6e9ebb3cc..350f50061d 100644 --- a/clients/admin-ui/src/features/data-catalog/projects/CatalogProjectsTable.tsx +++ b/clients/admin-ui/src/features/data-catalog/projects/CatalogProjectsTable.tsx @@ -24,6 +24,8 @@ import { RelativeTimestampCell } from "~/features/common/table/v2/cells"; import CatalogResourceNameCell from "~/features/data-catalog/CatalogResourceNameCell"; import CatalogStatusBadgeCell from "~/features/data-catalog/CatalogStatusBadgeCell"; import { useGetCatalogProjectsQuery } from "~/features/data-catalog/data-catalog.slice"; +import CatalogResourceDetailDrawer from "~/features/data-catalog/staged-resources/CatalogResourceDetailDrawer"; +import CatalogResourceOverflowMenu from "~/features/data-catalog/staged-resources/CatalogResourceOverflowMenu"; import { getCatalogResourceStatus } from "~/features/data-catalog/utils"; import { StagedResourceAPIResponse } from "~/types/api"; @@ -103,6 +105,10 @@ const CatalogProjectsTable = ({ setTotalPages(totalPages); }, [totalPages, setTotalPages]); + const [detailResource, setDetailResource] = useState< + StagedResourceAPIResponse | undefined + >(undefined); + const columns: ColumnDef[] = useMemo( () => [ columnHelper.accessor((row) => row.name, { @@ -141,6 +147,18 @@ const CatalogProjectsTable = ({ }, }, }), + columnHelper.display({ + id: "actions", + cell: ({ row }) => ( + setDetailResource(row.original)} + /> + ), + size: 25, + meta: { + disableRowClick: true, + }, + }), ], [], ); @@ -184,6 +202,10 @@ const CatalogProjectsTable = ({ startRange={startRange} endRange={endRange} /> + setDetailResource(undefined)} + /> ); }; diff --git a/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceDetailDrawer.tsx b/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceDetailDrawer.tsx new file mode 100644 index 0000000000..de01c3d09c --- /dev/null +++ b/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceDetailDrawer.tsx @@ -0,0 +1,62 @@ +import { + Drawer, + DrawerBody, + DrawerCloseButton, + DrawerContent, + DrawerHeader, + DrawerOverlay, +} from "fidesui"; + +import { InfoHeading, InfoText } from "~/features/common/copy/components"; +import { + CatalogResourceStatus, + getCatalogResourceStatus, +} from "~/features/data-catalog/utils"; +import EditCategoryCell from "~/features/data-discovery-and-detection/tables/cells/EditCategoryCell"; +import { StagedResourceType } from "~/features/data-discovery-and-detection/types/StagedResourceType"; +import { findResourceType } from "~/features/data-discovery-and-detection/utils/findResourceType"; +import { StagedResourceAPIResponse } from "~/types/api"; + +const CatalogResourceDetailDrawer = ({ + resource, + onClose, +}: { + resource?: StagedResourceAPIResponse; + onClose: () => void; +}) => { + const resourceType = findResourceType(resource); + const status = getCatalogResourceStatus(resource); + + const showDataCategories = + (resourceType === StagedResourceType.FIELD || + resourceType === StagedResourceType.TABLE) && + status === CatalogResourceStatus.IN_REVIEW; + + return ( + + + + {resource?.name || resource?.urn} + + + + {resource?.name ?? resource?.urn} + {resource?.description && ( + <> + + {resource?.description} + + )} + {showDataCategories && ( + <> + + + + )} + + + + ); +}; + +export default CatalogResourceDetailDrawer; diff --git a/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceOverflowMenu.tsx b/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceOverflowMenu.tsx new file mode 100644 index 0000000000..464b8dcdf0 --- /dev/null +++ b/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceOverflowMenu.tsx @@ -0,0 +1,42 @@ +import { + AntButton as Button, + Menu, + MenuButton, + MenuItem, + MenuList, + MoreIcon, +} from "fidesui"; + +const CatalogResourceOverflowMenu = ({ + onHideClick, + onDetailClick, +}: { + onHideClick?: () => void; + onDetailClick?: () => void; +}) => ( + + } + className="w-6 gap-0" + data-testid="actions-menu" + /> + + {onDetailClick && ( + + View details + + )} + {onHideClick && ( + + Hide + + )} + + +); + +export default CatalogResourceOverflowMenu; diff --git a/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourcesTable.tsx b/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourcesTable.tsx index 97d8183beb..b0fca5b3f5 100644 --- a/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourcesTable.tsx +++ b/clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourcesTable.tsx @@ -16,6 +16,7 @@ import { useServerSidePagination, } from "~/features/common/table/v2"; import EmptyCatalogTableNotice from "~/features/data-catalog/datasets/EmptyCatalogTableNotice"; +import CatalogResourceDetailDrawer from "~/features/data-catalog/staged-resources/CatalogResourceDetailDrawer"; import useCatalogResourceColumns from "~/features/data-catalog/useCatalogResourceColumns"; import { useGetMonitorResultsQuery } from "~/features/data-discovery-and-detection/discovery-detection.slice"; import { SearchInput } from "~/features/data-discovery-and-detection/SearchInput"; @@ -95,9 +96,13 @@ const CatalogResourcesTable = ({ setTotalPages(totalPages); }, [totalPages, setTotalPages]); + const [detailResource, setDetailResource] = useState< + StagedResourceAPIResponse | undefined + >(undefined); + const type = findResourceType(data[0] ?? StagedResourceType.NONE); - const columns = useCatalogResourceColumns(type); + const columns = useCatalogResourceColumns(type, setDetailResource); const tableInstance = useReactTable({ getCoreRowModel: getCoreRowModel(), @@ -140,6 +145,10 @@ const CatalogResourcesTable = ({ startRange={startRange} endRange={endRange} /> + setDetailResource(undefined)} + /> ); }; diff --git a/clients/admin-ui/src/features/data-catalog/systems/CatalogSystemDetailDrawer.tsx b/clients/admin-ui/src/features/data-catalog/systems/CatalogSystemDetailDrawer.tsx new file mode 100644 index 0000000000..1dfc25f715 --- /dev/null +++ b/clients/admin-ui/src/features/data-catalog/systems/CatalogSystemDetailDrawer.tsx @@ -0,0 +1,53 @@ +import { + AntButton as Button, + Drawer, + DrawerBody, + DrawerCloseButton, + DrawerContent, + DrawerFooter, + DrawerHeader, + DrawerOverlay, +} from "fidesui"; + +import { InfoHeading, InfoText } from "~/features/common/copy/components"; +import EditDataUseCell from "~/features/data-catalog/systems/EditDataUseCell"; +import { SystemResponse, SystemWithMonitorKeys } from "~/types/api"; + +const CatalogSystemDetailDrawer = ({ + system, + onEdit, + onClose, +}: { + system?: SystemWithMonitorKeys; + onEdit: () => void; + onClose: () => void; +}) => { + return ( + + + + {system?.name || system?.fides_key} + + + + {system?.name ?? system?.fides_key} + {system?.description && ( + <> + + {system?.description} + + )} + + + + + + + + + ); +}; + +export default CatalogSystemDetailDrawer; diff --git a/clients/admin-ui/src/features/data-catalog/systems/CatalogSystemsTable.tsx b/clients/admin-ui/src/features/data-catalog/systems/CatalogSystemsTable.tsx index dceec5658c..6a0392c28c 100644 --- a/clients/admin-ui/src/features/data-catalog/systems/CatalogSystemsTable.tsx +++ b/clients/admin-ui/src/features/data-catalog/systems/CatalogSystemsTable.tsx @@ -12,7 +12,10 @@ import { import { useRouter } from "next/router"; import { useEffect, useMemo, useState } from "react"; -import { DATA_CATALOG_ROUTE } from "~/features/common/nav/v2/routes"; +import { + DATA_CATALOG_ROUTE, + EDIT_SYSTEM_ROUTE, +} from "~/features/common/nav/v2/routes"; import { DefaultCell, DefaultHeaderCell, @@ -24,6 +27,7 @@ import { import { getQueryParamsFromArray } from "~/features/common/utils"; import { useGetCatalogSystemsQuery } from "~/features/data-catalog/data-catalog.slice"; import EmptyCatalogTableNotice from "~/features/data-catalog/datasets/EmptyCatalogTableNotice"; +import CatalogSystemDetailDrawer from "~/features/data-catalog/systems/CatalogSystemDetailDrawer"; import EditDataUseCell from "~/features/data-catalog/systems/EditDataUseCell"; import SystemActionsCell from "~/features/data-catalog/systems/SystemActionCell"; import { useLazyGetAvailableDatabasesByConnectionQuery } from "~/features/data-discovery-and-detection/discovery-detection.slice"; @@ -78,6 +82,15 @@ const CatalogSystemsTable = () => { setTotalPages(totalPages); }, [totalPages, setTotalPages]); + const [detailSystemKey, setDetailSystemKey] = useState( + undefined, + ); + + // force a re-render when the table fetches again (e.g. on data use updates) + const detailsToView = useMemo(() => { + return data.find((s) => s.fides_key === detailSystemKey); + }, [data, detailSystemKey]); + const handleRowClicked = async (row: SystemWithMonitorKeys) => { // if there are projects, go to project view; otherwise go to datasets view const projectsResponse = await getProjects({ @@ -124,7 +137,7 @@ const CatalogSystemsTable = () => { cell: (props) => ( - router.push(`/systems/configure/${props.row.original.fides_key}`) + setDetailSystemKey(props.row.original.fides_key) } /> ), @@ -138,7 +151,7 @@ const CatalogSystemsTable = () => { }, }), ], - [router], + [], ); const tableInstance = useReactTable({ @@ -179,6 +192,16 @@ const CatalogSystemsTable = () => { startRange={startRange} endRange={endRange} /> + setDetailSystemKey(undefined)} + onEdit={() => + router.push({ + pathname: EDIT_SYSTEM_ROUTE, + query: { id: detailSystemKey }, + }) + } + /> ); }; diff --git a/clients/admin-ui/src/features/data-catalog/useCatalogResourceColumns.tsx b/clients/admin-ui/src/features/data-catalog/useCatalogResourceColumns.tsx index 417485e0c4..b077f8b44a 100644 --- a/clients/admin-ui/src/features/data-catalog/useCatalogResourceColumns.tsx +++ b/clients/admin-ui/src/features/data-catalog/useCatalogResourceColumns.tsx @@ -13,7 +13,10 @@ import { StagedResourceAPIResponse } from "~/types/api"; const columnHelper = createColumnHelper(); -const useCatalogResourceColumns = (type: StagedResourceType) => { +const useCatalogResourceColumns = ( + type: StagedResourceType, + onDetailClick: (resource: StagedResourceAPIResponse) => void, +) => { const defaultColumns: ColumnDef[] = []; if (!type) { @@ -58,7 +61,10 @@ const useCatalogResourceColumns = (type: StagedResourceType) => { columnHelper.display({ id: "actions", cell: ({ row }) => ( - + onDetailClick(row.original)} + /> ), header: "Actions", meta: { @@ -112,7 +118,10 @@ const useCatalogResourceColumns = (type: StagedResourceType) => { columnHelper.display({ id: "actions", cell: ({ row }) => ( - + onDetailClick(row.original)} + /> ), header: "Actions", meta: { diff --git a/clients/admin-ui/src/features/data-catalog/utils.ts b/clients/admin-ui/src/features/data-catalog/utils.ts index f1b2b3fcf5..619cab21b2 100644 --- a/clients/admin-ui/src/features/data-catalog/utils.ts +++ b/clients/admin-ui/src/features/data-catalog/utils.ts @@ -5,11 +5,15 @@ export enum CatalogResourceStatus { IN_REVIEW = "In review", APPROVED = "Approved", CLASSIFYING = "Classifying", + NONE = "None", } export const getCatalogResourceStatus = ( - resource: StagedResourceAPIResponse, + resource: StagedResourceAPIResponse | undefined, ) => { + if (!resource) { + return CatalogResourceStatus.APPROVED; + } const resourceSchemaChanged = resource.diff_status === DiffStatus.ADDITION || resource.diff_status === DiffStatus.REMOVAL; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx index 45d08ff0a4..b8f973f26b 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx @@ -64,7 +64,7 @@ const EditCategoryCell = ({ resource }: EditCategoryCellProps) => { !isAdding && !!bestClassifiedCategory && !userCategories.length; return ( - + {noCategories && ( <> None diff --git a/clients/admin-ui/src/pages/data-catalog/[systemId]/projects/[projectUrn]/index.tsx b/clients/admin-ui/src/pages/data-catalog/[systemId]/projects/[projectUrn]/index.tsx index 32f7b95ce2..c0ecf6d623 100644 --- a/clients/admin-ui/src/pages/data-catalog/[systemId]/projects/[projectUrn]/index.tsx +++ b/clients/admin-ui/src/pages/data-catalog/[systemId]/projects/[projectUrn]/index.tsx @@ -6,7 +6,7 @@ import { } from "@tanstack/react-table"; import { Icons } from "fidesui"; import { useRouter } from "next/router"; -import { useEffect, useMemo } from "react"; +import { useEffect, useMemo, useState } from "react"; import Layout from "~/features/common/Layout"; import { DATA_CATALOG_ROUTE } from "~/features/common/nav/v2/routes"; @@ -17,6 +17,7 @@ import { TableSkeletonLoader, useServerSidePagination, } from "~/features/common/table/v2"; +import CatalogDatasetDetailDrawer from "~/features/data-catalog/datasets/CatalogDatasetDetailDrawer"; import EmptyCatalogTableNotice from "~/features/data-catalog/datasets/EmptyCatalogTableNotice"; import useCatalogDatasetColumns from "~/features/data-catalog/datasets/useCatalogDatasetColumns"; import { getProjectName } from "~/features/data-catalog/utils/urnParsing"; @@ -37,6 +38,10 @@ const CatalogDatasetView = () => { const systemKey = query.systemId as string; const projectUrn = query.projectUrn as string; + const [detailsToView, setDetailsToView] = useState< + StagedResourceAPIResponse | undefined + >(undefined); + const { data: system, isLoading: systemIsLoading } = useGetSystemByFidesKeyQuery(systemKey); @@ -74,7 +79,9 @@ const CatalogDatasetView = () => { setTotalPages(totalPages); }, [totalPages, setTotalPages]); - const columns = useCatalogDatasetColumns(); + const columns = useCatalogDatasetColumns({ + onDetailClick: (dataset) => setDetailsToView(dataset), + }); const tableInstance = useReactTable({ getCoreRowModel: getCoreRowModel(), @@ -124,6 +131,10 @@ const CatalogDatasetView = () => { startRange={startRange} endRange={endRange} /> + setDetailsToView(undefined)} + /> )} diff --git a/clients/admin-ui/src/pages/data-catalog/[systemId]/resources/index.tsx b/clients/admin-ui/src/pages/data-catalog/[systemId]/resources/index.tsx index 54cb63015a..bbcc50a3be 100644 --- a/clients/admin-ui/src/pages/data-catalog/[systemId]/resources/index.tsx +++ b/clients/admin-ui/src/pages/data-catalog/[systemId]/resources/index.tsx @@ -5,7 +5,7 @@ import { useReactTable, } from "@tanstack/react-table"; import { useRouter } from "next/router"; -import { useEffect, useMemo } from "react"; +import { useEffect, useMemo, useState } from "react"; import Layout from "~/features/common/Layout"; import { DATA_CATALOG_ROUTE } from "~/features/common/nav/v2/routes"; @@ -17,6 +17,7 @@ import { useServerSidePagination, } from "~/features/common/table/v2"; import { useGetCatalogDatasetsQuery } from "~/features/data-catalog/data-catalog.slice"; +import CatalogDatasetDetailDrawer from "~/features/data-catalog/datasets/CatalogDatasetDetailDrawer"; import EmptyCatalogTableNotice from "~/features/data-catalog/datasets/EmptyCatalogTableNotice"; import useCatalogDatasetColumns from "~/features/data-catalog/datasets/useCatalogDatasetColumns"; import { useGetSystemByFidesKeyQuery } from "~/features/system"; @@ -72,7 +73,13 @@ const CatalogDatasetViewNoProjects = () => { setTotalPages(totalPages); }, [totalPages, setTotalPages]); - const columns = useCatalogDatasetColumns(); + const [detailsToView, setDetailsToView] = useState< + StagedResourceAPIResponse | undefined + >(undefined); + + const columns = useCatalogDatasetColumns({ + onDetailClick: (dataset) => setDetailsToView(dataset), + }); const tableInstance = useReactTable({ getCoreRowModel: getCoreRowModel(), @@ -118,6 +125,10 @@ const CatalogDatasetViewNoProjects = () => { startRange={startRange} endRange={endRange} /> + setDetailsToView(undefined)} + /> )}