@gridsuite/commons-ui 0.99.0 → 0.101.0

package/dist/components/announcement/AnnouncementBanner.d.ts

@@ -0,0 +1,15 @@
+import { UUID } from 'crypto';
+import { PropsWithChildren, ReactNode } from 'react';
+import { AlertProps } from '@mui/material';
+import { User } from 'oidc-client';
+import { AnnouncementSeverity } from '../../utils/types';
+export type AnnouncementBannerProps = PropsWithChildren<{
+    user?: User | {};
+    /** only field used to detect if msg change */
+    id?: UUID;
+    duration?: number;
+    severity?: AnnouncementSeverity;
+    title?: ReactNode;
+    sx?: AlertProps['sx'];
+}>;
+export declare function AnnouncementBanner({ user, id, severity, title, children, duration, sx, }: Readonly<AnnouncementBannerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/announcement/AnnouncementBanner.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useTheme, Collapse, Alert, AlertTitle, Tooltip } from "@mui/material";
+import { Campaign } from "@mui/icons-material";
+import "../../utils/types/equipmentType.js";
+import { AnnouncementSeverity } from "../../utils/types/types.js";
+const snackbarInfo = "#2196f3";
+const snackbarWarning = "#ff9800";
+const styles = {
+  alert: (theme) => ({
+    "&.MuiAlert-colorWarning": {
+      color: theme.palette.getContrastText(snackbarWarning),
+      backgroundColor: snackbarWarning
+    },
+    "&.MuiAlert-colorInfo": {
+      color: theme.palette.getContrastText(snackbarInfo),
+      backgroundColor: snackbarInfo
+    }
+  })
+};
+const iconMapping = {
+  info: /* @__PURE__ */ jsx(Campaign, {})
+};
+function convertSeverity(severity) {
+  switch (severity) {
+    case AnnouncementSeverity.INFO:
+      return "info";
+    case AnnouncementSeverity.WARN:
+      return "warning";
+    default:
+      return void 0;
+  }
+}
+function AnnouncementBanner({
+  user,
+  id,
+  severity = AnnouncementSeverity.INFO,
+  title,
+  children,
+  duration,
+  sx
+}) {
+  const theme = useTheme();
+  const [visible, setVisible] = useState(false);
+  useEffect(
+    () => {
+      if (id) {
+        setVisible(true);
+        if (duration) {
+          const bannerTimer = setTimeout(() => {
+            setVisible(false);
+          }, duration);
+          return () => {
+            clearTimeout(bannerTimer);
+          };
+        }
+      } else {
+        setVisible(false);
+      }
+      return () => {
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- we check msg id in cas of an announcement
+    [id]
+  );
+  const handleClose = useCallback(() => setVisible(false), []);
+  return /* @__PURE__ */ jsx(Collapse, { in: user !== void 0 && visible, unmountOnExit: true, sx, style: { margin: theme.spacing(1) }, children: /* @__PURE__ */ jsxs(
+    Alert,
+    {
+      variant: "filled",
+      elevation: 0,
+      severity: convertSeverity(severity),
+      onClose: handleClose,
+      iconMapping,
+      hidden: !visible,
+      className: title ? void 0 : "no-title",
+      sx: styles.alert,
+      children: [
+        title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+        /* @__PURE__ */ jsx(Tooltip, { title: children, placement: "bottom", children: /* @__PURE__ */ jsx("span", { children }) })
+      ]
+    }
+  ) });
+}
+export {
+  AnnouncementBanner
+};

package/dist/components/announcement/AnnouncementNotification.d.ts

@@ -0,0 +1,7 @@
+import { User } from 'oidc-client';
+import { AnnouncementBannerProps } from './AnnouncementBanner';
+export type AnnouncementNotificationProps = {
+    user: User | null;
+    sx?: AnnouncementBannerProps['sx'];
+};
+export declare function AnnouncementNotification({ user, sx }: Readonly<AnnouncementNotificationProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/announcement/AnnouncementNotification.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { useGlobalAnnouncement } from "./useGlobalAnnouncement.js";
+import { AnnouncementBanner } from "./AnnouncementBanner.js";
+function AnnouncementNotification({ user, sx }) {
+  const { id, severity, message, duration } = useGlobalAnnouncement(user) ?? {};
+  return /* @__PURE__ */ jsx(AnnouncementBanner, { user: user ?? void 0, id, severity, duration, sx, children: message });
+}
+export {
+  AnnouncementNotification
+};

package/dist/components/announcement/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AnnouncementBanner';
+export * from './AnnouncementNotification';
+export * from './useGlobalAnnouncement';

package/dist/components/announcement/index.js

@@ -0,0 +1,8 @@
+import { AnnouncementBanner } from "./AnnouncementBanner.js";
+import { AnnouncementNotification } from "./AnnouncementNotification.js";
+import { useGlobalAnnouncement } from "./useGlobalAnnouncement.js";
+export {
+  AnnouncementBanner,
+  AnnouncementNotification,
+  useGlobalAnnouncement
+};

package/dist/components/announcement/useGlobalAnnouncement.d.ts

@@ -0,0 +1,10 @@
+import { UUID } from 'crypto';
+import { User } from 'oidc-client';
+import { AnnouncementSeverity } from '../../utils/types';
+export type AnnouncementProps = {
+    id: UUID;
+    message: string;
+    duration: number;
+    severity: AnnouncementSeverity;
+};
+export declare function useGlobalAnnouncement(user: User | null): AnnouncementProps | undefined;

package/dist/components/announcement/useGlobalAnnouncement.js

@@ -0,0 +1,48 @@
+import { v4 } from "uuid";
+import { useState, useEffect, useCallback } from "react";
+import { fetchCurrentAnnouncement } from "../../services/userAdmin.js";
+import { NotificationsUrlKeys } from "../../utils/constants/notificationsProvider.js";
+import { useNotificationsListener } from "../notifications/hooks/useNotificationsListener.js";
+function useGlobalAnnouncement(user) {
+  const [announcementInfos, setAnnouncementInfos] = useState();
+  useEffect(() => {
+    if (user) {
+      fetchCurrentAnnouncement().then((announcementDto) => {
+        if (announcementDto) {
+          setAnnouncementInfos({
+            id: announcementDto.id,
+            message: announcementDto.message,
+            duration: announcementDto.remainingDuration,
+            severity: announcementDto.severity
+          });
+        } else {
+          setAnnouncementInfos(void 0);
+        }
+      }).catch((error) => console.error("Failed to retrieve global announcement:", error));
+    } else {
+      setAnnouncementInfos(void 0);
+    }
+  }, [user]);
+  const handleAnnouncementMessage = useCallback((event) => {
+    const eventData = JSON.parse(event.data);
+    if (eventData.headers.messageType === "announcement") {
+      const announcement = {
+        id: eventData.id ?? v4(),
+        message: eventData.payload,
+        severity: eventData.headers.severity,
+        duration: eventData.headers.duration
+      };
+      console.debug("announcement incoming:", announcement);
+      setAnnouncementInfos(announcement);
+    } else if (eventData.headers.messageType === "cancelAnnouncement") {
+      setAnnouncementInfos(void 0);
+    }
+  }, []);
+  useNotificationsListener(NotificationsUrlKeys.GLOBAL_CONFIG, {
+    listenerCallbackMessage: handleAnnouncementMessage
+  });
+  return announcementInfos;
+}
+export {
+  useGlobalAnnouncement
+};

package/dist/components/authentication/utils/authService.d.ts

@@ -1,8 +1,7 @@
 import { Dispatch } from 'react';
 import { Location, NavigateFunction } from 'react-router';
-import { Log, User, UserManager } from 'oidc-client';
+import { Log, UserManager } from 'oidc-client';
 import { AuthenticationActions } from '../../../redux/actions/authActions';
-type UserValidationFunc = (user: User) => Promise<boolean>;
 type IdpSettingsGetter = () => Promise<IdpSettings>;
 export type IdpSettings = {
     authority: string;
@@ -25,10 +24,10 @@ declare global {
 }
 export declare function login(location: Location, userManagerInstance: UserManager | null): Promise<void> | undefined;
 export declare function logout(dispatch: Dispatch<AuthenticationActions>, userManagerInstance: UserManager | null): Promise<void> | undefined;
-export declare function dispatchUser(dispatch: Dispatch<AuthenticationActions>, userManagerInstance: CustomUserManager, validateUser: UserValidationFunc): Promise<void>;
+export declare function dispatchUser(dispatch: Dispatch<AuthenticationActions>, userManagerInstance: CustomUserManager): Promise<void>;
 export declare function getPreLoginPath(): string | null;
 export declare function handleSigninCallback(dispatch: Dispatch<AuthenticationActions>, navigate: NavigateFunction, userManagerInstance: UserManager): void;
 export declare function handleSilentRenewCallback(userManagerInstance: UserManager): void;
-export declare function initializeAuthenticationDev(dispatch: Dispatch<AuthenticationActions>, isSilentRenew: boolean, validateUser: UserValidationFunc, isSigninCallback: boolean): Promise<UserManager>;
-export declare function initializeAuthenticationProd(dispatch: Dispatch<AuthenticationActions>, isSilentRenew: boolean, idpSettingsGetter: IdpSettingsGetter, validateUser: UserValidationFunc, isSigninCallback: boolean): Promise<CustomUserManager>;
+export declare function initializeAuthenticationDev(dispatch: Dispatch<AuthenticationActions>, isSilentRenew: boolean, isSigninCallback: boolean): Promise<UserManager>;
+export declare function initializeAuthenticationProd(dispatch: Dispatch<AuthenticationActions>, isSilentRenew: boolean, idpSettingsGetter: IdpSettingsGetter, isSigninCallback: boolean): Promise<CustomUserManager>;
 export {};

package/dist/components/authentication/utils/authService.js

@@ -1,7 +1,7 @@
 import { jwtDecode } from "jwt-decode";
 import { Log, UserManager } from "oidc-client";
 import { UserManagerMock } from "./userManagerMock.js";
-import { setLoggedUser, setLogoutError, setUnauthorizedUserInfo, setUserValidationError, setSignInCallbackError, setShowAuthenticationRouterLogin, resetAuthenticationRouterError } from "../../../redux/actions/authActions.js";
+import { setLoggedUser, setLogoutError, setSignInCallbackError, setShowAuthenticationRouterLogin, resetAuthenticationRouterError } from "../../../redux/actions/authActions.js";
 window.OIDCLog = Log;
 const hackAuthorityKey = "oidc.hack.authority";
 const oidcHackReloadedKey = "gridsuite-oidc-hack-reloaded";
@@ -104,40 +104,21 @@ function logout(dispatch, userManagerInstance) {
     return Promise.resolve();
   });
 }
-function dispatchUser(dispatch, userManagerInstance, validateUser) {
+function dispatchUser(dispatch, userManagerInstance) {
   return userManagerInstance.getUser().then((user) => {
+    var _a;
     if (user) {
       if (getIdTokenExpiresIn(user) < 0) {
         console.debug("User token is expired and will not be dispatched");
         return Promise.resolve();
       }
-      const validateUserPromise = (validateUser == null ? void 0 : validateUser(user)) || Promise.resolve(true);
-      return validateUserPromise.then((valid) => {
-        var _a, _b;
-        if (!valid) {
-          console.debug("User isn't authorized to log in and will not be dispatched");
-          return dispatch(setUnauthorizedUserInfo((_a = user == null ? void 0 : user.profile) == null ? void 0 : _a.name, ""));
-        }
-        console.debug("User has been successfully loaded from store.");
-        reloadTimerOnExpiresIn(
-          user,
-          userManagerInstance,
-          computeMinExpiresIn(
-            user.expires_in,
-            user.id_token,
-            (_b = userManagerInstance.idpSettings) == null ? void 0 : _b.maxExpiresIn
-          )
-        );
-        return dispatch(setLoggedUser(user));
-      }).catch((e) => {
-        var _a;
-        console.log("Error in dispatchUser", e);
-        return dispatch(
-          setUserValidationError((_a = user == null ? void 0 : user.profile) == null ? void 0 : _a.name, {
-            error: e
-          })
-        );
-      });
+      console.debug("User has been successfully loaded from store.");
+      reloadTimerOnExpiresIn(
+        user,
+        userManagerInstance,
+        computeMinExpiresIn(user.expires_in, user.id_token, (_a = userManagerInstance.idpSettings) == null ? void 0 : _a.maxExpiresIn)
+      );
+      return dispatch(setLoggedUser(user));
     }
     console.debug("You are not logged in.");
     return Promise.resolve();
@@ -175,10 +156,10 @@ function handleSigninCallback(dispatch, navigate, userManagerInstance) {
 function handleSilentRenewCallback(userManagerInstance) {
   userManagerInstance.signinSilentCallback();
 }
-function handleUser(dispatch, userManager, validateUser) {
+function handleUser(dispatch, userManager) {
   userManager.events.addUserLoaded((user) => {
     console.debug("user loaded", user);
-    dispatchUser(dispatch, userManager, validateUser);
+    dispatchUser(dispatch, userManager);
   });
   userManager.events.addSilentRenewError((error) => {
     console.debug(error);
@@ -223,19 +204,19 @@ function handleUser(dispatch, userManager, validateUser) {
     }, accessTokenExpiringNotificationTime * 1e3);
   });
   console.debug("dispatch user");
-  dispatchUser(dispatch, userManager, validateUser);
+  dispatchUser(dispatch, userManager);
 }
-async function initializeAuthenticationDev(dispatch, isSilentRenew, validateUser, isSigninCallback) {
+async function initializeAuthenticationDev(dispatch, isSilentRenew, isSigninCallback) {
   const userManager = new UserManagerMock({});
   if (!isSilentRenew) {
-    handleUser(dispatch, userManager, validateUser);
+    handleUser(dispatch, userManager);
     if (!isSigninCallback) {
       handleSigninSilent(dispatch, userManager);
     }
   }
   return userManager;
 }
-async function initializeAuthenticationProd(dispatch, isSilentRenew, idpSettingsGetter, validateUser, isSigninCallback) {
+async function initializeAuthenticationProd(dispatch, isSilentRenew, idpSettingsGetter, isSigninCallback) {
   const idpSettings = await idpSettingsGetter();
   try {
     const settings = {
@@ -252,7 +233,7 @@ async function initializeAuthenticationProd(dispatch, isSilentRenew, idpSettings
     const userManager = new UserManager(settings);
     userManager.idpSettings = idpSettings;
     if (!isSilentRenew) {
-      handleUser(dispatch, userManager, validateUser);
+      handleUser(dispatch, userManager);
       if (!isSigninCallback) {
         handleSigninSilent(dispatch, userManager);
       }

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@
  * 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 * from './announcement';
 export * from './authentication';
 export * from './cardErrorBoundary';
 export * from './checkBoxList';

package/dist/components/index.js

@@ -1,3 +1,6 @@
+import { AnnouncementBanner } from "./announcement/AnnouncementBanner.js";
+import { AnnouncementNotification } from "./announcement/AnnouncementNotification.js";
+import { useGlobalAnnouncement } from "./announcement/useGlobalAnnouncement.js";
 import { AuthenticationRouter } from "./authentication/AuthenticationRouter.js";
 import { default as default2 } from "./authentication/AuthenticationRouterErrorDisplay.js";
 import { Login } from "./authentication/Login.js";
@@ -97,9 +100,10 @@ import { ActivableChip } from "./inputs/ActivableChip.js";
 import { MultipleSelectionDialog } from "./multipleSelectionDialog/MultipleSelectionDialog.js";
 import { OverflowableText } from "./overflowableText/OverflowableText.js";
 import { SnackbarProvider } from "./snackbarProvider/SnackbarProvider.js";
-import { TopBar } from "./topBar/TopBar.js";
-import { GridLogo, LogoText } from "./topBar/GridLogo.js";
 import { AboutDialog } from "./topBar/AboutDialog.js";
+import { GridLogo, LogoText } from "./topBar/GridLogo.js";
+import { DevModeBanner } from "./topBar/DevModeBanner.js";
+import { TopBar } from "./topBar/TopBar.js";
 import { TreeViewFinder, generateTreeViewFinderClass } from "./treeViewFinder/TreeViewFinder.js";
 import { NotificationsProvider } from "./notifications/NotificationsProvider.js";
 import { NotificationsContext } from "./notifications/contexts/NotificationsContext.js";
@@ -135,6 +139,8 @@ export {
   AboutDialog,
   ActivableChip,
   AddButton,
+  AnnouncementBanner,
+  AnnouncementNotification,
   AuthenticationRouter,
   default2 as AuthenticationRouterErrorDisplay,
   AutocompleteInput,
@@ -184,6 +190,7 @@ export {
   DataType,
   DescriptionField,
   DescriptionModificationDialog,
+  DevModeBanner,
   DirectoryItemSelector,
   DirectoryItemsInput,
   ENERGY_SOURCE_OPTIONS,
@@ -365,6 +372,7 @@ export {
   useConvertValue,
   useCustomFormContext,
   useElementSearch,
+  useGlobalAnnouncement,
   useListenerManager,
   useNotificationsListener,
   useValid

package/dist/components/inputs/reactHookForm/text/TextInput.d.ts

@@ -19,9 +19,11 @@ export interface TextInputProps {
     clearable?: boolean;
     formProps?: Omit<TextFieldWithAdornmentProps | TextFieldProps, 'value' | 'onChange' | 'inputRef' | 'inputProps' | 'InputProps'>;
     disabledTooltip?: boolean;
+    disabled?: boolean;
 }
 export declare function TextInput({ name, label, labelValues, // this prop is used to add a value to label. this value is displayed without being translated
 id, adornment, customAdornment, outputTransform, // transform materialUi input value before sending it to react hook form, mostly used to deal with number fields
 inputTransform, // transform react hook form value before sending it to materialUi input, mostly used to deal with number fields
 acceptValue, // used to check user entry before committing the input change, used mostly to prevent user from typing a character in number field
-previousValue, clearable, formProps, disabledTooltip, }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+previousValue, clearable, formProps, disabledTooltip, // In case we don't want to show tooltip on the value and warning/info icons
+disabled, }: TextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/reactHookForm/text/TextInput.js

@@ -24,8 +24,9 @@ function TextInput({
   previousValue,
   clearable,
   formProps,
-  disabledTooltip
+  disabledTooltip,
   // In case we don't want to show tooltip on the value and warning/info icons
+  disabled
 }) {
   const { validationSchema, getValues, removeOptional, isNodeBuilt, isUpdate } = useCustomFormContext();
   const {
@@ -81,7 +82,8 @@ function TextInput({
       ),
       ...genHelperError(error == null ? void 0 : error.message),
       ...formProps,
-      ...adornment && { ...finalAdornment }
+      ...adornment && { ...finalAdornment },
+      disabled
     },
     id ?? label
   );

package/dist/components/topBar/DevModeBanner.d.ts

@@ -0,0 +1 @@
+export declare function DevModeBanner(): import("react/jsx-runtime").JSX.Element;

package/dist/components/topBar/DevModeBanner.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Collapse, Alert, Typography } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+const styles = {
+  alert: {
+    "& .MuiAlert-colorWarning": {
+      backgroundColor: "#f6b26b",
+      color: "black",
+      "& .MuiAlert-action .MuiIconButton-root:hover": {
+        backgroundColor: "#e39648"
+      },
+      "& .MuiAlert-icon": {
+        color: "red"
+      }
+    },
+    // MUI IconButton: square ripple
+    "& .MuiAlert-action .MuiIconButton-root": {
+      borderRadius: 1,
+      "& .MuiTouchRipple-root .MuiTouchRipple-child ": {
+        borderRadius: "8px"
+      }
+    }
+  }
+};
+function DevModeBanner() {
+  const [visible, setVisible] = useState(true);
+  return /* @__PURE__ */ jsx(Collapse, { in: visible, sx: styles.alert, children: /* @__PURE__ */ jsx(
+    Alert,
+    {
+      square: true,
+      severity: "warning",
+      variant: "filled",
+      elevation: 0,
+      onClose: useCallback(() => setVisible(false), []),
+      children: /* @__PURE__ */ jsx(Typography, { variant: "body1", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/developerModeWarning", defaultMessage: "Developer mode" }) })
+    }
+  ) });
+}
+export {
+  DevModeBanner
+};