From a8ef950b82bb52c53e3fef5c2d68a9dafe908f01 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Fri, 16 Aug 2024 09:52:07 -0300
Subject: [PATCH 01/12] PROD-2606 WIP

---
 clients/admin-ui/src/pages/dataset/[id]/[urn].tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx b/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
index 9c5d38cd8f..6238c23d58 100644
--- a/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
+++ b/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
@@ -115,6 +115,15 @@ const FieldsDetailPage: NextPage = () => {
     [collection, collections, dataset, updateDataset],
   );
 
+  const handleRowClick = useCallback(
+    (row: DatasetField) => {
+      router.push({
+        pathname: `/dataset/${datasetId}/${urn}/fields/${row.name}`,
+      });
+    },
+    [datasetId, router, urn],
+  );
+
   const columns = useMemo(
     () => [
       columnHelper.accessor((row) => row.name, {
@@ -255,6 +264,7 @@ const FieldsDetailPage: NextPage = () => {
           <FidesTableV2
             tableInstance={tableInstance}
             emptyTableNotice={<EmptyTableNotice />}
+            onRowClick={handleRowClick}
           />
           <EditFieldDrawer
             isOpen={isEditingField}

From 282db88909a9c3eee17bf93694533b52d5753a48 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Mon, 19 Aug 2024 09:04:47 -0300
Subject: [PATCH 02/12] PROD-2606 WIP

---
 .../src/features/common/table/v2/cells.tsx    |  4 ++-
 .../admin-ui/src/pages/dataset/[id]/[urn].tsx | 27 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx
index 9e03ffd75e..f5925dd498 100644
--- a/clients/admin-ui/src/features/common/table/v2/cells.tsx
+++ b/clients/admin-ui/src/features/common/table/v2/cells.tsx
@@ -26,9 +26,10 @@ import { RTKResult } from "~/types/errors";
 
 export const DefaultCell = ({
   value,
+  ...chakraStyleProps
 }: {
   value: string | undefined | number | boolean;
-}) => (
+} & TextProps) => (
   <Flex alignItems="center" height="100%">
     <Text
       fontSize="xs"
@@ -36,6 +37,7 @@ export const DefaultCell = ({
       fontWeight="normal"
       overflow="hidden"
       textOverflow="ellipsis"
+      {...chakraStyleProps}
     >
       {value !== null && value !== undefined ? value.toString() : value}
     </Text>
diff --git a/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx b/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
index 6238c23d58..5f9c5b2e05 100644
--- a/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
+++ b/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
@@ -117,9 +117,13 @@ const FieldsDetailPage: NextPage = () => {
 
   const handleRowClick = useCallback(
     (row: DatasetField) => {
-      router.push({
-        pathname: `/dataset/${datasetId}/${urn}/fields/${row.name}`,
-      });
+      const hasSubfields = row.fields && row.fields?.length > 0;
+
+      if (hasSubfields) {
+        router.push({
+          pathname: `/dataset/${datasetId}/${urn}/fields/${row.name}`,
+        });
+      }
     },
     [datasetId, router, urn],
   );
@@ -128,7 +132,16 @@ const FieldsDetailPage: NextPage = () => {
     () => [
       columnHelper.accessor((row) => row.name, {
         id: "name",
-        cell: (props) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => {
+          const hasSubfields =
+            props.row.original.fields && props.row.original.fields?.length > 0;
+          return (
+            <DefaultCell
+              fontWeight={hasSubfields ? "semibold" : "normal"}
+              value={props.getValue()}
+            />
+          );
+        },
         header: (props) => <DefaultHeaderCell value="Field Name" {...props} />,
         size: 180,
       }),
@@ -265,6 +278,12 @@ const FieldsDetailPage: NextPage = () => {
             tableInstance={tableInstance}
             emptyTableNotice={<EmptyTableNotice />}
             onRowClick={handleRowClick}
+            getRowIsClickable={(row) => {
+              const hasSubfields = Boolean(
+                row.fields && row.fields?.length > 0,
+              );
+              return hasSubfields;
+            }}
           />
           <EditFieldDrawer
             isOpen={isEditingField}

From b630bd4773ccbbda0e4341525dbca22e9429b919 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Mon, 19 Aug 2024 09:19:45 -0300
Subject: [PATCH 03/12] PROD-2606 Reorganize / rename page files for clarity

---
 .../admin-ui/src/features/common/nav/v2/routes.ts    |  9 +++++++--
 .../[urn].tsx => [datasetId]/[collectionName].tsx}   | 12 +++++-------
 .../pages/dataset/{[id] => [datasetId]}/index.tsx    | 11 +++++------
 clients/admin-ui/src/pages/dataset/index.tsx         |  2 +-
 4 files changed, 18 insertions(+), 16 deletions(-)
 rename clients/admin-ui/src/pages/dataset/{[id]/[urn].tsx => [datasetId]/[collectionName].tsx} (96%)
 rename clients/admin-ui/src/pages/dataset/{[id] => [datasetId]}/index.tsx (96%)

diff --git a/clients/admin-ui/src/features/common/nav/v2/routes.ts b/clients/admin-ui/src/features/common/nav/v2/routes.ts
index ef6fd9980c..204e91140c 100644
--- a/clients/admin-ui/src/features/common/nav/v2/routes.ts
+++ b/clients/admin-ui/src/features/common/nav/v2/routes.ts
@@ -10,9 +10,14 @@ export const REPORTING_DATAMAP_ROUTE = "/reporting/datamap";
 export const SYSTEM_ROUTE = "/systems";
 export const EDIT_SYSTEM_ROUTE = "/systems/configure/[id]";
 export const CLASSIFY_SYSTEMS_ROUTE = "/classify-systems";
+
+// Dataset
 export const DATASET_ROUTE = "/dataset";
-export const DATASET_DETAIL_ROUTE = "/dataset/[id]";
-export const DATASET_URL_DETAIL_ROUTE = "/dataset/[id]/[urn]";
+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]/[subfieldName]";
 
 // Detection and discovery
 export const DETECTION_DISCOVERY_ACTIVITY_ROUTE = "/data-discovery/activity";
diff --git a/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName].tsx
similarity index 96%
rename from clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
rename to clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName].tsx
index 5f9c5b2e05..561bddcede 100644
--- a/clients/admin-ui/src/pages/dataset/[id]/[urn].tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName].tsx
@@ -46,10 +46,8 @@ const FieldsDetailPage: NextPage = () => {
   const router = useRouter();
   const [updateDataset] = useUpdateDatasetMutation();
 
-  const { id: idParam, urn: urnParam } = router.query;
-  const datasetId = Array.isArray(idParam) ? idParam[0] : idParam!;
-  const urn = Array.isArray(urnParam) ? urnParam[0] : urnParam;
-  const collectionName = urn?.split(".")[0] || "";
+  const datasetId = router.query.datasetId as string;
+  const collectionName = router.query.collectionName as string;
 
   const { isLoading, data: dataset } = useGetDatasetByKeyQuery(datasetId);
   const collections = useMemo(() => dataset?.collections || [], [dataset]);
@@ -121,11 +119,11 @@ const FieldsDetailPage: NextPage = () => {
 
       if (hasSubfields) {
         router.push({
-          pathname: `/dataset/${datasetId}/${urn}/fields/${row.name}`,
+          pathname: `/dataset/${datasetId}/${collectionName}/fields/${row.name}`,
         });
       }
     },
-    [datasetId, router, urn],
+    [datasetId, router, collectionName],
   );
 
   const columns = useMemo(
@@ -250,7 +248,7 @@ const FieldsDetailPage: NextPage = () => {
               title: datasetId,
               link: {
                 pathname: DATASET_DETAIL_ROUTE,
-                query: { id: datasetId },
+                query: { datasetId },
               },
               icon: <DatasetIcon boxSize={5} />,
             },
diff --git a/clients/admin-ui/src/pages/dataset/[id]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
similarity index 96%
rename from clients/admin-ui/src/pages/dataset/[id]/index.tsx
rename to clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
index 7b85e40da4..54cac4fee6 100644
--- a/clients/admin-ui/src/pages/dataset/[id]/index.tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
@@ -16,8 +16,8 @@ import { DatabaseIcon } from "~/features/common/Icon/database/DatabaseIcon";
 import { DatasetIcon } from "~/features/common/Icon/database/DatasetIcon";
 import Layout from "~/features/common/Layout";
 import {
+  DATASET_COLLECTION_DETAIL_ROUTE,
   DATASET_ROUTE,
-  DATASET_URL_DETAIL_ROUTE,
 } from "~/features/common/nav/v2/routes";
 import PageHeader from "~/features/common/PageHeader";
 import {
@@ -37,8 +37,7 @@ const columnHelper = createColumnHelper<DatasetCollection>();
 
 const DatasetDetailPage: NextPage = () => {
   const router = useRouter();
-  const { id } = router.query;
-  const datasetId = Array.isArray(id) ? id[0] : id!;
+  const datasetId = router.query.datasetId as string;
 
   const { isLoading, data: dataset } = useGetDatasetByKeyQuery(datasetId);
   const collections = useMemo(() => dataset?.collections || [], [dataset]);
@@ -115,10 +114,10 @@ const DatasetDetailPage: NextPage = () => {
 
   const handleRowClick = (collection: DatasetCollection) => {
     router.push({
-      pathname: DATASET_URL_DETAIL_ROUTE,
+      pathname: DATASET_COLLECTION_DETAIL_ROUTE,
       query: {
-        id: datasetId,
-        urn: collection.name,
+        datasetId,
+        collectionName: collection.name,
       },
     });
   };
diff --git a/clients/admin-ui/src/pages/dataset/index.tsx b/clients/admin-ui/src/pages/dataset/index.tsx
index 7affb91ebc..cbd705a146 100644
--- a/clients/admin-ui/src/pages/dataset/index.tsx
+++ b/clients/admin-ui/src/pages/dataset/index.tsx
@@ -106,7 +106,7 @@ const DataSets: NextPage = () => {
       router.push({
         pathname: DATASET_DETAIL_ROUTE,
         query: {
-          id: dataset.fides_key,
+          datasetId: dataset.fides_key,
         },
       });
     },

From 1cb8abd26d7f1846b74ed0ab2a0e1d7bb5784ca7 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Mon, 19 Aug 2024 10:26:45 -0300
Subject: [PATCH 04/12] PROD-2606 Implement subfields page and navigation

---
 .../src/features/common/nav/v2/routes.ts      |   2 +-
 .../[collectionName]/[subfieldUrn].tsx        | 353 ++++++++++++++++++
 .../index.tsx}                                |  16 +-
 3 files changed, 363 insertions(+), 8 deletions(-)
 create mode 100644 clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
 rename clients/admin-ui/src/pages/dataset/[datasetId]/{[collectionName].tsx => [collectionName]/index.tsx} (97%)

diff --git a/clients/admin-ui/src/features/common/nav/v2/routes.ts b/clients/admin-ui/src/features/common/nav/v2/routes.ts
index 204e91140c..514e6f0026 100644
--- a/clients/admin-ui/src/features/common/nav/v2/routes.ts
+++ b/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]/[subfieldName]";
+  "/dataset/[datasetId]/[collectionName]/[subfieldUrn]";
 
 // Detection and discovery
 export const DETECTION_DISCOVERY_ACTIVITY_ROUTE = "/data-discovery/activity";
diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
new file mode 100644
index 0000000000..b1f160b62c
--- /dev/null
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
@@ -0,0 +1,353 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Box, Button, EditIcon, HStack, Text, VStack } from "fidesui";
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useCallback, useMemo, useState } from "react";
+
+import { DatabaseIcon } from "~/features/common/Icon/database/DatabaseIcon";
+import { DatasetIcon } from "~/features/common/Icon/database/DatasetIcon";
+import { FieldIcon } from "~/features/common/Icon/database/FieldIcon";
+import { TableIcon } from "~/features/common/Icon/database/TableIcon";
+import Layout from "~/features/common/Layout";
+import {
+  DATASET_COLLECTION_DETAIL_ROUTE,
+  DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE,
+  DATASET_DETAIL_ROUTE,
+  DATASET_ROUTE,
+} from "~/features/common/nav/v2/routes";
+import PageHeader from "~/features/common/PageHeader";
+import {
+  BadgeCell,
+  DefaultCell,
+  DefaultHeaderCell,
+  FidesTableV2,
+  GlobalFilterV2,
+  TableActionBar,
+  TableSkeletonLoader,
+} from "~/features/common/table/v2";
+import TaxonomiesPicker from "~/features/common/TaxonomiesPicker";
+import {
+  useGetDatasetByKeyQuery,
+  useUpdateDatasetMutation,
+} from "~/features/dataset";
+import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs";
+import EditFieldDrawer from "~/features/dataset/EditFieldDrawer";
+import { getUpdatedDatasetFromField } from "~/features/dataset/helpers";
+import { DatasetField } from "~/types/api";
+
+const columnHelper = createColumnHelper<DatasetField>();
+
+const FieldsDetailPage: NextPage = () => {
+  const router = useRouter();
+  const [updateDataset] = useUpdateDatasetMutation();
+
+  const datasetId = router.query.datasetId as string;
+  const collectionName = router.query.collectionName as string;
+  const subfieldUrn = router.query.subfieldUrn as string;
+  const subfieldParts = subfieldUrn.split(".");
+
+  const { isLoading, data: dataset } = useGetDatasetByKeyQuery(datasetId);
+  const collections = useMemo(() => dataset?.collections || [], [dataset]);
+  const collection = collections.find((c) => c.name === collectionName);
+
+  const fields: DatasetField[] = useMemo(
+    () => collection?.fields || [],
+    [collection],
+  );
+
+  const subfields: DatasetField[] = useMemo(() => {
+    let currentSubfields = fields;
+    subfieldParts.forEach((subfield) => {
+      const field = currentSubfields.find((f) => f.name === subfield);
+      currentSubfields = field?.fields || [];
+    });
+    return currentSubfields;
+  }, [fields, subfieldParts]);
+
+  const [globalFilter, setGlobalFilter] = useState<string>();
+
+  const handleAddDataCategory = useCallback(
+    ({
+      dataCategory,
+      field,
+    }: {
+      dataCategory: string;
+      field: DatasetField;
+    }) => {
+      const dataCategories = field.data_categories || [];
+      const updatedField = {
+        ...field!,
+        data_categories: [...dataCategories, dataCategory],
+      };
+      const collectionIndex = collections.indexOf(collection!);
+      const fieldIndex = collection!.fields.indexOf(field!);
+      const updatedDataset = getUpdatedDatasetFromField(
+        dataset!,
+        updatedField,
+        collectionIndex,
+        fieldIndex,
+      );
+      updateDataset(updatedDataset);
+    },
+    [collection, collections, dataset, updateDataset],
+  );
+
+  const handleRemoveDataCategory = useCallback(
+    ({
+      dataCategory,
+      field,
+    }: {
+      dataCategory: string;
+      field: DatasetField;
+    }) => {
+      const updatedField = {
+        ...field!,
+        data_categories: field!.data_categories?.filter(
+          (dc) => dc !== dataCategory,
+        ),
+      };
+      const collectionIndex = collections.indexOf(collection!);
+      const fieldIndex = collection!.fields.indexOf(field!);
+      const updatedDataset = getUpdatedDatasetFromField(
+        dataset!,
+        updatedField,
+        collectionIndex,
+        fieldIndex,
+      );
+      updateDataset(updatedDataset);
+    },
+    [collection, collections, dataset, updateDataset],
+  );
+
+  const handleRowClick = useCallback(
+    (row: DatasetField) => {
+      router.push({
+        pathname: DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE,
+        query: {
+          datasetId,
+          collectionName,
+          subfieldUrn: `${subfieldUrn}.${row.name}`,
+        },
+      });
+    },
+    [datasetId, router, collectionName, subfieldUrn],
+  );
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor((row) => row.name, {
+        id: "name",
+        cell: (props) => {
+          const hasSubfields =
+            props.row.original.fields && props.row.original.fields?.length > 0;
+          return (
+            <DefaultCell
+              fontWeight={hasSubfields ? "semibold" : "normal"}
+              value={props.getValue()}
+            />
+          );
+        },
+        header: (props) => <DefaultHeaderCell value="Field Name" {...props} />,
+        size: 180,
+      }),
+      columnHelper.accessor((row) => row.fides_meta?.data_type, {
+        id: "type",
+        cell: (props) =>
+          props.getValue() ? (
+            <BadgeCell value={props.getValue()!} />
+          ) : (
+            <DefaultCell value={undefined} />
+          ),
+        header: (props) => <DefaultHeaderCell value="Type" {...props} />,
+        size: 80,
+      }),
+      columnHelper.accessor((row) => row.description, {
+        id: "description",
+        cell: (props) => <DefaultCell value={props.getValue()} />,
+        header: (props) => <DefaultHeaderCell value="Description" {...props} />,
+        size: 300,
+      }),
+      columnHelper.accessor((row) => row.data_categories, {
+        id: "data_categories",
+        cell: (props) => {
+          const field = props.row.original;
+          return (
+            <TaxonomiesPicker
+              selectedTaxonomies={props.getValue() || []}
+              onAddTaxonomy={(dataCategory) =>
+                handleAddDataCategory({ dataCategory, field })
+              }
+              onRemoveTaxonomy={(dataCategory) =>
+                handleRemoveDataCategory({ dataCategory, field })
+              }
+            />
+          );
+        },
+        header: (props) => (
+          <DefaultHeaderCell value="Data categories" {...props} />
+        ),
+        size: 300,
+      }),
+
+      columnHelper.display({
+        id: "actions",
+        header: "Actions",
+        cell: ({ row }) => {
+          const field = row.original;
+          return (
+            <HStack spacing={0} data-testid={`field-${field.name}`}>
+              <Button
+                variant="outline"
+                size="xs"
+                leftIcon={<EditIcon />}
+                onClick={() => {
+                  setSelectedFieldForEditing(field);
+                  setIsEditingField(true);
+                }}
+              >
+                Edit
+              </Button>
+            </HStack>
+          );
+        },
+        meta: {
+          disableRowClick: true,
+        },
+      }),
+    ],
+    [handleAddDataCategory, handleRemoveDataCategory],
+  );
+
+  const filteredSubfields = useMemo(() => {
+    if (!globalFilter) {
+      return subfields;
+    }
+
+    return subfields.filter((f) =>
+      f.name.toLowerCase().includes(globalFilter.toLowerCase()),
+    );
+  }, [subfields, globalFilter]);
+
+  const tableInstance = useReactTable<DatasetField>({
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    columns,
+    data: filteredSubfields,
+  });
+
+  const [isEditingField, setIsEditingField] = useState(false);
+  const [selectedFieldForEditing, setSelectedFieldForEditing] = useState<
+    DatasetField | undefined
+  >();
+
+  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} />,
+            })),
+          ]}
+        />
+      </PageHeader>
+
+      {isLoading ? (
+        <TableSkeletonLoader rowHeight={36} numRows={15} />
+      ) : (
+        <Box data-testid="fields-table">
+          <TableActionBar>
+            <GlobalFilterV2
+              globalFilter={globalFilter}
+              setGlobalFilter={setGlobalFilter}
+              placeholder="Search"
+              testid="fields-search"
+            />
+          </TableActionBar>
+          <FidesTableV2
+            tableInstance={tableInstance}
+            emptyTableNotice={<EmptyTableNotice />}
+            onRowClick={handleRowClick}
+            getRowIsClickable={(row) => {
+              const hasSubfields = Boolean(
+                row.fields && row.fields?.length > 0,
+              );
+              return hasSubfields;
+            }}
+          />
+          <EditFieldDrawer
+            isOpen={isEditingField}
+            onClose={() => {
+              setIsEditingField(false);
+              setSelectedFieldForEditing(undefined);
+            }}
+            field={selectedFieldForEditing}
+            dataset={dataset!}
+            collection={collection!}
+          />
+        </Box>
+      )}
+    </Layout>
+  );
+};
+
+const EmptyTableNotice = () => (
+  <VStack
+    mt={6}
+    p={10}
+    spacing={4}
+    borderRadius="base"
+    maxW="70%"
+    data-testid="no-results-notice"
+    alignSelf="center"
+    margin="auto"
+    textAlign="center"
+  >
+    <VStack>
+      <Text fontSize="md" fontWeight="600">
+        No fields found.
+      </Text>
+    </VStack>
+  </VStack>
+);
+
+export default FieldsDetailPage;
diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName].tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
similarity index 97%
rename from clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName].tsx
rename to clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
index 561bddcede..509cc25474 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName].tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
@@ -17,6 +17,7 @@ import { DatasetIcon } from "~/features/common/Icon/database/DatasetIcon";
 import { TableIcon } from "~/features/common/Icon/database/TableIcon";
 import Layout from "~/features/common/Layout";
 import {
+  DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE,
   DATASET_DETAIL_ROUTE,
   DATASET_ROUTE,
 } from "~/features/common/nav/v2/routes";
