@gridsuite/commons-ui 0.46.0 → 0.48.0

package/README.md

@@ -11,23 +11,6 @@ If you want to test your library integration with a consumer application my-app
 to build commons-ui via `npm run build` then change the commons-ui dependency in my-app's package.json from `@gridsuite/commons-ui:"^x.x.x"`
 to `@gridsuite/commons-ui:"file:../path/to/the/commons-ui"` then type `npm install` `npm start`.
 
-NOTE: if you have the following error:
-
-```
-Module not found: Can't resolve '@svgr/webpack'
-```
-
-You can try to temporarily regenerate a package-lock.json in the consumer application (`cd my-app/;` `rm -rf node_modules;` `rm package-lock.json;` `npm install;`). Or temporarily add
-"@svgr/webpack" to your consummer application package.json dependencies
-
-```
-    "dependencies": {
-        "@svgr/webpack": "^4.3.0",
-    ...
-    }
-```
-
-and then rerun npm install.
 
 #### For integrators
 

package/dist/components/AuthenticationRouter/AuthenticationRouter.d.ts

@@ -0,0 +1,10 @@
+export default AuthenticationRouter;
+declare function AuthenticationRouter({ userManager, signInCallbackError, authenticationRouterError, showAuthenticationRouterLogin, dispatch, navigate, location, }: {
+    userManager: any;
+    signInCallbackError: any;
+    authenticationRouterError: any;
+    showAuthenticationRouterLogin: any;
+    dispatch: any;
+    navigate: any;
+    location: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthenticationRouter/AuthenticationRouter.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
+import SignInCallbackHandler from "../SignInCallbackHandler/SignInCallbackHandler.js";
+import { handleSigninCallback, handleSilentRenewCallback, login, logout } from "../../utils/AuthService.js";
+import SilentRenewCallbackHandler from "../SilentRenewCallbackHandler/SilentRenewCallbackHandler.js";
+import Login from "../Login/Login.js";
+import Logout from "../Login/Logout.js";
+import { Grid, Alert, AlertTitle } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+const AuthenticationRouter = ({
+  userManager,
+  signInCallbackError,
+  authenticationRouterError,
+  showAuthenticationRouterLogin,
+  dispatch,
+  navigate,
+  location
+}) => {
+  const handleSigninCallbackClosure = useCallback(
+    () => handleSigninCallback(dispatch, navigate, userManager.instance),
+    [dispatch, navigate, userManager.instance]
+  );
+  const handleSilentRenewCallbackClosure = useCallback(
+    () => handleSilentRenewCallback(userManager.instance),
+    [userManager.instance]
+  );
+  return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      alignContent: "center",
+      alignItems: "center",
+      direction: "column",
+      children: [
+        userManager.error !== null && /* @__PURE__ */ jsxs("h1", { children: [
+          "Error : Getting userManager; ",
+          userManager.error
+        ] }),
+        signInCallbackError !== null && /* @__PURE__ */ jsxs("h1", { children: [
+          "Error : SignIn Callback Error;",
+          signInCallbackError.message
+        ] }),
+        /* @__PURE__ */ jsxs(Routes, { children: [
+          /* @__PURE__ */ jsx(
+            Route,
+            {
+              path: "sign-in-callback",
+              element: /* @__PURE__ */ jsx(
+                SignInCallbackHandler,
+                {
+                  userManager: userManager.instance,
+                  handleSignInCallback: handleSigninCallbackClosure
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Route,
+            {
+              path: "silent-renew-callback",
+              element: /* @__PURE__ */ jsx(
+                SilentRenewCallbackHandler,
+                {
+                  userManager: userManager.instance,
+                  handleSilentRenewCallback: handleSilentRenewCallbackClosure
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Route,
+            {
+              path: "logout-callback",
+              element: /* @__PURE__ */ jsx(Navigate, { to: "/" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Route,
+            {
+              path: "*",
+              element: showAuthenticationRouterLogin && authenticationRouterError == null && /* @__PURE__ */ jsx(
+                Login,
+                {
+                  disabled: userManager.instance === null,
+                  onLoginClick: () => login(location, userManager.instance)
+                }
+              )
+            }
+          )
+        ] }),
+        authenticationRouterError !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+            Logout,
+            {
+              disabled: userManager.instance === null,
+              onLogoutClick: () => logout(location, userManager.instance)
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Grid, { item: true, xs: 4, children: [
+            authenticationRouterError.logoutError != null && /* @__PURE__ */ jsxs(Alert, { severity: "error", children: [
+              /* @__PURE__ */ jsx(AlertTitle, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "login/errorInLogout" }) }),
+              /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "login/errorInLogoutMessage",
+                  values: {
+                    userName: authenticationRouterError.userName
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { children: authenticationRouterError.logoutError.error.message })
+            ] }),
+            (authenticationRouterError == null ? void 0 : authenticationRouterError.userValidationError) != null && /* @__PURE__ */ jsxs(Alert, { severity: "error", children: [
+              /* @__PURE__ */ jsx(AlertTitle, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "login/errorInUserValidation" }) }),
+              /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "login/errorInUserValidationMessage",
+                  values: {
+                    userName: authenticationRouterError.userName
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { children: authenticationRouterError.userValidationError.error.message })
+            ] }),
+            (authenticationRouterError == null ? void 0 : authenticationRouterError.unauthorizedUserInfo) != null && /* @__PURE__ */ jsxs(Alert, { severity: "info", children: [
+              /* @__PURE__ */ jsx(AlertTitle, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "login/unauthorizedAccess" }) }),
+              /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "login/unauthorizedAccessMessage",
+                  values: {
+                    userName: authenticationRouterError.userName
+                  }
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  AuthenticationRouter as default
+};

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

@@ -0,0 +1 @@
+export { default } from "./AuthenticationRouter";

package/dist/components/CardErrorBoundary/card-error-boundary.d.ts

@@ -0,0 +1,18 @@
+export default CardErrorBoundary;
+declare class CardErrorBoundary extends React.Component<any, any, any> {
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+        error: any;
+    };
+    constructor(props: any);
+    state: {
+        hasError: boolean;
+        expanded: boolean;
+        error: undefined;
+    };
+    handleExpandClick(): void;
+    handleReloadClick(): void;
+    componentDidCatch(error: any, errorInfo: any): void;
+    render(): any;
+}
+import React from 'react';

package/dist/components/CardErrorBoundary/card-error-boundary.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { styled, IconButton, Box, Card, CardHeader, CardContent, Typography, CardActions, Collapse } from "@mui/material";
+import { Replay, ExpandMore as ExpandMore$1 } from "@mui/icons-material";
+import { FormattedMessage } from "react-intl";
+const ExpandMore = styled((props) => {
+  const { expand, ...other } = props;
+  return /* @__PURE__ */ jsx(IconButton, { ...other });
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  marginLeft: "auto",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest
+  })
+}));
+class CardErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      expanded: false,
+      error: void 0
+    };
+    this.handleExpandClick = this.handleExpandClick.bind(this);
+    this.handleReloadClick = this.handleReloadClick.bind(this);
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("CardErrorBoundary caught: ", error, errorInfo);
+  }
+  handleExpandClick() {
+    this.setState((state) => ({ expanded: !state.expanded }));
+  }
+  handleReloadClick() {
+    this.setState((state) => ({
+      hasError: false,
+      expanded: false,
+      error: void 0
+    }));
+  }
+  render() {
+    if (this.state.hasError) {
+      const { error, expanded } = this.state;
+      return /* @__PURE__ */ jsx(Box, { sx: { p: 4 }, children: /* @__PURE__ */ jsxs(Card, { sx: { mx: "auto", maxWidth: 600 }, children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            title: /* @__PURE__ */ jsx(
+              FormattedMessage,
+              {
+                id: "card_error_boundary/title",
+                defaultMessage: "Sorry, Unexpected error :("
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx(
+          FormattedMessage,
+          {
+            id: "card_error_boundary/content",
+            defaultMessage: "Please reload, or close and reopen this application, or contact support."
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs(CardActions, { disableSpacing: true, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: this.handleReloadClick,
+              "aria-label": "reload",
+              children: /* @__PURE__ */ jsx(Replay, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ExpandMore,
+            {
+              expand: expanded,
+              onClick: this.handleExpandClick,
+              "aria-expanded": expanded,
+              "aria-label": "show more",
+              children: /* @__PURE__ */ jsx(ExpandMore$1, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Collapse, { in: expanded, children: /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "text.secondary",
+              children: /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "card_error_boundary/expandederrorheader",
+                  defaultMessage: "Error message (and see more information in the developper console):"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", children: error.message })
+        ] }) })
+      ] }) });
+    }
+    return this.props.children;
+  }
+}
+export {
+  CardErrorBoundary as default
+};

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

@@ -0,0 +1 @@
+export { default } from "./card-error-boundary";

package/dist/components/DirectoryItemSelector/directory-item-selector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2022, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/.
+ */
+/// <reference types="node" />
+import { FunctionComponent } from 'react';
+import { UUID } from 'crypto';
+interface DirectoryItemSelectorProps {
+    open: boolean;
+    onClose: any;
+    types: string[];
+    equipmentTypes?: string[];
+    title: string;
+    itemFilter?: any;
+    fetchDirectoryContent: (directoryUuid: UUID, elementTypes: string[]) => Promise<any>;
+    fetchRootFolders: (types: string[]) => Promise<any>;
+    fetchElementsInfos: (ids: UUID[], elementTypes: string[], equipmentTypes?: string[]) => Promise<any>;
+}
+declare const DirectoryItemSelector: FunctionComponent<DirectoryItemSelectorProps>;
+export default DirectoryItemSelector;

package/dist/components/DirectoryItemSelector/directory-item-selector.js

@@ -0,0 +1,254 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { elementType, getFileIcon } from "../../utils/ElementType.js";
+import { useSnackMessage } from "../../hooks/useSnackMessage.js";
+import TreeViewFinder from "../TreeViewFinder/TreeViewFinder.js";
+const styles = {
+  icon: (theme) => ({
+    marginRight: theme.spacing(1),
+    width: "18px",
+    height: "18px"
+  })
+};
+const DirectoryItemSelector = ({
+  open,
+  onClose,
+  types,
+  equipmentTypes,
+  title,
+  itemFilter,
+  fetchDirectoryContent,
+  fetchRootFolders,
+  fetchElementsInfos
+}) => {
+  const [data, setData] = useState([]);
+  const [rootDirectories, setRootDirectories] = useState([]);
+  const nodeMap = useRef({});
+  const dataRef = useRef([]);
+  dataRef.current = data;
+  const rootsRef = useRef([]);
+  rootsRef.current = rootDirectories;
+  const { snackError } = useSnackMessage();
+  const openRef = useRef();
+  openRef.current = open;
+  const contentFilter = useCallback(
+    () => /* @__PURE__ */ new Set([elementType.DIRECTORY, ...types]),
+    [types]
+  );
+  const convertChildren = useCallback((children) => {
+    return children.map((e) => {
+      return {
+        id: e.elementUuid,
+        name: e.elementName,
+        specificMetadata: e.specificMetadata,
+        icon: getFileIcon(e.type, styles.icon),
+        children: e.type === elementType.DIRECTORY ? convertChildren(e.children) : void 0,
+        childrenCount: e.type === elementType.DIRECTORY ? e.subdirectoriesCount : void 0
+      };
+    });
+  }, []);
+  const convertRoots = useCallback(
+    (newRoots) => {
+      return newRoots.map((e) => {
+        return {
+          id: e.elementUuid,
+          name: e.elementName,
+          icon: getFileIcon(e.type, styles.icon),
+          children: e.type === elementType.DIRECTORY ? convertChildren(
+            nodeMap.current[e.elementUuid].children
+          ) : void 0,
+          childrenCount: e.type === elementType.DIRECTORY ? e.subdirectoriesCount : void 0
+        };
+      });
+    },
+    [convertChildren]
+  );
+  const addToDirectory = useCallback(
+    (nodeId, content) => {
+      let [nrs, mdr] = updatedTree(
+        rootsRef.current,
+        nodeMap.current,
+        nodeId,
+        content
+      );
+      setRootDirectories(nrs);
+      nodeMap.current = mdr;
+      setData(convertRoots(nrs));
+    },
+    [convertRoots]
+  );
+  const updateRootDirectories = useCallback(() => {
+    fetchRootFolders(types).then((data2) => {
+      let [nrs, mdr] = updatedTree(
+        rootsRef.current,
+        nodeMap.current,
+        null,
+        data2
+      );
+      setRootDirectories(nrs);
+      nodeMap.current = mdr;
+      setData(convertRoots(nrs));
+    }).catch((error) => {
+      snackError({
+        messageTxt: error.message,
+        headerId: "DirectoryItemSelector"
+      });
+    });
+  }, [convertRoots, types, snackError, fetchRootFolders]);
+  useEffect(() => {
+    if (open) {
+      updateRootDirectories();
+    }
+  }, [open, updateRootDirectories]);
+  const fetchDirectory = useCallback(
+    (nodeId) => {
+      fetchDirectoryContent(nodeId, types).then((children) => {
+        const childrenMatchedTypes = children.filter(
+          (item) => contentFilter().has(item.type)
+        );
+        if (childrenMatchedTypes.length > 0 && equipmentTypes && equipmentTypes.length > 0) {
+          fetchElementsInfos(
+            childrenMatchedTypes.map((e) => e.elementUuid),
+            types,
+            equipmentTypes
+          ).then((childrenWithMetadata) => {
+            const children2 = itemFilter ? childrenWithMetadata.filter((val) => {
+              if (val.type === elementType.DIRECTORY) {
+                return true;
+              }
+              return itemFilter(val);
+            }) : childrenWithMetadata;
+            addToDirectory(nodeId, children2);
+          });
+        } else {
+          addToDirectory(nodeId, childrenMatchedTypes);
+        }
+      }).catch((error) => {
+        console.warn(
+          `Could not update subs (and content) of '${nodeId}' : ${error.message}`
+        );
+      });
+    },
+    [
+      types,
+      equipmentTypes,
+      itemFilter,
+      contentFilter,
+      addToDirectory,
+      fetchDirectoryContent,
+      fetchElementsInfos
+    ]
+  );
+  function sortHandlingDirectories(a, b) {
+    if (a.children && !b.children) {
+      return -1;
+    } else if (b.children && !a.children) {
+      return 1;
+    }
+    return a.name.localeCompare(b.name);
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    TreeViewFinder,
+    {
+      multiselect: true,
+      onTreeBrowse: fetchDirectory,
+      data,
+      onlyLeaves: true,
+      sortMethod: sortHandlingDirectories,
+      title,
+      onClose,
+      open
+    }
+  ) });
+};
+function updatedTree(prevRoots, prevMap, nodeId, children) {
+  var _a;
+  const nextChildren = children.sort((a, b) => a.elementName.localeCompare(b.elementName)).map((n) => {
+    let pn = prevMap[n.elementUuid];
+    if (!pn) {
+      return { ...n, children: [], parentUuid: nodeId };
+    } else if (n.elementName === pn.elementName && sameRights(n.accessRights, pn.accessRights) && n.subdirectoriesCount === pn.subdirectoriesCount && nodeId === pn.parentUuid) {
+      return pn;
+    } else {
+      if (pn.parentUuid !== nodeId) {
+        console.warn("reparent " + pn.parentUuid + " -> " + nodeId);
+      }
+      return {
+        ...pn,
+        elementName: n.elementName,
+        accessRights: n.accessRights,
+        subdirectoriesCount: n.subdirectoriesCount,
+        parentUuid: nodeId
+      };
+    }
+  });
+  const prevChildren = nodeId ? (_a = prevMap[nodeId]) == null ? void 0 : _a.children : prevRoots;
+  if ((prevChildren == null ? void 0 : prevChildren.length) === nextChildren.length && prevChildren.every((e, i) => e === nextChildren[i])) {
+    return [prevRoots, prevMap];
+  }
+  let nextUuids = new Set(children ? children.map((n) => n.elementUuid) : []);
+  let prevUuids = prevChildren ? prevChildren.map((n) => n.elementUuid) : [];
+  let mayNodeId = nodeId ? [nodeId] : [];
+  let nonCopyUuids = /* @__PURE__ */ new Set([
+    ...nextUuids,
+    ...mayNodeId,
+    ...Array.prototype.concat(
+      ...prevUuids.filter((u) => !nextUuids.has(u)).map(
+        (u) => flattenDownNodes(prevMap[u], (n) => n.children).map(
+          (n) => n.elementUuid
+        )
+      )
+    )
+  ]);
+  const prevNode = nodeId ? prevMap[nodeId] : {};
+  const nextNode = {
+    elementUuid: nodeId,
+    parentUuid: null,
+    ...prevNode,
+    children: nextChildren,
+    subdirectoriesCount: nextChildren.length
+  };
+  const nextMap = Object.fromEntries([
+    ...Object.entries(prevMap).filter(([k, v], i) => !nonCopyUuids.has(k)),
+    ...nextChildren.map((n) => [n.elementUuid, n]),
+    ...refreshedUpNodes(prevMap, nextNode).map((n) => [n.elementUuid, n])
+  ]);
+  const nextRoots = nodeId === null ? nextChildren : prevRoots.map((r) => nextMap[r.elementUuid]);
+  return [nextRoots, nextMap];
+}
+function sameRights(a, b) {
+  if (!a && !b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  return a.isPrivate === b.isPrivate;
+}
+function flattenDownNodes(n, cef) {
+  const subs = cef(n);
+  if (subs.length === 0) {
+    return [n];
+  }
+  return Array.prototype.concat(
+    [n],
+    ...subs.map((sn) => flattenDownNodes(sn, cef))
+  );
+}
+function refreshedUpNodes(m, nn) {
+  if (!(nn == null ? void 0 : nn.elementUuid)) {
+    return [];
+  }
+  if (nn.parentUuid === null) {
+    return [nn];
+  }
+  const parent = m[nn.parentUuid];
+  const nextChildren = parent.children.map(
+    (c) => c.elementUuid === nn.elementUuid ? nn : c
+  );
+  const nextParent = { ...parent, children: nextChildren };
+  return [nn, ...refreshedUpNodes(m, nextParent)];
+}
+export {
+  DirectoryItemSelector as default
+};

package/dist/components/ElementSearchDialog/element-search-dialog.d.ts

@@ -0,0 +1,16 @@
+export default ElementSearchDialog;
+declare function ElementSearchDialog(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace ElementSearchDialog {
+    namespace propTypes {
+        const open: PropTypes.Validator<boolean>;
+        const onClose: PropTypes.Validator<(...args: any[]) => any>;
+        const searchingLabel: PropTypes.Requireable<string>;
+        const onSearchTermChange: PropTypes.Validator<(...args: any[]) => any>;
+        const onSelectionChange: PropTypes.Validator<(...args: any[]) => any>;
+        const elementsFound: PropTypes.Validator<any[]>;
+        const renderElement: PropTypes.Validator<(...args: any[]) => any>;
+        const searchTermDisabled: PropTypes.Requireable<boolean>;
+        const searchTermDisableReason: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';