Skip to content

Migrate to grid2 #192

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

Merged
antoinebhs merged 14 commits into from
Jul 3, 2026
Merged

Migrate to grid2 #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f0fb15e
Migrate Grid to Grid2
antoinebhs Jun 30, 2026
fe8240e
Migrate Grid to Grid2
antoinebhs Jun 30, 2026
94301c2
Migrate Grid container direction="column" to Stack
antoinebhs Jun 30, 2026
5c50afa
Merge branch 'main' into migrate-to-grid2
antoinebhs Jul 1, 2026
c3e493d
fix
antoinebhs Jul 1, 2026
c25d32f
fix
antoinebhs Jul 2, 2026
62a50a5
fix
antoinebhs Jul 2, 2026
c4fb711
fix
antoinebhs Jul 2, 2026
91a5274
fix
antoinebhs Jul 2, 2026
bfa78fb
fix
antoinebhs Jul 3, 2026
d5b20be
Merge remote-tracking branch 'origin/main' into migrate-to-grid2
antoinebhs Jul 3, 2026
1a40d14
fix
antoinebhs Jul 3, 2026
1a5e31d
Merge remote-tracking branch 'origin/main' into migrate-to-grid2
antoinebhs Jul 3, 2026
9e16cb3
Commons-ui 0.240.0
antoinebhs Jul 3, 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
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@gridsuite/commons-ui": "0.239.0",
"@gridsuite/commons-ui": "0.240.0",
"@hookform/resolvers": "^4.1.3",
"@mui/icons-material": "^6.5.0",
"@mui/lab": "6.0.1-beta.36",
Expand Down
25 changes: 7 additions & 18 deletions src/components/App/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Grid } from '@mui/material';
import { Box } from '@mui/material';
import {
AnnouncementNotification,
AuthenticationRouter,
Expand Down Expand Up @@ -140,21 +140,10 @@ export default function App() {
}, [initialMatchSilentRenewCallbackUrl, dispatch, initialMatchSigninCallbackUrl]);

return (
<Grid
container
direction="column"
spacing={0}
justifyContent="flex-start"
alignItems="stretch"
sx={{ height: '100vh', width: '100vw' }}
>
<Grid item xs="auto">
<AppTopBar userManagerInstance={userManager.instance} />
</Grid>
<Grid item xs="auto">
<AnnouncementNotification userProfile={userProfile} />
</Grid>
<Grid item container xs component="main" height={'100%'}>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw' }}>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<AppTopBar userManagerInstance={userManager.instance} />
<AnnouncementNotification userProfile={userProfile} />
<Box component="main" sx={{ display: 'flex', flexGrow: 1, minHeight: 0, width: '100%' }}>
<CardErrorBoundary>
<div
className="singlestretch-parent"
Expand Down Expand Up @@ -195,7 +184,7 @@ export default function App() {
)}
</div>
</CardErrorBoundary>
</Grid>
</Grid>
</Box>
</Box>
);
}
4 changes: 2 additions & 2 deletions src/components/App/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

import { Grid, Typography } from '@mui/material';
import { Grid2 as Grid, Typography } from '@mui/material';
import { ReactElement } from 'react';
import { FormattedMessage } from 'react-intl';

export default function HomePage(): ReactElement {
return (
<Grid item id="home-page" xs={12} alignSelf="center" component="section">
<Grid id="home-page" size={12} alignSelf="center" component="section">
<Typography variant="h3" color="textPrimary" align="center">
<FormattedMessage id="connected" />
</Typography>
Expand Down
50 changes: 24 additions & 26 deletions src/components/Grid/GridTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
useMemo,
useState,
} from 'react';
import { AppBar, Box, Button, ButtonProps, Grid, Toolbar } from '@mui/material';
import { AppBar, Box, Button, ButtonProps, Stack, Toolbar } from '@mui/material';
import { Delete } from '@mui/icons-material';
import { AgGrid, AgGridRef } from './AgGrid';
import { GridOptions } from 'ag-grid-community';
Expand Down Expand Up @@ -73,30 +73,28 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
);

