feat: update to react 18

.gitignore

@@ -26,6 +26,7 @@ apps/**/build/
 cypress.json
 cypress.config.ts
 cypress/screenshots/*
+cypress-tests/cypress/screenshots/*
 .pulumi
 Pulumi.*
 !Pulumi.yaml

apps/admin/package.json

@@ -7,7 +7,7 @@
     "@editorjs/list": "^1.6.0",
     "@editorjs/quote": "^2.4.0",
     "@editorjs/underline": "^1.0.0",
-    "@types/react": "17.0.39",
+    "@types/react": "18.2.65",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-admin-users-cognito": "0.0.0",
     "@webiny/app-form-builder": "0.0.0",
@@ -22,8 +22,8 @@
     "core-js": "^3.0.1",
     "cross-fetch": "^3.0.4",
     "prop-types": "^15.7.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "regenerator-runtime": "^0.13.5",
     "theme": "^0.1.0",
     "tslib": "^2.4.0"

apps/admin/src/index.tsx

@@ -1,10 +1,10 @@
+import React from "react";
 import "cross-fetch/polyfill";
 import "core-js/stable";
 import "regenerator-runtime/runtime";
-import React from "react";
-import ReactDOM from "react-dom";
 import { App } from "./App";
 import "./plugins";
 
-const render = module.hot ? ReactDOM.render : ReactDOM.hydrate;
-render(<App />, document.getElementById("root"));
+import { renderApp } from "@webiny/app-admin";
+
+renderApp(<App />);

apps/theme/layouts/forms/DefaultFormLayout/Cell.tsx

@@ -1,18 +1,17 @@
 import styled from "@emotion/styled";
 
 export const Cell = styled.div`
-  width: 100%;
-  background-color: ${props => props.theme.styles.colors["color6"]};
-  padding: 15px;
+    width: 100%;
+    background-color: ${props => props.theme.styles.colors["color6"]};
+    padding: 15px;
 
-  ${props => props.theme.breakpoints["desktop"]} {
-    &:first-of-type {
-      padding-left: 0;
-    }
+    ${props => props.theme.breakpoints["desktop"]} {
+        &:first-of-type {
+            padding-left: 0;
+        }
 
-    &:last-child {
-      padding-right: 0;
+        &:last-child {
+            padding-right: 0;
+        }
     }
-  }
-}
 `;

apps/theme/package.json

@@ -18,7 +18,7 @@
     "@webiny/utils": "0.0.0",
     "@webiny/validation": "0.0.0",
     "graphql": "^15.7.2",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-hamburger-menu": "^1.1.1"
   },
   "devDependencies": {

apps/website/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.6",
-    "@types/react": "17.0.39",
+    "@types/react": "18.2.65",
     "@webiny/app": "0.0.0",
     "@webiny/app-form-builder": "0.0.0",
     "@webiny/app-page-builder": "0.0.0",
@@ -20,8 +20,8 @@
     "cross-fetch": "^3.0.4",
     "graphql": "^15.7.2",
     "graphql-tag": "^2.12.6",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "regenerator-runtime": "^0.13.5",
     "theme": "^0.1.0"
   },

apps/website/src/index.tsx

@@ -1,11 +1,11 @@
+import React from "react";
 import "cross-fetch/polyfill";
 import "core-js/stable";
 import "regenerator-runtime/runtime";
-import React from "react";
-import ReactDOM from "react-dom";
 import { App } from "./App";
 import "./plugins";
 import "theme/global.scss";
 
-const render = module.hot ? ReactDOM.render : ReactDOM.hydrate;
-render(<App />, document.getElementById("root"));
+import { renderApp } from "@webiny/app";
+
+renderApp(<App />);

cypress-tests/cypress/e2e/admin/formBuilder/forms/createForm.cy.ts

@@ -52,7 +52,9 @@ context("Forms Creation", () => {
                     .first()
                     .within(() => {
                         cy.findByText(newFormTitle2).should("be.visible");
-                        cy.findByTestId("edit-form-action").click({ force: true });
+                        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+                        // Now targeting <button> directly. Revert to `.findByTestId("edit-form-action")` if issue is fixed.
+                        cy.get('button[data-testid="edit-form-action"]').click({ force: true });
                     });
             });
 
@@ -88,7 +90,9 @@ context("Forms Creation", () => {
                 cy.findAllByTestId("default-data-list-element")
                     .first()
                     .within(() => {
-                        cy.findByTestId("delete-form-action").click({ force: true });
+                        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+                        // Now targeting <button> directly. Revert to `.findByTestId("delete-form-action")` if issue is fixed.
+                        cy.get('button[data-testid="delete-form-action"]').click({ force: true });
                     });
             });
 

cypress-tests/cypress/e2e/admin/formBuilder/forms/publishAndUnpublishForm.cy.js

@@ -43,7 +43,9 @@ context("Forms Creation", () => {
         });
 
         // 4. UnPublish the form
-        cy.findByTestId("fb.form-preview.header.unpublish").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("fb.form-preview.header.unpublish")` if issue is fixed.
+        cy.get('button[data-testid="fb.form-preview.header.unpublish"]').click();
         cy.findByTestId("fb.form-preview.header.unpublish-dialog").within(() => {
             cy.findByTestId("confirmationdialog-confirm-action").click();
         });
@@ -60,7 +62,9 @@ context("Forms Creation", () => {
         });
 
         // 5. Create a new revision from the locked v1 and publish it
-        cy.findByTestId("fb.form-preview.header.create-revision").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("fb.form-preview.header.create-revision")` if issue is fixed.
+        cy.get('button[data-testid="fb.form-preview.header.create-revision"]').click();
         cy.wait(500);
         // 5.1. Add "Website" field to the form
         cy.findByTestId("form-editor-field-group-contact").click();
@@ -126,7 +130,9 @@ context("Forms Creation", () => {
         cy.findAllByTestId("fb.form-revisions.action-menu.create-revision").last().click();
         cy.wait(1000);
         // 8. Go back in form details view and check it's status
-        cy.findByTestId("fb-editor-back-button").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("fb-editor-back-button")` if issue is fixed.
+        cy.get('button[data-testid="fb-editor-back-button"]').click();
         cy.wait(1000);
 
         cy.findByTestId("default-data-list").within(() => {
@@ -140,7 +146,9 @@ context("Forms Creation", () => {
         });
 
         // Delete form.
-        cy.findByTestId("fb.form-preview.header.delete").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("fb.form-preview.header.delete")` if issue is fixed.
+        cy.get('button[data-testid="fb.form-preview.header.delete"]').click();
         cy.wait(500);
         cy.findByTestId("fb.form-preview.header.delete-dialog").within(() => {
             cy.findByText("Confirmation required!").should("exist");

cypress-tests/cypress/e2e/admin/headlessCms/contentModel/contentModels.cy.js

@@ -87,7 +87,9 @@ context("Headless CMS - Content Models CRUD", () => {
         });
         cy.findByText(`Your content model was saved successfully!`).should("exist");
         // Get back to the list view
-        cy.findByTestId("cms-editor-back-button").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("cms-editor-back-button")` if issue is fixed.
+        cy.get('button[data-testid="cms-editor-back-button"]').click();
         cy.wait(1000);
         // 3.3 Check newly created model in data list
         cy.findByTestId("default-data-list").within(() => {
@@ -106,15 +108,21 @@ context("Headless CMS - Content Models CRUD", () => {
                 .first()
                 .within(() => {
                     cy.findByText(`Book - ${uniqueId}`).should("exist");
-                    cy.findByTestId("cms-edit-content-model-button").click({ force: true });
+                    // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+                    // Now targeting <button> directly. Revert to `.findByTestId("cms-edit-content-model-button")` if issue is fixed.
+                    cy.get('button[data-testid="cms-edit-content-model-button"]').click({
+                        force: true
+                    });
                 });
         });
         // 4.2 Add field validations
         // a) Click on the edit icon
         cy.findAllByTestId("cms.editor.field-row")
             .first()
             .within(() => {
-                cy.findByTestId("cms.editor.edit-field").click();
+                // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+                // Now targeting <button> directly. Revert to `.findByTestId("cms.editor.edit-field")` if issue is fixed.
+                cy.get('button[data-testid="cms.editor.edit-field"]').click();
             });
         cy.findByTestId("cms-editor-edit-fields-dialog").within(() => {
             // b) Select validation tab from dialog
@@ -123,7 +131,7 @@ context("Headless CMS - Content Models CRUD", () => {
             cy.findByTestId("cms.editor.field-validator.required")
                 .parent()
                 .within(() => {
-                    cy.findByLabelText("Enabled").check();
+                    cy.findByLabelText("Enabled").click();
                     cy.findByTestId("cms.editfield.validators.required").clear();
                     cy.findByTestId("cms.editfield.validators.required")
                         .type("Title is required.")
@@ -145,7 +153,9 @@ context("Headless CMS - Content Models CRUD", () => {
         cy.findByTestId("fr.input.number.Edition").type("2");
         cy.findByText("Title is required.").should("exist");
         // Get back to the list view
-        cy.findByTestId("cms-editor-back-button").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("cms-editor-back-button")` if issue is fixed.
+        cy.get('button[data-testid="cms-editor-back-button"]').click();
         cy.wait(1000);
 
         // Delete new model
@@ -155,7 +165,9 @@ context("Headless CMS - Content Models CRUD", () => {
                 .within(() => {
                     cy.findByText(`Book - ${uniqueId}`).should("exist");
                     // a. Click on delete button
-                    cy.findByTestId("cms-delete-content-model-button").click({
+                    // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+                    // Now targeting <button> directly. Revert to `.findByTestId("cms-delete-content-model-button")` if issue is fixed.
+                    cy.get('button[data-testid="cms-delete-content-model-button"]').click({
                         force: true
                     });
                     cy.wait(1000);
@@ -223,7 +235,9 @@ context("Headless CMS - Content Models CRUD", () => {
         //cy.findByTestId("fr.input.file.Image").should("exist");
 
         // Get back to the list view
-        cy.findByTestId("cms-editor-back-button").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("cms-editor-back-button")` if issue is fixed.
+        cy.get('button[data-testid="cms-editor-back-button"]').click();
         cy.wait(1000);
 
         // Delete new model
@@ -233,7 +247,9 @@ context("Headless CMS - Content Models CRUD", () => {
                 .within(() => {
                     cy.findByText(`Book - ${uniqueId}`).should("exist");
                     // a. Click on delete button
-                    cy.findByTestId("cms-delete-content-model-button").click({
+                    // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+                    // Now targeting <button> directly. Revert to `.findByTestId("cms-delete-content-model-button")` if issue is fixed.
+                    cy.get('button[data-testid="cms-delete-content-model-button"]').click({
                         force: true
                     });
                     cy.wait(1000);

cypress-tests/cypress/e2e/admin/headlessCms/contentModel/searchSortModels.cy.js

@@ -126,10 +126,14 @@ context("Headless CMS - Search and Sort Content Models", () => {
         cy.visit("/cms/content-models");
 
         // Sort groups by "Newest to Oldest"
-        cy.findByTestId("default-data-list.filter").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("default-data-list.filter")` if issue is fixed.
+        cy.get('button[data-testid="default-data-list.filter"]').click();
         cy.findByTestId("ui.list.data-list").within(() => {
             cy.get("select").select("savedOn_DESC");
-            cy.findByTestId("default-data-list.filter").click();
+            // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+            // Now targeting <button> directly. Revert to `.findByTestId("default-data-list.filter")` if issue is fixed.
+            cy.get('button[data-testid="default-data-list.filter"]').click();
         });
         // Last model should be on the top
         cy.findByTestId("default-data-list").within(() => {
@@ -141,10 +145,14 @@ context("Headless CMS - Search and Sort Content Models", () => {
         });
 
         // Sort groups by "Oldest to Newest"
-        cy.findByTestId("default-data-list.filter").click();
+        // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+        // Now targeting <button> directly. Revert to `.findByTestId("default-data-list.filter")` if issue is fixed.
+        cy.get('button[data-testid="default-data-list.filter"]').click();
         cy.findByTestId("ui.list.data-list").within(() => {
             cy.get("select").select("savedOn_ASC");
-            cy.findByTestId("default-data-list.filter").click();
+            // Workaround for "@rmwc/icon-button" v14 issue: props duplication onto <i>, causing multiple elements with same `data-testid`.
+            // Now targeting <button> directly. Revert to `.findByTestId("default-data-list.filter")` if issue is fixed.
+            cy.get('button[data-testid="default-data-list.filter"]').click();
         });
         // Last model should not be on the top
         cy.findByTestId("default-data-list").within(() => {