DT-1110: Migrate away from @mui/styles Part 1 #1730

snf2ye · 2025-01-03T15:53:49Z

Background

We must discontinue use of @mui/styles in order to migrate from React 17 to 18. (source)

@mui/styles was deprecated with the release of MUI Core v5 in late 2021. It is not compatible with React.StrictMode or React 18+, and it will not be updated. Please use @mui/system instead.

There is guide for this migration here: https://mui.com/material-ui/migration/migrating-from-jss

Options considered:

sx prop + styled components from @mui/matertial/styles - From migration guide - "We recommend sx API over styled for creating responsive styles or overriding minor CSS". We can use styled components for components with a lot of styles (4+) and for styling that is reused.
tss-react - Easiest change, but still would require using copilot per component. It would be more of a lateral step.

This PR uses the first option and uses the sx prop alongside styled components. Given that we have to touch every file manually and I think we can utilize copilot for the bulk of the work, I would prefer to do the harder change rather than the lateral change.

Steps for Upgrades

Pre-checks:

Review the styles listed at the beginning of the file. Are they all referenced in the component? (Apparently if there are styles that don't match up to a component, it will try to infer where the component with those styles should go and add it)

Run copilot command, specifically in VSCode with Claude 3.5 Sonnet.

Can you migrate this component away from using JSS and references to '@mui/styles'? We want to instead use a combination of inline styling with the "sx" prop on Material UI components and styled components from @mui/material/styles.

Let me explain something about how our code is set up: In the existing code, all of the styles currently live in a "styles" object. It contains a list of classes each with their own styles.

Consider the following example:

const styles = (theme: CustomTheme) =>
  createStyles({
    pageRoot: {
      padding: '16px 24px',
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
    },
    jadeTableSpacer: {
      paddingBottom: theme.spacing(12),
    }
});

pageRoot and jadeTableSpacer are classes that we reference in the component. pageRoot has 4 styles and jadeTableSpacer has 1 style. We don't want to use inline styling with the sx for classes that have more than 3 styles, so we want to handle these two classes in different manners. Since pageRoot has 4 styles, we want to use a styled component. Since jadeTableSpacer only has 1 style, we want to use the inline styling with an "sx" prop. We can evaluate other style classes with this same rule: if there are 3 or fewer styles, use the "sx" prop. If there are more than 3 styles, then convert to a styled component.

When using the "sx" prop, then we must use the material UI version of the component (e.g. Box instead of div and add an import statement at the beginning of the file). We must also switch any css references of direct numbers to include px (e.g. '10px' instead of 10)

Apply prettier
Review UI and code generated
Compare UI/styling between local UI and dev

Common Issues

It doesn't handle theme changes well - 30ca7c2

What step is the copilot upgrade taking? (example output from copilot)

I'll help migrate the SnapshotAccessRequestTable from JSS to use styled components and sx props.

Let's analyze the styles:

More than 3 styles:

overlaySpinner (6 styles)
openButton (7 styles)

Convert to sx props:

jadeLink (1 style with theme mixin)

Key changes made:

Removed withStyles HOC and styles object
Added styled import from @mui/material/styles
Created styled components for complex styles: OverlaySpinner for loading overlay, RequestButton for the request name button, Converted jadeLink to use sx prop with theme mixin
Removed classes prop and ClassNameMap interface
Added Box component for styled span
Simplified component exports
Maintained all functionality while modernizing the styling approach

The component maintains the same styling and behavior while using modern MUI patterns.

Example
Before with @mui/styles

const styles = (theme: CustomTheme) => ({
  wrapper: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: '1em',
  }
);
....
 <div className={classes.wrapper}>
...
</div>

With sx prop

 <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: '1em' }}>
...
</Box>

##TODO - add example for styled component

TODO - add more notes about nuances of the changes from mui

Components Impacted in this PR

Updated screenshots as of 01-11-2024

HomeView and 2) DatasetView

JobView

SnapshotView

DatasetOverview and 6) DatasetOverviewPanel

DatasetAccess and 8) UserList

SnapshotAccessRequestTable

cypress · 2025-01-03T15:57:45Z

jade-data-repo-ui Run #3968

Run Properties: Passed #3968 • b1f312d48f ℹ️: Merge 335319e60d471feac187e62d8e4f6dcac6e23315 into 87a9b411a00dfd929b658a2554c6...

