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

[frontend] Update material-ui monorepo to v6 (major) #1565

Merged
merged 7 commits into from
Nov 13, 2024
Merged

[frontend] Update material-ui monorepo to v6 (major) #1565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e3cd873
[frontend] Update material-ui monorepo to v6
renovate[bot] Oct 31, 2024
e71a933
[frontend] fix breaking changes
guillaumejparis Nov 7, 2024
1a31b6c
[frontend] fix console errors
guillaumejparis Nov 7, 2024
c9f374e
[frontend] fix lint
guillaumejparis Nov 7, 2024
424c556
[frontend] fix lint
guillaumejparis Nov 7, 2024
da89229
[frontend] fix lists
guillaumejparis Nov 8, 2024
87c9ab6
[frontend] fix linter
guillaumejparis Nov 8, 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
14 changes: 8 additions & 6 deletions openbas-front/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,12 +151,14 @@ export default [
'error', {
patterns: [
{
group: ['@mui/material/*', '!@mui/material/locale', '!@mui/material/styles', '!@mui/material/colors', '!@mui/material/transitions'],
message: 'Please use named import from @mui/material instead.',
},
{
group: ['@mui/styles/*'],
message: 'Please use named import from @mui/styles instead.',
group: [
'@mui/material/*', '!@mui/material/locale', '!@mui/material/styles', '!@mui/material/colors', '!@mui/material/transitions',
'@mui/styles/*',
'@mui/x-date-pickers/*', '!@mui/x-date-pickers/AdapterDateFnsV3',
'@mui/icons-material/*',
'@mui/lab/*',
],
message: 'Please use named import from @mui/* instead.',
},
],
},
Expand Down
13 changes: 7 additions & 6 deletions openbas-front/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,13 @@
"@fontsource/ibm-plex-sans": "5.0.21",
"@hookform/resolvers": "3.9.0",
"@microsoft/fetch-event-source": "2.0.1",
"@mui/icons-material": "5.16.7",
"@mui/lab": "5.0.0-alpha.173",
"@mui/material": "5.16.7",
"@mui/styles": "5.16.7",
"@mui/utils": "5.16.6",
"@mui/x-date-pickers": "7.22.0",
"@mui/icons-material": "6.1.6",
"@mui/lab": "6.0.0-beta.14",
"@mui/material": "6.1.6",
"@mui/styles": "6.1.6",
"@mui/system": "6.1.6",
"@mui/utils": "6.1.6",
"@mui/x-date-pickers": "7.22.1",
"@redux-devtools/extension": "3.3.0",
"@uiw/react-md-editor": "4.0.4",
"@xyflow/react": "12.3.0",
Expand Down
53 changes: 28 additions & 25 deletions openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Chip, Drawer as MuiDrawer, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText } from '@mui/material';
import { Box, Chip, Drawer as MuiDrawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { SelectGroup } from 'mdi-material-ui';
import { CSSProperties, Fragment, useMemo, useState } from 'react';
Expand Down Expand Up @@ -234,30 +234,8 @@ const AssetGroups = () => {
{assetGroups.map((assetGroup: AssetGroupOutput) => (
<ListItem
key={assetGroup.asset_group_id}
classes={{ root: classes.item }}
divider
button
onClick={() => setSelectedAssetGroupId(assetGroup.asset_group_id)}
>
<ListItemIcon>
<SelectGroup color="primary" />
</ListItemIcon>
<ListItemText
primary={(
<div className={classes.bodyItems}>
{headers.map(header => (
<div
key={header.field}
className={classes.bodyItem}
style={inlineStyles[header.field]}
>
{header.value?.(assetGroup)}
</div>
))}
</div>
)}
/>
<ListItemSecondaryAction>
secondaryAction={(
<AssetGroupPopover
assetGroup={assetGroup}
onUpdate={result => setAssetGroups(assetGroups.map(ag => (ag.asset_group_id !== result.asset_group_id ? ag : result)))}
Expand All @@ -270,7 +248,32 @@ const AssetGroups = () => {
})))}
openEditOnInit={assetGroup.asset_group_id === searchId}
/>
</ListItemSecondaryAction>
)}
disablePadding
>
<ListItemButton
classes={{ root: classes.item }}
onClick={() => setSelectedAssetGroupId(assetGroup.asset_group_id)}
>
<ListItemIcon>
<SelectGroup color="primary" />
</ListItemIcon>
<ListItemText
primary={(
<div className={classes.bodyItems}>
{headers.map(header => (
<div
key={header.field}
className={classes.bodyItem}
style={inlineStyles[header.field]}
>
{header.value?.(assetGroup)}
</div>
))}
</div>
)}
/>
</ListItemButton>
</ListItem>
))}
</List>
Expand Down
234 changes: 124 additions & 110 deletions openbas-front/src/admin/components/common/articles/ArticleAddDocuments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
import { ControlPointOutlined, DescriptionOutlined } from '@mui/icons-material';
import { Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Grid, List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
import {
Box,
Button,
Chip,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Grid,
List,
ListItemButton,
ListItemIcon,
ListItemText } from '@mui/material';
import { makeStyles } from '@mui/styles';
import * as R from 'ramda';
import { useContext, useState } from 'react';
Expand Down Expand Up @@ -145,120 +157,122 @@ const ArticleAddDocuments = (props) => {
const { permissions } = useContext(PermissionsContext);

return (
<div>
<ListItem
classes={{ root: classes.item }}
button
divider
onClick={handleOpen}
color="primary"
disabled={!permissions.canWrite}
>
<ListItemIcon color="primary">
<ControlPointOutlined color="primary" />
</ListItemIcon>
<ListItemText
primary={t('Add documents')}
classes={{ primary: classes.text }}
/>
</ListItem>
<Dialog
open={open}
TransitionComponent={Transition}
onClose={handleClose}
fullWidth
maxWidth="lg"
PaperProps={{
elevation: 1,
sx: {
minHeight: 580,
maxHeight: 580,
},
}}
>
<DialogTitle>{t('Add documents in this media pressure article')}</DialogTitle>
<DialogContent>
<Grid container spacing={3} style={{ marginTop: -15 }}>
<Grid item xs={8}>
<Grid container spacing={3}>
<Grid item xs={6}>
<SearchFilter
onChange={handleSearchDocuments}
fullWidth
/>
(
<div>
<ListItemButton
classes={{ root: classes.item }}
divider
onClick={handleOpen}
color="primary"
disabled={!permissions.canWrite}
>
<ListItemIcon color="primary">
<ControlPointOutlined color="primary" />
</ListItemIcon>
<ListItemText
primary={t('Add documents')}
classes={{ primary: classes.text }}
/>
</ListItemButton>
<Dialog
open={open}
TransitionComponent={Transition}
onClose={handleClose}
fullWidth
maxWidth="lg"
PaperProps={{
elevation: 1,
sx: {
minHeight: 580,
maxHeight: 580,
},
}}
>
<DialogTitle>{t('Add documents in this media pressure article')}</DialogTitle>
<DialogContent>
<Grid container spacing={3} style={{ marginTop: -15 }}>
<Grid item xs={8}>
<Grid container spacing={3}>
<Grid item xs={6}>
<SearchFilter
onChange={handleSearchDocuments}
fullWidth
/>
</Grid>
<Grid item xs={6}>
<TagsFilter
onAddTag={handleAddTag}
onClearTag={handleClearTag}
currentTags={tags}
fullWidth
/>
</Grid>
</Grid>
<Grid item xs={6}>
<TagsFilter
onAddTag={handleAddTag}
onClearTag={handleClearTag}
currentTags={tags}
fullWidth
<List>
{finalDocuments.map((document) => {
const disabled = documentsIds.includes(document.document_id)
|| articleDocumentsIds.includes(document.document_id);
return (
(
<ListItemButton
key={document.document_id}
disabled={disabled}
divider
dense
onClick={() => addDocument(document.document_id)}
>
<ListItemIcon>
<DescriptionOutlined />
</ListItemIcon>
<ListItemText
primary={document.document_name}
secondary={document.document_description}
/>
<ItemTags
variant="list"
tags={document.document_tags}
/>
</ListItemButton>
)
);
})}
<CreateDocument
inline
onCreate={onCreate}
filters={filters}
/>
</Grid>
</List>
</Grid>
<List>
{finalDocuments.map((document) => {
const disabled = documentsIds.includes(document.document_id)
|| articleDocumentsIds.includes(document.document_id);
return (
<ListItem
key={document.document_id}
disabled={disabled}
button
divider
dense
onClick={() => addDocument(document.document_id)}
>
<ListItemIcon>
<DescriptionOutlined />
</ListItemIcon>
<ListItemText
primary={document.document_name}
secondary={document.document_description}
<Grid item xs={4}>
<Box className={classes.box}>
{documentsIds.map((documentId) => {
const document = documents[documentId];
return (
<Chip
key={documentId}
onDelete={() => removeDocument(documentId)}
label={truncate(document.document_name, 22)}
icon={<DescriptionOutlined />}
classes={{ root: classes.chip }}
/>
<ItemTags
variant="list"
tags={document.document_tags}
/>
</ListItem>
);
})}
<CreateDocument
inline
onCreate={onCreate}
filters={filters}
/>
</List>
</Grid>
<Grid item xs={4}>
<Box className={classes.box}>
{documentsIds.map((documentId) => {
const document = documents[documentId];
return (
<Chip
key={documentId}
onDelete={() => removeDocument(documentId)}
label={truncate(document.document_name, 22)}
icon={<DescriptionOutlined />}
classes={{ root: classes.chip }}
/>
);
})}
</Box>
);
})}
</Box>
</Grid>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>{t('Cancel')}</Button>
<Button
color="secondary"
onClick={submitAddDocuments}
>
{t('Add')}
</Button>
</DialogActions>
</Dialog>
</div>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>{t('Cancel')}</Button>
<Button
color="secondary"
onClick={submitAddDocuments}
>
{t('Add')}
</Button>
</DialogActions>
</Dialog>
</div>
)
);
};

Expand Down
Loading