Skip to content

Commit a61d9f6

Browse files
amitamrutiyaamitamrutiya
authored
Merge pull request #987 from amitamrutiya/mui-migration-1
Mui migration from muiv5 to muiv6
2 parents 5b7bda3 + a4533cf commit a61d9f6

File tree

36 files changed

+2339
-1921
lines changed

36 files changed

+2339
-1921
lines changed

‎package-lock.json

Lines changed: 2077 additions & 1713 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -41,49 +41,53 @@
4141
}
4242
},
4343
"devDependencies": {
44-
"@commitlint/cli": "^17.7.2",
45-
"@commitlint/config-conventional": "^17.7.0",
46-
"@mui/icons-material": "^5.15.11",
44+
"@commitlint/cli": "^19.8.0",
45+
"@commitlint/config-conventional": "^19.8.0",
46+
"@mui/icons-material": "^6.4.8",
4747
"@reduxjs/toolkit": "^2.2.5",
48-
"@testing-library/react": "^14.1.2",
49-
"@types/jest": "^29.5.11",
50-
"@types/lodash": "^4.17.7",
48+
"@testing-library/react": "^16.2.0",
49+
"@types/jest": "^29.5.14",
50+
"@types/lodash": "^4.17.16",
5151
"@types/react": "^18.2.45",
5252
"@types/react-dom": "^18.2.18",
53-
"@types/react-redux": "^7.1.33",
53+
"@types/react-redux": "^7.1.34",
5454
"@typescript-eslint/eslint-plugin": "^6.12.0",
5555
"@typescript-eslint/parser": "^6.12.0",
56-
"commitizen": "^4.3.0",
56+
"commitizen": "^4.3.1",
5757
"cz-conventional-changelog": "^3.3.0",
5858
"eslint": "^8.49.0",
5959
"eslint-plugin-react": "^7.33.2",
6060
"eslint-plugin-react-hooks": "^4.6.0",
6161
"eslint-plugin-react-refresh": "^0.4.4",
6262
"eslint-plugin-storybook": "^0.6.15",
63-
"husky": "^8.0.0",
63+
"husky": "^9.1.7",
6464
"jest": "^29.7.0",
6565
"jest-environment-jsdom": "^29.7.0",
66-
"lint-staged": "^14.0.1",
66+
"lint-staged": "^15.5.0",
6767
"mui-datatables": "^4.3.0",
68-
"notistack": "^3.0.1",
69-
"prettier": "^3.0.3",
70-
"prettier-plugin-organize-imports": "^3.2.3",
71-
"react-error-boundary": "^4.0.12",
68+
"notistack": "^3.0.2",
69+
"prettier": "^3.5.3",
70+
"prettier-plugin-organize-imports": "^4.1.0",
71+
"react-error-boundary": "^5.0.0",
7272
"react-markdown": "^8.0.7",
7373
"react-redux": "^8.1.1",
7474
"redux": "^5.0.1",
7575
"rehype-raw": "^6.1.1",
7676
"remark-gfm": "^3.0.1",
77-
"rollup": "^4.34.8",
78-
"ts-jest": "^29.1.1",
79-
"tsup": "^8.2.4",
80-
"typescript": "^5.3.3"
77+
"rollup": "^4.38.0",
78+
"ts-jest": "^29.3.0",
79+
"tsup": "^8.4.0",
80+
"typescript": "^5.8.2"
8181
},
8282
"peerDependencies": {
83-
"@xstate/react": "^5.0.2",
83+
"@xstate/react": "^5.0.3",
8484
"react": "^17.0.2 || ^18.3.1",
8585
"react-dom": "^17.0.2 || ^18.3.1",
86-
"xstate": "^5.18.2"
86+
"xstate": "^5.19.2"
87+
},
88+
"overrides": {
89+
"@mui/icons-material": "^6.4.8",
90+
"@mui/material": "^6.4.8"
8791
},
8892
"peerDependenciesMeta": {
8993
"react": {
@@ -97,20 +101,20 @@
97101
"access": "public"
98102
},
99103
"dependencies": {
100-
"@emotion/react": "^11.11.3",
101-
"@emotion/styled": "^11.11.0",
104+
"@emotion/react": "^11.14.0",
105+
"@emotion/styled": "^11.14.0",
102106
"@layer5/meshery-design-embed": "^0.4.0",
103107
"@layer5/schemas": "^0.0.6-16",
104-
"@mui/material": "^5.15.11",
108+
"@mui/material": "^6.4.8",
105109
"@types/mui-datatables": "*",
106-
"billboard.js": "^3.14.3",
110+
"billboard.js": "^3.15.0",
107111
"js-yaml": "^4.1.0",
108112
"lodash": "^4.17.21",
109113
"moment": "^2.30.1",
110114
"mui-datatables": "*",
111-
"re-resizable": "^6.10.3",
115+
"re-resizable": "^6.11.2",
112116
"react-draggable": "^4.4.6",
113117
"react-share": "^5.1.0",
114118
"use-debounce": "^10.0.4"
115119
}
116-
}
120+
}

