PROD-2332 dataset page to use the new table component

CHANGELOG.md

@@ -33,6 +33,7 @@ The types of changes are:
 - Serve GVL languages as they are requested [#5112](https://github.com/ethyca/fides/pull/5112)
 - Changed text on system integrations tab to direct to new integration management [#5097](https://github.com/ethyca/fides/pull/5097)
 - Updates to consent experience styling [#5085](https://github.com/ethyca/fides/pull/5085)
+- Updated the dataset page to display the new table and support pagination [#5130](https://github.com/ethyca/fides/pull/5130)
 - Improve performance by removing the need to load every system into redux store [#5135](https://github.com/ethyca/fides/pull/5135)
 - Use the `user_id` from a Segment Trait instead of an `email` when deleting a user in Segment [#5004](https://github.com/ethyca/fides/pull/5004)
 - Moves some endpoints for property-specific messaging from OSS -> plus [#5069](https://github.com/ethyca/fides/pull/5069)

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

@@ -41,7 +41,7 @@ describe("Datasets with Fides Classify", () => {
       cy.visit("/dataset");
       cy.wait("@getFilteredDatasets");
       cy.getByTestId("dataset-table");
-      cy.getByTestId("dataset-row-demo_users_dataset_4");
+      cy.getByTestId("row-3");
 
       cy.getByTestId("dataset-table__status-table-header").should(
         "have.text",
@@ -95,25 +95,6 @@ describe("Datasets with Fides Classify", () => {
     });
   });
 
-  describe("List of datasets with classifications", () => {
-    it("Shows the each dataset's classify status", () => {
-      cy.visit("/dataset");
-      cy.wait("@getFilteredDatasets");
-      cy.wait("@getClassifyList");
-      cy.getByTestId("dataset-table");
-      cy.getByTestId("dataset-status-demo_users_dataset_2").contains(
-        "Processing"
-      );
-      cy.getByTestId("dataset-status-demo_users_dataset_3").contains(
-        "Awaiting Review"
-      );
-      cy.getByTestId("dataset-status-demo_users_dataset_4").contains(
-        "Classified"
-      );
-      cy.getByTestId("classification-status-badge").should("exist");
-    });
-  });
-
   describe("Dataset collection view", () => {
     beforeEach(() => {
       cy.intercept("GET", "/api/v1/dataset/*", {

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

@@ -18,7 +18,7 @@ describe("Dataset", () => {
       cy.getByTestId("Manage datasets-nav-link").click();
       cy.wait("@getFilteredDatasets");
       cy.getByTestId("dataset-table");
-      cy.getByTestId("dataset-row-demo_users_dataset_4");
+      cy.getByTestId("row-3");
 
       // The classifier toggle should not be available.
       cy.get("input-classify").should("not.exist");
@@ -35,7 +35,7 @@ describe("Dataset", () => {
     it("Can load an individual dataset", () => {
       cy.visit("/dataset");
       cy.wait("@getFilteredDatasets");
-      cy.getByTestId("dataset-row-demo_users_dataset").click();
+      cy.getByTestId("row-0").click();
       // for some reason this is slow in CI, so add a timeout :(
       cy.url({ timeout: 10000 }).should(
         "contain",

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

@@ -0,0 +1,239 @@
+{
+  "page": 1,
+  "size": 25,
+  "pages": 1,
+  "total": 5,
+  "items": [
+    {
+      "fides_key": "demo_users_dataset",
+      "organization_fides_key": "default_organization",
+      "tags": null,
+      "name": "Demo Users Dataset",
+      "description": "Data collected about users for our analytics system.",
+      "meta": null,
+      "data_categories": ["system"],
+      "fidesctl_meta": null,
+      "collections": [
+        {
+          "name": "users",
+          "description": "User information",
+          "data_categories": [],
+          "fields": [
+            {
+              "name": "created_at",
+              "description": "User's creation timestamp",
+              "data_categories": ["system.operations"],
+              "fields": null
+            },
+            {
+              "name": "email",
+              "description": "User's Email",
+              "data_categories": ["user.contact.email"],
+              "fields": null
+            },
+            {
+              "name": "first_name",
+              "description": "User's first name",
+              "data_categories": ["user.name"],
+              "fields": null
+            },
+            {
+              "name": "food_preference",
+              "description": "User's favorite food",
+              "data_categories": [],
+              "fields": null
+            },
+            {
+              "name": "state",
+              "description": "User's State",
+              "data_categories": ["user.contact.address.state"],
+              "fields": null
+            },
+            {
+              "name": "uuid",
+              "description": "User's unique ID",
+              "data_categories": ["user.unique_id"],
+              "fields": null
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "fides_key": "demo_users_dataset_2",
+      "organization_fides_key": "default_organization",
+      "tags": null,
+      "name": "Demo Users Dataset 2",
+      "description": "Data collected about users for our analytics system.",
+      "meta": null,
+      "data_categories": [],
+      "fidesctl_meta": null,
+      "collections": [
+        {
+          "name": "users",
+          "description": "User information",
+          "data_categories": [],
+          "fields": [
+            {
+              "name": "created_at",
+              "description": "User's creation timestamp",
+              "data_categories": ["system.operations"],
+              "fields": null
+            },
+            {
+              "name": "email",
+              "description": "User's Email",
+              "data_categories": ["user.contact.email"],
+              "fields": null
+            },
+            {
+              "name": "first_name",
+              "description": "User's first name",
+              "data_categories": ["user.name"],
+              "fields": null
+            },
+            {
+              "name": "food_preference",
+              "description": "User's favorite food",
+              "data_categories": [],
+              "fields": null
+            },
+            {
+              "name": "state",
+              "description": "User's State",
+              "data_categories": ["user.contact.address.state"],
+              "fields": null
+            },
+            {
+              "name": "uuid",
+              "description": "User's unique ID",
+              "data_categories": ["user.unique_id"],
+              "fields": null
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "fides_key": "demo_users_dataset_3",
+      "organization_fides_key": "default_organization",
+      "tags": null,
+      "name": "Demo Users Dataset 3",
+      "description": "Data collected about users for our analytics system.",
+      "meta": null,
+      "data_categories": [],
+      "fidesctl_meta": null,
+      "collections": [
+        {
+          "name": "users",
+          "description": "User information",
+          "data_categories": [],
+          "fields": [
+            {
+              "name": "created_at",
+              "description": "User's creation timestamp",
+              "data_categories": ["system.operations"],
+              "fields": null
+            },
+            {
+              "name": "email",
+              "description": "User's Email",
+              "data_categories": ["user.contact.email"],
+              "fields": null
+            },
+            {
+              "name": "first_name",
+              "description": "User's first name",
+              "data_categories": ["user.name"],
+              "fields": null
+            },
+            {
+              "name": "food_preference",
+              "description": "User's favorite food",
+              "data_categories": [],
+              "fields": null
+            },
+            {
+              "name": "state",
+              "description": "User's State",
+              "data_categories": ["user.contact.address.state"],
+              "fields": null
+            },
+            {
+              "name": "uuid",
+              "description": "User's unique ID",
+              "data_categories": ["user.unique_id"],
+              "fields": null
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "fides_key": "demo_users_dataset_4",
+      "organization_fides_key": "default_organization",
+      "tags": null,
+      "name": "Demo Users Dataset 4",
+      "description": "Data collected about users for our analytics system.",
+      "meta": null,
+      "data_categories": [],
+      "fidesctl_meta": null,
+      "collections": [
+        {
+          "name": "users",
+          "description": "User information",
+          "data_categories": [],
+          "fields": [
+            {
+              "name": "created_at",
+              "description": "User's creation timestamp",
+              "data_categories": ["system.operations"],
+              "fields": null
+            },
+            {
+              "name": "email",
+              "description": "User's Email",
+              "data_categories": ["user.contact.email"],
+              "fields": null
+            },
+            {
+              "name": "first_name",
+              "description": "User's first name",
+              "data_categories": ["user.name"],
+              "fields": null
+            },
+            {
+              "name": "food_preference",
+              "description": "User's favorite food",
+              "data_categories": [],
+              "fields": null
+            },
+            {
+              "name": "state",
+              "description": "User's State",
+              "data_categories": ["user.contact.address.state"],
+              "fields": null
+            },
+            {
+              "name": "uuid",
+              "description": "User's unique ID",
+              "data_categories": ["user.unique_id"],
+              "fields": null
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "fides_key": "postgres_example_test_dataset",
+      "organization_fides_key": "default_organization",
+      "tags": null,
+      "name": "Postgres Example Test Dataset",
+      "description": "Example of a Postgres dataset containing a variety of related tables like customers, products, addresses, etc.",
+      "meta": null,
+      "data_categories": null,
+      "fides_meta": null,
+      "collections": []
+    }
+  ]
+}

clients/admin-ui/cypress/support/stubs.ts

@@ -81,9 +81,13 @@ export const stubDatasetCrud = () => {
   cy.intercept("GET", "/api/v1/dataset", { fixture: "datasets.json" }).as(
     "getDatasets"
   );
-  cy.intercept("GET", "/api/v1/filter/dataset?only_unlinked_datasets=false", {
-    fixture: "datasets.json",
-  }).as("getFilteredDatasets");
+  cy.intercept(
+    "GET",
+    "/api/v1/dataset?page=1&size=25&exclude_saas_datasets=true",
+    {
+      fixture: "datasets_paginated.json",
+    }
+  ).as("getFilteredDatasets");
   cy.intercept("GET", "/api/v1/dataset/*", { fixture: "dataset.json" }).as(
     "getDataset"
   );

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

@@ -11,6 +11,7 @@ export const SYSTEM_ROUTE = "/systems";
 export const EDIT_SYSTEM_ROUTE = "/systems/configure/[id]";
 export const CLASSIFY_SYSTEMS_ROUTE = "/classify-systems";
 export const DATASET_ROUTE = "/dataset";
+export const DATASET_EDIT_ROUTE = "/dataset/[id]";
 
 // Detection and discovery
 export const DETECTION_DISCOVERY_ACTIVITY_ROUTE = "/data-discovery/activity";