Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[6694] MUIv6 Upgrade #4190

Draft
wants to merge 9 commits into
base: develop
Choose a base branch
from
Draft

[6694] MUIv6 Upgrade #4190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
545fceb
[6694] MUIv6 Upgrade - initial work
jvega190 Oct 16, 2024
8a4d82c
[6694] MUIv6 Upgrade - Update deprecated components/props
jvega190 Oct 16, 2024
2f5c577
[6694] Update deprecated ListItemSecondaryAction usages
jvega190 Oct 16, 2024
8a8955e
[6694] Remove deprecated Hidden component
jvega190 Oct 16, 2024
cc34ccb
[6694] Fix fullscreen dashlets padding
jvega190 Oct 17, 2024
e8c368f
[6694] Fix padding in PluginForm fields
jvega190 Oct 17, 2024
9c12c57
[6694] Remove rowCount from DataGrid on AuditGridSkeleton, it has no …
jvega190 Oct 17, 2024
62e473d
[6694] Update MUI packages
jvega190 Oct 29, 2024
beb2569
Merge branch 'develop' of https://github.com/craftercms/studio-ui int…
jvega190 Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions ui/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@graphiql/plugin-explorer": "^3.0.1",
"@mui/icons-material": "^5.15.20",
"@mui/lab": "^5.0.0-alpha.173",
"@mui/material": "^5.16.7",
"@mui/x-data-grid": "^7.13.0",
"@mui/x-date-pickers": "^7.13.0",
"@mui/x-tree-view": "^7.13.0",
"@mui/icons-material": "^6.1.5",
"@mui/lab": "6.0.0-beta.13",
"@mui/material": "^6.1.5",
"@mui/x-data-grid": "^7.22.0",
"@mui/x-date-pickers": "^7.22.0",
"@mui/x-tree-view": "^7.22.0",
"@prettier/plugin-xml": "3.3.0",
"@reduxjs/toolkit": "^2.2.5",
"@stomp/stompjs": "^7.0.0",
Expand Down
50 changes: 26 additions & 24 deletions ui/app/src/components/ActivityDashlet/ActivityDashlet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,30 +425,32 @@ export function ActivityDashlet(props: ActivityDashletProps) {
onChange={handleAuthorFilterInputChange}
placeholder='e.g. "jon.doe, jdoe, [email protected]"'
onKeyUp={handleAuthorFilterKeyUp}
InputProps={{
inputRef: authorFilterInputRef,
endAdornment: (
<InputAdornment position="end">
<IconButton
disabled={isFetching}
title={formatMessage({ defaultMessage: 'Submit' })}
edge="end"
onClick={submitAuthorFilterChanges}
size="small"
>
<ReplyRounded sx={{ transform: 'scaleX(-1)' }} />
</IconButton>
<IconButton
disabled={isFetching}
title={formatMessage({ defaultMessage: 'Clear & close' })}
edge="end"
onClick={clearAuthorFilterValue}
size="small"
>
<ClearRounded />
</IconButton>
</InputAdornment>
)
slotProps={{
input: {
inputRef: authorFilterInputRef,
endAdornment: (
<InputAdornment position="end">
<IconButton
disabled={isFetching}
title={formatMessage({ defaultMessage: 'Submit' })}
edge="end"
onClick={submitAuthorFilterChanges}
size="small"
>
<ReplyRounded sx={{ transform: 'scaleX(-1)' }} />
</IconButton>
<IconButton
disabled={isFetching}
title={formatMessage({ defaultMessage: 'Clear & close' })}
edge="end"
onClick={clearAuthorFilterValue}
size="small"
>
<ClearRounded />
</IconButton>
</InputAdornment>
)
}
}}
/>
</Popover>
Expand Down
1 change: 0 additions & 1 deletion ui/app/src/components/AuditGrid/AuditGridSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,6 @@ export function AuditGridSkeleton(props: AuditGridSkeletonProps) {
rows={rows}
columns={columns}
paginationModel={{ page: 0, pageSize: numOfItems }}
rowCount={numOfItems}
/>
</Box>
);
Expand Down
22 changes: 13 additions & 9 deletions ui/app/src/components/AuditGridFilterPopover/AuditGridFilterPopoverBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,9 @@ export function AuditGridFilterPopoverBody(props: AuditGridFilterPopoverProps) {
select
label={formatMessage(translations[filterId])}
value={value?.split(',') ?? ['all']}
SelectProps={{ multiple: true }}
slotProps={{
select: { multiple: true }
}}
onChange={onMultipleSelectChanges}
sx={{ width: 200 }}
>
Expand All @@ -271,14 +273,16 @@ export function AuditGridFilterPopoverBody(props: AuditGridFilterPopoverProps) {
<TextField
value={keyword}
label={formatMessage(translations[filterId])}
InputProps={{
endAdornment: keyword && (
<Tooltip title={<FormattedMessage id="words.clear" defaultMessage="Clear" />}>
<IconButton size="small" className={classes.clearButton} onClick={() => onClearTextField()}>
<ClearRoundedIcon />
</IconButton>
</Tooltip>
)
slotProps={{
input: {
endAdornment: keyword && (
<Tooltip title={<FormattedMessage id="words.clear" defaultMessage="Clear" />}>
<IconButton size="small" className={classes.clearButton} onClick={() => onClearTextField()}>
<ClearRoundedIcon />
</IconButton>
</Tooltip>
)
}
}}
fullWidth
onChange={onTextFieldChanges}
Expand Down
42 changes: 22 additions & 20 deletions ui/app/src/components/BrokenReferencesDialog/BrokenReferencesDialogContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,10 @@ import { fetchBrokenReferences, showEditDialog } from '../../state/actions/dialo
import useActiveSiteId from '../../hooks/useActiveSiteId';
import useEnv from '../../hooks/useEnv';
import { DialogBody } from '../DialogBody';
import Grid from '@mui/material/Grid';
import Grid from '@mui/material/Grid2';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Button from '@mui/material/Button';
import DialogFooter from '../DialogFooter';
import SecondaryButton from '../SecondaryButton';
Expand Down Expand Up @@ -56,29 +55,19 @@ export function BrokenReferencesDialogContainer(props: BrokenReferencesDialogCon
<DialogBody>
<Grid container spacing={3}>
{references.length > 0 ? (
<Grid item xs={12}>
<Grid size={12}>
<List
sx={{
border: (theme) => `1px solid ${theme.palette.divider}`,
background: (theme) => theme.palette.background.paper
}}
>
{references.map((reference, index) => (
<ListItem key={reference.path} divider={references.length - 1 !== index}>
<ListItemText
primary={reference.label}
secondary={reference.path}
primaryTypographyProps={{
title: reference.path,
sx: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}
}}
/>
{reference.availableActionsMap.edit && (
<ListItemSecondaryAction>
<ListItem
key={reference.path}
divider={references.length - 1 !== index}
secondaryAction={
reference.availableActionsMap.edit ? (
<Button
color="primary"
onClick={() => {
Expand All @@ -93,8 +82,21 @@ export function BrokenReferencesDialogContainer(props: BrokenReferencesDialogCon
>
<FormattedMessage defaultMessage="Edit" />
</Button>
</ListItemSecondaryAction>
)}
) : null
}
>
<ListItemText
primary={reference.label}
secondary={reference.path}
primaryTypographyProps={{
title: reference.path,
sx: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}
}}
/>
</ListItem>
))}
</List>
Expand Down
6 changes: 3 additions & 3 deletions ui/app/src/components/ConflictedPathDiffDialog/ConflictedPathDiffDialogUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { makeStyles } from 'tss-react/mui';

import AceEditor from '../AceEditor/AceEditor';
import ConflictedPathDiffDialogSplitView from './ConflictedPathDiffDialogSplitView';
import Grid from '@mui/material/Grid';
import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import { FormattedMessage } from 'react-intl';

Expand Down Expand Up @@ -74,12 +74,12 @@ export function ConflictedPathDiffDialogUI(props: RemoteRepositoriesDiffDialogUI
{tab === 1 && (
<div className={classes.diffTab}>
<Grid container className={classes.labelsContainer}>
<Grid item xs={6}>
<Grid size={6}>
<Typography variant="body1">
<FormattedMessage id="words.local" defaultMessage="Local" />
</Typography>
</Grid>
<Grid item xs={6}>
<Grid size={6}>
<Typography variant="body1">
<FormattedMessage id="words.remote" defaultMessage="Remote" />
</Typography>
Expand Down
4 changes: 2 additions & 2 deletions ui/app/src/components/CreateFileDialog/CreateFileDialogContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,8 +191,8 @@ export function CreateFileDialogContainer(props: CreateFileContainerProps) {
}
disabled={isSubmitting}
margin="normal"
InputLabelProps={{
shrink: true
slotProps={{
inputLabel: { shrink: true }
}}
onChange={(event) => onInputChanges(applyAssetNameRules(event.target.value, { allowBraces }))}
/>
Expand Down
4 changes: 2 additions & 2 deletions ui/app/src/components/CreateFolderDialog/CreateFolderContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,8 +232,8 @@ export function CreateFolderContainer(props: CreateFolderContainerProps) {
}
disabled={isSubmitting}
margin="normal"
InputLabelProps={{
shrink: true
slotProps={{
inputLabel: { shrink: true }
}}
onChange={(event) => onInputChanges(applyFolderNameRules(event.target.value, { allowBraces }))}
/>
Expand Down
22 changes: 14 additions & 8 deletions ui/app/src/components/CreateSiteDialog/BaseSiteForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import Grid from '@mui/material/Grid';
import Grid from '@mui/material/Grid2';
import TextField from '@mui/material/TextField';
import { siteIdMaxLength, siteInputMaxLength, siteNameMaxLength } from './utils';
import React from 'react';
Expand Down Expand Up @@ -85,7 +85,7 @@ export function BaseSiteForm(props: BaseSiteFormProps) {

return (
<>
<Grid item xs={12} data-field-id="siteName">
<Grid size={12} data-field-id="siteName">
<TextField
id="siteName"
name="siteName"
Expand All @@ -99,7 +99,9 @@ export function BaseSiteForm(props: BaseSiteFormProps) {
onKeyUp={(event) => checkSiteNames(event)}
onChange={(event) => handleInputChange(event)}
value={inputs.siteName}
inputProps={{ maxLength: siteNameMaxLength }}
slotProps={{
htmlInput: { maxLength: siteNameMaxLength }
}}
error={inputs.submitted && fieldsErrorsLookup['siteName']}
helperText={
inputs.submitted && !inputs.siteName
Expand All @@ -110,7 +112,7 @@ export function BaseSiteForm(props: BaseSiteFormProps) {
}
/>
</Grid>
<Grid item xs={12} data-field-id="siteId">
<Grid size={12} data-field-id="siteId">
<TextField
id="siteId"
name="siteId"
Expand All @@ -123,7 +125,9 @@ export function BaseSiteForm(props: BaseSiteFormProps) {
onKeyUp={(event) => checkSites(event)}
onChange={(event) => handleInputChange(event)}
value={inputs.siteId}
inputProps={{ maxLength: siteIdMaxLength }}
slotProps={{
htmlInput: { maxLength: siteIdMaxLength }
}}
error={inputs.submitted && fieldsErrorsLookup['siteId']}
helperText={renderSiteFormHelperText(
formatMessage(messages.siteId),
Expand All @@ -135,7 +139,7 @@ export function BaseSiteForm(props: BaseSiteFormProps) {
)}
/>
</Grid>
<Grid item xs={12} data-field-id="description">
<Grid size={12} data-field-id="description">
<TextField
id="description"
fullWidth
Expand All @@ -144,11 +148,13 @@ export function BaseSiteForm(props: BaseSiteFormProps) {
multiline
onChange={(event) => handleInputChange(event)}
value={inputs.description}
inputProps={{ maxLength: siteInputMaxLength }}
slotProps={{
htmlInput: { maxLength: siteInputMaxLength }
}}
helperText={formatMessage(messages.fieldMaxLength, { maxLength: siteInputMaxLength })}
/>
</Grid>
<Grid item xs={12} data-field-id="gitBranch">
<Grid size={12} data-field-id="gitBranch">
<TextField
id="sandboxBranch"
name="gitBranch"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/src/components/CreateSiteDialog/BlueprintForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import React, { useEffect, useState } from 'react';
import { makeStyles } from 'tss-react/mui';
import Grid from '@mui/material/Grid';
import Grid from '@mui/material/Grid2';
import GitForm from './GitForm';
import { LookupTable, MarketplacePlugin, SiteState } from '../../models';
import { FormattedMessage } from 'react-intl';
Expand Down
8 changes: 4 additions & 4 deletions ui/app/src/components/CreateSiteDialog/BlueprintReview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import React, { useEffect, useState } from 'react';
import { makeStyles } from 'tss-react/mui';
import Grid from '@mui/material/Grid';
import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import EditIcon from '@mui/icons-material/Edit';
Expand Down Expand Up @@ -241,7 +241,7 @@ function BlueprintReview(props: BlueprintReviewProps) {
return (
<div className={classes.review}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Grid size={12}>
<Typography variant="h6" gutterBottom className={classes.section}>
{formatMessage(messages.creationStrategy)}
<IconButton aria-label="goto" className={classes.edit} onClick={() => onGoTo(0)} size="large">
Expand All @@ -266,7 +266,7 @@ function BlueprintReview(props: BlueprintReviewProps) {
</div>
)}
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Typography variant="h6" gutterBottom className={classes.section}>
{formatMessage(messages.siteInfo)}
<IconButton aria-label="goto" className={classes.edit} onClick={() => onGoTo(1)} size="large">
Expand Down Expand Up @@ -295,7 +295,7 @@ function BlueprintReview(props: BlueprintReviewProps) {
{blueprint.source !== 'GIT' && blueprint.id === 'GIT' && renderGitOptions()}
</Grid>
{blueprint.parameters && !!blueprint.parameters.length && (
<Grid item xs={12}>
<Grid size={12}>
<Typography variant="h6" gutterBottom className={classes.section}>
{formatMessage(messages.blueprintParameters)}
<IconButton aria-label="goto" className={classes.edit} onClick={() => onGoTo(1)} size="large">
Expand Down
Loading