Build/upgrade mui v4 to v5 (#1522)

* build: yarn add @mui/material @mui/styles ; yarn add @mui/lab ; yarn add @mui/icons-material

* build: yarn add @emotion/react @emotion/styled

* build: npx @mui/codemod@latest v5.0.0/preset-safe src

* build: empty commit, for: npx @mui/codemod@latest v5.0.0/variant-prop src

* build: npx @mui/codemod@latest v5.0.0/link-underline-hover src

* build: npx prettier --write src backend cypress scripts

* build: yarn remove @material-ui/core @material-ui/icons @material-ui/lab

* build: rm patches/@material-ui+core+4.12.4.patch

* build: update renovate.json to use @mui not @material-ui

* build: update ThemeProvider import, per

https://mui.com/material-ui/migration/v5-style-changes/\#update-themeprovider-import

* build: update EventType for Tabs onChange event, per

https://mui.com/material-ui/migration/v5-component-changes/\#update-event-type-typescript-5

* fix: Two tabs problems:

First, the color changes indicated at https://mui.com/material-ui/migration/v5-component-changes/#update-default-indicatorcolor-and-textcolor-prop-values

Second, remove the the trailing "px" a number rather than string when passing values to the react-virtualized List component.  See
https://mui.com/material-ui/migration/v5-style-changes/\#%E2%9C%85-remove-px-suffix

* fix: transaction amount was falling off right edge

* fix: indirection of onChange prop of Slider via ownerState

this was causing the slider-based cypress tests to fail.

* fix: remove zIndex from AppBar to fix drawer issue

appBar was still over the date picker in mobile screen size, failing one of the cypress:run:mobile tests.  See also
https://mui.com/material-ui/migration/v5-component-changes/\#fix-z-index-issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/containers

followed by lint fixes and manual review

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/BankAccountForm.tsx

linting and review

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/CommentForm.tsx

review, lint

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/MainLayout.tsx

review, remove class for root and use ampersand instead, adding a flexGrow:1 to get styling as before

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NavBar.tsx,

review, appBarShift was incorrectly considered a child of root; fixed that with removal of space between & and ., lint

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NavDrawer.tsx

review, lint, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NotificationListItem.tsx

review, lint, no issues

* build:  npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SignInForm.tsx

lint, cast StyledContainer to typeof Container per mui/material-ui#15695

* build:  npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SignUpForm.tsx

lint, cast StyledContainer to typeof Container per mui/material-ui#15695

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SkeletonList.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionAmount.tsx

lint, remove space between & and . because classes are conditionally applied

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepOne.tsx

lint and review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepTwo.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepThree.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionDateRangeFilter.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionDetail.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionItem.tsx

lint, review, problems with SmallAvatar, fixed manually

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionList.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionListAmountRangeFilter.tsx

lint, review, did not work really at all, fixed by using sx prop rather than classes at all

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionListFilters.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionTitle.tsx

lint, review, no issues

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/UserSettingsForm.tsx

lint, review, form did not want to play nice with classes, fixed with sx for submit button and styled wrapping div for form

* build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components

had apparently accidentally failed-to-checkin TransactionInfiniteList and userSearchForm, but both were reviewed and had no issues

* build: yarn remove @mui/styles and some

minor style fixups to be rid of the dependency causing the peer dependency warning

* fix: oops did not mean to modify database.json

* build: remove @ts-expect-error annotations no longer used after yarn.lock

merge resolution

* test: issue 1278 re-enabling test that had failed on firefox,

which is not failing after the upgrade to MUI v5.  See
#1278

* style: npm run prettier

* fix: unset flex-direction which is newly set to row-reverse for

AvatarGroup in mui5.

* fix: undo parent commit fix because avatars were backward and

no longer overlapping.  Instead eat up space to right of avatars.

* fix: get body font size back down to 14, establish knobs for

modifying input styles

* test: apply force:true to clicks failing due to issue #29776

---------

Co-authored-by: AtofStryker <[email protected]>

backend/graphql/schema.graphql

@@ -3,14 +3,8 @@ type Query {
 }
 
 type Mutation {
- createBankAccount(
- bankName: String!,
- accountNumber: String!,
- routingNumber: String!
- ): BankAccount
- deleteBankAccount(
- id: ID!
- ): Boolean
+ createBankAccount(bankName: String!, accountNumber: String!, routingNumber: String!): BankAccount
+ deleteBankAccount(id: ID!): Boolean
 }
 
 type BankAccount {
@@ -23,4 +17,4 @@ type BankAccount {
  isDeleted: Boolean
  createdAt: String
  modifiedAt: String
-}
+}

cypress/support/commands.ts

@@ -123,6 +123,7 @@ Cypress.Commands.add("setTransactionAmountRange", (min, max) => {
  .getBySelLike("filter-amount-range-slider")
  .reactComponent()
  .its("memoizedProps")
+ .its("ownerState")
  .invoke("onChange", null, [min / 10, max / 10]);
 });
 

cypress/support/component-index.html

@@ -1,14 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Components App</title>
-
  </head>
  <body>
-
  <div data-cy-root></div>
  </body>
 </html>

cypress/tests/ui/notifications.spec.ts

@@ -26,65 +26,59 @@ describe("Notifications", function () {
  });
 
  describe("notifications from user interactions", function () {
- it(
- "User A likes a transaction of User B; User B gets notification that User A liked transaction ",
- // NOTE: this test seems to have issues in Firefox UI/Mobile tests due to an issue with the Base Button component in MUI v4
- // we should try unskipping this test in Firefox once we upgrade MUI to v5+. @see https://github.com/cypress-io/cypress-realworld-app/issues/1278
- { browser: { name: "!firefox" } },
- function () {
- cy.loginByXstate(ctx.userA.username);
- cy.wait("@getNotifications");
-
- cy.database("find", "transactions", { senderId: ctx.userB.id }).then(
- (transaction: Transaction) => {
- cy.visit(`/transaction/${transaction.id}`);
- }
- );
-
- cy.log("🚩 Renders the notifications badge with count");
- cy.wait("@getNotifications")
- .its("response.body.results.length")
- .then((notificationCount) => {
- cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`);
- });
- cy.visualSnapshot("Renders the notifications badge with count");
-
- const likesCountSelector = "[data-test*=transaction-like-count]";
- cy.contains(likesCountSelector, 0);
- cy.getBySelLike("like-button").click();
- // a successful "like" should disable the button and increment
- // the number of likes
- cy.getBySelLike("like-button").should("be.disabled");
- cy.contains(likesCountSelector, 1);
- cy.visualSnapshot("Like Count Incremented");
-
- cy.switchUserByXstate(ctx.userB.username);
- cy.visualSnapshot(`Switch to User ${ctx.userB.username}`);
-
- cy.wait("@getNotifications")
- .its("response.body.results.length")
- .as("preDismissedNotificationCount");
-
- cy.visit("/notifications");
-
- cy.wait("@getNotifications");
-
- cy.getBySelLike("notification-list-item")
- .should("have.length", 9)
- .first()
- .should("contain", ctx.userA?.firstName)
- .and("contain", "liked");
-
- cy.log("🚩 Marks notification as read");
- cy.getBySelLike("notification-mark-read").first().click({ force: true });
- cy.wait("@updateNotification");
-
- cy.get("@preDismissedNotificationCount").then((count) => {
- cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count));
+ it("User A likes a transaction of User B; User B gets notification that User A liked transaction ", function () {
+ cy.loginByXstate(ctx.userA.username);
+ cy.wait("@getNotifications");
+
+ cy.database("find", "transactions", { senderId: ctx.userB.id }).then(
+ (transaction: Transaction) => {
+ cy.visit(`/transaction/${transaction.id}`);
+ }
+ );
+
+ cy.log("🚩 Renders the notifications badge with count");
+ cy.wait("@getNotifications")
+ .its("response.body.results.length")
+ .then((notificationCount) => {
+ cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`);
  });
- cy.visualSnapshot("Notification count after notification dismissed");
- }
- );
+ cy.visualSnapshot("Renders the notifications badge with count");
+
+ const likesCountSelector = "[data-test*=transaction-like-count]";
+ cy.contains(likesCountSelector, 0);
+ cy.getBySelLike("like-button").click();
+ // a successful "like" should disable the button and increment
+ // the number of likes
+ cy.getBySelLike("like-button").should("be.disabled");
+ cy.contains(likesCountSelector, 1);
+ cy.visualSnapshot("Like Count Incremented");
+
+ cy.switchUserByXstate(ctx.userB.username);
+ cy.visualSnapshot(`Switch to User ${ctx.userB.username}`);
+
+ cy.wait("@getNotifications")
+ .its("response.body.results.length")
+ .as("preDismissedNotificationCount");
+
+ cy.visit("/notifications");
+
+ cy.wait("@getNotifications");
+
+ cy.getBySelLike("notification-list-item")
+ .should("have.length", 9)
+ .first()
+ .should("contain", ctx.userA?.firstName)
+ .and("contain", "liked");
+
+ cy.log("🚩 Marks notification as read");
+ cy.getBySelLike("notification-mark-read").first().click({ force: true });
+ cy.wait("@updateNotification");
+
+ cy.get("@preDismissedNotificationCount").then((count) => {
+ cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count));
+ });
+ cy.visualSnapshot("Notification count after notification dismissed");
+ });
 
  it("User C likes a transaction between User A and User B; User A and User B get notifications that User C liked transaction", function () {
  cy.loginByXstate(ctx.userC.username);

cypress/tests/ui/transaction-view.spec.ts

@@ -40,15 +40,17 @@ describe("Transaction View", function () {
  });
 
  it("transactions navigation tabs are hidden on a transaction view page", function () {
- cy.getBySelLike("transaction-item").first().click();
+ // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
+ cy.getBySelLike("transaction-item").first().click({ force: true });
  cy.location("pathname").should("include", "/transaction");
  cy.getBySel("nav-transaction-tabs").should("not.exist");
  cy.getBySel("transaction-detail-header").should("be.visible");
  cy.visualSnapshot("Transaction Navigation Tabs Hidden");
  });
 
  it("likes a transaction", function () {
- cy.getBySelLike("transaction-item").first().click();
+ // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
+ cy.getBySelLike("transaction-item").first().click({ force: true });
  cy.wait("@getTransaction");
 
  cy.getBySelLike("like-button").click();
@@ -58,7 +60,8 @@ describe("Transaction View", function () {
  });
 
  it("comments on a transaction", function () {
- cy.getBySelLike("transaction-item").first().click();
+ // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
+ cy.getBySelLike("transaction-item").first().click({ force: true });
  cy.wait("@getTransaction");
 
  const comments = ["Thank you!", "Appreciate it."];

cypress/tsconfig.json

@@ -7,6 +7,6 @@
  "lib": ["es2015", "dom"],
  "isolatedModules": false,
  "allowJs": true,
- "noEmit": true
- }
+ "noEmit": true,
+ },
 }

package.json

@@ -16,12 +16,14 @@
  "@babel/core": "7.23.9",
  "@babel/plugin-syntax-flow": "^7.14.5",
  "@babel/plugin-transform-react-jsx": "^7.14.9",
+ "@emotion/react": "^11.11.4",
+ "@emotion/styled": "^11.11.0",
  "@graphql-tools/graphql-file-loader": "7.5.17",
  "@graphql-tools/load": "7.8.14",
- "@material-ui/core": "4.12.4",
- "@material-ui/icons": "4.11.3",
- "@material-ui/lab": "4.0.0-alpha.61",
  "@matheusluizn/react-google-login": "^5.1.6",
+ "@mui/icons-material": "^5.15.12",
+ "@mui/lab": "^5.0.0-alpha.167",
+ "@mui/material": "^5.15.12",
  "@okta/jwt-verifier": "^3.0.1",
  "@okta/okta-auth-js": "^7.3.0",
  "@okta/okta-react": "^6.7.0",

renovate.json

@@ -68,7 +68,7 @@
  },
  {
  "groupName": "Material UI",
- "matchPackagePatterns": ["^@material-ui/"]
+ "matchPackagePatterns": ["^@mui/"]
  },
  {
  "groupName": "Graphql",

scripts/tsconfig.json

@@ -4,6 +4,6 @@
  "exclude": [],
  "compilerOptions": {
  "types": ["node"],
- "isolatedModules": false
- }
+ "isolatedModules": false,
+ },
 }

src/components/AlertBar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Snackbar } from "@material-ui/core";
+import { Snackbar } from "@mui/material";
 import {
  BaseActionObject,
  Interpreter,
@@ -9,7 +9,7 @@ import {
 } from "xstate";
 import { SnackbarContext, SnackbarSchema, SnackbarEvents } from "../machines/snackbarMachine";
 import { useActor } from "@xstate/react";
-import { Alert } from "@material-ui/lab";
+import { Alert } from "@mui/material";
 
 interface Props {
  snackbarService: Interpreter<