‎src/base/Grid/Grid.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { Grid as MuiGrid, GridProps as MuiGridProps } from '@mui/material';
22
import React from 'react';
33

4+
/**
5+
* @deprecated This component is deprecated and will be removed in a future version.
6+
* Please use an alternative Grid2 component instead.
7+
*/
48
const Grid = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
59
return <MuiGrid {...props} ref={ref} />;
610
});

‎src/base/Grid2/Grid2.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Grid2 as MuiGrid, Grid2Props as MuiGridProps } from '@mui/material';
2+
import React from 'react';
3+
4+
const Grid2 = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
5+
return <MuiGrid {...props} ref={ref} />;
6+
});
7+
8+
export { Grid2 };

‎src/base/Grid2/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { Grid2 } from './Grid2';
2+
export { Grid2 };

‎src/base/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export * from './FormControlLabel';
4040
export * from './FormGroup';
4141
export * from './FormLabel';
4242
export * from './Grid';
43+
export * from './Grid2';
4344
export * from './Grow';
4445
export * from './Hidden';
4546
export * from './IconButton';

‎src/custom/CatalogDesignTable/AuthorCell.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Avatar, Box, Grid, Typography } from '../../base';
2+
import { Avatar, Box, Grid2, Typography } from '../../base';
33
import { MESHERY_CLOUD_PROD } from '../../constants/constants';
44
import { PersonIcon } from '../../icons';
55
import { CustomTooltip } from '../CustomTooltip';
@@ -30,12 +30,12 @@ const AuthorCell: React.FC<AuthorCellProps> = ({
3030

3131
return (
3232
<Box sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
33-
<Grid
33+
<Grid2
3434
container
3535
alignItems="center"
3636
style={maxWidth ? { width: 'max-content' } : { width: '' }}
3737
>
38-
<Grid item>
38+
<Grid2>
3939
<Box sx={{ color: 'text.secondary', mr: 1 }}>
4040
<CustomTooltip title={`View ${displayName}'s Profile`}>
4141
<div>
@@ -52,13 +52,13 @@ const AuthorCell: React.FC<AuthorCellProps> = ({
5252
</div>
5353
</CustomTooltip>
5454
</Box>
55-
</Grid>
55+
</Grid2>
5656
{maxWidth && (
57-
<Grid item>
57+
<Grid2>
5858
<Typography variant="body2">{displayName}</Typography>
59-
</Grid>
59+
</Grid2>
6060
)}
61-
</Grid>
61+
</Grid2>
6262
</Box>
6363
);
6464
};

‎src/custom/CatalogDetail/MetricsDisplay.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Grid } from '../../base';
2+
import { Grid2 } from '../../base';
33
import { Pattern } from '../CustomCatalog/CustomCard';
44
import { MetricsContainer, MetricsData, MetricsSection, MetricsType } from './style';
55

@@ -22,7 +22,15 @@ const MetricsDisplay: React.FC<MetricsDisplayProps> = ({ details }) => {
2222
];
2323

2424
return (
25-
<Grid item lg={8} md={8} sm={12} xs={12} style={{ marginLeft: 'auto' }}>
25+
<Grid2
26+
style={{ marginLeft: 'auto' }}
27+
size={{
28+
lg: 8,
29+
md: 8,
30+
sm: 12,
31+
xs: 12
32+
}}
33+
>
2634
<MetricsSection>
2735
{metrics.map((metric) => (
2836
<MetricsContainer key={metric.label}>
@@ -31,7 +39,7 @@ const MetricsDisplay: React.FC<MetricsDisplayProps> = ({ details }) => {
3139
</MetricsContainer>
3240
))}
3341
</MetricsSection>
34-
</Grid>
42+
</Grid2>
3543
);
3644
};
3745

‎src/custom/CatalogDetail/OverviewSection.tsx

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Grid } from '../../base';
2+
import { Grid2 } from '../../base';
33
import { Pattern } from '../CustomCatalog/CustomCard';
44
import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
55
import ContentClassInfo from './ContentClassInfo';
@@ -63,10 +63,25 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
6363
handleShare={handleShare}
6464
/>
6565
</OverviewContainerHeader>
66-
<Grid container spacing={2}>
67-
<Grid item lg={4} md={4} sm={12} xs={12}>
68-
<Grid container>
69-
<Grid item lg={12} md={12} sm={6} xs={6} style={{ fontFamily: fontFamily }}>
66+
<Grid2 container spacing={2}>
67+
<Grid2
68+
size={{
69+
lg: 4,
70+
md: 4,
71+
sm: 12,
72+
xs: 12
73+
}}
74+
>
75+
<Grid2 container>
76+
<Grid2
77+
style={{ fontFamily: fontFamily }}
78+
size={{
79+
lg: 12,
80+
md: 12,
81+
sm: 6,
82+
xs: 6
83+
}}
84+
>
7085
{details?.catalog_data?.content_class && (
7186
<ContentRow>
7287
<ContentClassInfo
@@ -82,10 +97,17 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
8297
isVisibilityEnabled={isVisibilityEnabled}
8398
handleVisibilityChange={handleVisibilityChange}
8499
/>
85-
</Grid>
86-
</Grid>
87-
</Grid>
88-
<Grid item lg={8} md={8} sm={12} xs={12}>
100+
</Grid2>
101+
</Grid2>
102+
</Grid2>
103+
<Grid2
104+
size={{
105+
lg: 8,
106+
md: 8,
107+
sm: 12,
108+
xs: 12
109+
}}
110+
>
89111
{showContentDetails ? (
90112
<ContentRow>
91113
<h2 style={{ margin: '0' }}>WHAT DOES THIS DESIGN DO?</h2>
@@ -98,9 +120,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
98120
) : (
99121
ViewsComponent
100122
)}
101-
</Grid>
123+
</Grid2>
102124
{!(type === 'view' || type === 'filter') && <MetricsDisplay details={details} />}
103-
</Grid>
125+
</Grid2>
104126
</OverviewContainer>
105127
);
106128
};

‎src/custom/CatalogDetail/style.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Button, ButtonGroup, Link, ListItemButton, Typography } from '../../base';
22
import { styled } from '../../theme';
3-
import { Theme } from './types';
43

