Skip to content

Commit 31d993b

Browse files
amitamrutiyaamitamrutiya
committed
refactor: update Grid components to Grid2
Signed-off-by: amitamrutiya <amitamrutiya2210@gmail.com>
1 parent 21342f0 commit 31d993b

22 files changed

Lines changed: 187 additions & 140 deletions

File tree

‎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 { CLOUD_URL } 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';
@@ -71,10 +71,25 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
7171
handleShare={handleShare}
7272
/>
7373
</div>
74-
<Grid container spacing={2}>
75-
<Grid item lg={4} md={4} sm={12} xs={12}>
76-
<Grid container>
77-
<Grid item lg={12} md={12} sm={6} xs={6} style={{ fontFamily: fontFamily }}>
74+
<Grid2 container spacing={2}>
75+
<Grid2
76+
size={{
77+
lg: 4,
78+
md: 4,
79+
sm: 12,
80+
xs: 12
81+
}}
82+
>
83+
<Grid2 container>
84+
<Grid2
85+
style={{ fontFamily: fontFamily }}
86+
size={{
87+
lg: 12,
88+
md: 12,
89+
sm: 6,
90+
xs: 6
91+
}}
92+
>
7893
{details?.catalog_data?.content_class && (
7994
<ContentRow>
8095
<ContentClassInfo
@@ -90,10 +105,17 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
90105
isVisibilityEnabled={isVisibilityEnabled}
91106
handleVisibilityChange={handleVisibilityChange}
92107
/>
93-
</Grid>
94-
</Grid>
95-
</Grid>
96-
<Grid item lg={8} md={8} sm={12} xs={12}>
108+
</Grid2>
109+
</Grid2>
110+
</Grid2>
111+
<Grid2
112+
size={{
113+
lg: 8,
114+
md: 8,
115+
sm: 12,
116+
xs: 12
117+
}}
118+
>
97119
{showContentDetails ? (
98120
<ContentRow>
99121
<h2 style={{ margin: '0' }}>WHAT DOES THIS DESIGN DO?</h2>
@@ -106,9 +128,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
106128
) : (
107129
ViewsComponent
108130
)}
109-
</Grid>
131+
</Grid2>
110132
{!(type === 'view' || type === 'filter') && <MetricsDisplay details={details} />}
111-
</Grid>
133+
</Grid2>
112134
</OverviewContainer>
113135
);
114136
};

