Skip to content

Commit 31b7fa5

Browse files
timheilmanAtofStryker
timheilman
and
AtofStryker
authored
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 https://github.com/mui/material-ui/issues/15695\#ref-commit-7fd1a29 * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SignUpForm.tsx lint, cast StyledContainer to typeof Container per https://github.com/mui/material-ui/issues/15695\#ref-commit-7fd1a29 * 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]>
1 parent babee8b commit 31b7fa5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1340
-1010
lines changed

‎backend/graphql/schema.graphql‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,8 @@ type Query {
33
}
44

55
type Mutation {
6-
createBankAccount(
7-
bankName: String!,
8-
accountNumber: String!,
9-
routingNumber: String!
10-
): BankAccount
11-
deleteBankAccount(
12-
id: ID!
13-
): Boolean
6+
createBankAccount(bankName: String!, accountNumber: String!, routingNumber: String!): BankAccount
7+
deleteBankAccount(id: ID!): Boolean
148
}
159

1610
type BankAccount {
@@ -23,4 +17,4 @@ type BankAccount {
2317
isDeleted: Boolean
2418
createdAt: String
2519
modifiedAt: String
26-
}
20+
}

‎cypress/support/commands.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ Cypress.Commands.add("setTransactionAmountRange", (min, max) => {
123123
.getBySelLike("filter-amount-range-slider")
124124
.reactComponent()
125125
.its("memoizedProps")
126+
.its("ownerState")
126127
.invoke("onChange", null, [min / 10, max / 10]);
127128
});
128129

‎cypress/support/component-index.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
77
<title>Components App</title>
8-
98
</head>
109
<body>
11-
1210
<div data-cy-root></div>
1311
</body>
1412
</html>

‎cypress/tests/ui/notifications.spec.ts‎

Lines changed: 52 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -26,65 +26,59 @@ describe("Notifications", function () {
2626
});
2727

2828
describe("notifications from user interactions", function () {
29-
it(
30-
"User A likes a transaction of User B; User B gets notification that User A liked transaction ",
31-
// NOTE: this test seems to have issues in Firefox UI/Mobile tests due to an issue with the Base Button component in MUI v4
32-
// 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
33-
{ browser: { name: "!firefox" } },
34-
function () {
35-
cy.loginByXstate(ctx.userA.username);
36-
cy.wait("@getNotifications");
37-
38-
cy.database("find", "transactions", { senderId: ctx.userB.id }).then(
39-
(transaction: Transaction) => {
40-
cy.visit(`/transaction/${transaction.id}`);
41-
}
42-
);
43-
44-
cy.log("🚩 Renders the notifications badge with count");
45-
cy.wait("@getNotifications")
46-
.its("response.body.results.length")
47-
.then((notificationCount) => {
48-
cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`);
49-
});
50-
cy.visualSnapshot("Renders the notifications badge with count");
51-
52-
const likesCountSelector = "[data-test*=transaction-like-count]";
53-
cy.contains(likesCountSelector, 0);
54-
cy.getBySelLike("like-button").click();
55-
// a successful "like" should disable the button and increment
56-
// the number of likes
57-
cy.getBySelLike("like-button").should("be.disabled");
58-
cy.contains(likesCountSelector, 1);
59-
cy.visualSnapshot("Like Count Incremented");
60-
61-
cy.switchUserByXstate(ctx.userB.username);
62-
cy.visualSnapshot(`Switch to User ${ctx.userB.username}`);
63-
64-
cy.wait("@getNotifications")
65-
.its("response.body.results.length")
66-
.as("preDismissedNotificationCount");
67-
68-
cy.visit("/notifications");
69-
70-
cy.wait("@getNotifications");
71-
72-
cy.getBySelLike("notification-list-item")
73-
.should("have.length", 9)
74-
.first()
75-
.should("contain", ctx.userA?.firstName)
76-
.and("contain", "liked");
77-
78-
cy.log("🚩 Marks notification as read");
79-
cy.getBySelLike("notification-mark-read").first().click({ force: true });
80-
cy.wait("@updateNotification");
81-
82-
cy.get("@preDismissedNotificationCount").then((count) => {
83-
cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count));
29+
it("User A likes a transaction of User B; User B gets notification that User A liked transaction ", function () {
30+
cy.loginByXstate(ctx.userA.username);
31+
cy.wait("@getNotifications");
32+
33+
cy.database("find", "transactions", { senderId: ctx.userB.id }).then(
34+
(transaction: Transaction) => {
35+
cy.visit(`/transaction/${transaction.id}`);
36+
}
37+
);
38+
39+
cy.log("🚩 Renders the notifications badge with count");
40+
cy.wait("@getNotifications")
41+
.its("response.body.results.length")
42+
.then((notificationCount) => {
43+
cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`);
8444
});
85-
cy.visualSnapshot("Notification count after notification dismissed");
86-
}
87-
);
45+
cy.visualSnapshot("Renders the notifications badge with count");
46+
47+
const likesCountSelector = "[data-test*=transaction-like-count]";
48+
cy.contains(likesCountSelector, 0);
49+
cy.getBySelLike("like-button").click();
50+
// a successful "like" should disable the button and increment
51+
// the number of likes
52+
cy.getBySelLike("like-button").should("be.disabled");
53+
cy.contains(likesCountSelector, 1);
54+
cy.visualSnapshot("Like Count Incremented");
55+
56+
cy.switchUserByXstate(ctx.userB.username);
57+
cy.visualSnapshot(`Switch to User ${ctx.userB.username}`);
58+
59+
cy.wait("@getNotifications")
60+
.its("response.body.results.length")
61+
.as("preDismissedNotificationCount");
62+
63+
cy.visit("/notifications");
64+
65+
cy.wait("@getNotifications");
66+
67+
cy.getBySelLike("notification-list-item")
68+
.should("have.length", 9)
69+
.first()
70+
.should("contain", ctx.userA?.firstName)
71+
.and("contain", "liked");
72+
73+
cy.log("🚩 Marks notification as read");
74+
cy.getBySelLike("notification-mark-read").first().click({ force: true });
75+
cy.wait("@updateNotification");
76+
77+
cy.get("@preDismissedNotificationCount").then((count) => {
78+
cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count));
79+
});
80+
cy.visualSnapshot("Notification count after notification dismissed");
81+
});
8882

