@gridsuite/commons-ui 0.213.0 → 0.215.0

package/dist/features/topBar/TopBar.js

@@ -0,0 +1,537 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { styled, Menu, MenuItem, ListItemIcon, AppBar, Toolbar, Box, IconButton, ListItemText, Button, Popper, Paper, ClickAwayListener, MenuList, Typography, ToggleButtonGroup, ToggleButton, darken } from "@mui/material";
+import { Apps, ArrowDropUp, ArrowDropDown, Person, Badge, ManageAccounts, HelpOutline, WbSunny, Brightness3, Computer, ExitToApp } from "@mui/icons-material";
+import { GridLogo } from "./GridLogo.js";
+import { AboutDialog } from "./AboutDialog.js";
+import { useStateBoolean } from "../../hooks/customStates/useStateBoolean.js";
+import UserInformationDialog from "./UserInformationDialog.js";
+import UserSettingsDialog from "./UserSettingsDialog.js";
+import { LIGHT_THEME, DARK_THEME } from "../../utils/styles.js";
+import { LANG_SYSTEM, LANG_ENGLISH, LANG_FRENCH } from "../../utils/langs.js";
+import { DevModeBanner } from "./DevModeBanner.js";
+const getStyles = (dense = false) => {
+  return {
+    toolbar: (theme) => ({
+      ...dense && {
+        minHeight: `${theme.spacing(6)} !important`,
+        paddingLeft: `${theme.spacing(0.875)} !important`,
+        paddingRight: `${theme.spacing(0.875)} !important`
+      }
+    }),
+    grow: {
+      flexGrow: 1,
+      display: "flex",
+      overflow: "hidden"
+    },
+    menuContainer: (theme) => ({
+      marginLeft: theme.spacing(dense ? 0.5 : 1)
+    }),
+    link: {
+      textDecoration: "none",
+      color: "inherit"
+    },
+    name: (theme) => ({
+      backgroundColor: darken(theme.palette.background.paper, 0.1),
+      paddingTop: theme.spacing(dense ? 0.625 : 1.25),
+      borderRadius: "100%",
+      fontWeight: "400",
+      textTransform: "uppercase",
+      height: theme.spacing(dense ? 4.5 : 6),
+      width: theme.spacing(dense ? 4.5 : 6)
+    }),
+    arrowIcon: (theme) => ({
+      fontSize: theme.spacing(dense ? 4 : 5)
+    }),
+    userMail: {
+      fontSize: "14px",
+      display: "block"
+    },
+    borderBottom: {
+      borderBottom: "1px solid #ccc"
+    },
+    borderTop: {
+      borderTop: "1px solid #ccc"
+    },
+    settingsMenu: {
+      maxWidth: "385px",
+      zIndex: 60
+    },
+    sizeLabel: {
+      fontSize: "16px"
+    },
+    showHideMenu: (theme) => ({
+      padding: 0,
+      borderRadius: "50%",
+      minWidth: theme.spacing(dense ? 5 : 6.875),
+      minHeight: theme.spacing(dense ? 5 : 6.875)
+    }),
+    toggleButtonGroup: {
+      marginLeft: "15px",
+      pointerEvents: "auto"
+    },
+    toggleButton: {
+      height: "30px",
+      width: "48px",
+      padding: "7px",
+      textTransform: "capitalize"
+    },
+    languageToggleButton: {
+      height: "30px",
+      width: "48px"
+    }
+  };
+};
+const StyledMenu = styled((props) => /* @__PURE__ */ jsx(
+  Menu,
+  {
+    elevation: 0,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "center"
+    },
+    ...props
+  }
+))({
+  "& .MuiMenu-paper": {
+    border: "1px solid #d3d4d5"
+  }
+});
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  "&:focus": {
+    backgroundColor: theme.palette.primary.main,
+    "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
+      color: theme.palette.common.white
+    }
+  }
+}));
+const CustomListItemIcon = styled(ListItemIcon)({
+  minWidth: "30px",
+  paddingRight: "15px",
+  borderRadius: "25px"
+});
+function abbreviationFromUserName(name) {
+  const tab = name.split(" ").map((x) => x.charAt(0));
+  if (tab.length === 1) {
+    return tab[0];
+  }
+  return tab[0] + tab[tab.length - 1];
+}
+function TopBar({
+  appName,
+  appColor,
+  appLogo,
+  appVersion,
+  appLicense,
+  logoAboutDialog,
+  onLogoutClick,
+  onLogoClick,
+  userProfile,
+  children,
+  appsAndUrls,
+  onAboutClick,
+  globalVersionPromise,
+  additionalModulesPromise,
+  onThemeClick,
+  theme,
+  developerMode,
+  onDeveloperModeClick,
+  onEquipmentLabellingClick,
+  equipmentLabelling,
+  onLanguageClick,
+  language,
+  dense = false
+}) {
+  const styles = useMemo(() => getStyles(dense), [dense]);
+  const [anchorElSettingsMenu, setAnchorElSettingsMenu] = useState(null);
+  const [anchorElAppsMenu, setAnchorElAppsMenu] = useState(null);
+  const {
+    value: userInformationDialogOpen,
+    setFalse: closeUserInformationDialog,
+    setTrue: openUserInformationDialog
+  } = useStateBoolean(false);
+  const {
+    value: userSettingsDialogOpen,
+    setFalse: closeUserSettingsDialog,
+    setTrue: openUserSettingsDialog
+  } = useStateBoolean(false);
+  const handleToggleSettingsMenu = (event) => {
+    setAnchorElSettingsMenu(event.currentTarget);
+  };
+  const handleCloseSettingsMenu = () => {
+    setAnchorElSettingsMenu(null);
+  };
+  const handleClickAppsMenu = (event) => {
+    setAnchorElAppsMenu(event.currentTarget);
+  };
+  const handleCloseAppsMenu = () => {
+    setAnchorElAppsMenu(null);
+  };
+  const changeTheme = (_, value) => {
+    if (onThemeClick && value !== null) {
+      onThemeClick(value);
+    }
+  };
+  const changeEquipmentLabelling = (_, value) => {
+    if (onEquipmentLabellingClick && value !== null) {
+      onEquipmentLabellingClick(value);
+    }
+  };
+  const changeLanguage = (_, value) => {
+    if (onLanguageClick && value !== null) {
+      onLanguageClick(value);
+    }
+  };
+  const [isAboutDialogOpen, setAboutDialogOpen] = useState(false);
+  const onAboutClicked = () => {
+    setAnchorElSettingsMenu(null);
+    if (onAboutClick) {
+      onAboutClick();
+    } else {
+      setAboutDialogOpen(true);
+    }
+  };
+  const isHiddenUserInformation = () => {
+    if (appsAndUrls) {
+      const app = appsAndUrls.find((item) => item.name === appName);
+      return app?.hiddenUserInformation ?? false;
+    }
+    return false;
+  };
+  const onUserInformationDialogClicked = () => {
+    setAnchorElSettingsMenu(null);
+    openUserInformationDialog();
+  };
+  const onUserSettingsDialogClicked = () => {
+    setAnchorElSettingsMenu(null);
+    openUserSettingsDialog();
+  };
+  const logoClickable = useMemo(
+    () => /* @__PURE__ */ jsx(GridLogo, { onClick: onLogoClick, appLogo, appName, appColor, dense }),
+    [onLogoClick, appLogo, appName, appColor, dense]
+  );
+  return /* @__PURE__ */ jsxs(AppBar, { position: "static", color: "default", children: [
+    userProfile && developerMode && /* @__PURE__ */ jsx(DevModeBanner, {}),
+    /* @__PURE__ */ jsxs(Toolbar, { variant: dense ? "dense" : "regular", sx: styles.toolbar, children: [
+      logoClickable,
+      /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
+      userProfile && !dense && /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "apps",
+            "aria-controls": "apps-menu",
+            "aria-haspopup": "true",
+            onClick: handleClickAppsMenu,
+            color: "inherit",
+            "data-testid": "AppsMenu",
+            children: /* @__PURE__ */ jsx(Apps, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledMenu,
+          {
+            id: "apps-menu",
+            anchorEl: anchorElAppsMenu,
+            keepMounted: true,
+            open: Boolean(anchorElAppsMenu),
+            onClose: handleCloseAppsMenu,
+            children: appsAndUrls?.filter((item) => !item.hiddenInAppsMenu).map((item) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "a",
+                href: item.url?.toString(),
+                sx: styles.link,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: /* @__PURE__ */ jsx(StyledMenuItem, { onClick: handleCloseAppsMenu, children: /* @__PURE__ */ jsxs(ListItemText, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontWeight: "bold"
+                      },
+                      children: "Grid"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        color: item.appColor ?? "grey",
+                        fontWeight: "bold"
+                      },
+                      children: item.name
+                    }
+                  )
+                ] }) })
+              },
+              item.name
+            ))
+          }
+        )
+      ] }),
+      userProfile && /* @__PURE__ */ jsxs(Box, { sx: styles.menuContainer, children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-controls": "settings-menu",
+            "aria-haspopup": "true",
+            sx: styles.showHideMenu,
+            onClick: handleToggleSettingsMenu,
+            color: "inherit",
+            style: anchorElSettingsMenu ? { cursor: "initial" } : { cursor: "pointer" },
+            "data-testid": "SettingsMenu",
+            children: [
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: userProfile.name !== void 0 ? abbreviationFromUserName(userProfile.name) : "" }),
+              !dense && (anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popper,
+          {
+            sx: styles.settingsMenu,
+            open: Boolean(anchorElSettingsMenu),
+            anchorEl: anchorElSettingsMenu,
+            children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleCloseSettingsMenu, children: /* @__PURE__ */ jsxs(MenuList, { id: "settings-menu", children: [
+              /* @__PURE__ */ jsxs(StyledMenuItem, { sx: styles.borderBottom, disabled: true, style: { opacity: "1" }, children: [
+                /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Person, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsxs(Box, { component: "span", sx: styles.sizeLabel, children: [
+                  userProfile.name,
+                  " ",
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.userMail, children: userProfile.email })
+                ] }) })
+              ] }),
+              !isHiddenUserInformation() && /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  style: { opacity: "1" },
+                  onClick: onUserInformationDialogClicked,
+                  children: [
+                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Badge, { fontSize: "small" }) }),
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
+                      FormattedMessage,
+                      {
+                        id: "top-bar/userInformation",
+                        defaultMessage: "User information"
+                      }
+                    ) }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onUserSettingsDialogClicked, sx: styles.borderBottom, children: [
+                /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ManageAccounts, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
+                  FormattedMessage,
+                  {
+                    id: "top-bar/userSettings",
+                    defaultMessage: "Settings"
+                  }
+                ) }) })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  sx: styles.borderBottom,
+                  style: { opacity: "1" },
+                  onClick: onAboutClicked,
+                  children: [
+                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) }),
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/about", defaultMessage: "About" }) }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  disabled: true,
+                  style: {
+                    opacity: "1",
+                    paddingTop: "10px",
+                    paddingBottom: "10px",
+                    backgroundColor: "transparent"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
+                      FormattedMessage,
+                      {
+                        id: "top-bar/displayMode",
+                        defaultMessage: "Display mode"
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsxs(
+                      ToggleButtonGroup,
+                      {
+                        exclusive: true,
+                        value: theme,
+                        size: "large",
+                        sx: styles.toggleButtonGroup,
+                        onChange: changeTheme,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            ToggleButton,
+                            {
+                              value: LIGHT_THEME,
+                              "aria-label": LIGHT_THEME,
+                              sx: styles.toggleButton,
+                              children: /* @__PURE__ */ jsx(WbSunny, { fontSize: "small" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            ToggleButton,
+                            {
+                              value: DARK_THEME,
+                              "aria-label": DARK_THEME,
+                              sx: styles.toggleButton,
+                              children: /* @__PURE__ */ jsx(Brightness3, { fontSize: "small" })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              onEquipmentLabellingClick && /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  disabled: true,
+                  style: {
+                    opacity: "1",
+                    // padding: '0',
+                    paddingTop: "10px",
+                    paddingBottom: "10px",
+                    backgroundColor: "transparent"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
+                      FormattedMessage,
+                      {
+                        id: "top-bar/equipmentLabel",
+                        defaultMessage: "Equipment label"
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsxs(
+                      ToggleButtonGroup,
+                      {
+                        exclusive: true,
+                        value: equipmentLabelling,
+                        sx: styles.toggleButtonGroup,
+                        onChange: changeEquipmentLabelling,
+                        children: [
+                          /* @__PURE__ */ jsx(ToggleButton, { value: false, sx: styles.toggleButton, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/id", defaultMessage: "Id" }) }),
+                          /* @__PURE__ */ jsx(ToggleButton, { value: true, sx: styles.toggleButton, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/name", defaultMessage: "Name" }) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  disabled: true,
+                  sx: styles.borderBottom,
+                  style: {
+                    opacity: "1",
+                    paddingTop: "10px",
+                    paddingBottom: "10px",
+                    backgroundColor: "transparent"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/language", defaultMessage: "Language" }) }) }),
+                    /* @__PURE__ */ jsxs(
+                      ToggleButtonGroup,
+                      {
+                        exclusive: true,
+                        value: language,
+                        sx: styles.toggleButtonGroup,
+                        onChange: changeLanguage,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            ToggleButton,
+                            {
+                              value: LANG_SYSTEM,
+                              "aria-label": LANG_SYSTEM,
+                              sx: styles.languageToggleButton,
+                              "data-testid": "LangSystem",
+                              children: /* @__PURE__ */ jsx(Computer, {})
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            ToggleButton,
+                            {
+                              value: LANG_ENGLISH,
+                              "aria-label": LANG_ENGLISH,
+                              sx: styles.languageToggleButton,
+                              "data-testid": "LangEnglish",
+                              children: "EN"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            ToggleButton,
+                            {
+                              value: LANG_FRENCH,
+                              "aria-label": LANG_FRENCH,
+                              sx: styles.toggleButton,
+                              "data-testid": "LangFrench",
+                              children: "FR"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onLogoutClick, children: [
+                /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ExitToApp, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/logout", defaultMessage: "Logout" }) }) })
+              ] })
+            ] }) }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        UserInformationDialog,
+        {
+          openDialog: userInformationDialogOpen && !!userProfile,
+          userProfile,
+          onClose: closeUserInformationDialog
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        UserSettingsDialog,
+        {
+          openDialog: userSettingsDialogOpen && !!userProfile,
+          onClose: closeUserSettingsDialog,
+          developerMode,
+          onDeveloperModeClick
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AboutDialog,
+        {
+          open: isAboutDialogOpen && !!userProfile,
+          onClose: () => setAboutDialogOpen(false),
+          appName,
+          appVersion,
+          appLicense,
+          globalVersionPromise,
+          additionalModulesPromise,
+          logo: logoAboutDialog
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  TopBar
+};

package/dist/features/topBar/UserInformationDialog.d.ts

@@ -0,0 +1,8 @@
+import { UserProfile } from 'oidc-client-ts';
+interface UserInformationDialogProps {
+    openDialog: boolean;
+    onClose: () => void;
+    userProfile: UserProfile | undefined;
+}
+declare function UserInformationDialog({ openDialog, userProfile, onClose }: UserInformationDialogProps): import("react/jsx-runtime").JSX.Element;
+export default UserInformationDialog;

package/dist/features/topBar/UserInformationDialog.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Dialog, DialogTitle, DialogContent, Grid, Typography, Box, DialogActions } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { useState, useEffect, Fragment } from "react";
+import { CancelButton } from "../../components/ui/reactHookForm/utils/CancelButton.js";
+import { fetchUserDetails } from "../../services/userAdmin.js";
+const styles = {
+  DialogTitle: { fontSize: "1.5rem" },
+  DialogContent: { marginTop: "10px" },
+  quotasBox: { marginTop: "60px" },
+  quotasTopography: { marginTop: "30px", marginBottom: "25px", fontSize: "1.15rem" },
+  usedTopography: { marginLeft: "15%" }
+};
+function UserInformationDialog({ openDialog, userProfile, onClose }) {
+  const [userDetails, setUserDetails] = useState(void 0);
+  const getUserDetails = (userName) => {
+    setUserDetails(void 0);
+    fetchUserDetails(userName).then((response) => {
+      setUserDetails(response);
+    }).catch((error) => {
+      console.warn(`Could not fetch user information for ${userName}`, error);
+    });
+  };
+  useEffect(() => {
+    if (!openDialog || !userProfile?.sub) {
+      setUserDetails(void 0);
+      return;
+    }
+    getUserDetails(userProfile.sub);
+  }, [openDialog, userProfile?.sub]);
+  const rolesString = userProfile?.profile ?? "";
+  const rolesList = rolesString ? rolesString.split("|").map((role) => role.trim()) : [];
+  return /* @__PURE__ */ jsxs(Dialog, { open: openDialog && !!userProfile && !!userDetails, onClose, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { fontWeight: "bold", sx: styles.DialogTitle, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/title" }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, sx: styles.DialogContent, children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/role" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: rolesList.length > 0 ? /* @__PURE__ */ jsx(Typography, { children: rolesList.map((role, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          index > 0 && " | ",
+          /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: `user-information-dialog/${role}`,
+              defaultMessage: role
+            }
+          )
+        ] }, role)) }) : /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/no-roles" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/profile" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: userDetails?.profileName === null ? /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/no-profile" }) : /* @__PURE__ */ jsx(Typography, { children: userDetails?.profileName }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { mt: 3, sx: styles.quotasBox, children: [
+        /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", sx: styles.quotasTopography, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/quotas" }) }),
+        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/number-of-cases-or-studies" }) }) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsxs(Typography, { children: [
+            userDetails?.maxAllowedCases,
+            /* @__PURE__ */ jsxs(Box, { component: "span", sx: styles.usedTopography, children: [
+              "( ",
+              /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/used" }),
+              ":",
+              ` ${userDetails?.numberCasesUsed}`,
+              " )"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/number-of-builds-per-study" }) }) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { children: userDetails?.maxAllowedBuilds }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(CancelButton, { color: "primary", onClick: onClose }) })
+  ] });
+}
+export {
+  UserInformationDialog as default
+};

package/dist/hooks/use-parameters-backend.d.ts

@@ -1,6 +1,6 @@
 import { UUID } from 'node:crypto';
 import { User } from 'oidc-client-ts';
-import { ComputingType } from '../components/parameters/common/computing-type';
+import { ComputingType } from '../features/parameters/common/computing-type';
 import { BackendFunctions, UseParametersBackendReturnProps } from '../utils/types/parameters.type';
 export declare enum OptionalServicesStatus {
     Up = "UP",

package/dist/hooks/use-parameters-backend.js

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from "react";
 import { useSnackMessage } from "./useSnackMessage.js";
-import { formatComputingTypeLabel } from "../components/parameters/common/computing-type.js";
+import { formatComputingTypeLabel } from "../features/parameters/common/computing-type.js";
 import { snackWithFallback } from "../utils/error.js";
 var OptionalServicesStatus = /* @__PURE__ */ ((OptionalServicesStatus2) => {
   OptionalServicesStatus2["Up"] = "UP";

package/dist/index.d.ts

@@ -6,6 +6,7 @@
  */
 export { default as svg } from './_mocks_/svg';
 export * from './components';
+export * from './features';
 export * from './hooks';
 export * from './redux';
 export * from './services';