Project	`jade-data-repo-ui`
Branch Review	`sh/dt-1110-remove-mui-styles-part1`
Run status	`Passed #3968`
Run duration	`02m 56s`
Commit	`b1f312d48f ℹ️: Merge 335319e60d471feac187e62d8e4f6dcac6e23315 into 87a9b411a00dfd929b658a2554c6...`
Committer	`Shelby Holden`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`17`
View all changes introduced in this branch ↗︎

src/components/JobView.tsx

snf2ye · 2025-01-06T16:21:14Z

src/components/dataset/overview/DatasetOverviewPanel.jsx

+        sx={{
+          top: '112px',
+          bottom: '0px',
+          flexShrink: 0,
+          height: 'initial',
+          zIndex: 10,
+          minWidth: 300,
+          width: '40%',
+          position: 'absolute',
+          transition: () =>
+            theme.transitions.create('width', {
+              easing: theme.transitions.easing.sharp,
+              duration: theme.transitions.duration.enteringScreen,
+            }),
+          '&.drawerClose': {
+            transition: () =>
+              theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+              }),
+            overflowX: 'hidden',
+            width: '0px',
+            minWidth: '0px',
+            [theme.breakpoints.up('sm')]: {
+              width: '0px',
+            },


For more complicated styles like this, it may make sense to pull it into a styled component to help with code readability. But, this styling is still only used in one spot so I'm a torn over which is better (leave as sx prop vs. pull into styled component)

Since the refactoring is being done in stages, we can always pull this out into a separate style in the future.

fboulnois

One main question, otherwise lgtm:

fboulnois · 2025-01-08T14:13:30Z

src/components/UserList.tsx

+          fontSize: '14px',
+          lineHeight: '22px',
+          fontWeight: '600',
+          color: 'primary.main',


Do these need to import theme from 'modules/theme'; and use theme.palette.primary.main instead like in src/components/DatasetView.tsx? If so, a number of components in this PR have this issue with color.

Great question - I believe it is correct as is - Here's the documentation and the basic example has something very similar. We have "ThemeProvider" set up in the index, so the theme should be available to all components in the repo.

I'm possibly not referencing the theme correctly in DatasetView, but I wasn't quite sure how to do the expansion of the custom mixin.

src/components/UserList.tsx

s-rubenstein · 2025-01-08T15:24:03Z

src/components/DatasetView.tsx

-  },
-);
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: '1em' }}>


If you want to reduce the diff here, and keep the object abstractions, this could be <Box sx={styles(theme).wrapper}> just as easily, and that way we keep our object abstractions while moving to the sx property?

To do this you would need to have styles be a raw object rather than a method (or call it once if we have a theme we could pass), but that should be okay

That's a really interesting idea, and I'm torn about it.
I think I'm less interested in making the diff smaller (copilot is doing the heavy lifting here to move things around), and want to think about how we want this to look long term. We often use existing code as a model for new code, so what do we want our best practices to be going forward?
I think I generally like the sx prop styles to be inline for a small set of changes, but we may want to consider using styled components more frequently to keep a pseudo object abstraction. I could actually build that into the copilot request - like "if there are more than 3 css styles, use a styled component instead of the sx prop".

That's my ultimate preference as well. 3 css styles is fine for inline, more gets bulky. I also think if we have a often reused width or something - with lots of constants reused, that I'd abstract.

Turns out that its tricky to get copilot to handle these two cases 🫠 It's not great at counting, apparently (It would catch some components with >3 styles, but not all).
We may have to do this in two steps (convert to sx prop or styled and then move the rest). I think I'm also having better luck with a newer gpt model in vs code (as opposed to intellij).

rushtong

👍🏽

rjohanek · 2025-01-08T18:35:42Z

src/components/DatasetView.tsx

 import DatasetTable from './table/DatasetTable';

 import { DatasetRoles } from '../constants';