8983
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 () {
9084
cy.loginByXstate(ctx.userC.username);

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,17 @@ describe("Transaction View", function () {
4040
});
4141

4242
it("transactions navigation tabs are hidden on a transaction view page", function () {
43-
cy.getBySelLike("transaction-item").first().click();
43+
// { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
44+
cy.getBySelLike("transaction-item").first().click({ force: true });
4445
cy.location("pathname").should("include", "/transaction");
4546
cy.getBySel("nav-transaction-tabs").should("not.exist");
4647
cy.getBySel("transaction-detail-header").should("be.visible");
4748
cy.visualSnapshot("Transaction Navigation Tabs Hidden");
4849
});
4950

5051
it("likes a transaction", function () {
51-
cy.getBySelLike("transaction-item").first().click();
52+
// { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
53+
cy.getBySelLike("transaction-item").first().click({ force: true });
5254
cy.wait("@getTransaction");
5355

5456
cy.getBySelLike("like-button").click();
@@ -58,7 +60,8 @@ describe("Transaction View", function () {
5860
});
5961

6062
it("comments on a transaction", function () {
61-
cy.getBySelLike("transaction-item").first().click();
63+
// { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
64+
cy.getBySelLike("transaction-item").first().click({ force: true });
6265
cy.wait("@getTransaction");
6366

6467
const comments = ["Thank you!", "Appreciate it."];

‎cypress/tsconfig.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
"lib": ["es2015", "dom"],
88
"isolatedModules": false,
99
"allowJs": true,
10-
"noEmit": true
11-
}
10+
"noEmit": true,
11+
},
1212
}

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,14 @@
1616
"@babel/core": "7.23.9",
1717
"@babel/plugin-syntax-flow": "^7.14.5",
1818
"@babel/plugin-transform-react-jsx": "^7.14.9",
19+
"@emotion/react": "^11.11.4",
20+
"@emotion/styled": "^11.11.0",
1921
"@graphql-tools/graphql-file-loader": "7.5.17",
2022
"@graphql-tools/load": "7.8.14",
21-
"@material-ui/core": "4.12.4",
22-
"@material-ui/icons": "4.11.3",
23-
"@material-ui/lab": "4.0.0-alpha.61",
2423
"@matheusluizn/react-google-login": "^5.1.6",
24+
"@mui/icons-material": "^5.15.12",
25+
"@mui/lab": "^5.0.0-alpha.167",
26+
"@mui/material": "^5.15.12",
2527
"@okta/jwt-verifier": "^3.0.1",
2628
"@okta/okta-auth-js": "^7.3.0",
2729
"@okta/okta-react": "^6.7.0",

‎patches/@material-ui+core+4.12.4.patch‎

Lines changed: 0 additions & 103 deletions
This file was deleted.

‎renovate.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
},
6969
{
7070
"groupName": "Material UI",
71-
"matchPackagePatterns": ["^@material-ui/"]
71+
"matchPackagePatterns": ["^@mui/"]
7272
},
7373
{
7474
"groupName": "Graphql",

‎scripts/tsconfig.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
"exclude": [],
55
"compilerOptions": {
66
"types": ["node"],
7-
"isolatedModules": false
8-
}
7+
"isolatedModules": false,
8+
},
99
}

0 commit comments

Comments
 (0)