@gridsuite/commons-ui 0.67.0 → 0.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -114,12 +114,12 @@ function CustomAgGridTable({
114
114
  [getValues, name]
115
115
  );
116
116
  const handleMoveRowUp = () => {
117
- selectedRows.map((row) => getIndex(row)).sort().forEach((idx) => {
117
+ selectedRows.map((row) => getIndex(row)).sort((n1, n2) => n1 - n2).forEach((idx) => {
118
118
  swap(idx, idx - 1);
119
119
  });
120
120
  };
121
121
  const handleMoveRowDown = () => {
122
- selectedRows.map((row) => getIndex(row)).sort().reverse().forEach((idx) => {
122
+ selectedRows.map((row) => getIndex(row)).sort((n1, n2) => n1 - n2).reverse().forEach((idx) => {
123
123
  swap(idx, idx + 1);
124
124
  });
125
125
  };
@@ -2,10 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useState, useMemo } from "react";
3
3
  import { FormattedMessage } from "react-intl";
4
4
  import { Menu, MenuItem, ListItemIcon, AppBar, Toolbar, Box, IconButton, ListItemText, Button, Popper, Paper, ClickAwayListener, MenuList, Typography, ToggleButtonGroup, ToggleButton, darken } from "@mui/material";
5
- import { Apps, ArrowDropUp, ArrowDropDown, Person, WbSunny, Brightness3, Computer, Settings, HelpOutline, ExitToApp } from "@mui/icons-material";
5
+ import { Apps, ArrowDropUp, ArrowDropDown, Person, WbSunny, Brightness3, Computer, Settings, ManageAccounts, HelpOutline, ExitToApp } from "@mui/icons-material";
6
6
  import { styled } from "@mui/system";
7
7
  import { GridLogo } from "./GridLogo.js";
8
8
  import { AboutDialog } from "./AboutDialog.js";
9
+ import { useStateBoolean } from "../../hooks/customStates/useStateBoolean.js";
10
+ import UserInformationDialog from "./UserInformationDialog.js";
9
11
  import { LIGHT_THEME, DARK_THEME, LANG_SYSTEM, LANG_ENGLISH, LANG_FRENCH } from "../../utils/constants/browserConstants.js";
10
12
  const styles = {
11
13
  grow: {
@@ -127,6 +129,11 @@ function TopBar({
127
129
  }) {
128
130
  const [anchorElSettingsMenu, setAnchorElSettingsMenu] = useState(null);
129
131
  const [anchorElAppsMenu, setAnchorElAppsMenu] = useState(null);
132
+ const {
133
+ value: userInformationDialogOpen,
134
+ setFalse: closeUserInformationDialog,
135
+ setTrue: openUserInformationDialog
136
+ } = useStateBoolean(false);
130
137
  const handleToggleSettingsMenu = (event) => {
131
138
  setAnchorElSettingsMenu(event.currentTarget);
132
139
  };
@@ -176,6 +183,10 @@ function TopBar({
176
183
  setAboutDialogOpen(true);
177
184
  }
178
185
  };
186
+ const onUserInformationDialogClicked = () => {
187
+ setAnchorElSettingsMenu(null);
188
+ openUserInformationDialog();
189
+ };
179
190
  const logoClickable = useMemo(
180
191
  () => /* @__PURE__ */ jsx(GridLogo, { onClick: onLogoClick, appLogo, appName, appColor }),
181
192
  [onLogoClick, appLogo, appName, appColor]
@@ -427,6 +438,24 @@ function TopBar({
427
438
  }
428
439
  ) }) })
429
440
  ] }),
441
+ /* @__PURE__ */ jsxs(
442
+ StyledMenuItem,
443
+ {
444
+ sx: styles.borderBottom,
445
+ style: { opacity: "1" },
446
+ onClick: onUserInformationDialogClicked,
447
+ children: [
448
+ /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ManageAccounts, { fontSize: "small" }) }),
449
+ /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
450
+ FormattedMessage,
451
+ {
452
+ id: "top-bar/userInformation",
453
+ defaultMessage: "User information"
454
+ }
455
+ ) }) })
456
+ ]
457
+ }
458
+ ),
430
459
  /* @__PURE__ */ jsxs(
431
460
  StyledMenuItem,
432
461
  {
@@ -447,6 +476,14 @@ function TopBar({
447
476
  }
448
477
  )
449
478
  ] }),