-const styles = (theme: CustomTheme) => ({
-  wrapper: {


so just a general comment, this is moving us away from having separate style objects and towards inline styling. Is that the principle that we want to follow? I thought that separate objects were preferred because they are reusable and easier to maintain. But maybe that isn't the case. What are the guidelines from the UI working group on this?

My goal in this PR is to use best practices for Material UI. We're moving from an old Material UI concept (@mui/styles), to a new one - sx prop + styled components. I don't think Terra UI uses Material UI, but I'm glad to still run this by them.

RE: separate objects that are reusable/easier to maintain: We should use styled components for this case. The "sx prop" should be used for styles that are used in one spot, styled components are reusable and then we use the global theme to share styling variables. I think this is a helpful guide here: https://mui.com/material-ui/customization/how-to-customize

rjohanek · 2025-01-13T14:48:24Z

src/components/dataset/overview/DatasetOverviewPanel.jsx

+                    fontSize: '14px',
+                    lineHeight: '22px',
+                    fontWeight: '600',
+                    color: 'primary.main',


just curious, why is this not a styled component? Is something like this just a symptom of copilot not counting very well?

Yeah, it really seems like copilot can't compare numbers all that well 😭

Here's copilot's notes from this update:

I'll help migrate the DatasetOverviewPanel from JSS to use styled components and sx props. Let's analyze the styles:

More than 3 styles:

drawer (5 styles)

drawerOpen (4 styles with transitions)

drawerClose (5 styles with transitions and breakpoints)

Convert to sx props:

root (1 style)

helpOverlayCloseButton (1 style)

helpText (1 style)

drawerPosition (1 style)

header (4 styles)

expandIcon (1 style)

noRelationships (3 styles)

divider (2 styles)

fullViewButton (1 style)

fullViewText (1 style)

Key changes made:

Removed withStyles HOC and styles object

Added styled import from @mui/material/styles

Created StyledDrawer component for complex drawer styling

Converted all simple styles to sx props

Added Box component as root container

Removed classes prop and references

Simplified component exports

Used theme spacing units where appropriate

Maintained all functionality while modernizing the styling approach

The component maintains the same styling and behavior while using modern MUI patterns.

.

It clearly notes that the "header" class has 4 styles and notes that the first group is for components with more than 3 styles, but still groups it with the sx props. So, I really don't understand why it groups it with the sx props group. But, it still does catch the more complex styles and generally seems to move the components with lots of styles to styled components. I think as long as it is loosely following this rule, then it is okay.

src/components/DatasetView.tsx

rjohanek

I think this looks good overall, just a couple non-blocking questions

s-rubenstein

I am seeing a lot of p or m as a shorthand for margin/padding - I don't know if that is an affordance that material provides, but it seems less readable to me than the CSS property - I would rather we stick with the CSS property versions? I commented a few examples

s-rubenstein · 2025-01-13T18:33:40Z

src/components/HomeView.tsx

-      fontSize: '1.5rem',
-    },
-  });
+const RootContainer = styled(Box)({


I really like this approach - very clean.

src/components/UserList.tsx

src/components/dataset/overview/DatasetOverviewPanel.jsx

snf2ye · 2025-01-14T16:49:54Z

I am seeing a lot of p or m as a shorthand for margin/padding - I don't know if that is an affordance that material provides, but it seems less readable to me than the CSS property - I would rather we stick with the CSS property versions? I commented a few examples

@s-rubenstein Yeah, this is specifically a feature of the sx prop for mui components: https://mui.com/system/getting-started/the-sx-prop/#spacing
I'm glad to switch these back to the CSS property. If we were really all-in on mui styling, it seems possible that these shortcuts could help with readability of bigger sx props. But, css properties are more readable for me.
Copilot was randomly deciding between using the shorthands and the regular css properties, so we'll have to watch out for this happening in future PRs. We can add a note in the copilot prompt.

s-rubenstein

LGTM - there are a number of places where we have 14px vs 14 for styles, but tbh I think that's an existing issue and out of scope to unify to one or the other here.

Command used: Can you migrate this component away from using JSS and references to '@mui/styles' and instead use '@mui/system'? Please use the "sx" prop wherever possible instead of "styled". If you need to use the "sx" prop, then we must use the material UI version of the component (e.g. Box instead of div and add an import statement at the beginning of the file). We must also switch any css references of direct numbers to include px (e.g. '10px' instead of 10)

Im not sure where it got that maxwidth from Update references

- title isn't used anywhere add comma

I think we need to use @mui/material/styles instead? This is what is referenced in docs: https://mui.com/material-ui/customization/theming/ remove @mui/styles references from theme

Line was still showing up in middle of the page

…heme type was quite a pain - I feel pretty confident that we want to use @mui/material/styles since this is how we define our custom theme

All it is doing is setting the width at 100%. Let's move that to an sx prop rather than a shared component/theme. Let's make this clear what styles we're applying when it is just a simple 100% width.

snf2ye · 2025-01-14T19:15:40Z

LGTM - there are a number of places where we have 14px vs 14 for styles, but tbh I think that's an existing issue and out of scope to unify to one or the other here.

Oh, good catch - That's something I paid attention to in the first round, but forgot about in the second round. It's actually important that we pay attention to this for spacing styles because of how mui does theme. And, unfortunately, it looks different for styled vs. sx prop 🫠 I'll go back through the changes again.

sx Prop spacing

With the sx prop, if you leave off "px", then it defaults to it theme spacing, which multiples the value by 8px. So, sx={margin: 2} is actually equivalent to sx={margin: '16px'}

Styled spacing

With styled components, you have to add theme.spacing(2) to use their multiplier shorthand.
styled component:

margin: 2 = margin: 2px
margin: theme.spacing(2) = margin: 16px = margin: 16

Other sx prop styles

To make things even more confusing, these rules appear to not be consistent across sx props. Like sizing (so, height, width, etc.) does NOT default to the theme sizing, but grid does. These guides on sx prop and styled components are vital to getting through these changes.
https://mui.com/system/getting-started/the-sx-prop
https://mui.com/system/styled/

sonarqubecloud · 2025-01-14T19:20:45Z

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

snf2ye force-pushed the sh/dt-1110-remove-mui-styles-part1 branch from e71a9d8 to c83ff6d Compare January 3, 2025 16:24

snf2ye commented Jan 4, 2025

View reviewed changes

src/components/JobView.tsx Outdated Show resolved Hide resolved

snf2ye commented Jan 6, 2025

View reviewed changes

snf2ye mentioned this pull request Jan 7, 2025

DT-1125: Migrate away from @mui/styles Part 2 - ThemeProvider to use @mui/system #1731

Merged

snf2ye force-pushed the sh/dt-1110-remove-mui-styles-part1 branch 2 times, most recently from b1577c1 to 5ac0898 Compare January 7, 2025 21:34

snf2ye marked this pull request as ready for review January 8, 2025 13:55

snf2ye requested a review from a team as a code owner January 8, 2025 13:55

snf2ye requested review from rushtong and s-rubenstein and removed request for a team January 8, 2025 13:55

fboulnois approved these changes Jan 8, 2025

View reviewed changes

s-rubenstein reviewed Jan 8, 2025

View reviewed changes

rushtong approved these changes Jan 8, 2025

View reviewed changes

snf2ye force-pushed the sh/dt-1110-remove-mui-styles-part1 branch from 80598fd to 3a12537 Compare January 8, 2025 17:23

rjohanek reviewed Jan 8, 2025

View reviewed changes

rjohanek reviewed Jan 13, 2025

View reviewed changes

src/components/DatasetView.tsx Outdated Show resolved Hide resolved

rjohanek approved these changes Jan 13, 2025

View reviewed changes

s-rubenstein reviewed Jan 13, 2025

View reviewed changes

snf2ye force-pushed the sh/dt-1110-remove-mui-styles-part1 branch 2 times, most recently from 7a61899 to 6b51734 Compare January 14, 2025 16:24

s-rubenstein approved these changes Jan 14, 2025

View reviewed changes

snf2ye added 5 commits January 14, 2025 14:00

HomeView - converted with copilot

4e16bbd

DatasetView - Copilot decided to go rouge and just add a title??

08016b8

DatasetView: Copilot dropped the mixins css

841ade9

Im not sure where it got that maxwidth from Update references

SnapshotView: Prep for copilot changes

6eab2ee

- title isn't used anywhere add comma

snf2ye added 22 commits January 14, 2025 14:00

Index

817e72f

I think we need to use @mui/material/styles instead? This is what is referenced in docs: https://mui.com/material-ui/customization/theming/ remove @mui/styles references from theme

DatasetOverviewPanel.jsx - clean up references

4ee461c

DatasetAccess - remove styles, not referenced in component

5b7460a

UserList - remove unused styles

bc1313e

UserList - update by copilot

849618b

JobView - switch back to more specific type

2358483

HomeView

5e3e9c1

UserList - updated by claude copilot

cc59308

DatasetView

8570011

SnapshotView

89aabed

Job View

d676ced

DatasetOverview

b6062e3

DatasetOverviewPanel

552e01b

Remove styles

640e7b1

SnapshotAccessRequestTable.tsx

5df0310

Use styled from @mui/system, move mixins to be styled components

504225e

Fix bug in DatasetOverviewPanel.jsx

f3d2436

Line was still showing up in middle of the page

needed component=span

a5f2e25

Getting typescript to recognize that we're using our extended CustomT…

1fe3370

…heme type was quite a pain - I feel pretty confident that we want to use @mui/material/styles since this is how we define our custom theme

Move to common component

5148d72

On second thought, let's remove containerWidth

2ceceb6

All it is doing is setting the width at 100%. Let's move that to an sx prop rather than a shared component/theme. Let's make this clear what styles we're applying when it is just a simple 100% width.

Move away from shorthand to more verbose css styling

ad32ffd

snf2ye force-pushed the sh/dt-1110-remove-mui-styles-part1 branch from f5651e9 to ad32ffd Compare January 14, 2025 19:00

Add px; update one more test reference

335319e

snf2ye merged commit 16254bc into develop Jan 14, 2025
9 checks passed

snf2ye deleted the sh/dt-1110-remove-mui-styles-part1 branch January 14, 2025 19:31

rjohanek mentioned this pull request Jan 27, 2025

[DT-1151] Migrate away from @mui/styles - part 3 - src/components #1746

Merged

rushtong mentioned this pull request Feb 8, 2025

DT-1152: Migrate Components from @mui/styles #1751

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DT-1110: Migrate away from @mui/styles Part 1 #1730

DT-1110: Migrate away from @mui/styles Part 1 #1730

snf2ye commented Jan 3, 2025 •

edited

Loading

cypress bot commented Jan 3, 2025 •

edited

Loading

snf2ye Jan 6, 2025 •

edited

Loading

fboulnois Jan 8, 2025

fboulnois left a comment

fboulnois Jan 8, 2025

snf2ye Jan 8, 2025 •

edited

Loading

s-rubenstein Jan 8, 2025 •

edited

Loading

snf2ye Jan 8, 2025

s-rubenstein Jan 8, 2025

snf2ye Jan 8, 2025

rushtong left a comment

rjohanek Jan 8, 2025

snf2ye Jan 8, 2025

rjohanek Jan 13, 2025

snf2ye Jan 14, 2025 •

edited

Loading

rjohanek left a comment

s-rubenstein left a comment •

edited

Loading

s-rubenstein Jan 13, 2025

snf2ye commented Jan 14, 2025 •

edited

Loading

s-rubenstein left a comment

snf2ye commented Jan 14, 2025 •

edited

Loading

sonarqubecloud bot commented Jan 14, 2025

DT-1110: Migrate away from @mui/styles Part 1 #1730

DT-1110: Migrate away from @mui/styles Part 1 #1730

Conversation

snf2ye commented Jan 3, 2025 • edited Loading

Background

Steps for Upgrades

Common Issues

What step is the copilot upgrade taking? (example output from copilot)

TODO - add more notes about nuances of the changes from mui

Components Impacted in this PR

cypress bot commented Jan 3, 2025 • edited Loading

snf2ye Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fboulnois left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snf2ye Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

s-rubenstein Jan 8, 2025 • edited Loading

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

rushtong left a 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

snf2ye Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

rjohanek left a comment

Choose a reason for hiding this comment

s-rubenstein left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snf2ye commented Jan 14, 2025 • edited Loading

s-rubenstein left a comment

Choose a reason for hiding this comment

snf2ye commented Jan 14, 2025 • edited Loading

sx Prop spacing

Styled spacing

Other sx prop styles

sonarqubecloud bot commented Jan 14, 2025

Quality Gate passed

snf2ye commented Jan 3, 2025 •

edited

Loading

cypress bot commented Jan 3, 2025 •

edited

Loading

snf2ye Jan 6, 2025 •

edited

Loading

snf2ye Jan 8, 2025 •

edited

Loading

s-rubenstein Jan 8, 2025 •

edited

Loading

snf2ye Jan 14, 2025 •

edited

Loading

s-rubenstein left a comment •

edited

Loading

snf2ye commented Jan 14, 2025 •

edited

Loading

snf2ye commented Jan 14, 2025 •

edited

Loading