refactor: [M3-6343] - MUI v5 Migration - Grid v2 for Features #8985

jaalah-akamai · 2023-04-11T18:16:54Z

Description 📝

Migrating to MUI Grid v2. This covers everything in the src/features directory (excluding Longview which is forthcoming) and any additional files that needed to be cleaned up.

Note: In several places, you MAY notice slight padding variations due to overly excessive Grid usage. In places like this, I made my best judgment and consulted with UX/Design. You'll notice in several places the use of padding: 0 on Grid elements. This was to match the existing design as much as possible until we get a chance to revisit these areas. Feel free to highlight them, and I'll comment!

Major Changes 🔄

MainContent.tsx - You'll notice slightly more padding for the main content container. This is because the page is actually respecting the original padding of the container now.
Changed Grid import from src/components/Grid to @mui/material/Unstable_Grid2.
- The item attribute is no longer needed for Grid.
- Most Grid elements with the container attribute needed a spacing attribute as part of the change
updateFor has been removed off the Grid component. There's no need to micromanage how/when a component should re-render like this anymore.

Refactored

LinodeEntityDetail.tsx - Very large file, did some major refactoring here to get things looking like they did before. Check all breakpoints. You'll notice that DNS Resolvers has been updated to use CSS Grid and its layout on smaller breakpoints is slightly different. UX approves 👍
DNSResolvers.tsx - Simplified code and removed makeStyles
NodeBalancerDetail.tsx - Using LandingHeader and removed makeStyles
RenderNotification.tsx - No need for Grid, this was an easy refactor
useFormattedNotifications.tsx - Due to changes in RenderNotification this needed a slight refactor
LinodeAdvancedConfigurationsPanel.tsx - Didn't seem like the styles here were being used
AlertSection.tsx - Instead of forcing changes to work, I saw refactoring was more simple.

Replaced Grid w/ Box component

There was no need for a Grid components in these files, so I swapped them with Box or removed the Grid completely.

ExpandableTicketPanel.tsx - Removed lots of extra Grid components in this file
AutoEnroll.tsx
DatabaseSummaryConnectionDetails.tsx
FirewallRuleTable.tsx
SupportSearchLanding.tsx
ImageSelect.tsx
KubeConfigDisplay.tsx
NodeBalancerConfigurations.tsx
TablesPanel.tsx - This is under NodeBalancers
VolumeTableRow.tsx

Deleted

features/Domains/DomainsTableWrapper.tsx - This didn't seem to be used

How to test

These changes touch the core features we offer, so a page by page scan is required
Go to https://cloud.linode.com/ and compare side by side with local
There are slight changes as noted above and you may notice slight padding changes. Anything agregious, just flag in this PR and I'll take a look at.
Start with larger breakpoints and work your way down.

Where to view changes? Open me! 👇

Component	Where to view or Desc?	Screenshot
AutoEnroll http://localhost:3000/account/settings	Click on "enable now" link to open drawer. If you're a "managed" user, you may not be able to see this.
DatabaseSummaryConnectionDetails http://localhost:3000/databases/postgresql/{ID}/summary
Firewalls Rules http://localhost:3000/firewalls/{ID}
ImageSelect http://localhost:3000/stackscripts/create
KubeConfigDisplay http://localhost:3000/kubernetes/clusters/{ID}/summary
NodeBalancerConfigurations http://localhost:3000/nodebalancers/{ID}/configurations	Configurations tab, lots of refactoring here
Linode Summary View http://localhost:3000/linodes?view=grid	Tags were using a 1400 breakpoint which is not a supported breakpoint. These will now change layout at < 1280
Linode Detail http://localhost:3000/linodes/{ID}/networking	DNS Resolvers has been refactored
Notifications http://localhost:3000/profile/settings	Use mock service worker > open events dropdown
ExpandableTicketPanel http://localhost:3000/support/tickets	Use MSW
Entity Transfer Create http://localhost:3000/account/service-transfers/create http://localhost:3000/account/service-transfers
Firewalls Linodes http://localhost:3000/firewalls/{ID}/linodes
Search Results http://localhost:3000/support/search/?query=test
User Menu	Top navigation user menu

QA Checklist

Tag your name next to the ones you've QA'd

jaalah-akamai · 2023-04-11T20:50:16Z

...ager/src/features/linodes/LinodesDetail/LinodeAdvanced/LinodeAdvancedConfigurationsPanel.tsx

-    },
-  },
-}));
-


Almost all these styles were un-used. 🗑️

I could've gone further with this file, but I left it intact for now

jaalah-akamai · 2023-04-11T20:53:25Z

packages/manager/src/features/linodes/LinodesDetail/LinodeAdvanced/LinodeConfigs.tsx

        >
-          <Grid item className={classes.addNewWrapper}>


No need for all the spacing adjustment from addNewWrapper anymore.

bnussman-akamai

Things generally look good so far, can we decrease the spacing here across all entities, it has gotten larger in this PR

jaalah-akamai · 2023-04-13T15:02:49Z

Things generally look good so far, can we decrease the spacing here across all entities, it has gotten larger in this PR

Yea I was going back and forth with that, but yea let's do it!

