@gridsuite/commons-ui 0.45.0 → 0.47.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.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/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/ElementSearchDialog/element-search-dialog.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useCallback } from "react";
+import { Dialog, DialogContent, Autocomplete, TextField } from "@mui/material";
+import PropTypes from "prop-types";
+import { SearchOff, Search } from "@mui/icons-material";
+import { useIntl } from "react-intl";
+const ElementSearchDialog = (props) => {
+  const intl = useIntl();
+  const {
+    open,
+    onClose,
+    searchingLabel,
+    onSearchTermChange,
+    onSelectionChange,
+    elementsFound,
+    // [{ label: aLabel, id: anId }, ...]
+    renderElement,
+    searchTermDisabled,
+    searchTermDisableReason
+  } = props;
+  const [expanded, setExpanded] = useState(false);
+  const [value, setValue] = useState(
+    searchTermDisabled && searchTermDisableReason ? { label: searchTermDisableReason } : null
+  );
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setLoading(false);
+  }, [elementsFound]);
+  useEffect(() => {
+    if (!searchTermDisabled || !searchTermDisableReason) {
+      setValue(null);
+    } else {
+      setValue({ label: searchTermDisableReason });
+    }
+  }, [searchTermDisabled, searchTermDisableReason]);
+  useEffect(() => {
+    setValue((old) => !open ? null : old);
+  }, [open]);
+  const handleSearchTermChange = (term) => {
+    if (term) {
+      setLoading(true);
+      onSearchTermChange(term);
+      setExpanded(true);
+      setValue({ label: term });
+    } else {
+      setExpanded(false);
+      setValue(null);
+    }
+  };
+  const handleClose = useCallback(() => {
+    setValue(null);
+    setExpanded(false);
+    onClose();
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: handleClose,
+      disableRestoreFocus: true,
+      "aria-labelledby": "dialog-title-search",
+      fullWidth: true,
+      children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          id: "element-search",
+          forcePopupIcon: false,
+          open: expanded,
+          onClose: () => {
+            setExpanded(false);
+          },
+          fullWidth: true,
+          freeSolo: true,
+          clearOnBlur: true,
+          onInputChange: (_event, value2) => {
+            if (!searchTermDisabled) {
+              handleSearchTermChange(value2);
+            }
+          },
+          onChange: (_event, newValue, reason) => {
+            if (reason === "selectOption") {
+              onSelectionChange(newValue);
+              setValue(newValue);
+            } else {
+              setValue(null);
+            }
+          },
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value2) => option.id === value2.id,
+          options: loading ? [] : elementsFound,
+          loading,
+          autoHighlight: true,
+          noOptionsText: intl.formatMessage({
+            id: "element_search/noResult"
+          }),
+          renderOption: (optionProps, element, { inputValue }) => renderElement({
+            ...optionProps,
+            element,
+            inputValue,
+            onClose: handleClose
+          }),
+          renderInput: (params) => /* @__PURE__ */ jsx(
+            TextField,
+            {
+              autoFocus: true,
+              ...params,
+              label: searchingLabel || intl.formatMessage({
+                id: "element_search/label"
+              }),
+              InputProps: {
+                ...params.InputProps,
+                startAdornment: /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                  searchTermDisabled ? /* @__PURE__ */ jsx(SearchOff, { color: "disabled" }) : /* @__PURE__ */ jsx(Search, { color: "disabled" }),
+                  params.InputProps.startAdornment
+                ] })
+              }
+            }
+          ),
+          value,
+          disabled: searchTermDisabled
+        }
+      ) })
+    }
+  );
+};
+ElementSearchDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  searchingLabel: PropTypes.string,
+  onSearchTermChange: PropTypes.func.isRequired,
+  onSelectionChange: PropTypes.func.isRequired,
+  elementsFound: PropTypes.array.isRequired,
+  renderElement: PropTypes.func.isRequired,
+  searchTermDisabled: PropTypes.bool,
+  searchTermDisableReason: PropTypes.string
+};
+export {
+  ElementSearchDialog as default
+};

package/dist/components/ElementSearchDialog/equipment-item.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./element-search-dialog.js";
+import { TagRenderer } from "./tag-renderer.js";
+import match from "autosuggest-highlight/match";
+import parse from "autosuggest-highlight/parse";
+import clsx from "clsx";
+import { FormattedMessage } from "react-intl";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+import "react";
+import { EQUIPMENT_TYPE } from "../../utils/EquipmentType.js";
+import { Box } from "@mui/material";
+import { mergeSx } from "../../utils/styles.js";
+const EquipmentItem = ({
+  inputValue,
+  suffixRenderer = TagRenderer,
+  element,
+  showsJustText = false,
+  ...props
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  let matches = match(element.label, inputValue, {
+    insideWords: true,
+    findAllOccurrences: true
+  });
+  let parts = parse(element.label, matches);
+  return /* @__PURE__ */ jsx("li", { ...props, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: (_a = props.classes) == null ? void 0 : _a.equipmentOption,
+      sx: (_b = props.styles) == null ? void 0 : _b.equipmentOption,
+      children: [
+        !showsJustText && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            className: clsx(
+              (_c = props.classes) == null ? void 0 : _c.equipmentTag,
+              (_d = props.classes) == null ? void 0 : _d.equipmentTypeTag
+            ),
+            sx: mergeSx(
+              (_e = props.styles) == null ? void 0 : _e.equipmentTag,
+              (_f = props.styles) == null ? void 0 : _f.equipmentTypeTag
+            ),
+            children: /* @__PURE__ */ jsx(
+              FormattedMessage,
+              {
+                id: EQUIPMENT_TYPE[element.type].tagLabel
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OverflowableText,
+          {
+            text: parts.map((e) => e.text).join(),
+            className: (_g = props.classes) == null ? void 0 : _g.result,
+            sx: (_h = props.styles) == null ? void 0 : _h.result,
+            children: parts.map((part, index) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontWeight: part.highlight ? "bold" : "inherit"
+                },
+                children: part.text
+              },
+              index
+            ))
+          }
+        ),
+        !showsJustText && suffixRenderer({ props, element })
+      ]
+    }
+  ) }, element.key);
+};
+export {
+  EquipmentItem
+};

package/dist/components/ElementSearchDialog/tag-renderer.js

@@ -0,0 +1,34 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+import clsx from "clsx";
+import "react";
+import { EQUIPMENT_TYPE } from "../../utils/EquipmentType.js";
+import PropTypes from "prop-types";
+import { mergeSx } from "../../utils/styles.js";
+const TagRenderer = ({ props, element }) => {
+  var _a, _b, _c, _d;
+  if (element.type !== EQUIPMENT_TYPE.SUBSTATION.name && element.type !== EQUIPMENT_TYPE.VOLTAGE_LEVEL.name) {
+    return /* @__PURE__ */ jsx(
+      OverflowableText,
+      {
+        text: element.voltageLevelLabel,
+        className: clsx(
+          (_a = props.classes) == null ? void 0 : _a.equipmentTag,
+          (_b = props.classes) == null ? void 0 : _b.equipmentVlTag
+        ),
+        sx: mergeSx(
+          (_c = props.styles) == null ? void 0 : _c.equipmentTag,
+          (_d = props.styles) == null ? void 0 : _d.equipmentVlTag
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+TagRenderer.propTypes = {
+  element: PropTypes.object,
+  props: PropTypes.object
+};
+export {
+  TagRenderer
+};