Data catalog item detail trays (#5729)

ethyca · Feb 7, 2025 · cc24c56 · cc24c56
1 parent 8463e1a
commit cc24c56
Show file tree

Hide file tree

Showing 19 changed files with 429 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }) => (
-  <Heading fontSize="sm" mt={4} mb={1}>
+export const InfoHeading = ({
+  text,
+  ...props
+}: { text: string } & HeadingProps) => (
+  <Heading fontSize="sm" mt={4} mb={1} {...props}>
     {text}
   </Heading>
 );

diff --git 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
         </Button>
       )}
-      <Menu>
-        <MenuButton
-          as={AntButton}
-          size="small"
-          // Chakra is expecting the Chakra "type" prop, i.e. HTML type,
-          // but Ant buttons use "type" for styling
-          // @ts-ignore
-          type="text"
-          className="max-w-4"
-          icon={<MoreIcon transform="rotate(90deg)" ml={2} />}
-          data-testid="resource-actions-menu"
-        />
-        <MenuList>
-          <MenuItem onClick={hideResource} data-testid="hide-action">
-            Hide
-          </MenuItem>
-        </MenuList>
-      </Menu>
+      <Spacer />
+      <CatalogResourceOverflowMenu
+        onHideClick={hideResource}
+        onDetailClick={onDetailClick}
+      />
     </Flex>
   );
 };

diff --git 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, string> = {
   [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
@@ -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;
+}) => (
+  <Drawer isOpen={!!dataset} onClose={onClose} size="md">
+    <DrawerOverlay />
+    <DrawerContent>
+      <DrawerHeader>{dataset?.name || dataset?.urn}</DrawerHeader>
+      <DrawerCloseButton />
+      <DrawerBody>
+        <InfoHeading text="Title" mt={0} />
+        <InfoText>{dataset?.name ?? dataset?.urn}</InfoText>
+        {dataset?.description && (
+          <>
+            <InfoHeading text="Description" />
+            <InfoText>{dataset?.description}</InfoText>
+          </>
+        )}
+      </DrawerBody>
+    </DrawerContent>
+  </Drawer>
+);
+
+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
@@ -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<StagedResourceAPIResponse>();
 
-const useCatalogDatasetColumns = () => {
+const CatalogDatasetActionsCell = ({
+  onDetailClick,
+}: {
+  onDetailClick?: () => void;
+}) => {
+  return (
+    <Menu>
+      <MenuButton
+        as={Button}
+        size="small"
+        // @ts-ignore: Ant type, not Chakra type
+        type="text"
+        icon={<MoreIcon transform="rotate(90deg)" />}
+        className="w-6 gap-0"
+        data-testid="dataset-actions"
+      />
+      <MenuList>
+        <MenuItem data-testid="view-dataset-details" onClick={onDetailClick}>
+          View details
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+interface CatalogDatasetColumnsParams {
+  onDetailClick: (dataset: StagedResourceAPIResponse) => void;
+}
+
+const useCatalogDatasetColumns = ({
+  onDetailClick,
+}: CatalogDatasetColumnsParams) => {
   const columns: ColumnDef<StagedResourceAPIResponse, any>[] = useMemo(
     () => [
       columnHelper.accessor((row) => row.name, {
@@ -41,8 +80,20 @@ const useCatalogDatasetColumns = () => {
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: "Updated",
       }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => (
+          <CatalogDatasetActionsCell
+            onDetailClick={() => 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
@@ -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<StagedResourceAPIResponse, any>[] = useMemo(
     () => [
       columnHelper.accessor((row) => row.name, {
@@ -141,6 +147,18 @@ const CatalogProjectsTable = ({
           },
         },
       }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => (
+          <CatalogResourceOverflowMenu
+            onDetailClick={() => setDetailResource(row.original)}
+          />
+        ),
+        size: 25,
+        meta: {
+          disableRowClick: true,
+        },
+      }),
     ],
     [],
   );
@@ -184,6 +202,10 @@ const CatalogProjectsTable = ({
         startRange={startRange}
         endRange={endRange}
       />
+      <CatalogResourceDetailDrawer
+        resource={detailResource}
+        onClose={() => setDetailResource(undefined)}
+      />
     </>
   );
 };