Upgrade React version in all clients

CHANGELOG.md

@@ -17,6 +17,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.40.0...main)
 
+### Developer Experience
+- Upgrade to React 18 and Chakra 2, including other dependencies [#5036](https://github.com/ethyca/fides/pull/5036)
+
 ### Changed
 - Updated the sample dataset for the Amplitude integration [#5063](https://github.com/ethyca/fides/pull/5063)
 
@@ -47,7 +50,6 @@ The types of changes are:
 - Updating DSR filtering to use collection-level data categories [#4999](https://github.com/ethyca/fides/pull/4999)
 - Changed discovery monitor form to skip project selection UI when no projects exist [#5056](https://github.com/ethyca/fides/pull/5056)
 
-
 ### Fixed
 - Fixed intermittent connection issues with Redshift by increasing timeout and preferring SSL in test connections [#4981](https://github.com/ethyca/fides/pull/4981)
 - Fixed data detection & discovery results not displaying correctly across multiple pages[#5060](https://github.com/ethyca/fides/pull/5060)

clients/admin-ui/.eslintignore

@@ -2,4 +2,5 @@ node_modules
 dist
 .eslintrc.json
 next.config.js
-jest.config.js
+jest.config.js
+cypress.config.ts

clients/admin-ui/__tests__/jest.setup.ts

@@ -1,2 +1,2 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import "whatwg-fetch";

clients/admin-ui/__tests__/test-utils.tsx

@@ -19,7 +19,7 @@ function render(
     ...renderOptions
   }: CustomRenderOptions = {}
 ) {
-  const Wrapper: React.FC = ({ children }) => (
+  const Wrapper = ({ children }) => (
     <Provider store={customStore}>{children}</Provider>
   );
   return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });

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

@@ -50,7 +50,13 @@ describe("Connectors", () => {
     });
 
     it("Should allow saving a dataset configuration via dropdown", () => {
-      cy.visit("/datastore-connection/postgres_connector");
+      cy.visit("/datastore-connection");
+      cy.getByTestId("connection-grid-item-postgres_connector").within(() => {
+        cy.getByTestId("connection-menu-btn").click();
+      });
+      cy.getByTestId("connection-menu-postgres_connector").within(() => {
+        cy.getByTestId("configure-btn").click();
+      });
       cy.getByTestId("tab-Dataset configuration").click();
       cy.wait("@getPostgresConnectorDatasetconfig");
 
@@ -78,7 +84,13 @@ describe("Connectors", () => {
     });
 
     it("Should allow saving a dataset configuration via yaml", () => {
-      cy.visit("/datastore-connection/postgres_connector");
+      cy.visit("/datastore-connection");
+      cy.getByTestId("connection-grid-item-postgres_connector").within(() => {
+        cy.getByTestId("connection-menu-btn").click();
+      });
+      cy.getByTestId("connection-menu-postgres_connector").within(() => {
+        cy.getByTestId("configure-btn").click();
+      });
       cy.getByTestId("tab-Dataset configuration").click();
       cy.wait("@getPostgresConnectorDatasetconfig");
 
@@ -122,7 +134,13 @@ describe("Connectors", () => {
         }
       ).as("getEmptyPostgresConnectorDatasetconfig");
 
-      cy.visit("/datastore-connection/postgres_connector");
+      cy.visit("/datastore-connection");
+      cy.getByTestId("connection-grid-item-postgres_connector").within(() => {
+        cy.getByTestId("connection-menu-btn").click();
+      });
+      cy.getByTestId("connection-menu-postgres_connector").within(() => {
+        cy.getByTestId("configure-btn").click();
+      });
       cy.getByTestId("tab-Dataset configuration").click();
       cy.wait("@getEmptyPostgresConnectorDatasetconfig");
       cy.getByTestId("dataset-selector-section").should("not.exist");

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

@@ -238,7 +238,9 @@ describe("Datasets with Fides Classify", () => {
 
       // Select a suggested category from the dropdown.
       cy.getByTestId("classified-select").click("right");
-      cy.get("[role=button]").contains("user.contact.phone_number").click();
+      cy.get("[data-testid=classified-select] [role=option]")
+        .contains("user.contact.phone_number")
+        .click();
 
       // Select a category from the taxonomy.
       cy.getByTestId("data-category-dropdown").click();

clients/admin-ui/cypress/e2e/integration-management.cy.ts

@@ -60,6 +60,9 @@ describe("Integration management for data detection & discovery", () => {
       });
 
       it("should be able to test connections by clicking the button", () => {
+        cy.intercept("GET", "/api/v1/connection/bq_integration", {
+          fixture: "connectors/bigquery_connection.json",
+        }).as("getConnection");
         cy.getByTestId("integration-info-bq_integration")
           .should("exist")
           .within(() => {
@@ -153,19 +156,29 @@ describe("Integration management for data detection & discovery", () => {
   describe("detail view", () => {
     beforeEach(() => {
       stubPlus(true);
+      cy.intercept("GET", "/api/v1/connection", { body: undefined }).as(
+        "unknownConnection"
+      );
       cy.intercept("GET", "/api/v1/connection/*", {
         fixture: "connectors/bigquery_connection.json",
       }).as("getConnection");
+      cy.intercept("GET", "/api/v1/connection?*", {
+        fixture: "connectors/bigquery_connection_list.json",
+      }).as("getConnections");
       cy.intercept("GET", "/api/v1/connection_type", {
         fixture: "connectors/connection_types.json",
       }).as("getConnectionTypes");
+      cy.intercept("GET", "/api/v1/system", {
+        fixture: "systems/systems.json",
+      }).as("getSystems");
       cy.visit("/integrations/bq_integration");
     });
 
     it("redirects to list view if the integration type is incorrect", () => {
       cy.intercept("GET", "/api/v1/connection/*", {
         fixture: "connectors/postgres_connector.json",
       }).as("getConnection");
+      cy.wait("@getConnection");
       cy.url().should("not.contain", "bq_integration");
     });
 
@@ -211,7 +224,6 @@ describe("Integration management for data detection & discovery", () => {
         }).as("getDatabases");
         cy.getByTestId("tab-Data discovery").click();
         cy.wait("@getMonitors");
-        cy.clock(new Date(2034, 5, 3));
       });
 
       it("shows a table of monitors", () => {
@@ -221,6 +233,7 @@ describe("Integration management for data detection & discovery", () => {
       it("can configure a new monitor", () => {
         cy.intercept("PUT", "/api/v1/plus/discovery-monitor*").as("putMonitor");
         cy.getByTestId("add-monitor-btn").click();
+        cy.getByTestId("add-modal-content").should("be.visible");
         cy.getByTestId("input-name").type("A new monitor");
         cy.selectOption("input-execution_frequency", "Daily");
         cy.getByTestId("input-execution_start_date").type("2034-06-03T10:00");

clients/admin-ui/cypress/e2e/privacy-requests.cy.ts

@@ -19,7 +19,7 @@ describe("Privacy Requests", () => {
       cy.visit("/privacy-requests");
       cy.wait("@getPrivacyRequests");
 
-      cy.get("[role='row']").as("rows");
+      cy.get("tr").as("rows");
 
       // Annoyingly fancy, I know, but this selects the containing rows that have a badge with the
       // matching status text -- as opposed to just filtering by status which would yield the badge
@@ -29,7 +29,7 @@ describe("Privacy Requests", () => {
           .get("@rows")
           .getByTestId("request-status-badge")
           .filter(`:contains('${status}')`)
-          .closest("[role='row']");
+          .closest("tr");
 
       selectByStatus("New").as("rowsNew");
       selectByStatus("Completed").as("rowsCompleted");

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

@@ -32,11 +32,11 @@ describe("Properties page", () => {
     it("Owner and contributor have create, edit, and delete permissions", () => {
       [RoleRegistryEnum.OWNER, RoleRegistryEnum.CONTRIBUTOR].forEach((role) => {
         cy.assumeRole(role);
+        cy.visit(PROPERTIES_ROUTE);
 
         cy.intercept("GET", "/api/v1/plus/property/*", {
           fixture: "properties/property.json",
         }).as("getProperty");
-        cy.visit(PROPERTIES_ROUTE);
 
         cy.getByTestId("add-property-button").should("be.visible");
         cy.getByTestId("edit-property-button").should("be.visible");

clients/admin-ui/cypress/e2e/systems-plus.cy.ts

@@ -341,9 +341,11 @@ describe("System management with Plus features", () => {
       cy.visit(ADD_SYSTEMS_MULTIPLE_ROUTE);
       cy.wait("@getSystemVendors");
       cy.get('[type="checkbox"').check({ force: true });
-      cy.getByTestId("add-multiple-systems-btn").click();
+      cy.getByTestId("add-multiple-systems-btn")
+        .should("exist")
+        .click({ force: true });
       cy.getByTestId("confirmation-modal");
-      cy.getByTestId("continue-btn").click();
+      cy.getByTestId("continue-btn").click({ force: true });
       cy.url().should("include", DATAMAP_ROUTE);
     });
 

clients/admin-ui/next.config.js

@@ -9,7 +9,8 @@ const withTM = require("next-transpile-modules")(["fidesui"]);
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  // `reactStrictMode` must be false for Chakra v2 modals to behave properly. See https://github.com/chakra-ui/chakra-ui/issues/5321#issuecomment-1219327270
+  reactStrictMode: false,
   experimental: {
     /**
      * Data flow scanning sometimes takes longer than the default of 30 seconds

clients/admin-ui/package.json

@@ -28,22 +28,21 @@
     "test:ci": "jest"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
     "@fontsource/inter": "^4.5.15",
-    "@monaco-editor/react": "^4.4.6",
+    "@monaco-editor/react": "^4.6.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@tanstack/react-table": "^8.10.7",
+    "@types/jest": "^29.5.12",
     "chakra-react-select": "^3.3.7",
-    "cytoscape": "^3.23.0",
+    "cytoscape": "^3.30.0",
     "cytoscape-klay": "^3.1.4",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
     "fides-js": "^0.0.1",
     "fidesui": "*",
     "file-saver": "^2.0.5",
-    "formik": "^2.2.9",
-    "framer-motion": "6.0",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.2.12",
     "i18n-iso-countries": "^7.5.0",
     "immer": "^9.0.21",
     "js-yaml": "^4.1.0",
@@ -54,37 +53,36 @@
     "next": "^12.3.4",
     "next-transpile-modules": "^10.0.0",
     "query-string": "^9.0.0",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-cytoscapejs": "^2.0.0",
-    "react-dnd": "^15.0.1",
+    "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.1.2",
     "redux-persist": "^6.0.0",
-    "whatwg-fetch": "^3.6.2",
-    "yup": "^0.32.11"
+    "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@jest/globals": "^29.5.0",
+    "@jest/globals": "^29.7.0",
     "@next/bundle-analyzer": "^13.2.4",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.3",
-    "@types/cytoscape": "^3.19.9",
-    "@types/cytoscape-klay": "^3.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@types/cytoscape": "^3.21.4",
+    "@types/cytoscape-klay": "^3.1.4",
     "@types/file-saver": "^2.0.5",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash.snakecase": "^4.1.7",
     "@types/node": "18.15.10",
-    "@types/react": "17.0.38",
-    "@types/react-cytoscapejs": "^1.2.2",
-    "@types/react-table": "^7.7.14",
+    "@types/react": "^18.3.2",
+    "@types/react-cytoscapejs": "^1.2.5",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
-    "babel-jest": "^29.5.0",
+    "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
-    "cypress": "^12.8.1",
-    "cypress-real-events": "^1.7.6",
+    "cypress": "^13.13.0",
+    "cypress-real-events": "^1.13.0",
     "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -94,16 +92,17 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.2.0",
     "openapi-typescript-codegen": "^0.23.0",
     "prettier": "^2.8.7",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "whatwg-fetch": "^3.6.2"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [

clients/admin-ui/src/features/common/AccordionTree.tsx

@@ -8,7 +8,7 @@ import {
   BoxProps,
   Text,
 } from "fidesui";
-import { Fragment, useState } from "react";
+import { Fragment, ReactNode, useState } from "react";
 
 import { TreeNode } from "./types";
 
@@ -89,7 +89,7 @@ const AccordionTree = ({
         <AccordionPanel p={0}>
           {node.children.map((childNode) => (
             <Fragment key={childNode.value}>
-              {createTree(childNode, level + 1)}
+              {createTree(childNode, level + 1) as ReactNode}
             </Fragment>
           ))}
         </AccordionPanel>

clients/admin-ui/src/features/common/CheckboxTree.tsx

@@ -70,7 +70,7 @@ interface CheckboxItemProps {
   onExpanded: (node: TreeNode) => void;
   isIndeterminate: boolean;
   isDisabled: boolean;
-  children?: ReactNode;
+  children?: ReactNode[];
 }
 const CheckboxItem = ({
   node,
@@ -220,10 +220,13 @@ const CheckboxTree = ({
           isDisabled={isDisabled}
           isIndeterminate={isIndeterminate}
         >
-          {isExpanded &&
-            node.children.map((childNode) => (
-              <Fragment key={childNode.value}>{createTree(childNode)}</Fragment>
-            ))}
+          {isExpanded
+            ? node.children.map((childNode) => (
+                <Fragment key={childNode.value}>
+                  {createTree(childNode) as ReactNode}
+                </Fragment>
+              ))
+            : undefined}
         </CheckboxItem>
       );
     }

clients/admin-ui/src/features/common/DataTabs.tsx

@@ -37,7 +37,7 @@ export const FidesTab = ({
 
 export interface TabData {
   label: string;
-  content: ReactNode;
+  content: ReactNode | JSX.Element;
   isDisabled?: boolean;
 }
 

clients/admin-ui/src/features/common/Image.tsx

@@ -1,10 +1,10 @@
 // components/Image.js
-import NextImage from "next/image";
+import NextImage, { ImageProps } from "next/image";
 
 // opt-out of image optimization, no-op
 const customLoader = ({ src }: { src: string }) => src;
 
-const Image: typeof NextImage = (props) => (
+const Image = (props: ImageProps) => (
   <NextImage {...props} loader={customLoader} unoptimized />
 );