@gridsuite/commons-ui 0.46.0 → 0.47.0

package/dist/components/TopBar/AboutDialog.js

@@ -0,0 +1,467 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useTheme, Dialog, useMediaQuery, DialogTitle, Collapse, Alert, Box, Fade, CircularProgress, Typography, DialogContent, Accordion, AccordionSummary, AccordionDetails, Grid, DialogActions, Button, Tooltip, Zoom, Stack, tooltipClasses } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import { Refresh, ExpandMore, Gavel, Apps, WidgetsOutlined, DnsOutlined, QuestionMark } from "@mui/icons-material";
+import { FormattedMessage } from "react-intl";
+import PropTypes from "prop-types";
+import { LogoText } from "./GridLogo.js";
+const styles = {
+  general: {
+    ".MuiAccordion-root": {
+      //dunno why the theme has the background as black in dark mode
+      bgcolor: "unset"
+    }
+  },
+  mainSection: { height: "5em" },
+  logoSection: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  mainInfos: {
+    textAlign: "center",
+    marginTop: 0
+  },
+  versionField: (isUnknown) => isUnknown ? {
+    fontSize: "1.5em",
+    fontWeight: "bold"
+  } : {
+    fontStyle: "italic"
+  },
+  detailsSection: {
+    ".MuiAccordionSummary-content > .MuiSvgIcon-root": {
+      marginRight: "0.5rem"
+    }
+  }
+};
+function getGlobalVersion(fnPromise, type, setData, setLoader) {
+  if (fnPromise) {
+    console.debug("Getting", type, "global version...");
+    return new Promise((resolve, reject) => {
+      if (setLoader) {
+        setLoader(true);
+      }
+      resolve();
+    }).then(() => fnPromise()).then(
+      (value) => {
+        console.debug(type, "global version is", value);
+        setData(value ?? null);
+      },
+      (reason) => {
+        console.debug(
+          type,
+          "global version isn't available",
+          reason
+        );
+        setData(null);
+      }
+    ).finally(() => {
+      if (setLoader) {
+        setLoader(false);
+      }
+    });
+  } else {
+    console.debug("No getter for global version");
+    setData(null);
+  }
+}
+const moduleTypeSort = {
+  app: 1,
+  server: 10,
+  other: 20
+};
+function compareModules(c1, c2) {
+  return [moduleTypeSort[c1.type] || 100] - [moduleTypeSort[c2.type] || 100] || (c1.name || "").localeCompare(c2.name || "");
+}
+const AboutDialog = ({
+  open,
+  onClose,
+  globalVersionPromise,
+  appName,
+  appVersion,
+  appGitTag,
+  appLicense,
+  additionalModulesPromise
+}) => {
+  const theme = useTheme();
+  const [isRefreshing, setRefreshState] = useState(false);
+  const [loadingGlobalVersion, setLoadingGlobalVersion] = useState(false);
+  const [showGlobalVersion, setShowGlobalVersion] = useState(false);
+  const [initialGlobalVersion, setInitialGlobalVersion] = useState(void 0);
+  useEffect(() => {
+    if (initialGlobalVersion === void 0) {
+      getGlobalVersion(
+        globalVersionPromise,
+        "Initial",
+        setInitialGlobalVersion,
+        void 0
+      );
+    }
+  }, [globalVersionPromise, initialGlobalVersion]);
+  const [actualGlobalVersion, setActualGlobalVersion] = useState(null);
+  useEffect(() => {
+    if (open) {
+      getGlobalVersion(
+        globalVersionPromise,
+        "Actual",
+        setActualGlobalVersion,
+        (loading) => {
+          setLoadingGlobalVersion(loading);
+          setShowGlobalVersion(false);
+        }
+      );
+    }
+  }, [open, globalVersionPromise]);
+  const [loadingAdditionalModules, setLoadingAdditionalModules] = useState(false);
+  const [modules, setModules] = useState(null);
+  useEffect(() => {
+    if (open) {
+      const currentApp = {
+        name: `Grid${appName}`,
+        type: "app",
+        version: appVersion,
+        gitTag: appGitTag,
+        license: appLicense
+      };
+      (additionalModulesPromise ? Promise.resolve(setLoadingAdditionalModules(true)).then(
+        () => additionalModulesPromise()
+      ) : Promise.reject(new Error("no getter"))).then(
+        (values) => Array.isArray(values) ? values : [],
+        (reason) => []
+      ).then((values) => {
+        setModules([currentApp, ...values]);
+      }).finally(() => setLoadingAdditionalModules(false));
+    }
+  }, [
+    open,
+    additionalModulesPromise,
+    appName,
+    appVersion,
+    appGitTag,
+    appLicense
+  ]);
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      onClose: handleClose,
+      open,
+      fullWidth: true,
+      maxWidth: "md",
+      fullScreen: useMediaQuery(theme.breakpoints.down("md")),
+      sx: styles.general,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      TransitionProps: {
+        onExited: (node) => {
+          setModules(null);
+          setActualGlobalVersion(null);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { id: "alert-dialog-title", children: [
+          /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/title" }),
+          initialGlobalVersion !== void 0 && initialGlobalVersion !== null && actualGlobalVersion !== null && initialGlobalVersion !== actualGlobalVersion && /* @__PURE__ */ jsx(Collapse, { in: open, children: /* @__PURE__ */ jsx(
+            Alert,
+            {
+              severity: "warning",
+              variant: "outlined",
+              action: /* @__PURE__ */ jsx(
+                LoadingButton,
+                {
+                  color: "inherit",
+                  size: "small",
+                  startIcon: /* @__PURE__ */ jsx(Refresh, { fontSize: "small" }),
+                  loadingPosition: "start",
+                  loading: isRefreshing,
+                  onClick: () => {
+                    setRefreshState(true);
+                    window.location.reload();
+                  },
+                  children: /* @__PURE__ */ jsx(FormattedMessage, { id: "refresh" })
+                }
+              ),
+              sx: { marginBottom: 2 },
+              children: /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/alert-running-old-version-msg" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Box, { sx: styles.mainSection, children: [
+            /* @__PURE__ */ jsx(Box, { sx: styles.logoSection, children: /* @__PURE__ */ jsx(
+              LogoText,
+              {
+                appName: "Suite",
+                appColor: theme.palette.grey["500"]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Box, { sx: styles.mainInfos, children: [
+              /* @__PURE__ */ jsx(
+                Fade,
+                {
+                  in: loadingGlobalVersion,
+                  appear: true,
+                  unmountOnExit: true,
+                  onExited: (node) => setShowGlobalVersion(true),
+                  children: /* @__PURE__ */ jsx(CircularProgress, {})
+                }
+              ),
+              showGlobalVersion && /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "about-dialog/version",
+                  defaultMessage: "Version {version}",
+                  values: {
+                    version: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        component: "span",
+                        sx: styles.versionField(
+                          !loadingGlobalVersion && actualGlobalVersion
+                        ),
+                        children: actualGlobalVersion || "unknown"
+                      }
+                    )
+                  }
+                }
+              ) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(DialogContent, { id: "alert-dialog-description", children: /* @__PURE__ */ jsxs(Box, { sx: styles.detailsSection, children: [
+          /* @__PURE__ */ jsxs(
+            Accordion,
+            {
+              disableGutters: true,
+              variant: "outlined",
+              disabled: true,
+              sx: { display: "none" },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  AccordionSummary,
+                  {
+                    expandIcon: /* @__PURE__ */ jsx(ExpandMore, {}),
+                    "aria-controls": "panel1-content",
+                    id: "panel1-header",
+                    children: [
+                      /* @__PURE__ */ jsx(Gavel, { fontSize: "small" }),
+                      /* @__PURE__ */ jsx(Typography, { sx: { width: "33%", flexShrink: 0 }, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/license" }) }),
+                      /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: appLicense })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(AccordionDetails, { children: "license app summary text" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Accordion,
+            {
+              disableGutters: true,
+              variant: "outlined",
+              TransitionProps: { unmountOnExit: true },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  AccordionSummary,
+                  {
+                    expandIcon: /* @__PURE__ */ jsx(ExpandMore, {}),
+                    "aria-controls": "panel2-content",
+                    id: "panel2-header",
+                    children: [
+                      /* @__PURE__ */ jsx(Apps, { fontSize: "small" }),
+                      /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/modules-section" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Grid, { container: true, sx: { pl: 2 }, spacing: 1, children: loadingAdditionalModules ? /* @__PURE__ */ jsx(
+                  Grid,
+                  {
+                    item: true,
+                    xs: true,
+                    display: "inline-flex",
+                    justifyContent: "center",
+                    children: /* @__PURE__ */ jsx(CircularProgress, { color: "inherit" })
+                  }
+                ) : Array.isArray(modules) && /* @__PURE__ */ jsx(Fragment, { children: [...modules].sort(compareModules).map((module, idx) => /* @__PURE__ */ jsx(
+                  Module,
+                  {
+                    type: module.type,
+                    name: module.name,
+                    version: module.version,
+                    gitTag: module.gitTag,
+                    license: module.license
+                  },
+                  `module-${idx}`
+                )) }) || /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    color: (theme2) => theme2.palette.error.main,
+                    children: "Error"
+                  }
+                ) }) })
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, autoFocus: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "close" }) }) })
+      ]
+    }
+  );
+};
+AboutDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+  appName: PropTypes.string.isRequired,
+  appVersion: PropTypes.string,
+  appGitTag: PropTypes.string,
+  appLicense: PropTypes.string,
+  globalVersionPromise: PropTypes.func,
+  additionalModulesPromise: PropTypes.func
+};
+const moduleStyles = {
+  icons: {
+    flexGrow: 0,
+    position: "relative",
+    top: "4px",
+    flexShrink: 0
+  },
+  version: {
+    flexGrow: 0,
+    alignSelf: "flex-end",
+    flexShrink: 0
+  },
+  tooltip: (theme) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      border: "1px solid #dadde9",
+      boxShadow: theme.shadows[1]
+    }
+  }),
+  tooltipDetails: {
+    display: "grid",
+    gridTemplateColumns: "max-content auto",
+    margin: 0,
+    dt: {
+      gridColumnStart: 1,
+      "&:after": {
+        content: '" :"'
+      }
+    },
+    dd: {
+      gridColumnStart: 2,
+      paddingLeft: "0.5em"
+    }
+  }
+};
+const ModuleTypesIcons = {
+  app: /* @__PURE__ */ jsx(
+    WidgetsOutlined,
+    {
+      sx: moduleStyles.icons,
+      fontSize: "small",
+      color: "primary"
+    }
+  ),
+  server: /* @__PURE__ */ jsx(
+    DnsOutlined,
+    {
+      sx: moduleStyles.icons,
+      fontSize: "small",
+      color: "secondary"
+    }
+  ),
+  other: /* @__PURE__ */ jsx(QuestionMark, { sx: moduleStyles.icons, fontSize: "small" })
+};
+function insensitiveCaseCompare(str, obj) {
+  return str.localeCompare(obj, void 0, {
+    sensitivity: "base"
+  });
+}
+function tooltipTypeLabel(type) {
+  if (insensitiveCaseCompare("app", type) === 0) {
+    return "about-dialog/module-tooltip-app";
+  } else if (insensitiveCaseCompare("server", type) === 0) {
+    return "about-dialog/module-tooltip-server";
+  } else {
+    return "about-dialog/module-tooltip-other";
+  }
+}
+const Module = ({ type, name, version, gitTag, license }) => {
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      item: true,
+      xs: 12,
+      sm: 6,
+      md: 4,
+      sx: {
+        ".MuiTypography-root": {
+          minWidth: "3em"
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          TransitionComponent: Zoom,
+          enterDelay: 2500,
+          enterNextDelay: 350,
+          leaveDelay: 200,
+          placement: "bottom-start",
+          arrow: true,
+          sx: moduleStyles.tooltip,
+          title: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", children: name || "<?>" }),
+            /* @__PURE__ */ jsxs(Box, { component: "dl", sx: moduleStyles.tooltipDetails, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "dt", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/label-type" }) }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "dd", children: /* @__PURE__ */ jsx(FormattedMessage, { id: tooltipTypeLabel(type) }) }),
+              version && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "dt", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/label-version" }) }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "dd", children: version })
+              ] }),
+              gitTag && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "dt", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/label-git-version" }) }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "dd", children: gitTag })
+              ] })
+            ] })
+          ] }),
+          children: /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              justifyContent: "flex-start",
+              alignItems: "baseline",
+              spacing: 1,
+              children: [
+                ModuleTypesIcons[type] || ModuleTypesIcons["other"],
+                /* @__PURE__ */ jsx(Typography, { display: "inline", noWrap: true, children: name || "<?>" }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    color: (theme) => theme.palette.text.secondary,
+                    display: "inline",
+                    noWrap: true,
+                    sx: moduleStyles.version,
+                    children: gitTag || version || null
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+Module.propTypes = {
+  type: PropTypes.string,
+  name: PropTypes.string,
+  version: PropTypes.string,
+  gitTag: PropTypes.string,
+  license: PropTypes.string
+};
+export {
+  AboutDialog as default
+};

package/dist/components/TopBar/GridLogo.js

@@ -0,0 +1,71 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import { Box, Typography } from "@mui/material";
+import { BrokenImage } from "@mui/icons-material";
+import { mergeSx } from "../../utils/styles.js";
+import PropTypes from "prop-types";
+const styles = {
+  logo: {
+    flexShrink: 0,
+    width: 48,
+    height: 48,
+    marginBottom: "8px"
+  },
+  title: {
+    marginLeft: "18px"
+  },
+  clickable: {
+    cursor: "pointer"
+  }
+};
+const GridLogo = ({ appLogo, appName, appColor, onClick }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: mergeSx(styles.logo, onClick && styles.clickable),
+        onClick,
+        children: appLogo || /* @__PURE__ */ jsx(BrokenImage, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LogoText,
+      {
+        appName,
+        appColor,
+        onClick,
+        style: styles.title
+      }
+    )
+  ] });
+};
+GridLogo.propTypes = {
+  appLogo: PropTypes.element,
+  appName: PropTypes.string.isRequired,
+  appColor: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};
+const LogoText = ({ appName, appColor, style, onClick }) => {
+  return /* @__PURE__ */ jsxs(
+    Typography,
+    {
+      variant: "h4",
+      sx: mergeSx(style, onClick && styles.clickable),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: "bold" }, children: "Grid" }),
+        /* @__PURE__ */ jsx("span", { style: { color: appColor }, children: appName })
+      ]
+    }
+  );
+};
+LogoText.propTypes = {
+  appName: PropTypes.string.isRequired,
+  appColor: PropTypes.string.isRequired,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  onClick: PropTypes.func
+};
+export {
+  LogoText,
+  GridLogo as default
+};