@@ -115,13 +116,14 @@ const FieldsDetailPage: NextPage = () => {
 
   const handleRowClick = useCallback(
     (row: DatasetField) => {
-      const hasSubfields = row.fields && row.fields?.length > 0;
-
-      if (hasSubfields) {
-        router.push({
-          pathname: `/dataset/${datasetId}/${collectionName}/fields/${row.name}`,
-        });
-      }
+      router.push({
+        pathname: DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE,
+        query: {
+          datasetId,
+          collectionName,
+          subfieldUrn: row.name,
+        },
+      });
     },
     [datasetId, router, collectionName],
   );

From 37d40b065a66b042bf7245fe2bece3fae00578cc Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Mon, 19 Aug 2024 10:31:38 -0300
Subject: [PATCH 05/12] PROD-2606 Move delete button location in dataset edit
 drawers

---
 .../src/features/common/EditDrawer.tsx        | 35 ++++++++-----------
 .../features/dataset/EditCollectionDrawer.tsx |  9 +++--
 .../features/dataset/EditDatasetDrawer.tsx    |  9 ++---
 .../src/features/dataset/EditFieldDrawer.tsx  |  9 ++---
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/clients/admin-ui/src/features/common/EditDrawer.tsx b/clients/admin-ui/src/features/common/EditDrawer.tsx
index 3a449ec935..0a64400372 100644
--- a/clients/admin-ui/src/features/common/EditDrawer.tsx
+++ b/clients/admin-ui/src/features/common/EditDrawer.tsx
@@ -24,32 +24,16 @@ interface Props {
   footer?: ReactNode;
 }
 
-export const EditDrawerHeader = ({
-  title,
-  onDelete,
-}: {
-  title: string;
-  onDelete?: () => void;
-}) => (
+export const EditDrawerHeader = ({ title }: { title: string }) => (
   <DrawerHeader py={0} display="flex" alignItems="flex-start">
     <Text mr="2" color="gray.700" fontSize="lg" lineHeight={1.8}>
       {title}
     </Text>
-    {onDelete ? (
-      <IconButton
-        variant="outline"
-        aria-label="delete"
-        icon={<TrashCanOutlineIcon fontSize="small" />}
-        size="sm"
-        onClick={onDelete}
-        data-testid="delete-btn"
-      />
-    ) : null}
   </DrawerHeader>
 );
 
 export const EditDrawerFooter = ({
-  onClose,
+  onDelete,
   formId,
   isSaving,
 }: {
@@ -59,11 +43,20 @@ export const EditDrawerFooter = ({
    */
   formId?: string;
   isSaving?: boolean;
+  onDelete?: () => void;
 } & Pick<Props, "onClose">) => (
   <DrawerFooter justifyContent="space-between">
-    <Button onClick={onClose} mr={2} size="sm" variant="outline">
-      Cancel
-    </Button>
+    {onDelete ? (
+      <IconButton
+        variant="outline"
+        aria-label="delete"
+        icon={<TrashCanOutlineIcon fontSize="small" />}
+        size="sm"
+        onClick={onDelete}
+        data-testid="delete-btn"
+      />
+    ) : null}
+
     <Button
       type="submit"
       colorScheme="primary"
diff --git a/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx b/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx
index 099be5cffe..303c75ce10 100644
--- a/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx
+++ b/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx
@@ -81,12 +81,15 @@ const EditCollectionDrawer = ({
         onClose={onClose}
         description={DESCRIPTION}
         header={
-          <EditDrawerHeader
-            title={`Collection Name: ${collection?.name}`}
+          <EditDrawerHeader title={`Collection Name: ${collection?.name}`} />
+        }
+        footer={
+          <EditDrawerFooter
+            onClose={onClose}
             onDelete={onDeleteOpen}
+            formId={FORM_ID}
           />
         }
-        footer={<EditDrawerFooter onClose={onClose} formId={FORM_ID} />}
       >
         <EditCollectionOrFieldForm
           values={collection!}
diff --git a/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx b/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx
index 3aec21a2a5..7afa1f9523 100644
--- a/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx
+++ b/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx
@@ -70,13 +70,14 @@ const EditDatasetDrawer = ({ dataset, isOpen, onClose }: Props) => {
         isOpen={isOpen}
         onClose={onClose}
         description={DESCRIPTION}
-        header={
-          <EditDrawerHeader
-            title={`Edit: ${dataset?.name}`}
+        header={<EditDrawerHeader title={`Edit: ${dataset?.name}`} />}
+        footer={
+          <EditDrawerFooter
+            onClose={onClose}
             onDelete={onDeleteOpen}
+            formId={FORM_ID}
           />
         }
-        footer={<EditDrawerFooter onClose={onClose} formId={FORM_ID} />}
       >
         <EditDatasetForm values={dataset!} onSubmit={handleSubmit} />
       </EditDrawer>
diff --git a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
index 0855169688..224c5eb2b1 100644
--- a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
+++ b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
@@ -75,13 +75,14 @@ const EditFieldDrawer = ({
         isOpen={isOpen}
         onClose={onClose}
         description={DESCRIPTION}
-        header={
-          <EditDrawerHeader
-            title={`Field Name: ${field?.name}`}
+        header={<EditDrawerHeader title={`Field Name: ${field?.name}`} />}
+        footer={
+          <EditDrawerFooter
+            onClose={onClose}
             onDelete={onDeleteOpen}
+            formId={FORM_ID}
           />
         }
-        footer={<EditDrawerFooter onClose={onClose} formId={FORM_ID} />}
       >
         <EditCollectionOrFieldForm
           values={field!}

From e215666c0ab70a6925fe2e41629b7d5cb3aa813d Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Mon, 19 Aug 2024 16:14:54 -0300
Subject: [PATCH 06/12] PROD-2606 WIP

---
 .../src/features/dataset/EditFieldDrawer.tsx  | 47 ++++++------
 .../admin-ui/src/features/dataset/helpers.ts  | 40 +++++++++++
 .../[collectionName]/[subfieldUrn].tsx        | 72 +++++++++++--------
 .../[datasetId]/[collectionName]/index.tsx    |  2 +-
 4 files changed, 111 insertions(+), 50 deletions(-)

diff --git a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
index 224c5eb2b1..4bb83abe0f 100644
--- a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
+++ b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
@@ -1,4 +1,5 @@
 import { ConfirmationModal, Text, useDisclosure } from "fidesui";
+import { cloneDeep, set, unset } from "lodash";
 
 import EditDrawer, {
   EditDrawerFooter,
@@ -10,15 +11,20 @@ import { useUpdateDatasetMutation } from "./dataset.slice";
 import EditCollectionOrFieldForm, {
   FORM_ID,
 } from "./EditCollectionOrFieldForm";
-import { getUpdatedDatasetFromField, removeFieldFromDataset } from "./helpers";
+import {
+  getDatasetPath,
+  getUpdatedDatasetFromField,
+  removeFieldFromDataset,
+} from "./helpers";
 
 interface Props {
   isOpen: boolean;
   onClose: () => void;
 
   dataset: Dataset;
-  collection: DatasetCollection;
+  collectionName: string;
   field?: DatasetField;
+  subfieldUrn?: string;
 }
 
 const DESCRIPTION =
@@ -29,7 +35,8 @@ const EditFieldDrawer = ({
   isOpen,
   onClose,
   dataset,
-  collection,
+  collectionName,
+  subfieldUrn,
 }: Props) => {
   const [updateDataset] = useUpdateDatasetMutation();
   const {
@@ -41,32 +48,32 @@ const EditFieldDrawer = ({
   const handleSubmit = (
     values: Pick<DatasetField, "description" | "data_categories">,
   ) => {
-    // merge the updated fields with the original dataset
+    const pathToField = getDatasetPath({
+      dataset: dataset!,
+      collectionName,
+      subfieldUrn: subfieldUrn ? `${subfieldUrn}.${field?.name}` : field?.name,
+    });
+
     const updatedField = { ...field!, ...values };
-    const collectionIndex = dataset.collections.indexOf(collection);
-    const fieldIndex = collection.fields.indexOf(field!);
-    const updatedDataset = getUpdatedDatasetFromField(
-      dataset,
-      updatedField,
-      collectionIndex,
-      fieldIndex,
-    );
+    const updatedDataset = cloneDeep(dataset!);
+    set(updatedDataset, pathToField, updatedField);
+
     updateDataset(updatedDataset);
     onClose();
   };
 
   const handleDelete = () => {
-    const collectionIndex = dataset.collections.indexOf(collection);
-    const fieldIndex = collection.fields.indexOf(field!);
+    const pathToField = getDatasetPath({
+      dataset: dataset!,
+      collectionName,
+      subfieldUrn: subfieldUrn ? `${subfieldUrn}.${field?.name}` : field?.name,
+    });
+
+    const updatedDataset = cloneDeep(dataset!);
+    unset(updatedDataset, pathToField);
 
-    const updatedDataset = removeFieldFromDataset(
-      dataset,
-      collectionIndex,
-      fieldIndex,
-    );
     updateDataset(updatedDataset);
     onClose();
-    onDeleteClose();
   };
 
   return (
diff --git a/clients/admin-ui/src/features/dataset/helpers.ts b/clients/admin-ui/src/features/dataset/helpers.ts
index 67a07366ed..f423cf023d 100644
--- a/clients/admin-ui/src/features/dataset/helpers.ts
+++ b/clients/admin-ui/src/features/dataset/helpers.ts
@@ -1,4 +1,5 @@
 import produce from "immer";
+import { get } from "lodash";
 
 import {
   Classification,
@@ -150,3 +151,42 @@ export const removeCollectionFromDataset = (
   );
   return { ...dataset, ...{ collections: newCollections } };
 };
+
+/**
+ * Returns the path that can be used to navigate a dataset object.
+ * example return values: "collections[0].fields[1]"
+ * We can then use the object path to get or update properties in the dataset object
+ */
+
+interface GetDatasetPathParams {
+  dataset: Dataset;
+  collectionName: string;
+  subfieldUrn?: string;
+}
+
+export const getDatasetPath = ({
+  dataset,
+  collectionName,
+  subfieldUrn,
+}: GetDatasetPathParams) => {
+  let path = "";
+  const collectionIndex = dataset.collections.findIndex(
+    (collection) => collection.name === collectionName,
+  );
+  path += `collections[${collectionIndex}]`;
+
+  if (!subfieldUrn) {
+    return path;
+  }
+
+  const subfieldParts = subfieldUrn.split(".");
+  subfieldParts.forEach((subfieldName) => {
+    const field: DatasetField = get(dataset, path);
+    const subfieldIndex = field.fields!.findIndex(
+      (subfield) => subfield.name === subfieldName,
+    );
+    path += `.fields[${subfieldIndex}]`;
+  });
+
+  return path;
+};
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 b1f160b62c..7685ad246b 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
@@ -8,6 +8,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Box, Button, EditIcon, HStack, Text, VStack } from "fidesui";
+import { clone, cloneDeep, get, set } from "lodash";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } from "react";
@@ -40,7 +41,10 @@ import {
 } from "~/features/dataset";
 import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs";
 import EditFieldDrawer from "~/features/dataset/EditFieldDrawer";
-import { getUpdatedDatasetFromField } from "~/features/dataset/helpers";
+import {
+  getDatasetPath,
+  getUpdatedDatasetFromField,
+} from "~/features/dataset/helpers";
 import { DatasetField } from "~/types/api";
 
 const columnHelper = createColumnHelper<DatasetField>();
@@ -63,6 +67,17 @@ const FieldsDetailPage: NextPage = () => {
     [collection],
   );
 
+  if (dataset) {
+    console.log(
+      "path",
+      getDatasetPath({ dataset, collectionName, subfieldUrn }),
+    );
+    console.log(
+      "value from path",
+      get(dataset, getDatasetPath({ dataset, collectionName, subfieldUrn })),
+    );
+  }
+
   const subfields: DatasetField[] = useMemo(() => {
     let currentSubfields = fields;
     subfieldParts.forEach((subfield) => {
@@ -83,21 +98,20 @@ const FieldsDetailPage: NextPage = () => {
       field: DatasetField;
     }) => {
       const dataCategories = field.data_categories || [];
-      const updatedField = {
-        ...field!,
-        data_categories: [...dataCategories, dataCategory],
-      };
-      const collectionIndex = collections.indexOf(collection!);
-      const fieldIndex = collection!.fields.indexOf(field!);
-      const updatedDataset = getUpdatedDatasetFromField(
-        dataset!,
-        updatedField,
-        collectionIndex,
-        fieldIndex,
-      );
+      const pathToField = getDatasetPath({
+        dataset: dataset!,
+        collectionName,
+        subfieldUrn: `${subfieldUrn}.${field.name}`,
+      });
+
+      const updatedDataset = cloneDeep(dataset!);
+      set(updatedDataset, `${pathToField}.data_categories`, [
+        ...dataCategories,
+        dataCategory,
+      ]);
       updateDataset(updatedDataset);
     },
-    [collection, collections, dataset, updateDataset],
+    [dataset, updateDataset, collectionName, subfieldUrn],
   );
 
   const handleRemoveDataCategory = useCallback(
@@ -108,23 +122,22 @@ const FieldsDetailPage: NextPage = () => {
       dataCategory: string;
       field: DatasetField;
     }) => {
-      const updatedField = {
-        ...field!,
-        data_categories: field!.data_categories?.filter(
-          (dc) => dc !== dataCategory,
-        ),
-      };
-      const collectionIndex = collections.indexOf(collection!);
-      const fieldIndex = collection!.fields.indexOf(field!);
-      const updatedDataset = getUpdatedDatasetFromField(
-        dataset!,
-        updatedField,
-        collectionIndex,
-        fieldIndex,
+      const dataCategories = field.data_categories || [];
+      const pathToField = getDatasetPath({
+        dataset: dataset!,
+        collectionName,
+        subfieldUrn: `${subfieldUrn}.${field.name}`,
+      });
+
+      const updatedDataset = cloneDeep(dataset!);
+      set(
+        updatedDataset,
+        `${pathToField}.data_categories`,
+        dataCategories.filter((dc) => dc !== dataCategory),
       );
       updateDataset(updatedDataset);
     },
-    [collection, collections, dataset, updateDataset],
+    [dataset, updateDataset, collectionName, subfieldUrn],
   );
 
   const handleRowClick = useCallback(
@@ -322,7 +335,8 @@ const FieldsDetailPage: NextPage = () => {
             }}
             field={selectedFieldForEditing}
             dataset={dataset!}
-            collection={collection!}
+            collectionName={collectionName}
+            subfieldUrn={subfieldUrn}
           />
         </Box>
       )}
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 509cc25474..9caf770d31 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx
@@ -293,7 +293,7 @@ const FieldsDetailPage: NextPage = () => {
             }}
             field={selectedFieldForEditing}
             dataset={dataset!}
-            collection={collection!}
+            collectionName={collectionName}
           />
         </Box>
       )}

From e4783e9aedfebe424d058a26ca18e68ea2fa60c1 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Tue, 20 Aug 2024 10:37:12 -0300
Subject: [PATCH 07/12] PROD-2606 Adjust styling

---
 clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx | 4 +++-
 clients/admin-ui/src/pages/dataset/index.tsx             | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
index 54cac4fee6..9435ff2c94 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx
@@ -52,7 +52,9 @@ const DatasetDetailPage: NextPage = () => {
     () => [
       columnHelper.accessor((row) => row.name, {
         id: "name",
-        cell: (props) => <DefaultCell value={props.getValue()} />,
+        cell: (props) => (
+          <DefaultCell value={props.getValue()} fontWeight="semibold" />
+        ),
         header: (props) => (
           <DefaultHeaderCell value="Collection Name" {...props} />
         ),
diff --git a/clients/admin-ui/src/pages/dataset/index.tsx b/clients/admin-ui/src/pages/dataset/index.tsx
index cbd705a146..f0d130301b 100644
--- a/clients/admin-ui/src/pages/dataset/index.tsx
+++ b/clients/admin-ui/src/pages/dataset/index.tsx
@@ -124,7 +124,9 @@ const DataSets: NextPage = () => {
       [
         columnHelper.accessor((row) => row.name, {
           id: "name",
-          cell: (props) => <DefaultCell value={props.getValue()} />,
+          cell: (props) => (
+            <DefaultCell value={props.getValue()} fontWeight="semibold" />
+          ),
           header: (props) => (
             <DefaultHeaderCell value="Dataset Name" {...props} />
           ),

From 52819a878d5148b146358ebbf21f3e88cb63c64e Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Tue, 20 Aug 2024 10:53:58 -0300
Subject: [PATCH 08/12] PROD-2606 Add dataset nested fields tests

---
 clients/admin-ui/cypress/e2e/datasets.cy.ts   |  46 ++++++++
 .../admin-ui/cypress/fixtures/dataset.json    | 110 ++++++++++++++++++
 .../[collectionName]/[subfieldUrn].tsx        |  13 +--
 3 files changed, 157 insertions(+), 12 deletions(-)

diff --git a/clients/admin-ui/cypress/e2e/datasets.cy.ts b/clients/admin-ui/cypress/e2e/datasets.cy.ts
index 450e7cda36..47442c73a0 100644
--- a/clients/admin-ui/cypress/e2e/datasets.cy.ts
+++ b/clients/admin-ui/cypress/e2e/datasets.cy.ts
@@ -151,6 +151,52 @@ describe("Dataset", () => {
       cy.getByTestId("row-0-col-name").contains("uuid");
       cy.getByTestId("row-1-col-name").should("not.exist");
     });
+
+    it("Can navigate to a subfields view", () => {
+      cy.visit("/dataset/demo_users_dataset/users");
+      cy.getByTestId("row-6").contains("workplace_info").click();
+      cy.url().should(
+        "contain",
+        "/dataset/demo_users_dataset/users/workplace_info",
+      );
+      cy.getByTestId("fields-table");
+    });
+  });
+
+  describe("Subfields view", () => {
+    it("Can navigate to a subfields view via URL", () => {
+      cy.visit("/dataset/demo_users_dataset/users/workplace_info");
+      cy.getByTestId("fields-table");
+    });
+
+    it("Displays a table with the subfields", () => {
+      cy.visit("/dataset/demo_users_dataset/users/workplace_info");
+      cy.getByTestId("fields-table");
+      cy.getByTestId("row-0-col-name").contains("employer");
+      cy.getByTestId("row-1-col-name").contains("position");
+      cy.getByTestId("row-2-col-name").contains("direct_reports");
+    });
+
+    it("Can use the search bar to filter subfields", () => {
+      cy.visit("/dataset/demo_users_dataset/users/workplace_info");
+      cy.getByTestId("fields-table");
+      cy.getByTestId("fields-search").type("position");
+      cy.getByTestId("row-0-col-name").contains("position");
+      cy.getByTestId("row-1-col-name").should("not.exist");
+    });
+
+    it("Can navigate to a level deeper in nested fields", () => {
+      cy.visit("/dataset/demo_users_dataset/users/workplace_info");
+      cy.getByTestId("row-0-col-name").contains("employer").click();
+      cy.url().should(
+        "contain",
+        "/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");
+    });
   });
 
   describe("Creating datasets", () => {
diff --git a/clients/admin-ui/cypress/fixtures/dataset.json b/clients/admin-ui/cypress/fixtures/dataset.json
index d8b570a293..4b096d8bd8 100644
--- a/clients/admin-ui/cypress/fixtures/dataset.json
+++ b/clients/admin-ui/cypress/fixtures/dataset.json
@@ -48,6 +48,116 @@
           "description": "User's unique ID",
           "data_categories": ["user.unique_id"],
           "fields": null
+        },
+        {
+          "name": "workplace_info",
+          "description": null,
+          "data_categories": null,
+          "fides_meta": {
+            "references": null,
+            "identity": null,
+            "primary_key": null,
+            "data_type": "object",
+            "length": null,
+            "return_all_elements": null,
+            "read_only": null
+          },
+          "fields": [
+            {
+              "name": "employer",
+              "description": null,
+              "data_categories": null,
+              "fides_meta": {
+                "references": null,
+                "identity": null,
+                "primary_key": null,
+                "data_type": "object",
+                "length": null,
+                "return_all_elements": null,
+                "read_only": null
+              },
+              "fields": [
+                {
+                  "name": "name",
+                  "description": null,
+                  "data_categories": ["user.name"],
+                  "fides_meta": {
+                    "references": null,
+                    "identity": null,
+                    "primary_key": null,
+                    "data_type": "string",
+                    "length": null,
+                    "return_all_elements": null,
+                    "read_only": null
+                  },
+                  "fields": null
+                },
+                {
+                  "name": "address",
+                  "description": null,
+                  "data_categories": ["user.childrens"],
+                  "fides_meta": {
+                    "references": null,
+                    "identity": null,
+                    "primary_key": null,
+                    "data_type": "string",
+                    "length": null,
+                    "return_all_elements": null,
+                    "read_only": null
+                  },
+                  "fields": null
+                },
+                {
+                  "name": "phone",
+                  "description": "",
+                  "data_categories": [
+                    "user.financial.credit_card",
+                    "user.contact.address.city"
+                  ],
+                  "fides_meta": {
+                    "references": null,
+                    "identity": null,
+                    "primary_key": null,
+                    "data_type": "string",
+                    "length": null,
+                    "return_all_elements": null,
+                    "read_only": null
+                  },
+                  "fields": null
+                }
+              ]
+            },
+            {
+              "name": "position",
+              "description": "",
+              "data_categories": ["user.content"],
+              "fides_meta": {
+                "references": null,
+                "identity": null,
+                "primary_key": null,
+                "data_type": "string",
+                "length": null,
+                "return_all_elements": null,
+                "read_only": null
+              },
+              "fields": null
+            },
+            {
+              "name": "direct_reports",
+              "description": "anotherdescription",
+              "data_categories": ["user.name"],
+              "fides_meta": {
+                "references": null,
+                "identity": null,
+                "primary_key": null,
+                "data_type": "string[]",
+                "length": null,
+                "return_all_elements": null,
+                "read_only": null
+              },
+              "fields": null
+            }
+          ]
         }
       ]
     },
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 7685ad246b..1807e1c111 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
@@ -55,7 +55,7 @@ const FieldsDetailPage: NextPage = () => {
 
   const datasetId = router.query.datasetId as string;
   const collectionName = router.query.collectionName as string;
-  const subfieldUrn = router.query.subfieldUrn as string;
+  const subfieldUrn = (router.query.subfieldUrn as string) || "";
   const subfieldParts = subfieldUrn.split(".");
 
   const { isLoading, data: dataset } = useGetDatasetByKeyQuery(datasetId);
@@ -67,17 +67,6 @@ const FieldsDetailPage: NextPage = () => {
     [collection],
   );
 
-  if (dataset) {
-    console.log(
-      "path",
-      getDatasetPath({ dataset, collectionName, subfieldUrn }),
-    );
-    console.log(
-      "value from path",
-      get(dataset, getDatasetPath({ dataset, collectionName, subfieldUrn })),
-    );
-  }
-
   const subfields: DatasetField[] = useMemo(() => {
     let currentSubfields = fields;
     subfieldParts.forEach((subfield) => {

From c548d4a1b2c8eef9a1b8e2291a48f0411ca1a05a Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Tue, 20 Aug 2024 11:22:08 -0300
Subject: [PATCH 09/12] PROD-2606 Fix delete bug

---
 .../src/features/dataset/EditFieldDrawer.tsx  | 22 ++++++++++---------
 .../[collectionName]/[subfieldUrn].tsx        |  7 ++----
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
index 4bb83abe0f..75835f5869 100644
--- a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
+++ b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx
@@ -1,21 +1,17 @@
 import { ConfirmationModal, Text, useDisclosure } from "fidesui";
-import { cloneDeep, set, unset } from "lodash";
+import { cloneDeep, set, update } from "lodash";
 
 import EditDrawer, {
   EditDrawerFooter,
   EditDrawerHeader,
 } from "~/features/common/EditDrawer";
-import { Dataset, DatasetCollection, DatasetField } from "~/types/api";
+import { Dataset, DatasetField } from "~/types/api";
 
 import { useUpdateDatasetMutation } from "./dataset.slice";
 import EditCollectionOrFieldForm, {
   FORM_ID,
 } from "./EditCollectionOrFieldForm";
-import {
-  getDatasetPath,
-  getUpdatedDatasetFromField,
-  removeFieldFromDataset,
-} from "./helpers";
+import { getDatasetPath } from "./helpers";
 
 interface Props {
   isOpen: boolean;
@@ -63,17 +59,23 @@ const EditFieldDrawer = ({
   };
 
   const handleDelete = () => {
-    const pathToField = getDatasetPath({
+    const pathToParentField = getDatasetPath({
       dataset: dataset!,
       collectionName,
-      subfieldUrn: subfieldUrn ? `${subfieldUrn}.${field?.name}` : field?.name,
+      subfieldUrn: subfieldUrn || undefined,
     });
 
     const updatedDataset = cloneDeep(dataset!);
-    unset(updatedDataset, pathToField);
+    update(updatedDataset, pathToParentField, (parentField) => ({
+      ...parentField,
+      fields: parentField.fields.filter(
+        (f: DatasetField) => f.name !== field?.name,
+      ),
+    }));
 
     updateDataset(updatedDataset);
     onClose();
+    onDeleteClose();
   };
 
   return (
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 1807e1c111..eda46defcb 100644
--- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
+++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[subfieldUrn].tsx
@@ -8,7 +8,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Box, Button, EditIcon, HStack, Text, VStack } from "fidesui";
-import { clone, cloneDeep, get, set } from "lodash";
+import { cloneDeep, set } from "lodash";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } from "react";
@@ -41,10 +41,7 @@ import {
 } from "~/features/dataset";
 import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs";
 import EditFieldDrawer from "~/features/dataset/EditFieldDrawer";
-import {
-  getDatasetPath,
-  getUpdatedDatasetFromField,
-} from "~/features/dataset/helpers";
+import { getDatasetPath } from "~/features/dataset/helpers";
 import { DatasetField } from "~/types/api";
 
 const columnHelper = createColumnHelper<DatasetField>();

From caf0992ee5d406026fb525adef54adb58cb5df95 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Tue, 20 Aug 2024 11:26:09 -0300
Subject: [PATCH 10/12] PROD-2606 Update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23cc59ec1c..f4e6c3a8e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,10 @@ The types of changes are:
 ### Fixed
 - Ignore `404` errors on Oracle Responsys deletions [#5203](https://github.com/ethyca/fides/pull/5203)
 
+### Added
+- Added support for navigating and editing nested fields in the Datasets page [#5216](https://github.com/ethyca/fides/pull/5216)
+
+
 ## [2.43.0](https://github.com/ethyca/fides/compare/2.42.1...2.43.0)
 
 ### Added

From 94c7c8d6a1e916ec003c0a3985ed1b9e2a609a8a Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Tue, 20 Aug 2024 11:34:23 -0300
Subject: [PATCH 11/12] PROD-2606 Remove unused code

---
 .../features/dataset-helpers.test.tsx         | 115 ------------------
 .../src/features/dataset/DatasetFieldCell.tsx |  58 ---------
 .../admin-ui/src/features/dataset/helpers.ts  |  84 +------------
 clients/admin-ui/src/mocks/data.ts            |  49 --------
 4 files changed, 1 insertion(+), 305 deletions(-)
 delete mode 100644 clients/admin-ui/src/features/dataset/DatasetFieldCell.tsx

diff --git a/clients/admin-ui/__tests__/features/dataset-helpers.test.tsx b/clients/admin-ui/__tests__/features/dataset-helpers.test.tsx
index 3b2bf5d22c..9309a2fe09 100644
--- a/clients/admin-ui/__tests__/features/dataset-helpers.test.tsx
+++ b/clients/admin-ui/__tests__/features/dataset-helpers.test.tsx
@@ -1,16 +1,10 @@
 import {
   getUpdatedCollectionFromField,
-  getUpdatedDatasetFromClassifyDataset,
   getUpdatedDatasetFromCollection,
   getUpdatedDatasetFromField,
   removeCollectionFromDataset,
-  removeFieldFromDataset,
 } from "~/features/dataset/helpers";
 import {
-  mockClassification,
-  mockClassifyCollection,
-  mockClassifyDataset,
-  mockClassifyField,
   mockDataset,
   mockDatasetCollection,
   mockDatasetField,
@@ -76,118 +70,9 @@ describe("dataset helpers", () => {
         updatedDataset.collections[collectionIndex].fields[fieldIndex].name,
       ).toEqual(newName);
     });
-
-    it("should update a Dataset from a ClassifyInstance", () => {
-      const originalDataset = mockDataset({
-        collections: [
-          mockDatasetCollection({
-            name: "users",
-            fields: [
-              // Field without data categories:
-              mockDatasetField({
-                name: "email",
-                data_categories: [],
-              }),
-              // Field with data categories:
-              mockDatasetField({
-                name: "state",
-                data_categories: ["system.operations"],
-              }),
-              // Field without a corresponding classify field:
-              mockDatasetField({
-                name: "shoe_size",
-                data_categories: [],
-              }),
-            ],
-          }),
-        ],
-      });
-      const classifyDataset = mockClassifyDataset({
-        collections: [
-          mockClassifyCollection({
-            name: "users",
-            fields: [
-              mockClassifyField({
-                name: "email",
-                classifications: [
-                  mockClassification({
-                    label: "user.contact",
-                    aggregated_score: 0.75,
-                  }),
-                  mockClassification({
-                    label: "user.email",
-                    aggregated_score: 0.95,
-                  }),
-                ],
-              }),
-              mockClassifyField({
-                name: "state",
-                classifications: [
-                  mockClassification({
-                    label: "user.address",
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-
-      const updatedDataset = getUpdatedDatasetFromClassifyDataset(
-        originalDataset,
-        classifyDataset,
-        classifyDataset.collections[0].name,
-      );
-
-      // It should return a new object.
-      expect(updatedDataset).not.toBe(originalDataset);
-      // A field without any categories should be filled in with the high score suggestion.
-      expect(updatedDataset.collections[0].fields[0].data_categories).toEqual([
-        "user.email",
-      ]);
-      // A field that already has a category should be unchanged.
-      expect(updatedDataset.collections[0].fields[1].data_categories).toEqual([
-        "system.operations",
-      ]);
-      // A field that had no classification match should be unchanged.
-      expect(updatedDataset.collections[0].fields[2].data_categories).toEqual(
-        [],
-      );
-    });
   });
 
   describe("removing from datasets", () => {
-    it("should be able to remove a dataset field", () => {
-      const deleteName = "remove me";
-      const fieldToBeRemoved = mockDatasetField({ name: deleteName });
-      const collection = mockDatasetCollection({
-        fields: [mockDatasetField(), fieldToBeRemoved, mockDatasetField()],
-      });
-      const dataset = mockDataset({
-        collections: [
-          mockDatasetCollection(),
-          mockDatasetCollection(),
-          collection,
-        ],
-      });
-      const fieldIndex = 1;
-      const collectionIndex = 2;
-      const updatedDataset = removeFieldFromDataset(
-        dataset,
-        collectionIndex,
-        fieldIndex,
-      );
-
-      expect(updatedDataset.collections[collectionIndex].fields).toHaveLength(
-        2,
-      );
-      expect(
-        updatedDataset.collections[collectionIndex].fields.filter(
-          (f) => f.name === deleteName,
-        ),
-      ).toHaveLength(0);
-    });
-
     it("should be able to remove a dataset collection", () => {
       const deleteName = "remove me";
       const collection = mockDatasetCollection({ name: deleteName });
diff --git a/clients/admin-ui/src/features/dataset/DatasetFieldCell.tsx b/clients/admin-ui/src/features/dataset/DatasetFieldCell.tsx
deleted file mode 100644
index 540e399334..0000000000
--- a/clients/admin-ui/src/features/dataset/DatasetFieldCell.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box, Tooltip } from "fidesui";
-
-import { getTopClassification } from "~/features/dataset/helpers";
-import TaxonomyEntityTag from "~/features/taxonomy/TaxonomyEntityTag";
-import { ClassifyField, DatasetField } from "~/types/api";
-
-// This component is used within a Chakra Td element in the DatasetFieldsTable. Chakra requires a
-// JSX.Element in that context, so all returns in this component need to be wrapped in a fragment.
-/* eslint-disable react/jsx-no-useless-fragment */
-const DatasetFieldCell = ({
-  attribute,
-  field,
-  classifyField,
-}: {
-  attribute: keyof DatasetField;
-  field: DatasetField;
-  classifyField?: ClassifyField;
-}): JSX.Element => {
-  if (attribute === "data_categories") {
-    const topClassification =
-      classifyField !== undefined
-        ? getTopClassification(classifyField)
-        : undefined;
-
-    const classifiedCategory =
-      topClassification !== undefined ? [topClassification.label] : [];
-
-    const assignedCategories = field.data_categories ?? [];
-    // Only show the classified categories if none have been directly assigned to the dataset.
-    const categories =
-      assignedCategories.length > 0 ? assignedCategories : classifiedCategory;
-
-    return (
-      <Tooltip
-        placement="right"
-        label={
-          // TODO: Related to #724, the design wants this to be clickable but our tooltip doesn't support that.
-          categories === classifiedCategory
-            ? "Fides has generated these data categories for you. You can override them by modifying the field."
-            : ""
-        }
-      >
-        <Box display="inline-block">
-          {categories.map((dc) => (
-            <Box key={`${field.name}-${dc}`} mr={2} mb={2}>
-              <TaxonomyEntityTag name={dc} />
-            </Box>
-          ))}
-        </Box>
-      </Tooltip>
-    );
-  }
-
-  return <>{field[attribute]}</>;
-};
-/* eslint-disable react/jsx-no-useless-fragment */
-
-export default DatasetFieldCell;
diff --git a/clients/admin-ui/src/features/dataset/helpers.ts b/clients/admin-ui/src/features/dataset/helpers.ts
index f423cf023d..c157978fb9 100644
--- a/clients/admin-ui/src/features/dataset/helpers.ts
+++ b/clients/admin-ui/src/features/dataset/helpers.ts
@@ -1,14 +1,6 @@
-import produce from "immer";
 import { get } from "lodash";
 
-import {
-  Classification,
-  ClassifyDataset,
-  ClassifyField,
-  Dataset,
-  DatasetCollection,
-  DatasetField,
-} from "~/types/api";
+import { Dataset, DatasetCollection, DatasetField } from "~/types/api";
 
 /**
  * Because there is only one /dataset endpoint which handles dataset, collection,
@@ -68,80 +60,6 @@ export const getUpdatedDatasetFromField = (
   );
 };
 
-export const getTopClassification = (
-  classifyField: ClassifyField,
-): Classification =>
-  classifyField.classifications.reduce((maxClassification, next) => {
-    if (
-      (maxClassification.aggregated_score ?? 0) < (next.aggregated_score ?? 0)
-    ) {
-      return next;
-    }
-    return maxClassification;
-  });
-
-/**
- * Returns a new dataset object with the top-scoring classification results filling in data
- * categories that were left blank on the dataset. Uses immer to efficiently modify a draft object.
- */
-export const getUpdatedDatasetFromClassifyDataset = (
-  dataset: Dataset,
-  classifyDataset: ClassifyDataset,
-  activeCollection: string | undefined,
-): Dataset =>
-  produce(dataset, (draftDataset) => {
-    const classifyCollectionMap = new Map(
-      classifyDataset.collections.map((c) => [c.name, c]),
-    );
-
-    draftDataset.collections.forEach((draftCollection) => {
-      const classifyCollection = classifyCollectionMap.get(
-        draftCollection.name,
-      );
-
-      if (activeCollection && classifyCollection?.name !== activeCollection) {
-        return;
-      }
-
-      const classifyFieldMap = new Map(
-        classifyCollection?.fields?.map((f) => [f.name, f]),
-      );
-
-      draftCollection.fields.forEach((draftField) => {
-        if (
-          draftField.data_categories &&
-          draftField.data_categories.length > 0
-        ) {
-          return;
-        }
-
-        const classifyField = classifyFieldMap.get(draftField.name);
-        if (!(classifyField && classifyField.classifications.length > 0)) {
-          return;
-        }
-
-        const topClassification = getTopClassification(classifyField);
-
-        draftField.data_categories = [topClassification.label];
-      });
-    });
-  });
-
-export const removeFieldFromDataset = (
-  dataset: Dataset,
-  collectionIndex: number,
-  fieldIndex: number,
-): Dataset => {
-  const collection = dataset.collections[collectionIndex];
-  const newFields = collection.fields.filter((f, idx) => idx !== fieldIndex);
-  const updatedCollection = { ...collection, ...{ fields: newFields } };
-  return getUpdatedDatasetFromCollection(
-    dataset,
-    updatedCollection,
-    collectionIndex,
-  );
-};
-
 export const removeCollectionFromDataset = (
   dataset: Dataset,
   collectionIndex: number,
diff --git a/clients/admin-ui/src/mocks/data.ts b/clients/admin-ui/src/mocks/data.ts
index 080d980ad2..15f80beeb9 100644
--- a/clients/admin-ui/src/mocks/data.ts
+++ b/clients/admin-ui/src/mocks/data.ts
@@ -1,9 +1,4 @@
 import {
-  Classification,
-  ClassificationStatus,
-  ClassifyCollection,
-  ClassifyDataset,
-  ClassifyField,
   ConsentableItem,
   Dataset,
   DatasetCollection,
@@ -224,50 +219,6 @@ export const mockDataset = (partialDataset?: Partial<Dataset>): Dataset => {
   return Object.assign(dataset, partialDataset);
 };
 
-export const mockClassification = (
-  partial?: Partial<Classification>,
-): Classification => {
-  const initial: Classification = {
-    label: "system.operations",
-    score: 1,
-    aggregated_score: 1,
-    classification_paradigm: "",
-  };
-  return Object.assign(initial, partial);
-};
-
-export const mockClassifyField = (
-  partial?: Partial<ClassifyField>,
-): ClassifyField => {
-  const initial: ClassifyField = {
-    name: "created_at",
-    classifications: [mockClassification()],
-  };
-  return Object.assign(initial, partial);
-};
-
-export const mockClassifyCollection = (
-  partial?: Partial<ClassifyCollection>,
-): ClassifyCollection => {
-  const initial: ClassifyCollection = {
-    name: "created_at",
-    fields: [mockClassifyField()],
-  };
-  return Object.assign(initial, partial);
-};
-
-export const mockClassifyDataset = (
-  partial?: Partial<ClassifyDataset>,
-): ClassifyDataset => {
-  const initial: ClassifyDataset = {
-    fides_key: "sample_dataset",
-    name: "sample_dataset",
-    status: ClassificationStatus.COMPLETE,
-    collections: [mockClassifyCollection()],
-  };
-  return Object.assign(initial, partial);
-};
-
 export const mockConsentableItems: ConsentableItem[] = [
   {
     external_id: "34419",

From 4b5f90179a7623f15a56930532865a2fb2d388c6 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@ethyca.com>
Date: Tue, 20 Aug 2024 14:57:26 -0300
Subject: [PATCH 12/12] PROD-2606 Fix datasets links

---
 .../admin-ui/src/features/dataset/DatabaseConnectForm.tsx   | 6 +++++-
 clients/admin-ui/src/features/dataset/DatasetYamlForm.tsx   | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/clients/admin-ui/src/features/dataset/DatabaseConnectForm.tsx b/clients/admin-ui/src/features/dataset/DatabaseConnectForm.tsx
index d311ca2cb7..f141604414 100644
--- a/clients/admin-ui/src/features/dataset/DatabaseConnectForm.tsx
+++ b/clients/admin-ui/src/features/dataset/DatabaseConnectForm.tsx
@@ -8,6 +8,7 @@ import { useFeatures } from "~/features/common/features";
 import { CustomSwitch, CustomTextInput } from "~/features/common/form/inputs";
 import { getErrorMessage } from "~/features/common/helpers";
 import ConfirmationModal from "~/features/common/modals/ConfirmationModal";
+import { DATASET_DETAIL_ROUTE } from "~/features/common/nav/v2/routes";
 import { errorToastParams, successToastParams } from "~/features/common/toast";
 import { DEFAULT_ORGANIZATION_FIDES_KEY } from "~/features/organization";
 import { useCreateClassifyInstanceMutation } from "~/features/plus/plus.slice";
@@ -185,7 +186,10 @@ const DatabaseConnectForm = () => {
       toast(
         successToastParams(`Generated ${createResult.dataset.name} dataset`),
       );
-      router.push(`/dataset/${createResult.dataset.fides_key}`);
+      router.push({
+        pathname: DATASET_DETAIL_ROUTE,
+        query: { datasetId: createResult.dataset.fides_key },
+      });
       return;
     }
 
diff --git a/clients/admin-ui/src/features/dataset/DatasetYamlForm.tsx b/clients/admin-ui/src/features/dataset/DatasetYamlForm.tsx
index f8487ca86b..1c580cae59 100644
--- a/clients/admin-ui/src/features/dataset/DatasetYamlForm.tsx
+++ b/clients/admin-ui/src/features/dataset/DatasetYamlForm.tsx
@@ -13,6 +13,7 @@ import { useRef, useState } from "react";
 
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import { useAlert } from "~/features/common/hooks";
+import { DATASET_DETAIL_ROUTE } from "~/features/common/nav/v2/routes";
 import { errorToastParams, successToastParams } from "~/features/common/toast";
 import { Editor, isYamlException } from "~/features/common/yaml/helpers";
 import YamlError from "~/features/common/yaml/YamlError";
@@ -86,7 +87,10 @@ const DatasetYamlForm = () => {
   const handleSuccess = (newDataset: Dataset) => {
     toast(successToastParams("Successfully loaded new dataset YAML"));
     setActiveDatasetFidesKey(newDataset.fides_key);
-    router.push(`/dataset/${newDataset.fides_key}`);
+    router.push({
+      pathname: DATASET_DETAIL_ROUTE,
+      query: { datasetId: newDataset.fides_key },
+    });
   };
 
   const handleSubmit = async () => {