@gridsuite/commons-ui 0.99.0 → 0.100.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/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
+};