Announcements

package.json

@@ -38,6 +38,7 @@
         "react-window": "^1.8.10",
         "reconnecting-websocket": "^4.4.0",
         "redux": "^5.0.1",
+        "tinyduration": "^3.3.0",
         "type-fest": "^4.14.0",
         "typeface-roboto": "^1.1.13",
         "yup": "^1.4.0"

src/components/App/app-top-bar.tsx

@@ -8,6 +8,7 @@
 import { forwardRef, FunctionComponent, ReactElement, useEffect, useMemo, useState } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
 import { ManageAccounts, PeopleAlt } from '@mui/icons-material';
+import { Announcement } from '@mui/icons-material';
 import { logout, TopBar } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../../utils/config-params';
@@ -51,6 +52,20 @@ const tabs = new Map<MainPaths, ReactElement>([
             ))}
         />,
     ],
+    [
+        MainPaths.announcements,
+        <Tab
+            icon={<Announcement />}
+            label={<FormattedMessage id="appBar.tabs.announcement" />}
+            href={`/${MainPaths.announcements}`}
+            value={MainPaths.announcements}
+            key={`tab-${MainPaths.announcements}`}
+            iconPosition="start"
+            LinkComponent={forwardRef((props, ref) => (
+                <NavLink ref={ref} to={props.href} {...props} />
+            ))}
+        />,
+    ],
 ]);
 
 const AppTopBar: FunctionComponent = () => {

src/components/Grid/GridTable.tsx

@@ -18,22 +18,14 @@ import {
     useMemo,
     useState,
 } from 'react';
-import {
-    AppBar,
-    Box,
-    Button as MuiButton,
-    ButtonProps,
-    ButtonTypeMap,
-    ExtendButtonBaseTypeMap,
-    Grid,
-    Toolbar,
-} from '@mui/material';
+import { Button as MuiButton, ButtonProps, ButtonTypeMap, ExtendButtonBaseTypeMap, Grid } from '@mui/material';
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/material/OverridableComponent';
 import { Delete } from '@mui/icons-material';
 import { AgGrid, AgGridRef } from './AgGrid';
 import { GridOptions } from 'ag-grid-community';
 import { useIntl } from 'react-intl';
 import { useSnackMessage } from '@gridsuite/commons-ui';
+import { CustomToolbar } from '../../pages/utils/CustomToolbar';
 
 type GridTableExposed = {
     refresh: () => Promise<void>;
@@ -87,25 +79,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
     return (
         <Grid container direction="column" justifyContent="flex-start" alignItems="stretch">
             <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',
-                                },
-                            },
-                        })}
-                    >
-                        {toolbarContent}
-                        <Box sx={{ flexGrow: 1 }} />
-                    </Toolbar>
-                </AppBar>
+                <CustomToolbar>{toolbarContent}</CustomToolbar>
             </Grid>
             <Grid item xs>
                 <AgGrid<TData, TContext & GridTableExposed>

src/pages/announcements/Announcements.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { FunctionComponent, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Button, Grid, List } from '@mui/material';
+import { AddCircleOutline } from '@mui/icons-material';
+import { CreateAnnouncementDialog } from './CreateAnnouncementDialog';
+import { useAnnouncements } from './useAnnouncements';
+import { ListItemAnnouncement } from './ListItemAnnouncement';
+import { CustomToolbar } from '../utils/CustomToolbar';
+import { ID } from './utils';
+
+const Announcements: FunctionComponent = () => {
+    const intl = useIntl();
+    const [openDialog, setOpenDialog] = useState(false);
+    const announcements = useAnnouncements();
+
+    return (
+        <Grid item container spacing={2} direction="column">
+            <Grid item>
+                <CustomToolbar>
+                    <Button
+                        onClick={() => setOpenDialog(true)}
+                        variant="outlined"
+                        startIcon={<AddCircleOutline />}
+                        size="small"
+                    >
+                        {intl.formatMessage({ id: 'announcements.add' })}
+                    </Button>
+                </CustomToolbar>
+            </Grid>
+            <CreateAnnouncementDialog open={openDialog} onClose={() => setOpenDialog(false)} />
+            <Grid item>
+                <List sx={{ maxWidth: 1400 }}>
+                    {announcements.map((announcement) => (
+                        <ListItemAnnouncement key={announcement[ID]} {...announcement} />
+                    ))}
+                </List>
+            </Grid>
+        </Grid>
+    );
+};
+export default Announcements;