‎src/custom/CatalogFilterSection/FilterSection.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,12 @@ const FilterSection: React.FC<FilterSectionProps> = ({
8383
}}
8484
>
8585
{showSearch && (
86-
<Box px={'0.5rem'} mb={'0.5rem'}>
86+
<Box
87+
sx={{
88+
px: '0.5rem',
89+
mb: '0.5rem'
90+
}}
91+
>
8792
<StyledSearchBar
8893
value={searchQuery}
8994
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/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2-
import { SwipeableDrawer, Theme } from '@mui/material';
2+
import { Grid2, SwipeableDrawer, Theme } from '@mui/material';
33
import { useState } from 'react';
44
import {
55
Backdrop,
66
CircularProgress,
77
DialogContent,
88
DialogTitle,
9-
Grid,
109
ListItem,
1110
Typography
1211
} from '../../../base';
12+
1313
import { CloseIcon } from '../../../icons';
1414
import { CheckIcon } from '../../../icons/Check';
1515
import { styled, useTheme } from '../../../theme';
@@ -251,14 +251,16 @@ const GetStartedModal: React.FC<GetStartedModalProps> = ({
251251
theme={theme}
252252
>{`${completedPercentage()}%`}</PrecentageLabel>
253253
</DialogContent>
254-
<Grid sx={{ overflowY: 'auto', backgroundColor: theme.palette.background.surfaces }}>
254+
<Grid2 sx={{ overflowY: 'auto', backgroundColor: theme.palette.background.surfaces }}>
255255
{stepsData.map((item) => {
256256
return (
257257
<ListItem
258258
key={item.id}
259-
disabled={item.isDisabled}
260259
onClick={() => {
261-
!item.isDisabled && handleClick(item.id), handleClose();
260+
if (!item.isDisabled) {
261+
handleClick(item.id);
262+
handleClose();
263+
}
262264
}}
263265
sx={{
264266
cursor: 'pointer',
@@ -284,7 +286,7 @@ const GetStartedModal: React.FC<GetStartedModalProps> = ({
284286
</ListItem>
285287
);
286288
})}
287-
</Grid>
289+
</Grid2>
288290
</>
289291
</SwipeableDrawerDiv>
290292
<JourneyModal

‎src/custom/DashboardWidgets/WorkspaceActivityWidget.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { SelectChangeEvent } from '@mui/material';
22
import { styled } from '@mui/material/styles';
3-
import moment from 'moment-timezone';
3+
import moment from 'moment';
44
import {
55
Box,
66
Button,

‎src/custom/EmptyState/EmptyState.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Grid } from '../../base/Grid';
1+
import { Grid2 } from '../../base';
22
import { Typography } from '../../base/Typography';
33
import { LeftAngledArrowIcon } from '../../icons';
44

@@ -32,7 +32,7 @@ function EmptyState({ icon, message, pointerLabel, poiner = false }: EmptyStateP
3232
}}
3333
>
3434
{poiner && (
35-
<Grid style={{ display: 'flex', width: '100%', padding: '0 40px' }}>
35+
<Grid2 style={{ display: 'flex', width: '100%', padding: '0 40px' }}>
3636
<LeftAngledArrowIcon />
3737
<Typography
3838
sx={{
@@ -49,9 +49,9 @@ function EmptyState({ icon, message, pointerLabel, poiner = false }: EmptyStateP
4949
>
5050
{pointerLabel}
5151
</Typography>
52-
</Grid>
52+
</Grid2>
5353
)}
54-
<Grid style={{ marginTop: '120px' }}>
54+
<Grid2 style={{ marginTop: '120px' }}>
5555
{icon}
5656
<Typography
5757
sx={{
@@ -64,7 +64,7 @@ function EmptyState({ icon, message, pointerLabel, poiner = false }: EmptyStateP
6464
>
6565
{message}
6666
</Typography>
67-
</Grid>
67+
</Grid2>
6868
</div>
6969
);
7070
}

‎src/custom/InputSearchField/InputSearchField.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Autocomplete } from '@mui/material';
1+
import { Autocomplete, Grid2 } from '@mui/material';
22
import React, { useCallback, useEffect, useState } from 'react';
3-
import { Box, Chip, CircularProgress, Grid, TextField, Tooltip, Typography } from '../../base';
3+
import { Box, Chip, CircularProgress, TextField, Tooltip, Typography } from '../../base';
4+
45
import { iconLarge, iconSmall } from '../../constants/iconsSizes';
56
import { CloseIcon, OrgIcon } from '../../icons';
67

@@ -145,19 +146,18 @@ const InputSearchField: React.FC<InputSearchFieldProps> = ({
145146
renderOption={(props, option: Option) => (
146147
<li {...props} key={option.id}>
147148
<Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
148-
<Grid container alignItems="center">
149-
<Grid item>
149+
<Grid2 container alignItems="center">
150+
<Grid2>
150151
<Box sx={{ color: 'text.secondary', mr: 2 }}>{iconComponent}</Box>
151-
</Grid>
152-
<Grid item xs>
152+
</Grid2>
153+
<Grid2 size="grow">
153154
<Typography variant="body2">{option.name}</Typography>
154-
</Grid>
155-
</Grid>
155+
</Grid2>
156+
</Grid2>
156157
</Box>
157158
</li>
158159
)}
159160
/>
160-
161161
<Box
162162
sx={{
163163
display: 'flex',

0 commit comments

Comments
 (0)