From 3c760e50659d6ceab669cc7ac4ceb338c2b5daa3 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Tue, 15 Oct 2024 14:58:36 -0600
Subject: [PATCH] FIX: separate urn with non-nested-pattern for now (#5383)

Co-authored-by: Lucano Vera <lucanovera@ethyca.com>
---
 CHANGELOG.md                                  |  1 +
 .../src/features/common/Breadcrumbs.tsx       |  4 +
 .../features/dataset/EditCollectionDrawer.tsx | 15 ++--
 .../src/features/dataset/EditFieldDrawer.tsx  |  5 +-
 .../src/features/dataset/constants.ts         |  2 +
 .../admin-ui/src/features/dataset/helpers.ts  |  4 +-
 .../[collectionName]/[subfieldUrn].tsx        | 82 ++++++++++---------
 .../[datasetId]/[collectionName]/index.tsx    | 45 +++++-----
 .../src/pages/dataset/[datasetId]/index.tsx   | 42 +++++-----
 9 files changed, 114 insertions(+), 86 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a586b6098b..8b9e483ce4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ The types of changes are:
 
 ### Fixed
 - Fixed a bug where D&D tables were rendering stale data [#5372](https://github.com/ethyca/fides/pull/5372)
+- Fixed issue where Dataset with nested fields was unable to edit Categories [#5383](https://github.com/ethyca/fides/pull/5383)
 
 ### Developer Experience
 - Fix warning messages from slowapi and docker [#5385](https://github.com/ethyca/fides/pull/5385)
diff --git a/clients/admin-ui/src/features/common/Breadcrumbs.tsx b/clients/admin-ui/src/features/common/Breadcrumbs.tsx
index 0e0e7e6d7c..ddf0f85b29 100644
--- a/clients/admin-ui/src/features/common/Breadcrumbs.tsx
+++ b/clients/admin-ui/src/features/common/Breadcrumbs.tsx
@@ -54,6 +54,10 @@ const Breadcrumbs = ({
     {breadcrumbs.map((breadcumbItem, index) => {
       const isLast = index + 1 === breadcrumbs.length;
 
+      if (!breadcumbItem.title) {
+        return null;
+      }
+
       return (
         <BreadcrumbItem
           {...normalItemStyles}
diff --git a/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx b/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx
index 303c75ce10..d6bc7cfbc1 100644
--- a/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx
+++ b/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx
@@ -1,5 +1,6 @@
 import { errorToastParams, successToastParams } from "common/toast";
 import { ConfirmationModal, Text, useDisclosure, useToast } from "fidesui";
+import { useMemo } from "react";
 
 import EditDrawer, {
   EditDrawerFooter,
@@ -19,8 +20,8 @@ import {
 const DESCRIPTION =
   "Collections are an array of objects that describe the Dataset's collections. Provide additional context to this collection by filling out the fields below.";
 interface Props {
-  dataset?: Dataset;
-  collection?: DatasetCollection;
+  dataset: Dataset;
+  collection: DatasetCollection;
   isOpen: boolean;
   onClose: () => void;
 }
@@ -30,7 +31,11 @@ const EditCollectionDrawer = ({
   isOpen,
   onClose,
 }: Props) => {
-  const collectionIndex = dataset?.collections.indexOf(collection!);
+  const collectionIndex = useMemo(
+    () => dataset?.collections.indexOf(collection),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
   const [updateDataset] = useUpdateDatasetMutation();
   const toast = useToast();
   const {
@@ -42,7 +47,7 @@ const EditCollectionDrawer = ({
   const handleSubmit = async (
     values: Pick<DatasetCollection, "description" | "data_categories">,
   ) => {
-    const updatedCollection = { ...collection!, ...values };
+    const updatedCollection = { ...collection, ...values };
     const updatedDataset = getUpdatedDatasetFromCollection(
       dataset!,
       updatedCollection,
@@ -92,7 +97,7 @@ const EditCollectionDrawer = ({
         }
       >
         <EditCollectionOrFieldForm
-          values={collection!}
+          values={collection}
           onSubmit={handleSubmit}
           dataType="collection"
           showDataCategories={false}
diff --git a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
index 75835f5869..524b959a43 100644
--- a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
+++ b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
@@ -7,6 +7,7 @@ import EditDrawer, {
 } from "~/features/common/EditDrawer";
 import { Dataset, DatasetField } from "~/types/api";
 
+import { URN_SEPARATOR } from "./constants";
 import { useUpdateDatasetMutation } from "./dataset.slice";
 import EditCollectionOrFieldForm, {
   FORM_ID,
@@ -47,7 +48,9 @@ const EditFieldDrawer = ({
     const pathToField = getDatasetPath({
       dataset: dataset!,
       collectionName,
-      subfieldUrn: subfieldUrn ? `${subfieldUrn}.${field?.name}` : field?.name,
+      subfieldUrn: subfieldUrn
+        ? `${subfieldUrn}${URN_SEPARATOR}${field?.name}`
+        : field?.name,
     });
 
     const updatedField = { ...field!, ...values };
diff --git a/clients/admin-ui/src/features/dataset/constants.ts b/clients/admin-ui/src/features/dataset/constants.ts
index d3a0f1bbb6..8d8bef0c46 100644
--- a/clients/admin-ui/src/features/dataset/constants.ts
+++ b/clients/admin-ui/src/features/dataset/constants.ts
@@ -29,3 +29,5 @@ export const FIELD = {
       "Arrays of Data Category resources, identified by fides_key, that apply to this field.",
   },
 };
+
+export const URN_SEPARATOR = "/";
diff --git a/clients/admin-ui/src/features/dataset/helpers.ts b/clients/admin-ui/src/features/dataset/helpers.ts
index c157978fb9..9e0bed8064 100644
--- a/clients/admin-ui/src/features/dataset/helpers.ts
+++ b/clients/admin-ui/src/features/dataset/helpers.ts
@@ -2,6 +2,8 @@ import { get } from "lodash";
 
 import { Dataset, DatasetCollection, DatasetField } from "~/types/api";
 
+import { URN_SEPARATOR } from "./constants";
+
 /**
  * Because there is only one /dataset endpoint which handles dataset, collection,
  * and field modifications, and always takes a whole dataset object, it is convenient
@@ -97,7 +99,7 @@ export const getDatasetPath = ({
     return path;
   }
 
-  const subfieldParts = subfieldUrn.split(".");
+  const subfieldParts = subfieldUrn.split(URN_SEPARATOR);
   subfieldParts.forEach((subfieldName) => {
     const field: DatasetField = get(dataset, path);
     const subfieldIndex = field.fields!.findIndex(
diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
index aa8fd2aaf9..f9af25efc7 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
@@ -46,6 +46,7 @@ import {
   useGetDatasetByKeyQuery,
   useUpdateDatasetMutation,
 } from "~/features/dataset";
+import { URN_SEPARATOR } from "~/features/dataset/constants";
 import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs";
 import EditFieldDrawer from "~/features/dataset/EditFieldDrawer";
 import { getDatasetPath } from "~/features/dataset/helpers";
@@ -94,7 +95,7 @@ const FieldsDetailPage: NextPage = () => {
       const pathToField = getDatasetPath({
         dataset: dataset!,
         collectionName,
-        subfieldUrn: `${subfieldUrn}.${field.name}`,
+        subfieldUrn: `${subfieldUrn}${URN_SEPARATOR}${field?.name}`,
       });
 
       const updatedDataset = cloneDeep(dataset!);
@@ -119,7 +120,7 @@ const FieldsDetailPage: NextPage = () => {
       const pathToField = getDatasetPath({
         dataset: dataset!,
         collectionName,
-        subfieldUrn: `${subfieldUrn}.${field.name}`,
+        subfieldUrn: `${subfieldUrn}${URN_SEPARATOR}${field?.name}`,
       });
 
       const updatedDataset = cloneDeep(dataset!);
@@ -206,6 +207,7 @@ const FieldsDetailPage: NextPage = () => {
           <DefaultHeaderCell value="Data categories" {...props} />
         ),
         size: 300,
+        meta: { disableRowClick: true },
       }),
 
       columnHelper.display({
@@ -260,46 +262,48 @@ const FieldsDetailPage: NextPage = () => {
     DatasetField | undefined
   >();
 
+  const breadcrumbs = useMemo(() => {
+    return [
+      {
+        title: "All datasets",
+        icon: <DatabaseIcon boxSize={4} />,
+        link: DATASET_ROUTE,
+      },
+      {
+        title: datasetId,
+        link: {
+          pathname: DATASET_DETAIL_ROUTE,
+          query: { datasetId },
+        },
+        icon: <DatasetIcon boxSize={5} />,
+      },
+      {
+        title: collectionName,
+        icon: <TableIcon boxSize={5} />,
+        link: {
+          pathname: DATASET_COLLECTION_DETAIL_ROUTE,
+          query: { datasetId, collectionName },
+        },
+      },
+      ...subfieldParts.map((subFieldName, index) => ({
+        title: subFieldName,
+        link: {
+          pathname: DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE,
+          query: {
+            datasetId,
+            collectionName,
+            subfieldUrn: subfieldParts.slice(0, index + 1).join("."),
+          },
+        },
+        icon: <FieldIcon boxSize={5} />,
+      })),
+    ];
+  }, [datasetId, collectionName, subfieldParts]);
+
   return (
     <Layout title={`Dataset - ${datasetId}`} mainProps={{ paddingTop: 0 }}>
       <PageHeader breadcrumbs={[{ title: "Datasets" }]}>
-        <DatasetBreadcrumbs
-          breadcrumbs={[
-            {
-              title: "All datasets",
-              icon: <DatabaseIcon boxSize={4} />,
-              link: DATASET_ROUTE,
-            },
-            {
-              title: datasetId,
-              link: {
-                pathname: DATASET_DETAIL_ROUTE,
-                query: { datasetId },
-              },
-              icon: <DatasetIcon boxSize={5} />,
-            },
-            {
-              title: collectionName,
-              icon: <TableIcon boxSize={5} />,
-              link: {
-                pathname: DATASET_COLLECTION_DETAIL_ROUTE,
-                query: { datasetId, collectionName },
-              },
-            },
-            ...subfieldParts.map((subFieldName, index) => ({
-              title: subFieldName,
-              link: {
-                pathname: DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE,
-                query: {
-                  datasetId,
-                  collectionName,
-                  subfieldUrn: subfieldParts.slice(0, index + 1).join("."),
-                },
-              },
-              icon: <FieldIcon boxSize={5} />,
-            })),
-          ]}
-        />
+        <DatasetBreadcrumbs breadcrumbs={breadcrumbs} />
       </PageHeader>
 
       {isLoading ? (
diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
index 4cbf90c8bf..61fa8a7444 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
@@ -194,6 +194,7 @@ const FieldsDetailPage: NextPage = () => {
           <DefaultHeaderCell value="Data categories" {...props} />
         ),
         size: 300,
+        meta: { disableRowClick: true },
       }),
 
       columnHelper.display({
@@ -248,30 +249,32 @@ const FieldsDetailPage: NextPage = () => {
     DatasetField | undefined
   >();
 
+  const breadcrumbs = useMemo(() => {
+    return [
+      {
+        title: "All datasets",
+        icon: <DatabaseIcon boxSize={4} />,
+        link: DATASET_ROUTE,
+      },
+      {
+        title: datasetId,
+        link: {
+          pathname: DATASET_DETAIL_ROUTE,
+          query: { datasetId },
+        },
+        icon: <DatasetIcon boxSize={5} />,
+      },
+      {
+        title: collectionName,
+        icon: <TableIcon boxSize={5} />,
+      },
+    ];
+  }, [datasetId, collectionName]);
+
   return (
     <Layout title={`Dataset - ${datasetId}`} mainProps={{ paddingTop: 0 }}>
       <PageHeader breadcrumbs={[{ title: "Datasets" }]}>
-        <DatasetBreadcrumbs
-          breadcrumbs={[
-            {
-              title: "All datasets",
-              icon: <DatabaseIcon boxSize={4} />,
-              link: DATASET_ROUTE,
-            },
-            {
-              title: datasetId,
-              link: {
-                pathname: DATASET_DETAIL_ROUTE,
-                query: { datasetId },
-              },
-              icon: <DatasetIcon boxSize={5} />,
-            },
-            {
-              title: collectionName,
-              icon: <TableIcon boxSize={5} />,
-            },
-          ]}
-        />
+        <DatasetBreadcrumbs breadcrumbs={breadcrumbs} />
       </PageHeader>
 
       {isLoading ? (
diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
index 54b21eac7a..bd4193b81c 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
@@ -136,22 +136,24 @@ const DatasetDetailPage: NextPage = () => {
     });
   };
 
+  const breadcrumbs = useMemo(() => {
+    return [
+      {
+        title: "All datasets",
+        icon: <DatabaseIcon boxSize={4} />,
+        link: DATASET_ROUTE,
+      },
+      {
+        title: datasetId,
+        icon: <DatasetIcon boxSize={5} />,
+      },
+    ];
+  }, [datasetId]);
+
   return (
     <Layout title={`Dataset - ${datasetId}`} mainProps={{ paddingTop: 0 }}>
       <PageHeader breadcrumbs={[{ title: "Datasets" }]}>
-        <DatasetBreadcrumbs
-          breadcrumbs={[
-            {
-              title: "All datasets",
-              icon: <DatabaseIcon boxSize={4} />,
-              link: DATASET_ROUTE,
-            },
-            {
-              title: datasetId,
-              icon: <DatasetIcon boxSize={5} />,
-            },
-          ]}
-        />
+        <DatasetBreadcrumbs breadcrumbs={breadcrumbs} />
       </PageHeader>
 
       {isLoading ? (
@@ -174,12 +176,14 @@ const DatasetDetailPage: NextPage = () => {
         </Box>
       )}
 
-      <EditCollectionDrawer
-        dataset={dataset!}
-        collection={selectedCollectionForEditing}
-        isOpen={isEditingCollection}
-        onClose={() => setIsEditingCollection(false)}
-      />
+      {dataset && selectedCollectionForEditing && (
+        <EditCollectionDrawer
+          dataset={dataset}
+          collection={selectedCollectionForEditing}
+          isOpen={isEditingCollection}
+          onClose={() => setIsEditingCollection(false)}
+        />
+      )}
     </Layout>
   );
 };