src/pages/announcements/CreateAnnouncementDialog.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { FunctionComponent, useCallback } from 'react';
+import { Dialog, DialogActions, DialogContent, DialogTitle, Grid } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { DurationInput } from './DurationInput';
+import { SubmitButton, TextInput, useSnackMessage, CustomFormProvider } from '@gridsuite/commons-ui';
+import { AnnouncementFormData, emptyFormData, formSchema, fromFrontToBack, MESSAGE } from './utils';
+import { UserAdminSrv } from '../../services';
+
+interface CreateAnnouncementDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export const CreateAnnouncementDialog: FunctionComponent<CreateAnnouncementDialogProps> = (props) => {
+    const { snackError } = useSnackMessage();
+
+    const formMethods = useForm<AnnouncementFormData>({
+        defaultValues: emptyFormData,
+        //@ts-ignore because yup TS is broken
+        resolver: yupResolver(formSchema),
+    });
+
+    const { handleSubmit, reset } = formMethods;
+
+    const onSubmit = useCallback(
+        (formData: AnnouncementFormData) => {
+            UserAdminSrv.createAnnouncement(fromFrontToBack(formData)).catch((error) =>
+                snackError({
+                    messageTxt: error.message,
+                    headerId: 'announcements.error.add',
+                })
+            );
+            reset();
+            props.onClose();
+        },
+        [props, reset, snackError]
+    );
+
+    return (
+        //@ts-ignore because RHF TS is broken
+        <CustomFormProvider validationSchema={formSchema} {...formMethods}>
+            <Dialog open={props.open} onClose={props.onClose}>
+                <DialogTitle>
+                    <FormattedMessage id="announcements.dialog.title" />
+                </DialogTitle>
+                <DialogContent>
+                    <Grid container spacing={2} direction="column">
+                        <Grid item>
+                            <TextInput
+                                name={MESSAGE}
+                                label={'announcements.dialog.input'}
+                                formProps={{
+                                    multiline: true,
+                                    variant: 'filled',
+                                    minRows: 3,
+                                }}
+                            />
+                        </Grid>
+                        <DurationInput />
+                    </Grid>
+                </DialogContent>
+                <DialogActions>
+                    <SubmitButton onClick={handleSubmit(onSubmit)} variant="outlined" />
+                </DialogActions>
+            </Dialog>
+        </CustomFormProvider>
+    );
+};

src/pages/announcements/DurationInput.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Grid, Typography } from '@mui/material';
+import { DAYS, DURATION, HOURS, MINUTES } from './utils';
+import { IntegerInput } from '@gridsuite/commons-ui';
+import { useIntl } from 'react-intl';
+
+const centerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+
+const DaysAdornment = {
+    position: 'end',
+    text: 'd',
+};
+const HoursAdornment = {
+    position: 'end',
+    text: 'h',
+};
+const MinutesAdornment = {
+    position: 'end',
+    text: 'm',
+};
+
+export const DurationInput = () => {
+    const intl = useIntl();
+
+    return (
+        <Grid item container columns={30} justifyContent="center">
+            <Grid item xs={6} sx={centerStyle}>
+                <Typography variant="body1">
+                    {intl.formatMessage({
+                        id: 'announcements.dialog.duration',
+                    })}
+                </Typography>
+            </Grid>
+            <Grid item xs={4}>
+                <IntegerInput name={`${DURATION}.${DAYS}`} label={'duration.days'} adornment={DaysAdornment} />
+            </Grid>
+            <Grid item xs={1} sx={centerStyle}>
+                <Typography variant="h6">:</Typography>
+            </Grid>
+            <Grid item xs={4}>
+                <IntegerInput name={`${DURATION}.${HOURS}`} label={'duration.hours'} adornment={HoursAdornment} />
+            </Grid>
+            <Grid item xs={1} sx={centerStyle}>
+                <Typography variant="h6">:</Typography>
+            </Grid>
+            <Grid item xs={4}>
+                <IntegerInput name={`${DURATION}.${MINUTES}`} label={'duration.minutes'} adornment={MinutesAdornment} />
+            </Grid>
+        </Grid>
+    );
+};

src/pages/announcements/ListItemAnnouncement.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { IconButton, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import { FunctionComponent } from 'react';
+import { Announcement, DATE, DAYS, DURATION, HOURS, ID, MESSAGE, MINUTES } from './utils';
+import { Cancel, Message, ScheduleSend, Timelapse } from '@mui/icons-material';
+import { UserAdminSrv } from '../../services';
+import { useSnackMessage } from '@gridsuite/commons-ui';
+
+export const ListItemAnnouncement: FunctionComponent<Announcement> = (announcement) => {
+    const { snackError } = useSnackMessage();
+
+    return (
+        <ListItem
+            secondaryAction={
+                <IconButton
+                    onClick={() =>
+                        UserAdminSrv.deleteAnnouncement(announcement[ID]).catch((error) =>
+                            snackError({
+                                messageTxt: error.message,
+                                headerId: 'announcements.error.delete',
+                            })
+                        )
+                    }
+                    edge="end"
+                    aria-label="delete"
+                >
+                    <Cancel />
+                </IconButton>
+            }
+            sx={{ minHeight: 100 }}
+        >
+            <ListItemIcon>
+                <Message />
+            </ListItemIcon>
+            <ListItemText sx={{ width: 550, marginRight: 10 }} primary={announcement[MESSAGE]} />
+            <ListItemIcon>
+                <ScheduleSend />
+            </ListItemIcon>
+            <ListItemText sx={{ width: 180 }} primary={announcement[DATE]} />
+            <ListItemIcon>
+                <Timelapse />
+            </ListItemIcon>
+            <ListItemText
+                sx={{ width: 10 }}
+                primary={
+                    (announcement[DURATION][DAYS] ? announcement[DURATION][DAYS] + ' d ' : '') +
+                    (announcement[DURATION][HOURS] ? announcement[DURATION][HOURS] + ' h ' : '') +
+                    (announcement[DURATION][MINUTES] ? announcement[DURATION][MINUTES] + ' m ' : '')
+                }
+            />
+        </ListItem>
+    );
+};

src/pages/announcements/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+export { default as Announcements } from './Announcements';