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

36 files changed

Lines changed: 2339 additions & 1921 deletions

‎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 }) => ({

0 commit comments

Comments
 (0)