return (
<Grid container direction="column" justifyContent="flex-start" alignItems="stretch" width={'100%'}>
<Grid item xs="auto">
<AppBar position="static" color="default">
<Toolbar
variant="dense"
disableGutters
sx={(theme) => ({
marginLeft: 1,
'& > *': {
// mui's button set it own margin on itself...
marginRight: `${theme.spacing(1)} !important`,
'&:last-child': {
marginRight: '0 !important',
},
<Stack justifyContent="flex-start" alignItems="stretch" width={'100%'}>
<AppBar position="static" color="default">
<Toolbar
variant="dense"
disableGutters
sx={(theme) => ({
marginLeft: 1,
'& > *': {
// mui's button set it own margin on itself...
marginRight: `${theme.spacing(1)} !important`,
'&:last-child': {
marginRight: '0 !important',
},
})}
>
{toolbarContent}
<Box sx={{ flexGrow: 1 }} />
{alignedRightToolbarContent}
</Toolbar>
</AppBar>
</Grid>
<Grid item xs>
},
})}
>
{toolbarContent}
<Box sx={{ flexGrow: 1 }} />
{alignedRightToolbarContent}
</Toolbar>
</AppBar>
<Box sx={{ flexGrow: 1, minHeight: 0 }}>
<AgGrid<TData, TContext & GridTableExposed>
{...agGridProps}
ref={gridRef}
Expand All @@ -112,8 +110,8 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
[context, loadDataAndSave]
)}
/>
</Grid>
</Grid>
</Box>
</Stack>
);
});
export default GridTable;
Expand Down
48 changes: 22 additions & 26 deletions src/pages/announcements/add-announcement-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import { useCallback, useMemo } from 'react';
import { Grid } from '@mui/material';
import { Box, Grid2 as Grid, Stack } from '@mui/material';
import { type DateOrTimeView } from '@mui/x-date-pickers';
import { useIntl } from 'react-intl';
import * as yup from 'yup';
Expand Down Expand Up @@ -135,9 +135,9 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
FormProps={{ style: { height: '100%' } }}
>
<FormErrorProvider onError={onErrorIntl}>
<Grid container direction="column" spacing={1} height="100%">
<Grid item container xs="auto" spacing={1}>
<Grid item xs={12} lg={6}>
<Stack spacing={1} height="100%">
<Grid container spacing={1}>
<Grid size={{ xs: 12, lg: 6 }}>
<DateTimePickerElement<FormSchema>
name={START_DATE}
label={intl.formatMessage({ id: 'announcements.table.startDate' })}
Expand All @@ -148,7 +148,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
disablePast
/>
</Grid>
<Grid item xs={12} lg={6}>
<Grid size={{ xs: 12, lg: 6 }}>
<DateTimePickerElement<FormSchema>
name={END_DATE}
label={intl.formatMessage({ id: 'announcements.table.endDate' })}
Expand All @@ -161,34 +161,30 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
/>
</Grid>
</Grid>
<Grid item xs="auto">
<SelectElement<FormSchema>
name={SEVERITY}
label={intl.formatMessage({ id: 'announcements.severity' })}
options={useMemo(
() =>
Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
id: value,
label: intl.formatMessage({ id: `announcements.severity.${value}` }),
})),
[intl]
)}
fullWidth
/>
</Grid>
<Grid item xs>
<SelectElement<FormSchema>
name={SEVERITY}
label={intl.formatMessage({ id: 'announcements.severity' })}
options={useMemo(
() =>
Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
id: value,
label: intl.formatMessage({ id: `announcements.severity.${value}` }),
})),
[intl]
)}
fullWidth
/>
<Box sx={{ flexGrow: 1 }}>
<TextareaAutosizeElement<FormSchema>
name={MESSAGE}
label={intl.formatMessage({ id: 'announcements.form.message' })}
rows={5} // why does it do nothing even if the field is set as multiline?!
fullWidth
//inputProps={{ maxLength: MESSAGE_MAX_LENGTH } satisfies Partial<HTMLInputElement>}
/>
</Grid>
<Grid item xs="auto">
<SubmitButton variant="outlined" type="submit" fullWidth />
</Grid>
</Grid>
</Box>
<SubmitButton variant="outlined" type="submit" fullWidth />
</Stack>
</FormErrorProvider>
</FormContainer>
);
Expand Down
51 changes: 24 additions & 27 deletions src/pages/announcements/announcements-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import type { UUID } from 'node:crypto';
import { useCallback, useMemo, useRef, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { Divider, Grid, Typography } from '@mui/material';
import { Box, Divider, Grid2 as Grid, Stack, Typography } from '@mui/material';
import { snackWithFallback, useSnackMessage } from '@gridsuite/commons-ui';
import type { ColDef, GetRowIdParams, ValueFormatterFunc } from 'ag-grid-community';
import { type GridTableRef } from '../../components/Grid';
Expand Down Expand Up @@ -119,41 +119,38 @@ export default function AnnouncementsPage() {

const gridContext = useMemo(() => ({ refresh: loadDataAndSave }), [loadDataAndSave]);

// Note: using <Stack/> for the columns didn't work
return (
<Grid container spacing={2} p={1} height={'100%'}>
<Grid item container direction="column" xs={12} sm={6} md={4}>
<Grid item xs="auto">
<Grid container spacing={2} sx={{ p: 1, height: '100%', width: '100%' }}>
<Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ display: 'flex' }}>
<Stack height="100%" sx={{ flexGrow: 1 }}>
<Typography variant="subtitle1">
<FormattedMessage id="announcements.programNewMessage" />
</Typography>
</Grid>
<Grid item xs="auto">
<Divider sx={{ mt: 0.5, mb: 1.5 }} />
</Grid>
<Grid item xs>
<AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
</Grid>
<Box sx={{ flexGrow: 1, minHeight: 0 }}>
<AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
</Box>
</Stack>
</Grid>
<Grid item container direction="column" xs={12} sm={6} md={8}>
<Grid item xs="auto">
<Grid size={{ xs: 12, sm: 6, md: 8 }}>
<Stack height="100%">
<Typography variant="subtitle1" mb={0.5}>
<FormattedMessage id="announcements.programmedMessage" />
</Typography>
</Grid>
<Grid item xs>
<AgGrid<Announcement>
ref={gridRef}
rowData={data}
alwaysShowVerticalScroll
onGridReady={loadDataAndSave}
columnDefs={columns}
defaultColDef={defaultColDef}
gridId="table-announcements"
getRowId={getRowId}
context={gridContext}
/>
</Grid>
<Box sx={{ flexGrow: 1 }}>
<AgGrid<Announcement>
ref={gridRef}
rowData={data}
alwaysShowVerticalScroll
onGridReady={loadDataAndSave}
columnDefs={columns}
defaultColDef={defaultColDef}
gridId="table-announcements"
getRowId={getRowId}
context={gridContext}
/>
</Box>
</Stack>
</Grid>
</Grid>
);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/common/multi-chip-cell-renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
*/

