Announcements

package.json

@@ -36,21 +36,22 @@
         "prop-types": "^15.7.2",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-hook-form": "^7.46.1",
+        "react-hook-form": "^7.51.1",
         "react-intl": "^6.0.0",
         "react-redux": "^8.0.0",
         "react-router-dom": "^6.0.0",
         "react-scripts": "^5.0.0",
         "react-window": "^1.8.5",
         "reconnecting-websocket": "^4.4.0",
         "redux": "^4.0.5",
+        "tinyduration": "^3.3.0",
         "type-fest": "^4.11.1",
         "typeface-roboto": "^1.0.0",
         "typescript": "^5.1.3",
-        "yup": "^1.2.0"
+        "yup": "^1.4.0"
     },
     "scripts": {
-        "start": "react-scripts start",
+        "start": "PORT=3002 react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test --watchAll=false",
         "test:watch": "react-scripts test",

public/idpSettings.json

@@ -1,8 +1,8 @@
 {
     "authority": "http://172.17.0.1:9090/",
-    "client_id": "my-client-2",
-    "redirect_uri": "http://localhost:3000/sign-in-callback",
-    "post_logout_redirect_uri": "http://localhost:3000/logout-callback",
-    "silent_redirect_uri": "http://localhost:3000/silent-renew-callback",
+    "client_id": "gridadmin-local",
+    "redirect_uri": "http://localhost:3002/sign-in-callback",
+    "post_logout_redirect_uri": "http://localhost:3002/logout-callback",
+    "silent_redirect_uri": "http://localhost:3002/silent-renew-callback",
     "scope": "openid"
 }

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

@@ -14,6 +14,7 @@ import {
     useState,
 } from 'react';
 import { capitalize, Tab, TabProps, Tabs, useTheme } from '@mui/material';
+import { Announcement } from '@mui/icons-material';
 import { PeopleAlt } from '@mui/icons-material';
 import { logout, TopBar } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
@@ -56,6 +57,16 @@ const tabs = new Map<MainPaths, ReactElement>([
             key={`tab-${MainPaths.users}`}
         />,
     ],
+    [
+        MainPaths.announcements,
+        <TabNavLink
+            icon={<Announcement />}
+            label={<FormattedMessage id="appBar.tabs.announcement" />}
+            href={`/${MainPaths.announcements}`}
+            value={MainPaths.announcements}
+            key={`tab-${MainPaths.announcements}`}
+        />,
+    ],
 ]);
 
 const AppTopBar: FunctionComponent = () => {

src/pages/announcements/Announcements.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { AppBar, Button, Grid, List, Toolbar } from '@mui/material';
+import { AddCircleOutline } from '@mui/icons-material';
+import { CreateAnnouncementDialog } from './CreateAnnouncementDialog';
+import { useAnnouncements } from './useAnnouncements';
+import { ListItemAnnouncement } from './ListItemAnnouncement';
+
+const Announcements: FunctionComponent = () => {
+    const intl = useIntl();
+    const [openDialog, setOpenDialog] = useState(false);
+    const announcements = useAnnouncements();
+
+    return (
+        <Grid item container spacing={2} direction="column">
+            <Grid item>
+                <AppBar position="static" color="default">
+                    <Toolbar variant="dense">
+                        <Button
+                            onClick={() => setOpenDialog(true)}
+                            variant="outlined"
+                            startIcon={<AddCircleOutline />}
+                            size="small"
+                        >
+                            {intl.formatMessage({ id: 'announcements.add' })}
+                        </Button>
+                    </Toolbar>
+                </AppBar>
+            </Grid>
+            <CreateAnnouncementDialog
+                open={openDialog}
+                onClose={() => setOpenDialog(false)}
+            />
+            <Grid item>
+                <List sx={{ maxWidth: 1400 }}>
+                    {announcements.map((announcement) => (
+                        <ListItemAnnouncement {...announcement} />
+                    ))}
+                </List>
+            </Grid>
+        </Grid>
+    );
+};
+export default Announcements;

src/pages/announcements/CreateAnnouncementDialog.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 { FormProvider, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { DurationInput } from './DurationInput';
+import { SubmitButton, TextInput } 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 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));
+            reset();
+            props.onClose();
+        },
+        [props, reset]
+    );
+
+    return (
+        //@ts-ignore because RHF TS is broken
+        <FormProvider 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>
+        </FormProvider>
+    );
+};

src/pages/announcements/DurationInput.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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>
+    );
+};