refactor: [M3-6934] MUI v5 Migration - `SRC > Features > Linodes` pt 1 #9445

coliu-akamai · 2023-07-24T21:40:04Z

Description 📝

Part of migrating SRC > Features > Firewalls from MUI v4 to v5 -- breaking this PR up since there will be a lot of files. This specific pr is for styling changes: running the codemod, and then converting styles to styled components / sx if possible.

There will be a later PR for fixing up imports/exports, etc later

Major Changes 🔄

removes any imports from MUI v4
switch to styled components or use sx prop for styling

Preview 📷

How to test 🧪

Go to the /linodes section locally and test to make sure that all functionality and styling works and looks as expected

coliu-akamai · 2023-07-26T20:54:58Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx

@@ -290,16 +266,11 @@ export const RebuildFromStackScript = (props: Props) => {
                resetSelectedStackScript={resetStackScript}
                selectedId={ss.id}
                selectedUsername={ss.username}
-                updateFor={[classes, ss.id, errors]}


Since classes was just a Record<classes from the makeStyles, string> after the tss codemod (and just a ClassNameMap before), I think removing them from here should be ok? Seems like it was being checked in the renderGuard hoc

Yes that's fine

…to refactor-m3-6272

jaalah-akamai · 2023-07-27T17:54:07Z

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

  return (
    <TableRow
      ariaLabel={label}
      className={classes.bodyRow}
      data-qa-linode={label}
      data-qa-loading
      key={id}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}


Just giving some context on why I made this change: Instead of having the parent component control the state of it's child using very specific css selectors (see LinodeRow.style.ts), I believe the component itself should be responsible for it's own state changes. By passing down an isHovered prop, the child component can toggle the copy icon itself.

jaalah-akamai · 2023-07-27T18:07:41Z

packages/manager/src/features/Linodes/LinodesLanding/IPAddress.tsx

-        className={`${classes.row} ${showAll && classes.multipleAddresses}`}
-        key={key}
+      <StyledRenderIPDiv
+        {...handlers}


Same goes for this, see my comment here. In this case, we're conditionally applying the handlers since we only need them if showTooltipOnIpHover is true

coliu-akamai · 2023-07-27T21:30:46Z

packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts

@@ -0,0 +1,14 @@
+import Grid from '@mui/material/Unstable_Grid2';


saw that a lot of files had the same styling for a component, so I created a separate 'common' styling file for the package -- would this be fine? or is there another approach?

@coliu-akamai Yes! We need to do this

coliu-akamai · 2023-07-27T21:32:49Z

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

+              sx={{ tooltip: { maxWidth: 300 } }} // ???
+              // classes={{ tooltip: classes.maintenanceTooltip }}


is this feasible? unsure if this is the correct way to get the same behavior

coliu-akamai · 2023-07-27T21:34:27Z

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

@@ -200,12 +209,12 @@ export const RenderFlag: React.FC<{
   * or if it has a pending mutation available. Mutations take
   * precedent over notifications
   */
-  const { classes, linodeNotifications, mutationAvailable } = props;


removed classes from the RenderFlag props, as it seemed it wasn't being used anyway (classes.flag was not a thing in the linode row styles anyway)

…time

coliu-akamai · 2023-07-31T16:37:36Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx

@@ -158,6 +127,8 @@ const LinodeNetworking = () => {
  };

  const renderIPRow = (ipDisplay: IPDisplay) => {
+    // TODO: in order to fully get rid of makeStyles for this file, may need to convert this to a functional component


Tried converting to styled componets/sx for components with classes.row and classes.copy, but this led to some styling behavior at first being lost. Possible solution to fully get rid of makestyles would likely be very similar to the stuff done in IPAddress.tsx/LinodeRow.tsx

jaalah-akamai

Nice improvements and updates

bnussman-akamai

Styles look good to me! 🎨

#9445) * refactor [m3-6272] begin using codemod * refactor [m3-6272] continue switching to tss react * codemod to LinodesDetail * refactor [m3-6272] migrate linode create styles * IPAddress test difficulties * fix some styling * some more ip styling but some weird things going on * narrowing down a source of styling pain * need to look into this IP test * testing ip address * converting to styled components or sx * more style conversions * Improve linode ip address tooltip * Fix focus * rest of styling * it was not the rest of styling * cleanup of styling * fix up styling * Added changeset: MUI v5 Migration > SRC > Features > Linodes Pt 1 * all styles converted(except one file, see pr comment), for real this time --------- Co-authored-by: Jaalah Ramos <[email protected]>

coliu-akamai added 5 commits July 21, 2023 15:21

refactor [m3-6272] begin using codemod

87bba47

refactor [m3-6272] continue switching to tss react

5a61e91

codemod to LinodesDetail

26e2d4b

Merge branch 'develop' into refactor-m3-6272

558b9e7

refactor [m3-6272] migrate linode create styles

fda1f34

coliu-akamai added the Project: MUI v5 Migration label Jul 24, 2023

coliu-akamai self-assigned this Jul 24, 2023

coliu-akamai added 9 commits July 24, 2023 17:52

IPAddress test difficulties

0a5553e

Merge branch 'develop' into refactor-m3-6272

a1b0cd5

fix some styling

508e2de

some more ip styling but some weird things going on

93e1f92

narrowing down a source of styling pain

7b31274

need to look into this IP test

3f8e525

testing ip address

0f8f00a

converting to styled components or sx

02b2cfe

more style conversions

b36d99e

coliu-akamai commented Jul 26, 2023

View reviewed changes

jaalah added 2 commits July 27, 2023 13:02

Improve linode ip address tooltip

5e3bd69

Merge branch 'refactor-m3-6272' of github.com:coliu-akamai/manager in…

3c5ab0c

…to refactor-m3-6272

jaalah-akamai reviewed Jul 27, 2023

View reviewed changes

Fix focus

a9d9175

jaalah-akamai reviewed Jul 27, 2023

View reviewed changes

coliu-akamai added 2 commits July 27, 2023 16:00

rest of styling

7b75cc2

it was not the last of styling

44144ef

coliu-akamai commented Jul 27, 2023

View reviewed changes

coliu-akamai added 3 commits July 28, 2023 10:54

Merge branch 'develop' into refactor-m3-6272

97fe9f6

cleanup of styling

bd1d8ac

fix up styling

e54529a

Added changeset: MUI v5 Migration > SRC > Features > Linodes Pt 1

7dfcb53

coliu-akamai marked this pull request as ready for review July 28, 2023 19:15

bnussman-akamai added the Ready for Review label Jul 28, 2023

coliu-akamai added Work in Progress and removed Ready for Review labels Jul 28, 2023

all styles converted(except one file, see pr comment), for real this …

2c32c49

…time

coliu-akamai added Ready for Review and removed Work in Progress labels Jul 31, 2023

coliu-akamai commented Jul 31, 2023

View reviewed changes

Merge branch 'develop' into refactor-m3-6272

a9a1964

jaalah-akamai approved these changes Aug 1, 2023

View reviewed changes

bnussman-akamai added the Add'tl Approval Needed Waiting on another approval! label Aug 1, 2023

bnussman-akamai approved these changes Aug 1, 2023

View reviewed changes

bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Aug 1, 2023

coliu-akamai removed the Ready for Review label Aug 1, 2023

coliu-akamai merged commit 5011b48 into linode:develop Aug 1, 2023

This was referenced Aug 4, 2023

fix: IP Address copy icon regression #9493

Closed

fix: IP Address copy icon regression #9495

Merged

mjac0bs mentioned this pull request Aug 7, 2023

Release v1.99.0 - release → staging #9502

Merged

coliu-akamai mentioned this pull request Aug 28, 2023

refactor: [M3-6274] - MUI v5 Migration - SRC > Features > Longview Pt1: Longview Detail #9600

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-6934] MUI v5 Migration - `SRC > Features > Linodes` pt 1 #9445

refactor: [M3-6934] MUI v5 Migration - `SRC > Features > Linodes` pt 1 #9445

coliu-akamai commented Jul 24, 2023 •

edited

Loading

coliu-akamai Jul 26, 2023

jaalah-akamai Aug 1, 2023

jaalah-akamai Jul 27, 2023

jaalah-akamai Jul 27, 2023

coliu-akamai Jul 27, 2023

jaalah-akamai Aug 1, 2023

coliu-akamai Jul 27, 2023

coliu-akamai Jul 27, 2023

coliu-akamai Jul 31, 2023

jaalah-akamai left a comment

bnussman-akamai left a comment

		@@ -0,0 +1,14 @@
		import Grid from '@mui/material/Unstable_Grid2';

		sx={{ tooltip: { maxWidth: 300 } }} // ???
		// classes={{ tooltip: classes.maintenanceTooltip }}

refactor: [M3-6934] MUI v5 Migration - SRC > Features > Linodes pt 1 #9445

refactor: [M3-6934] MUI v5 Migration - SRC > Features > Linodes pt 1 #9445

Conversation

coliu-akamai commented Jul 24, 2023 • edited Loading

Description 📝

Major Changes 🔄

Preview 📷

How to test 🧪

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaalah-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

refactor: [M3-6934] MUI v5 Migration - `SRC > Features > Linodes` pt 1 #9445

refactor: [M3-6934] MUI v5 Migration - `SRC > Features > Linodes` pt 1 #9445

coliu-akamai commented Jul 24, 2023 •

edited

Loading