Use NextJS catch-all segments instead of URN (#5396)

CHANGELOG.md

@@ -23,6 +23,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 multiple login redirects could end up losing login return path [#5389](https://github.com/ethyca/fides/pull/5389)
+- 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)

clients/admin-ui/cypress/e2e/datasets.cy.ts

@@ -201,13 +201,28 @@ describe("Dataset", () => {
       cy.getByTestId("row-0-col-name").contains("employer").click();
       cy.url().should(
         "contain",
-        "/dataset/demo_users_dataset/users/workplace_info.employer",
+        "/dataset/demo_users_dataset/users/workplace_info/employer",
       );
       cy.getByTestId("fields-table");
       cy.getByTestId("row-0-col-name").contains("name");
       cy.getByTestId("row-1-col-name").contains("address");
       cy.getByTestId("row-2-col-name").contains("phone");
     });
+
+    it("Can navigate deeply nested fields with unexpected names", () => {
+      cy.visit(
+        "/dataset/example_dataset_issue_hj36/example_table/example_nested_field/example_failure_nested_field.1",
+      );
+      cy.getByTestId("row-0-col-name")
+        .contains("some.thing/Stupid-that's_redicuLous&")
+        .click();
+      cy.url().should(
+        "contain",
+        "/dataset/example_dataset_issue_hj36/example_table/example_nested_field/example_failure_nested_field.1/some.thing%2FStupid-that's_redicuLous%26",
+      );
+      cy.getByTestId("fields-table");
+      cy.getByTestId("row-0-col-name").contains("another.dumb:th!ng");
+    });
   });
 
   describe("Creating datasets", () => {

clients/admin-ui/cypress/fixtures/dataset.json

@@ -185,6 +185,66 @@
           "fields": null
         }
       ]
+    },
+    {
+      "name": "example_table",
+      "description": "Example description",
+      "data_categories": [],
+      "fields": [
+        {
+          "name": "example_nested_field",
+          "description": null,
+          "data_categories": null,
+          "fides_meta": null,
+          "fields": [
+            {
+              "name": "example_success_nested_field",
+              "description": "Can save data category changes on nested field",
+              "data_categories": ["user.device"],
+              "fides_meta": null,
+              "fields": []
+            },
+            {
+              "name": "example_failure_nested_field.1",
+              "description": "Fail to save data category changes on nested field with '.' in name",
+              "data_categories": [],
+              "fides_meta": null,
+              "fields": [
+                {
+                  "name": "some.thing/Stupid-that's_redicuLous&",
+                  "description": "tesing some random string",
+                  "data_categories": [],
+                  "fides_meta": null,
+                  "fields": [
+                    {
+                      "name": "another.dumb:th!ng",
+                      "description": "tesing some random string",
+                      "data_categories": ["user.location"],
+                      "fides_meta": null,
+                      "fields": null
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "example_success_field",
+          "description": "Can save data category changes",
+          "data_categories": ["user.device"],
+          "fides_meta": null,
+          "fields": null
+        },
+        {
+          "name": "example_success_field.1",
+          "description": "Can save data category changes",
+          "data_categories": ["user.device"],
+          "fides_meta": null,
+          "fields": null
+        }
+      ],
+      "fides_meta": null
     }
   ]
 }

clients/admin-ui/src/features/common/nav/v2/routes.ts

@@ -17,7 +17,7 @@ export const DATASET_DETAIL_ROUTE = "/dataset/[datasetId]";
 export const DATASET_COLLECTION_DETAIL_ROUTE =
   "/dataset/[datasetId]/[collectionName]";
 export const DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE =
-  "/dataset/[datasetId]/[collectionName]/[subfieldUrn]";
+  "/dataset/[datasetId]/[collectionName]/[...subfieldNames]";
 
 // Detection and discovery
 export const DETECTION_DISCOVERY_ACTIVITY_ROUTE = "/data-discovery/activity";

clients/admin-ui/src/features/dataset/DatasetBreadcrumbs.tsx

@@ -17,6 +17,8 @@ const DatasetBreadcrumbs = (breadcrumbProps: BreadcrumbsProps) => (
     fontWeight="normal"
     mt={-1}
     mb={0}
+    whiteSpace="nowrap"
+    overflow="auto"
     separator="/"
     lastItemStyles={{ color: "black", fontWeight: "semibold" }}
   />

clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx

@@ -7,7 +7,6 @@ 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,
@@ -21,7 +20,7 @@ interface Props {
   dataset: Dataset;
   collectionName: string;
   field?: DatasetField;
-  subfieldUrn?: string;
+  subfields?: string[];
 }
 
 const DESCRIPTION =
@@ -33,7 +32,7 @@ const EditFieldDrawer = ({
   onClose,
   dataset,
   collectionName,
-  subfieldUrn,
+  subfields,
 }: Props) => {
   const [updateDataset] = useUpdateDatasetMutation();
   const {
@@ -48,9 +47,9 @@ const EditFieldDrawer = ({
     const pathToField = getDatasetPath({
       dataset: dataset!,
       collectionName,
-      subfieldUrn: subfieldUrn
-        ? `${subfieldUrn}${URN_SEPARATOR}${field?.name}`
-        : field?.name,
+      subfields: subfields
+        ? [...subfields, field?.name || ""]
+        : [field?.name || ""],
     });
 
     const updatedField = { ...field!, ...values };
@@ -65,7 +64,7 @@ const EditFieldDrawer = ({
     const pathToParentField = getDatasetPath({
       dataset: dataset!,
       collectionName,
-      subfieldUrn: subfieldUrn || undefined,
+      subfields,
     });
 
     const updatedDataset = cloneDeep(dataset!);

clients/admin-ui/src/features/dataset/constants.ts

@@ -29,5 +29,3 @@ export const FIELD = {
       "Arrays of Data Category resources, identified by fides_key, that apply to this field.",
   },
 };
-
-export const URN_SEPARATOR = "/";

clients/admin-ui/src/features/dataset/helpers.ts

@@ -2,8 +2,6 @@ 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
@@ -81,26 +79,25 @@ export const removeCollectionFromDataset = (
 interface GetDatasetPathParams {
   dataset: Dataset;
   collectionName: string;
-  subfieldUrn?: string;
+  subfields?: string[];
 }
 
 export const getDatasetPath = ({
   dataset,
   collectionName,
-  subfieldUrn,
+  subfields,
 }: GetDatasetPathParams) => {
   let path = "";
   const collectionIndex = dataset.collections.findIndex(
     (collection) => collection.name === collectionName,
   );
   path += `collections[${collectionIndex}]`;
 
-  if (!subfieldUrn) {
+  if (!subfields) {
     return path;
   }
 
-  const subfieldParts = subfieldUrn.split(URN_SEPARATOR);
-  subfieldParts.forEach((subfieldName) => {
+  subfields.forEach((subfieldName) => {
     const field: DatasetField = get(dataset, path);
     const subfieldIndex = field.fields!.findIndex(
       (subfield) => subfield.name === subfieldName,