479
+ userInformationDialogOpen && /* @__PURE__ */ jsx(
480
+ UserInformationDialog,
481
+ {
482
+ openDialog: userInformationDialogOpen,
483
+ user,
484
+ onClose: closeUserInformationDialog
485
+ }
486
+ ),
450
487
  /* @__PURE__ */ jsx(
451
488
  AboutDialog,
452
489
  {
@@ -0,0 +1,9 @@
1
+ import { User } from 'oidc-client';
2
+
3
+ interface UserInformationDialogProps {
4
+ openDialog: boolean;
5
+ onClose: () => void;
6
+ user: User | undefined;
7
+ }
8
+ declare function UserInformationDialog({ openDialog, user, onClose }: UserInformationDialogProps): import("react/jsx-runtime").JSX.Element;
9
+ export default UserInformationDialog;
@@ -0,0 +1,70 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { Dialog, DialogTitle, DialogContent, Grid, Typography, DialogActions } from "@mui/material";
3
+ import { Box } from "@mui/system";
4
+ import { FormattedMessage } from "react-intl";
5
+ import { useState, useEffect } from "react";
6
+ import { CancelButton } from "../inputs/reactHookForm/utils/CancelButton.js";
7
+ import fetchUserDetails from "../../services/userAdmin.js";
8
+ const styles = {
9
+ DialogTitle: { fontSize: "1.5rem" },
10
+ DialogContent: { marginTop: "10px" },
11
+ quotasBox: { marginTop: "60px" },
12
+ quotasTopography: { marginTop: "30px", marginBottom: "25px", fontSize: "1.15rem" },
13
+ usedTopography: { marginLeft: "15%" }
14
+ };
15
+ function UserInformationDialog({ openDialog, user, onClose }) {
16
+ const [userDetails, setUserDetails] = useState(void 0);
17
+ const getUserDetails = (userName) => {
18
+ fetchUserDetails(userName).then((response) => {
19
+ setUserDetails(response);
20
+ }).catch((error) => {
21
+ console.warn(`Could not fetch user information for ${userName}`, error);
22
+ });
23
+ };
24
+ useEffect(() => {
25
+ if (!user || user.expired) {
26
+ onClose();
27
+ }
28
+ if (user == null ? void 0 : user.profile.sub) {
29
+ getUserDetails(user == null ? void 0 : user.profile.sub);
30
+ }
31
+ }, [user, onClose]);
32
+ return /* @__PURE__ */ jsxs(Dialog, { open: openDialog && !!userDetails, onClose, children: [
33
+ /* @__PURE__ */ jsx(DialogTitle, { sx: styles.DialogTitle, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/title" }) }),
34
+ /* @__PURE__ */ jsxs(DialogContent, { children: [
35
+ /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, sx: styles.DialogContent, children: [
36
+ /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/role" }) }) }),
37
+ /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(
38
+ FormattedMessage,
39
+ {
40
+ id: (userDetails == null ? void 0 : userDetails.isAdmin) ? "user-information-dialog/role-admin" : "user-information-dialog/role-user"
41
+ }
42
+ ) }) }),
43
+ /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/profil" }) }) }),
44
+ /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: (userDetails == null ? void 0 : userDetails.profileName) === null ? /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/no-profile" }) : /* @__PURE__ */ jsx(Typography, { children: userDetails == null ? void 0 : userDetails.profileName }) })
45
+ ] }),
46
+ /* @__PURE__ */ jsxs(Box, { mt: 3, sx: styles.quotasBox, children: [
47
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", sx: styles.quotasTopography, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/quotas" }) }),
48
+ /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
49
+ /* @__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" }) }) }),
50
+ /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsxs(Typography, { children: [
51
+ userDetails == null ? void 0 : userDetails.maxAllowedCases,
52
+ /* @__PURE__ */ jsxs(Box, { component: "span", sx: styles.usedTopography, children: [
53
+ "( ",
54
+ /* @__PURE__ */ jsx(FormattedMessage, { id: "user-information-dialog/used" }),
55
+ ":",
56
+ ` ${userDetails == null ? void 0 : userDetails.numberCasesUsed}`,
57
+ " )"
58
+ ] })
59
+ ] }) }),
60
+ /* @__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" }) }) }),
61
+ /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { children: userDetails == null ? void 0 : userDetails.maxAllowedBuilds }) })
62
+ ] })
63
+ ] })
64
+ ] }),
65
+ /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(CancelButton, { color: "primary", onClick: onClose }) })
66
+ ] });
67
+ }
68
+ export {
69
+ UserInformationDialog as default
70
+ };
@@ -231,7 +231,10 @@ function TreeViewFinderComponant(props) {
231
231
  {
232
232
  open,
233
233
  onClose: (e, r) => {
234
- if (r === "escapeKeyDown" || r === "backdropClick") {
234
+ if (r === "backdropClick") {
235
+ return;
236
+ }
237
+ if (r === "escapeKeyDown") {
235
238
  onClose == null ? void 0 : onClose([]);
236
239
  setSelected([]);
237
240
  }
@@ -0,0 +1,4 @@
1
+ import { UserDetail } from '../utils/types/types';
2
+
3
+ declare function fetchUserDetails(user: string): Promise<UserDetail>;
4
+ export default fetchUserDetails;
@@ -0,0 +1,12 @@
1
+ import { backendFetchJson } from "./utils.js";
2
+ const PREFIX_USER_ADMIN_QUERIES = `${"api/gateway"}/user-admin/v1`;
3
+ function fetchUserDetails(user) {
4
+ console.info("get user details");
5
+ return backendFetchJson(`${PREFIX_USER_ADMIN_QUERIES}/users/${user}/detail`, {
6
+ method: "get",
7
+ headers: { "Content-Type": "application/json" }
8
+ });
9
+ }
10
+ export {
11
+ fetchUserDetails as default
12
+ };
@@ -9,6 +9,7 @@ export declare const topBarEn: {
9
9
  'top-bar/logout': string;
10
10
  'top-bar/goFullScreen': string;
11
11
  'top-bar/exitFullScreen': string;
12
+ 'top-bar/user-information': string;
12
13
  'top-bar/about': string;
13
14
  'top-bar/displayMode': string;
14
15
  'top-bar/equipmentLabel': string;
@@ -26,4 +27,14 @@ export declare const topBarEn: {
26
27
  'about-dialog/module-tooltip-app': string;
27
28
  'about-dialog/module-tooltip-server': string;
28
29
  'about-dialog/module-tooltip-other': string;
30
+ 'user-information-dialog/title': string;
31
+ 'user-information-dialog/role': string;
32
+ 'user-information-dialog/role-user': string;
33
+ 'user-information-dialog/role-admin': string;
34
+ 'user-information-dialog/profil': string;
35
+ 'user-information-dialog/no-profile': string;
36
+ 'user-information-dialog/quotas': string;
37
+ 'user-information-dialog/number-of-cases-or-studies': string;
38
+ 'user-information-dialog/used': string;
39
+ 'user-information-dialog/number-of-builds-per-study': string;
29
40
  };
@@ -3,6 +3,7 @@ const topBarEn = {
3
3
  "top-bar/logout": "Logout",
4
4
  "top-bar/goFullScreen": "Full screen",
5
5
  "top-bar/exitFullScreen": "Exit full screen mode",
6
+ "top-bar/user-information": "User information",
6
7
  "top-bar/about": "About",
7
8
  "top-bar/displayMode": "Display mode",
8
9
  "top-bar/equipmentLabel": "Equipment label",
@@ -19,7 +20,17 @@ const topBarEn = {
19
20
  "about-dialog/label-type": "Type",
20
21
  "about-dialog/module-tooltip-app": "application",
21
22
  "about-dialog/module-tooltip-server": "server",
22
- "about-dialog/module-tooltip-other": "other"
23
+ "about-dialog/module-tooltip-other": "other",
24
+ "user-information-dialog/title": "User information",
25
+ "user-information-dialog/role": "Role",
26
+ "user-information-dialog/role-user": "Basic user",
27
+ "user-information-dialog/role-admin": "Admin",
28
+ "user-information-dialog/profil": "Profil",
29
+ "user-information-dialog/no-profile": "No profile",
30
+ "user-information-dialog/quotas": "User quotas",
31
+ "user-information-dialog/number-of-cases-or-studies": "Number of cases or studies",
32
+ "user-information-dialog/used": "Used",
33
+ "user-information-dialog/number-of-builds-per-study": "Number of builds per study"
23
34
  };
24
35
  export {
25
36
  topBarEn
@@ -9,6 +9,7 @@ export declare const topBarFr: {
9
9
  'top-bar/logout': string;
10
10
  'top-bar/goFullScreen': string;
11
11
  'top-bar/exitFullScreen': string;
12
+ 'top-bar/userInformation': string;
12
13
  'top-bar/about': string;
13
14
  'top-bar/displayMode': string;
14
15
  'top-bar/equipmentLabel': string;
@@ -26,4 +27,14 @@ export declare const topBarFr: {
26
27
  'about-dialog/module-tooltip-app': string;
27
28
  'about-dialog/module-tooltip-server': string;
28
29
  'about-dialog/module-tooltip-other': string;
30
+ 'user-information-dialog/title': string;
31
+ 'user-information-dialog/role': string;
32
+ 'user-information-dialog/role-user': string;
33
+ 'user-information-dialog/role-admin': string;
34
+ 'user-information-dialog/profil': string;
35
+ 'user-information-dialog/no-profile': string;
36
+ 'user-information-dialog/quotas': string;
37
+ 'user-information-dialog/number-of-cases-or-studies': string;
38
+ 'user-information-dialog/used': string;
39
+ 'user-information-dialog/number-of-builds-per-study': string;
29
40
  };
@@ -3,6 +3,7 @@ const topBarFr = {
3
3
  "top-bar/logout": "Se déconnecter",
4
4
  "top-bar/goFullScreen": "Plein écran",
5
5
  "top-bar/exitFullScreen": "Quitter mode plein écran",
6
+ "top-bar/userInformation": "Informations utilisateur",
6
7
  "top-bar/about": "À propos",
7
8
  "top-bar/displayMode": "Mode d'affichage",
8
9
  "top-bar/equipmentLabel": "Label des ouvrages",
@@ -19,7 +20,17 @@ const topBarFr = {
19
20
  "about-dialog/label-type": "Type",
20
21
  "about-dialog/module-tooltip-app": "application",
21
22
  "about-dialog/module-tooltip-server": "serveur",
22
- "about-dialog/module-tooltip-other": "autre"
23
+ "about-dialog/module-tooltip-other": "autre",
24
+ "user-information-dialog/title": "Informations utilisateur",
25
+ "user-information-dialog/role": "Rôle",
26
+ "user-information-dialog/role-user": "Utilisateur simple",
27
+ "user-information-dialog/role-admin": "Admin",
28
+ "user-information-dialog/profil": "Profile",
29
+ "user-information-dialog/no-profile": "Pas de profile",
30
+ "user-information-dialog/quotas": "Quotas",
31
+ "user-information-dialog/number-of-cases-or-studies": "Nombre situations ou études",
32
+ "user-information-dialog/used": "Utilisé",
33
+ "user-information-dialog/number-of-builds-per-study": "Nombre réalisations par étude"
23
34
  };
24
35
  export {
25
36
  topBarFr
@@ -29,3 +29,11 @@ export type Option = {
29
29
  export type PredefinedProperties = {
30
30
  [propertyName: string]: string[];
31
31
  };
32
+ export type UserDetail = {
33
+ sub: string;
34
+ isAdmin: boolean;
35
+ profileName?: string;
36
+ maxAllowedCases: number;
37
+ numberCasesUsed: number;
38
+ maxAllowedBuilds: number;
39
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gridsuite/commons-ui",
3
- "version": "0.67.0",
3
+ "version": "0.68.0",
4
4
  "description": "common react components for gridsuite applications",
5
5
  "engines": {
6
6
  "npm": ">=9",