import React, { useRef, useState, useEffect } from 'react';
import { Chip, Grid, Tooltip } from '@mui/material';
import { Chip, Grid2 as Grid, Tooltip } from '@mui/material';
import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';

const maxChipWidth = 100;
const counterChipWidth = 25;

const chipStyles = {
default: {
marginTop: 2,
marginTop: 1,
marginLeft: 1,
maxWidth: maxChipWidth,
},
Expand Down Expand Up @@ -85,7 +85,7 @@ const MultiChipCellRenderer = (props: MultiChipCellRendererProps) => {
};

return (
<Grid container direction="row" spacing={1} wrap="nowrap" ref={containerRef}>
<Grid container direction="row" wrap="nowrap" ref={containerRef}>
{values.map((label: string, index: number) => customChip(label, index, values.length))}
</Grid>
);
Expand Down
20 changes: 9 additions & 11 deletions src/pages/common/table-selection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { useCallback, useMemo, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { CustomAGGrid } from '@gridsuite/commons-ui';
import { Grid, Typography } from '@mui/material';
import { Box, Stack, Typography } from '@mui/material';
import { AgGridReact } from 'ag-grid-react';
import { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
import { defaultColDef, defaultRowSelection } from './table-config';
Expand Down Expand Up @@ -96,14 +96,12 @@ function TableSelection<TData>({
}, [columnDefs]);

return (
<Grid item container direction="column" style={{ height: '100%' }}>
<Grid item>
<Typography variant="subtitle1">
<FormattedMessage id={titleId} />
{` (${selectedCount} / ${items.length})`}
</Typography>
</Grid>
<Grid item xs>
<Stack sx={{ height: '100%', width: '100%' }}>
<Typography variant="subtitle1">
<FormattedMessage id={titleId} />
{` (${selectedCount} / ${items.length})`}
</Typography>
<Box sx={{ flexGrow: 1, minHeight: 0 }}>
<CustomAGGrid
gridId="table-selection"
ref={gridRef}
Expand All @@ -116,8 +114,8 @@ function TableSelection<TData>({
onGridReady={handleGridReady}
accentedSort
/>
</Grid>
</Grid>
</Box>
</Stack>
);
}

Expand Down
Loading
Loading