dwiley-akamai

I still have a few more places in the app to check and a lot of code to sift through, but it's looking good so far.

One small thing I noticed is that the graphics on the Referrals page are closer together than they were previously, do we want to keep that?

hana-akamai

The TagsPanel is no longer flush to the right side

Mobile spacing for the firewalls rule table seems a bit tight now
This branch

Prod

Mobile spacing for Kube display is a bit off/tight

~~"Port Configuration" display disappeared~~

The extra white padding around the accordion header looks less clean imo
This branch

Prod

bnussman-akamai · 2023-04-13T19:32:01Z

@hana-linode The removal of Port Configuration was done by me in #8964, it was intentional

cypress · 2023-04-13T20:11:30Z

1 flaky tests on run #2988 ↗︎

0	149	3	0	1

Details:

Update changelog
Project: Cloud Manager E2E	Commit: `4de6b343d4`
Status: Passed	Duration: 14:47 💡
Started: Apr 14, 2023 8:39 PM	Ended: Apr 14, 2023 8:54 PM

cypress/e2e/objectStorage/object-storage.e2e.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
object storage end-to-end tests > can upload, access, and delete objects		`Output` `Screenshots` `Video`

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

jaalah-akamai · 2023-04-13T20:38:50Z

Thanks @hana-linode let me know if things are looking better now. I actually improved the alignment of the inbound rules dropdown to always match the action column since I saw that was the intent cc: @mjac0bs

fix.mp4

mjac0bs · 2023-04-13T20:42:11Z

I actually improved the alignment of the inbound rules dropdown to always match the action column since I saw that was the intent

🥇 @jaalah-akamai Thank you for doing that. I remember it being just slightly off in the accessibility fix and it haunted me a little. Giving the Firewalls page and the rest of this PR a closer look now!

hana-akamai · 2023-04-13T20:49:42Z

Ah I probably should have cropped the image more, but I meant that the mobile spacing between table columns looks a bit tight now

This branch

Prod

jaalah-akamai · 2023-04-13T21:29:56Z

@hana-linode gotcha! should be good now, increased spacing slightly for the first item from 30% to 32% because we couldn't use margins (had to use padding) to create space like we did in prod. I didn't want any words breaking to new lines as things got smaller.

mjac0bs

I'm still working my way through pages at each breakpoint, but here are a few spacing differences so far:

Firewalls -- This looks better now! I'm happy with the changes here.
~~As @hana-linode pointed out, spacing between columns is tight as we move to smaller screens. This is especially noticeable in columns if a user has a long rule name or list of many IPs.~~ ✅

This branch	Prod

Linode Landing -- The collapsed tags "..." and the "Add a Tag" button lack some spacing between so they meld into one.

This branch	Prod

StackScripts

Thank you for fixing Image Select > Target Images! I recently made a ticket for this because I noticed our wandering TooltipIcons.

Linodes Details > Storage > Add a Disk - in the same ticket I made for the above, I noticed another spot with the misaligned icon. On this branch, it's still looking like it needs some adjustment on the Image field.

This branch	Prod

Images -- Looks good to me, other than: just noticed this minor styling bug while testing (also in prod) that might be out of scope of this PR, but it would be cool if we could get our TooltipIcon on the Region field in Upload Image to stop having this weird spacing at the 599 breakpoint.

Screen.Recording.2023-04-13.at.2.32.16.PM.mov

dwiley-akamai

LGTM 🚀

mjac0bs

Help and Support:

At a width of 599px on down, there is some misalignment happening that I think we could fix here (also currently in prod):

