From 36e2c5007208d979f5e11c57808390a789c9ed8b Mon Sep 17 00:00:00 2001 From: Jason Gill Date: Tue, 9 Jul 2024 16:52:34 -0600 Subject: [PATCH] Upgrade React version in all clients (#5036) --- CHANGELOG.md | 4 +- clients/admin-ui/.babelrc | 3 - clients/admin-ui/.eslintignore | 3 +- clients/admin-ui/__tests__/jest.setup.ts | 2 +- clients/admin-ui/__tests__/test-utils.tsx | 2 +- clients/admin-ui/cypress/e2e/connectors.cy.ts | 24 +- .../cypress/e2e/datasets-classify.cy.ts | 4 +- .../cypress/e2e/integration-management.cy.ts | 15 +- .../cypress/e2e/privacy-requests.cy.ts | 4 +- clients/admin-ui/cypress/e2e/properties.cy.ts | 2 +- .../admin-ui/cypress/e2e/systems-plus.cy.ts | 6 +- clients/admin-ui/next.config.js | 3 +- clients/admin-ui/package.json | 55 +- .../src/features/common/AccordionTree.tsx | 4 +- .../src/features/common/CheckboxTree.tsx | 13 +- .../admin-ui/src/features/common/DataTabs.tsx | 2 +- .../admin-ui/src/features/common/Image.tsx | 4 +- .../src/features/common/PageHeader.tsx | 8 +- .../src/features/common/PaginationFooter.tsx | 8 +- .../features/common/RequestStatusBadge.tsx | 7 +- .../custom-fields/CreateCustomFields.tsx | 12 +- .../features/common/custom-fields/Layout.tsx | 17 +- .../common/custom-fields/form/CustomInput.tsx | 15 +- .../common/dropdown/MultiSelectDropdown.tsx | 11 +- .../common/dropdown/SelectDropdown.tsx | 8 +- .../dropdown/TaxonomySelectDropdown.tsx | 17 +- .../src/features/common/form/inputs.tsx | 10 +- .../common/hooks/useTaxonomies.test.ts | 33 +- .../features/common/hooks/useTaxonomies.tsx | 8 +- .../features/common/modals/StandardDialog.tsx | 2 +- .../DataFlowAccordionForm.tsx | 4 +- .../common/table/v2/TableActionBar.tsx | 6 +- .../src/features/common/table/v2/cells.tsx | 6 +- .../column-settings/DraggableColumnList.tsx | 4 +- .../admin-ui/src/features/common/types.tsx | 2 +- .../src/features/common/yaml/YamlError.tsx | 2 +- .../configure-consent/DataUsesForm.tsx | 2 +- .../ConnectorTemplateUploadModal.tsx | 4 +- .../consent-settings/PurposeOverrides.tsx | 11 +- .../custom-assets/CustomAssetUploadButton.tsx | 4 +- .../custom-assets/CustomAssetUploadModal.tsx | 4 +- .../ActionButton.tsx | 2 +- .../DetectionItemActions.tsx | 4 +- .../DiscoveryItemActions.tsx | 4 +- .../DiscoveryMonitorBreadcrumbs.tsx | 9 +- .../SearchInput.tsx | 3 +- .../TaxonomyDisplayAndEdit.tsx | 10 +- .../tables/ActivityTable.tsx | 6 +- .../tables/DetectionResultTable.tsx | 2 +- .../tables/DiscoveryResultTable.tsx | 2 +- .../src/features/datamap/SettingsBar.tsx | 2 +- .../datamap/datamap-drawer/SystemInfo.tsx | 2 +- .../AccordionMultifieldFilter.tsx | 4 +- .../features/datamap/modals/FilterModal.tsx | 2 +- .../reporting/DatamapReportFilterModal.tsx | 6 +- .../features/dataset/DatabaseConnectForm.tsx | 2 +- .../ConnectionFilters.tsx | 2 +- .../datastore-connections/ConnectionGrid.tsx | 5 +- .../ConnectionGridItem.tsx | 6 +- .../datastore-connections/ConnectionMenu.tsx | 4 +- .../ConnectionStatusBadge.tsx | 4 +- .../ConnectionTypeLogo.tsx | 4 +- .../ConnectionsContainer.tsx | 2 +- .../ConnectionsEmptyState.tsx | 2 +- .../ConnectionsHeader.tsx | 2 +- .../ConnectionsLayout.tsx | 2 +- .../DeleteConnectionModal.tsx | 4 +- .../DisableConnectionModal.tsx | 4 +- .../datastore-connections/TestData.tsx | 4 +- .../add-connection/AddConnection.tsx | 2 +- .../add-connection/AddConnectionButton.tsx | 2 +- .../add-connection/ChooseConnection.tsx | 2 +- .../ConfigurationSettingsNav.tsx | 4 +- .../add-connection/ConfigureConnector.tsx | 2 +- .../add-connection/ConnectionTypeFilter.tsx | 4 +- .../add-connection/ConnectionTypeList.tsx | 2 +- .../add-connection/ConnectorParameters.tsx | 6 +- .../add-connection/DatasetConfiguration.tsx | 4 +- .../add-connection/TestConnection.tsx | 4 +- .../database/ConnectorParameters.tsx | 4 +- .../email/ConnectorParameters.tsx | 4 +- .../forms/ConnectorParametersForm.tsx | 5 +- .../add-connection/forms/CustomInput.tsx | 17 +- .../add-connection/forms/YamlEditorForm.tsx | 10 +- .../add-connection/manual/ButtonGroup.tsx | 4 +- .../manual/ConnectorParameters.tsx | 4 +- .../manual/ConnectorParametersForm.tsx | 4 +- .../manual/DSRCustomization.tsx | 2 +- .../manual/DSRCustomizationForm.tsx | 4 +- .../sass/ConnectorParameters.tsx | 4 +- .../datastore-connection.slice.ts | 71 +- .../edit-connection/EditConnection.tsx | 2 +- .../filters/ConnectionTypeFilter.tsx | 4 +- .../filters/DisabledStatusFilter.tsx | 4 +- .../filters/SystemTypeFilter.tsx | 2 +- .../filters/TestingStatusFilter.tsx | 2 +- .../ConnectionListDropdown.tsx | 15 +- .../DeleteConnectionModal.tsx | 4 +- .../OrphanedConnectionModal.tsx | 4 +- .../TestConnectionMessage.tsx | 4 +- .../forms/ConnectorParameters.tsx | 11 +- .../forms/ConnectorParametersForm.tsx | 12 +- .../forms/CustomInput.tsx | 6 +- .../DSRCustomizationForm/ButtonGroup.tsx | 4 +- .../DSRCustomizationForm.tsx | 4 +- .../DSRCustomizationModal.tsx | 2 +- .../DatasetConfigField/DatasetConfigField.tsx | 5 +- .../fields/DatasetConfigField/YamlEditor.tsx | 4 +- .../system_portal_config/types.ts | 4 +- .../AddMessagingTemplateModal.tsx | 2 +- .../features/privacy-experience/Preview.tsx | 18 +- .../privacy-experience/preview/helpers.ts | 2 +- .../PrivacyNoticeTranslationForm.tsx | 1 - .../DenyPrivacyRequestModal.tsx | 4 +- .../privacy-requests/EmailChipList.tsx | 4 +- .../privacy-requests/PrivacyRequest.tsx | 4 +- .../PrivacyRequestsContainer.tsx | 2 +- .../privacy-requests/buttons/MoreButton.tsx | 4 +- .../drawers/ConfigureAlerts.tsx | 7 +- .../ManualAccessProcessingDetail.tsx | 18 +- .../ManualErasureProcessingDetail.tsx | 18 +- .../ManualProcessingList.tsx | 10 +- .../manual-processing/types.ts | 9 + .../properties/DeletePropertyModal.tsx | 5 +- .../src/features/system/VendorSelector.tsx | 7 +- .../AddMultipleSystems.tsx | 2 +- .../system/history/SystemHistoryTable.tsx | 4 +- .../history/modal/SelectedHistoryContext.tsx | 4 +- .../system/history/modal/SystemDataForm.tsx | 2 +- .../modal/fields/SystemCustomFieldGroup.tsx | 4 +- .../PrivacyDeclarationForm.tsx | 2 +- .../PrivacyDeclarationFormModal.tsx | 4 +- .../features/taxonomy/TaxonomyFormBase.tsx | 2 +- .../user-management/DeleteUserModal.tsx | 2 +- .../user-management/NewPasswordModal.tsx | 2 +- .../user-management/PermissionsForm.tsx | 2 +- .../features/user-management/RoleOption.tsx | 2 +- .../user-management/UpdatePasswordModal.tsx | 4 +- .../src/features/user-management/UserForm.tsx | 2 +- .../user-management/UserManagementRow.tsx | 2 +- .../user-management/UserManagementTable.tsx | 11 +- .../UserManagementTableActions.tsx | 2 +- clients/admin-ui/src/home/HomeBanner.tsx | 2 +- clients/admin-ui/src/home/HomeContainer.tsx | 2 +- clients/admin-ui/src/home/HomeContent.tsx | 2 +- clients/admin-ui/src/home/HomeLayout.tsx | 2 +- clients/admin-ui/src/pages/_app.tsx | 4 +- .../src/pages/consent/configure/index.tsx | 2 +- .../pages/consent/privacy-experience/[id].tsx | 4 +- .../admin-ui/src/pages/integrations/[id].tsx | 8 +- clients/admin-ui/src/pages/login.tsx | 2 +- clients/admin-ui/tsconfig.json | 13 +- clients/fides-js/docs/interfaces/Fides.md | 16 +- .../fides-js/docs/interfaces/FidesEvent.md | 43 +- clients/fides-js/package.json | 10 +- .../fides-js/src/lib/i18n/i18n-context.tsx | 10 +- clients/fidesui/.eslintrc.json | 34 +- clients/fidesui/package.json | 31 +- .../example-component/ExampleComponent.tsx | 6 +- .../src/components/links/PrimaryLink.tsx | 3 +- .../src/components/links/SecondaryLink.tsx | 3 +- clients/fidesui/src/icons/SortArrow.tsx | 2 +- clients/fidesui/src/index.ts | 49 +- clients/package-lock.json | 10530 ++++++++-------- clients/privacy-center/.prettierignore | 3 +- .../__tests__/common/geolocation.test.ts | 42 +- .../__tests__/common/property-id.test.ts | 23 +- .../privacy-center/__tests__/jest.setup.ts | 2 +- clients/privacy-center/common/i18nContext.tsx | 4 +- clients/privacy-center/components/Card.tsx | 7 +- clients/privacy-center/components/Error.tsx | 2 +- .../privacy-center/components/ErrorLayout.tsx | 7 +- clients/privacy-center/components/Layout.tsx | 6 +- .../privacy-center/components/PrivacyCard.tsx | 4 +- .../components/consent/ConsentCard.tsx | 4 +- .../components/modals/RequestModal.tsx | 7 +- .../components/modals/VerificationForm.tsx | 4 +- .../ConsentRequestForm.tsx | 10 +- .../ConsentRequestModal.tsx | 4 +- .../PrivacyRequestForm.tsx | 24 +- .../PrivacyRequestModal.tsx | 4 +- .../RequestSubmitted.tsx | 2 +- clients/privacy-center/next.config.js | 3 +- clients/privacy-center/package.json | 37 +- clients/privacy-center/pages/_app.tsx | 4 +- clients/privacy-center/pages/index.tsx | 4 +- 186 files changed, 6226 insertions(+), 5645 deletions(-) delete mode 100644 clients/admin-ui/.babelrc diff --git a/CHANGELOG.md b/CHANGELOG.md index fd451bdfdc..7660601c18 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/clients/admin-ui/.babelrc b/clients/admin-ui/.babelrc deleted file mode 100644 index 1ff94f7ed2..0000000000 --- a/clients/admin-ui/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["next/babel"] -} diff --git a/clients/admin-ui/.eslintignore b/clients/admin-ui/.eslintignore index acaeb30a90..3c92152ed8 100644 --- a/clients/admin-ui/.eslintignore +++ b/clients/admin-ui/.eslintignore @@ -2,4 +2,5 @@ node_modules dist .eslintrc.json next.config.js -jest.config.js \ No newline at end of file +jest.config.js +cypress.config.ts diff --git a/clients/admin-ui/__tests__/jest.setup.ts b/clients/admin-ui/__tests__/jest.setup.ts index aa3c4d26af..cc1b1931ef 100644 --- a/clients/admin-ui/__tests__/jest.setup.ts +++ b/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"; diff --git a/clients/admin-ui/__tests__/test-utils.tsx b/clients/admin-ui/__tests__/test-utils.tsx index 08342d738a..f70fb4d84d 100644 --- a/clients/admin-ui/__tests__/test-utils.tsx +++ b/clients/admin-ui/__tests__/test-utils.tsx @@ -19,7 +19,7 @@ function render( ...renderOptions }: CustomRenderOptions = {} ) { - const Wrapper: React.FC = ({ children }) => ( + const Wrapper = ({ children }) => ( {children} ); return rtlRender(ui, { wrapper: Wrapper, ...renderOptions }); diff --git a/clients/admin-ui/cypress/e2e/connectors.cy.ts b/clients/admin-ui/cypress/e2e/connectors.cy.ts index c8db3c007c..e56fe7b4b5 100644 --- a/clients/admin-ui/cypress/e2e/connectors.cy.ts +++ b/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"); diff --git a/clients/admin-ui/cypress/e2e/datasets-classify.cy.ts b/clients/admin-ui/cypress/e2e/datasets-classify.cy.ts index 9994d42b2a..6f586d3066 100644 --- a/clients/admin-ui/cypress/e2e/datasets-classify.cy.ts +++ b/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(); diff --git a/clients/admin-ui/cypress/e2e/integration-management.cy.ts b/clients/admin-ui/cypress/e2e/integration-management.cy.ts index f23a4cbbb9..d4a9b8c389 100644 --- a/clients/admin-ui/cypress/e2e/integration-management.cy.ts +++ b/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,12 +156,21 @@ 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"); }); @@ -166,6 +178,7 @@ describe("Integration management for data detection & discovery", () => { 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"); diff --git a/clients/admin-ui/cypress/e2e/privacy-requests.cy.ts b/clients/admin-ui/cypress/e2e/privacy-requests.cy.ts index 1b6ca2ce7f..15a59663e4 100644 --- a/clients/admin-ui/cypress/e2e/privacy-requests.cy.ts +++ b/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"); diff --git a/clients/admin-ui/cypress/e2e/properties.cy.ts b/clients/admin-ui/cypress/e2e/properties.cy.ts index 5ecea79f76..b5552f43ed 100644 --- a/clients/admin-ui/cypress/e2e/properties.cy.ts +++ b/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"); diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts index 2dcc2b770a..8ff12d661b 100644 --- a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts +++ b/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); }); diff --git a/clients/admin-ui/next.config.js b/clients/admin-ui/next.config.js index 923b177ea3..69e075fe98 100644 --- a/clients/admin-ui/next.config.js +++ b/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 diff --git a/clients/admin-ui/package.json b/clients/admin-ui/package.json index f676b3913f..877d731f50 100644 --- a/clients/admin-ui/package.json +++ b/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}": [ diff --git a/clients/admin-ui/src/features/common/AccordionTree.tsx b/clients/admin-ui/src/features/common/AccordionTree.tsx index 70dbad1e3b..e6b511ab0d 100644 --- a/clients/admin-ui/src/features/common/AccordionTree.tsx +++ b/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 = ({ {node.children.map((childNode) => ( - {createTree(childNode, level + 1)} + {createTree(childNode, level + 1) as ReactNode} ))} diff --git a/clients/admin-ui/src/features/common/CheckboxTree.tsx b/clients/admin-ui/src/features/common/CheckboxTree.tsx index f9bf728a47..b1a8fc68cf 100644 --- a/clients/admin-ui/src/features/common/CheckboxTree.tsx +++ b/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) => ( - {createTree(childNode)} - ))} + {isExpanded + ? node.children.map((childNode) => ( + + {createTree(childNode) as ReactNode} + + )) + : undefined} ); } diff --git a/clients/admin-ui/src/features/common/DataTabs.tsx b/clients/admin-ui/src/features/common/DataTabs.tsx index 21f98858bf..9fe3cda4a1 100644 --- a/clients/admin-ui/src/features/common/DataTabs.tsx +++ b/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; } diff --git a/clients/admin-ui/src/features/common/Image.tsx b/clients/admin-ui/src/features/common/Image.tsx index 76873231d8..323a5b2b2f 100644 --- a/clients/admin-ui/src/features/common/Image.tsx +++ b/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) => ( ); diff --git a/clients/admin-ui/src/features/common/PageHeader.tsx b/clients/admin-ui/src/features/common/PageHeader.tsx index 795c231b13..1b296e56f7 100644 --- a/clients/admin-ui/src/features/common/PageHeader.tsx +++ b/clients/admin-ui/src/features/common/PageHeader.tsx @@ -1,10 +1,10 @@ -import { Box } from "fidesui"; +import { Box, BoxProps } from "fidesui"; import { isArray } from "lodash"; import { isValidElement, ReactElement } from "react"; import Breadcrumbs, { BreadcrumbsProps } from "~/features/common/Breadcrumbs"; -interface PageHeaderProps { +interface PageHeaderProps extends BoxProps { breadcrumbs: BreadcrumbsProps["breadcrumbs"] | ReactElement | false; isSticky?: boolean; } @@ -18,12 +18,12 @@ interface PageHeaderProps { * @param isSticky - Whether the page header should stick to the top of the page while scrolling. Defaults to true. * @param children - Additional content to display in the header. */ -const PageHeader: React.FC = ({ +const PageHeader = ({ breadcrumbs, isSticky = true, children, ...otherProps -}) => ( +}: PageHeaderProps): JSX.Element => ( void; }; -const PaginationFooter: React.FC = ({ +const PaginationFooter = ({ page, size, total, handleNextPage, handlePreviousPage, -}) => { +}: PaginationFooterProps) => { const startingItem = (page - 1) * size + 1; const endingItem = Math.min(total, page * size); return ( @@ -32,7 +32,7 @@ const PaginationFooter: React.FC = ({