Add announcement management page & banner (#103)

Signed-off-by: Abdelsalem <[email protected]>
Co-authored-by: Abdelsalem <[email protected]>
Co-authored-by: Joris Mancini <[email protected]>
Signed-off-by: Tristan Chuine <[email protected]>
Co-authored-by: Tristan Chuine <[email protected]>

Author: 3 people

package-lock.json

@@ -16,21 +16,24 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@gridsuite/commons-ui": "0.95.0",
+        "@gridsuite/commons-ui": "0.100.0",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",
         "@mui/lab": "5.0.0-alpha.175",
         "@mui/material": "^5.16.14",
+        "@mui/x-date-pickers": "^7.29.3",
         "@mui/x-tree-view": "^7.28.1",
         "@reduxjs/toolkit": "^2.5.1",
         "ag-grid-community": "^33.1.0",
         "ag-grid-react": "^33.1.0",
         "core-js": "^3.40.0",
+        "date-fns": "^4.1.0",
         "notistack": "^3.0.2",
         "oidc-client": "^1.11.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.54.2",
+        "react-hook-form-mui": "^7.6.0",
         "react-intl": "^7.1.6",
         "react-redux": "^9.2.0",
         "react-router": "^7.4.1",

package.json

@@ -15,7 +15,7 @@ import {
     useState,
 } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
-import { Groups, ManageAccounts, PeopleAlt } from '@mui/icons-material';
+import { Groups, ManageAccounts, NotificationImportant, PeopleAlt } from '@mui/icons-material';
 import { fetchAppsMetadata, logout, Metadata, TopBar } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../../utils/config-params';
@@ -73,6 +73,20 @@ const tabs = new Map<MainPaths, ReactElement>([
             ))}
         />,
     ],
+    [
+        MainPaths.announcements,
+        <Tab
+            icon={<NotificationImportant />}
+            label={<FormattedMessage id="appBar.tabs.warningBanner" />}
+            href={`/${MainPaths.announcements}`}
+            value={MainPaths.announcements}
+            key={`tab-${MainPaths.announcements}`}
+            iconPosition="start"
+            LinkComponent={forwardRef<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>>((props, ref) => (
+                <NavLink ref={ref} to={props.href as To} {...props} />
+            ))}
+        />,
+    ],
 ]);
 
 const AppTopBar: FunctionComponent = () => {
@@ -96,6 +110,7 @@ const AppTopBar: FunctionComponent = () => {
     const [languageLocal, handleChangeLanguage] = useParameterState(PARAM_LANGUAGE);
 
     const [appsAndUrls, setAppsAndUrls] = useState<Metadata[]>([]);
+
     useEffect(() => {
         if (user !== null) {
             fetchAppsMetadata().then((res) => {