Profile > Login & Authentication: (https://localhost:3000/profile/auth)
TPA provider options are having some issues now at smaller breakpoints.

Prod:

Screen.Recording.2023-04-14.at.10.02.03.AM.mov

This branch:

Screen.Recording.2023-04-14.at.10.01.45.AM.mov

Linode Create:

This branch	Prod

Kubernetes:
I know we recently did some work on this page... the margin on the right seems to small to me and feels better in prod, but I didn't review the other ticket when this was refactored.

This branch	Prod

|

bnussman-akamai

I think this is in a good enough state to proceed! I think any outstanding issues could be resolved in this PR or after this is merged

hana-akamai

Other than Mariah's comments, this is looking good to me 🚀

jaalah-akamai · 2023-04-14T20:08:38Z

Here are the updates - thanks everybody!


01.mp4	02.mp4
fix01.mp4	fix02.mp4

mjac0bs

Thanks for the fixes! 🚀 Can we add this to the Tech Stories section in the changelog?

refactor: [M3-6343] - MUI v5 Migration - Grid v2 for Features

837a8e2

jaalah-akamai added Work in Progress Project: MUI v5 Migration labels Apr 11, 2023

jaalah-akamai self-assigned this Apr 11, 2023

jaalah-akamai marked this pull request as draft April 11, 2023 18:16

jaalah-akamai commented Apr 11, 2023

View reviewed changes

Minor tweaks

4390192

jaalah-akamai added Ready for Review and removed Work in Progress labels Apr 12, 2023

jaalah-akamai marked this pull request as ready for review April 12, 2023 14:36

jaalah-akamai marked this pull request as draft April 12, 2023 14:41

jaalah-akamai added Work in Progress and removed Ready for Review labels Apr 12, 2023

jaalah added 2 commits April 12, 2023 10:41

Fix merge conflicts

3f546ca

Found some left overs

33175a1

jaalah-akamai marked this pull request as ready for review April 12, 2023 15:33

jaalah-akamai added Ready for Review and removed Work in Progress labels Apr 12, 2023

Revert minor mistake

5aeba30

bnussman-akamai reviewed Apr 13, 2023

View reviewed changes

jaalah added 2 commits April 13, 2023 10:39

Fix node pools

0815881

Adjust main content padding

4508395

jaalah added 3 commits April 13, 2023 11:08

Fix merge conflicts

4a5f9f5

Tags are reversed when they drop to new line

3c6f9ab

Adjust Grid for Linode > Settings > Notification Thresholds

b937c54

dwiley-akamai reviewed Apr 13, 2023

View reviewed changes

hana-akamai requested changes Apr 13, 2023

View reviewed changes

jaalah added 2 commits April 13, 2023 16:31

Review fixes for @hana-linode

5fc1a0b

More changes from @hana-linode

89df107

jaalah added 3 commits April 13, 2023 16:51

Review changes from @dwiley-akamai

89935e1

Ooops

44524c4

Fix spacing for firewall rules table

a52bb8a

mjac0bs reviewed Apr 13, 2023

View reviewed changes

jaalah added 3 commits April 14, 2023 10:50

Image select fixes @mjac0bs

333213b

Tag - make padding the same

b308e24

Fix merge conflicts

6d99f6f

jaalah-akamai requested a review from hana-akamai April 14, 2023 15:08

dwiley-akamai approved these changes Apr 14, 2023

View reviewed changes

mjac0bs reviewed Apr 14, 2023

View reviewed changes

bnussman-akamai approved these changes Apr 14, 2023

View reviewed changes

hana-akamai approved these changes Apr 14, 2023

View reviewed changes

Vlan updates

a146cc0

Get latest from develop

832a2aa

mjac0bs approved these changes Apr 14, 2023

View reviewed changes

Update changelog

4de6b34

jaalah-akamai merged commit 8be3dc4 into linode:develop Apr 14, 2023

bnussman-akamai mentioned this pull request May 1, 2023

staging → master for v1.92.0 #9070

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-6343] - MUI v5 Migration - Grid v2 for Features #8985

refactor: [M3-6343] - MUI v5 Migration - Grid v2 for Features #8985

jaalah-akamai commented Apr 11, 2023 •

edited by mjac0bs

Loading

jaalah-akamai Apr 11, 2023

jaalah-akamai Apr 11, 2023

jaalah-akamai Apr 11, 2023

bnussman-akamai left a comment

jaalah-akamai commented Apr 13, 2023

dwiley-akamai left a comment

hana-akamai left a comment •

edited

Loading

bnussman-akamai commented Apr 13, 2023

cypress bot commented Apr 13, 2023 •

edited

Loading

jaalah-akamai commented Apr 13, 2023

mjac0bs commented Apr 13, 2023

hana-akamai commented Apr 13, 2023

jaalah-akamai commented Apr 13, 2023 •

edited

Loading

mjac0bs left a comment

dwiley-akamai left a comment

mjac0bs left a comment •

edited

Loading

bnussman-akamai left a comment

hana-akamai left a comment

jaalah-akamai commented Apr 14, 2023

mjac0bs left a comment

refactor: [M3-6343] - MUI v5 Migration - Grid v2 for Features #8985

refactor: [M3-6343] - MUI v5 Migration - Grid v2 for Features #8985

Conversation

jaalah-akamai commented Apr 11, 2023 • edited by mjac0bs Loading

Description 📝

Major Changes 🔄

Refactored

Replaced Grid w/ Box component

Deleted

How to test

QA Checklist

jaalah-akamai Apr 11, 2023

Choose a reason for hiding this comment

jaalah-akamai Apr 11, 2023

Choose a reason for hiding this comment

jaalah-akamai Apr 11, 2023

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Apr 13, 2023

dwiley-akamai left a comment

Choose a reason for hiding this comment

hana-akamai left a comment • edited Loading

Choose a reason for hiding this comment

bnussman-akamai commented Apr 13, 2023

cypress bot commented Apr 13, 2023 • edited Loading

1 flaky tests on run #2988 ↗︎

jaalah-akamai commented Apr 13, 2023

mjac0bs commented Apr 13, 2023

hana-akamai commented Apr 13, 2023

jaalah-akamai commented Apr 13, 2023 • edited Loading

mjac0bs left a comment

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

mjac0bs left a comment • edited Loading

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

hana-akamai left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Apr 14, 2023

mjac0bs left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Apr 11, 2023 •

edited by mjac0bs

Loading

hana-akamai left a comment •

edited

Loading

cypress bot commented Apr 13, 2023 •

edited

Loading

jaalah-akamai commented Apr 13, 2023 •

edited

Loading

mjac0bs left a comment •

edited

Loading