54
export const StyledActionWrapper = styled('div')(({ theme }) => ({
65
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
@@ -18,7 +17,6 @@ export const StyledActionWrapper = styled('div')(({ theme }) => ({
1817

1918
interface ActionButtonProps {
2019
disabled?: boolean;
21-
theme?: Theme;
2220
}
2321

2422
export const ActionButton = styled('div')<ActionButtonProps>(({ disabled = false, theme }) => ({

‎src/custom/CatalogFilterSection/FilterSection.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,12 @@ const FilterSection: React.FC<FilterSectionProps> = ({
8989
}}
9090
>
9191
{showSearch && (
92-
<Box px={'0.5rem'} mb={'0.5rem'}>
92+
<Box
93+
sx={{
94+
px: '0.5rem',
95+
mb: '0.5rem'
96+
}}
97+
>
9398
<StyledSearchBar
9499
value={searchQuery}
95100
onChange={handleTextFieldChange}

‎src/custom/CustomCatalog/CustomCard.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
22
import React, { useEffect, useState } from 'react';
3-
import { Avatar, Grid } from '../../base';
3+
import { Avatar, Grid2 } from '../../base';
44
import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } from '../../icons';
55
import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
66
import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
@@ -230,7 +230,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
230230
{cardTechnologies && (
231231
<TechnologiesSection>
232232
<TechnologyText>Technologies</TechnologyText>
233-
<Grid
233+
<Grid2
234234
container
235235
style={{ gap: '4px', alignItems: 'flex-start', flexWrap: 'nowrap' }}
236236
>
@@ -243,7 +243,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
243243
(getHostUrl ? getHostUrl() : '') +
244244
`${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`;
245245
return (
246-
<Grid item key={index}>
246+
<Grid2 key={index}>
247247
<CustomTooltip key={index} title={technology.toLowerCase()}>
248248
<img
249249
height="24px"
@@ -252,12 +252,11 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
252252
src={svgPath}
253253
/>
254254
</CustomTooltip>
255-
</Grid>
255+
</Grid2>
256256
);
257257
})}
258258
{availableTechnologies.length > techlimit && (
259-
<Grid
260-
item
259+
<Grid2
261260
sx={{
262261
padding: '0 8px 0 4px',
263262
borderRadius: '16px',
@@ -270,20 +269,19 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
270269
}}
271270
>
272271
+{availableTechnologies.length - techlimit}
273-
</Grid>
272+
</Grid2>
274273
)}
275274
</>
276275
)}
277-
</Grid>
276+
</Grid2>
278277
</TechnologiesSection>
279278
)}
280279
</DesignDetailsDiv>
281280

282281
{isDetailed && (
283282
<DesignDetailsDiv style={{ marginTop: '20px' }}>
284-
<Grid container style={{ justifyContent: 'space-between', alignItems: 'center' }}>
285-
<Grid
286-
item
283+
<Grid2 container style={{ justifyContent: 'space-between', alignItems: 'center' }}>
284+
<Grid2
287285
style={{
288286
width: '100%',
289287
display: 'flex',
@@ -313,8 +311,8 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
313311
}
314312
)}
315313
</DateText>
316-
</Grid>
317-
</Grid>
314+
</Grid2>
315+
</Grid2>
318316
</DesignDetailsDiv>
319317
)}
320318
{version && (

‎src/custom/CustomImage/CustomImage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface AlignProps {
2424
const Figure = styled('figure')<AlignProps>(({ align }) => ({
2525
margin: '1rem 0',
2626
textAlign: align,
27-
width: '100%',
27+
width: '100%'
2828
}));
2929
const FigCaption = styled('figcaption')<AlignProps>(({ align }) => ({
3030
fontSize: '0.9rem',

0 commit comments

Comments
 (0)