Skip to content

Fix MUI errors #582

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

Open
hofermo wants to merge 8 commits into
base: dev
Choose a base branch
from
Open

Fix MUI errors #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6f05db8
chore(deps): bump the yarn-major group across 1 directory with 11 upd…
dependabot[bot] Apr 17, 2026
45cfa4f
chore: update mui icon imports from Outline to Outlined variants for …
LuisSchweinberger May 8, 2026
2629390
Merge branch 'dev' into dependabot/npm_and_yarn/dev/yarn-major-35d0ee…
hofermo May 15, 2026
89f63c6
Undo MUI change and fix linting errors
hofermo May 15, 2026
2c5853a
Fix MUI errors
hofermo May 15, 2026
9748548
fix: mui icon back to outlined for blueprints editor
artacho-xitaso Jun 5, 2026
4cc54de
Merge branch 'dev' into npm_and_yarn/dev/yarn-major-35d0eeccd2mui
artacho-xitaso Jun 5, 2026
d0ed557
fix: explicit string conversion on template page
artacho-xitaso Jun 5, 2026
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
14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@
"@fontsource/noto-sans": "^5.2.10",
"@fontsource/saira": "^5.2.10",
"@influxdata/influxdb-client-browser": "^1.33.2",
"@mui/icons-material": "^7.3.7",
"@mui/material": "^7.3.7",
"@mui/material-nextjs": "^7.3.7",
"@mui/styled-engine": "^7.3.7",
"@mui/system": "^7.1.0",
"@mui/x-date-pickers": "^8.26.0",
"@mui/x-tree-view": "^8.10.2",
"@mui/icons-material": "^9.0.0",
"@mui/material": "^9.0.0",
"@mui/material-nextjs": "^9.0.0",
"@mui/styled-engine": "^9.0.0",
"@mui/system": "^9.0.0",
"@mui/x-date-pickers": "^9.0.2",
"@mui/x-tree-view": "^9.0.2",
"@prisma/adapter-better-sqlite3": "^7.8.0",
"@prisma/client": "^7.8.0",
"@svgr/webpack": "^8.1.0",
Expand Down
23 changes: 15 additions & 8 deletions src/app/[locale]/_components/FindOutMoreCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,18 @@ export function FindOutMoreCard() {

return (
<Box
display="flex"
flex={1}
flexDirection="column"
alignItems="center"
justifyContent="flex-start"
sx={{ px: 3, py: 4, gap: 1, height: '100%', width: '100%' }}
>
sx={{
display: 'flex',
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
px: 3,
py: 4,
gap: 1,
height: '100%',
width: '100%'
}}>
<Box
sx={{
backgroundColor: theme.palette.secondary.main,
Expand All @@ -34,7 +39,9 @@ export function FindOutMoreCard() {
<Typography align="center" variant="h4">
{t('findOutMoreHeader')}
</Typography>
<Typography align="center" color="text.secondary">
<Typography align="center" sx={{
color: 'text.secondary'
}}>
{t('findOutMoreText')}
</Typography>
</Box>
Expand Down
29 changes: 20 additions & 9 deletions src/app/[locale]/_components/GoToListCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,18 @@ export function GoToListCard() {

return (
<Box
display="flex"
flex={1}
flexDirection="column"
alignItems="center"
justifyContent="flex-start"
sx={{ px: 3, py: 4, gap: 1, height: '100%', width: '100%' }}
>
sx={{
display: 'flex',
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
px: 3,
py: 4,
gap: 1,
height: '100%',
width: '100%'
}}>
<Box
sx={{
backgroundColor: theme.palette.secondary.main,
Expand All @@ -30,10 +35,16 @@ export function GoToListCard() {
>
<ArrowOutwardIcon sx={{ color: 'white' }} />
</Box>
<Typography textAlign="center" variant="h4">
<Typography variant="h4" sx={{
textAlign: 'center'
}}>
{t('listCardHeader')}
</Typography>
<Typography color="text.secondary" textAlign="center">
<Typography
sx={{
color: 'text.secondary',
textAlign: 'center'
}}>
{t('listBtnLabel')}
</Typography>
</Box>
Expand Down
41 changes: 27 additions & 14 deletions src/app/[locale]/_components/ManualAasInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,13 @@ export function ManualAasInput(props: {
};

return (
<Box m={2} display="flex" flexDirection="column" gap={1}>
<Box
sx={{
m: 2,
display: 'flex',
flexDirection: 'column',
gap: 1
}}>
<Typography
variant="h5"
sx={{
Expand All @@ -85,7 +91,12 @@ export function ManualAasInput(props: {
>
{t('pages.dashboard.enterManuallyLabel')}
</Typography>
<Box display="flex" flexDirection={isMobile ? 'column' : 'row'} gap={1}>
<Box
sx={{
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
gap: 1
}}>
<TextField
sx={{ width: isMobile ? '100%' : '75%' }}
id="manual-input"
Expand All @@ -98,18 +109,20 @@ export function ManualAasInput(props: {
autoFocus={true}
value={inputValue}
inputRef={inputRef}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => {
setInputValue('');
}}
>
<CloseIcon />
</IconButton>
</InputAdornment>
),
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => {
setInputValue('');
}}
>
<CloseIcon />
</IconButton>
</InputAdornment>
),
}
}}
/>
<TextField
Expand Down
42 changes: 26 additions & 16 deletions src/app/[locale]/_components/QrScanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,28 +103,32 @@ export function QrScanner(props: {

return (
<Box
position="relative"
margin="auto"
height={size}
width={size}
style={{ cursor: 'pointer', backgroundColor: theme.palette.primary.main }}
>
sx={{
position: 'relative',
margin: 'auto',
height: size,
width: size
}}>
{state === State.Stopped && (
<Box
onClick={() => setState(State.LoadScanner)}
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
height={size}
width={size}
gap={1}
color="white"
data-testid="scanner-start"
>
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: size,
width: size,
gap: 1,
color: 'white'
}}>
<ScannerLogo alt="Scanner Logo" width="50px" />
<Typography variant="h2">Scan Code</Typography>
<Box position="absolute">
<Box sx={{
position: 'absolute'
}}>
<ScannerOutlineThin></ScannerOutlineThin>
</Box>
</Box>
Expand All @@ -145,7 +149,13 @@ export function QrScanner(props: {
</IconButton>
)}
{(state === State.LoadScanner || state === State.HandleQr) && (
<Box padding="50px" position="absolute" height={size} width={size}>
<Box
sx={{
padding: '50px',
position: 'absolute',
height: size,
width: size
}}>
<CircularProgress
style={{ margin: 'auto', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
/>
Expand Down
4 changes: 3 additions & 1 deletion src/app/[locale]/clientLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ export const ClientLayout = ({ children }: Readonly<ClientLayoutProps>) => {
<AasStoreProvider>
<LayoutRoot>
<ErrorBoundary message={t('errors.generic')}>
<Box flexGrow={1} data-testid="notifications">
<Box data-testid="notifications" sx={{
flexGrow: 1
}}>
{children}
</Box>
</ErrorBoundary>
Expand Down
20 changes: 16 additions & 4 deletions src/app/[locale]/compare/_components/CompareSubmodelElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,15 @@ export function CompareSubmodelElement(props: CompareSubmodelElementProps) {
case KeyTypes.Property:
return (
<>
<Box display="flex" alignItems="center">
<Box
sx={{
display: 'flex',
alignItems: 'center'
}}>
{isMarked && <DifferenceSymbol />}
<Box display="inline-block">
<Box sx={{
display: 'inline-block'
}}>
<GenericPropertyComponent property={props.submodelElement} withCopyButton={true} />
</Box>
</Box>
Expand All @@ -43,9 +49,15 @@ export function CompareSubmodelElement(props: CompareSubmodelElementProps) {
case KeyTypes.MultiLanguageProperty:
return (
<>
<Box display="flex" alignItems={'center'}>
<Box
sx={{
display: 'flex',
alignItems: 'center'
}}>
{isMarked && <DifferenceSymbol />}
<Box display="inline-block">
<Box sx={{
display: 'inline-block'
}}>
<MultiLanguagePropertyComponent mLangProp={props.submodelElement} />
</Box>
</Box>
Expand Down
40 changes: 34 additions & 6 deletions src/app/[locale]/compare/_components/CompareView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,41 @@ export function CompareView() {

return (
<>
<Box width="90%" maxWidth="1125px" margin="0 auto">
<Typography variant="h2" textAlign="left" marginBottom="30px">
<Box
sx={{
width: '90%',
maxWidth: '1125px',
margin: '0 auto'
}}>
<Typography
variant="h2"
sx={{
textAlign: 'left',
marginBottom: '30px'
}}>
{t('title')}
</Typography>
{compareAas.length !== 0 || isLoadingAas ? (
<Box display="flex" flexDirection="column" gap="20px">
<Box display="flex" flexDirection="row" gap="20px">
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '20px'
}}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
gap: '20px'
}}>
{compareAas.map((compareAas, index) => (
<Box position="relative" key={index} width={1 / 3} data-testid={`compare-aas-${index}`}>
<Box
key={index}
data-testid={`compare-aas-${index}`}
sx={{
position: 'relative',
width: 1 / 3
}}>
<DialogCloseButton
handleClose={() => handleDeleteAas(compareAas.aas.id)}
dataTestId={`delete-compare-aas-${index}`}
Expand All @@ -104,7 +130,9 @@ export function CompareView() {
))}
{compareAas.length < 3 && <AddAasToCompareCard onClick={handleDetailsModalOpen} />}
</Box>
<Box width={compareAas.length / 3}>
<Box sx={{
width: compareAas.length / 3
}}>
<CompareSubmodelsAccordion />
</Box>
</Box>
Expand Down
23 changes: 17 additions & 6 deletions src/app/[locale]/compare/_components/add-aas/AddAasToCompareCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,31 @@ export function AddAasToCompareCard(props: AddAasToCompareCardProps) {

return (
<Box
width="33%"
display="flex"
onClick={props.onClick}
sx={{ cursor: 'pointer' }}
data-testid="add-aas-to-compare-button"
>
sx={{
width: '33%',
display: 'flex',
cursor: 'pointer'
}}>
<Card>
<CardContent>
{isFirst ? (
<Typography variant="h2" textAlign="center" margin="30px 0">
<Typography
variant="h2"
sx={{
textAlign: 'center',
margin: '30px 0'
}}>
{t('addFirstAasButton')}
</Typography>
) : (
<Typography variant="h2" textAlign="center" margin="30px 0">
<Typography
variant="h2"
sx={{
textAlign: 'center',
margin: '30px 0'
}}>
{t('addButton')}
</Typography>
)}
Expand Down
Loading
Loading