@gridsuite/commons-ui 0.46.0 → 0.47.0

package/dist/components/MultipleSelectionDialog/MultipleSelectionDialog.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Dialog, DialogTitle, DialogContent, Grid, FormControlLabel, Checkbox, List, DialogActions, Button } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import React, { useState } from "react";
+const MultipleSelectionDialog = ({
+  options,
+  selectedOptions,
+  open,
+  getOptionLabel,
+  handleClose,
+  handleValidate,
+  titleId
+}) => {
+  const [selectedIds, setSelectedIds] = useState(selectedOptions ?? []);
+  const handleSelectAll = () => {
+    if (selectedIds.length !== options.length) {
+      setSelectedIds(options);
+    } else {
+      setSelectedIds([]);
+    }
+  };
+  const handleOptionSelection = (option) => {
+    setSelectedIds((oldValues) => {
+      if (oldValues.includes(option)) {
+        return oldValues.filter((o) => o !== option);
+      }
+      return [...oldValues, option];
+    });
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { open, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: titleId }),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          label: /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: "multiple_selection_dialog/selectAll"
+            }
+          ),
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selectedIds.length === options.length,
+              indeterminate: !!selectedIds.length && selectedIds.length !== options.length,
+              onChange: handleSelectAll
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(List, { children: options.map((option) => {
+        const optionId = (option == null ? void 0 : option.id) ?? option;
+        const label = getOptionLabel(option);
+        return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            label,
+            control: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selectedIds.includes(
+                  optionId
+                ),
+                onChange: () => handleOptionSelection(
+                  optionId
+                )
+              }
+            )
+          }
+        ) }) }, optionId);
+      }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogActions, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => handleClose(), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "multiple_selection_dialog/cancel" }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => handleValidate(selectedIds), children: /* @__PURE__ */ jsx(
+        FormattedMessage,
+        {
+          id: "multiple_selection_dialog/validate"
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  MultipleSelectionDialog as default
+};

package/dist/components/OverflowableText/overflowable-text.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useLayoutEffect } from "react";
+import { Tooltip, Box } from "@mui/material";
+import PropTypes from "prop-types";
+import { styled } from "@mui/system";
+const overflowStyle = {
+  overflow: {
+    display: "inline-block",
+    whiteSpace: "pre",
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  },
+  tooltip: {
+    whiteSpace: "pre",
+    width: "fit-content",
+    maxWidth: "fit-content"
+  }
+};
+const OverflowableText = styled(
+  ({ text, tooltipStyle, tooltipSx, className, children, ...props }) => {
+    var _a, _b;
+    const element = useRef();
+    const [overflowed, setOverflowed] = useState(false);
+    const checkOverflow = useCallback(() => {
+      if (!element.current) {
+        return;
+      }
+      setOverflowed(
+        element.current.scrollWidth > element.current.clientWidth
+      );
+    }, [setOverflowed, element]);
+    useLayoutEffect(() => {
+      checkOverflow();
+    }, [
+      checkOverflow,
+      text,
+      (_a = element.current) == null ? void 0 : _a.scrollWidth,
+      (_b = element.current) == null ? void 0 : _b.clientWidth
+    ]);
+    const defaultTooltipSx = !tooltipStyle ? overflowStyle.tooltip : false;
+    const finalTooltipSx = tooltipSx || defaultTooltipSx;
+    const tooltipStyleProps = {
+      ...tooltipStyle && { classes: { tooltip: tooltipStyle } },
+      ...finalTooltipSx && {
+        slotProps: { tooltip: { sx: finalTooltipSx } }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: text || "",
+        disableHoverListener: !overflowed,
+        ...tooltipStyleProps,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ...props,
+            ref: element,
+            children: children || text,
+            className,
+            sx: overflowStyle.overflow
+          }
+        )
+      }
+    );
+  }
+)({});
+OverflowableText.propTypes = {
+  children: PropTypes.array,
+  text: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node
+  ]),
+  tooltipStyle: PropTypes.string,
+  tooltipSx: PropTypes.object,
+  sx: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array,
+    PropTypes.func
+  ]),
+  className: PropTypes.string
+};
+export {
+  OverflowableText,
+  OverflowableText as default
+};

package/dist/components/ReportViewer/filter-button.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Box, IconButton } from "@mui/material";
+import { Menu } from "@mui/icons-material";
+import { MultiSelectList } from "./multi-select-list.js";
+const styles = {
+  notificationDot: {
+    height: "6px",
+    width: "6px",
+    backgroundColor: "#cc70a0",
+    borderRadius: "50%",
+    position: "absolute",
+    top: "5px",
+    left: "23px"
+  },
+  container: {
+    position: "relative"
+  },
+  icon: {
+    width: "0.7em",
+    height: "0.7em"
+  }
+};
+const FilterButton = ({ selectedItems, setSelectedItems }) => {
+  const [initialState] = useState(selectedItems);
+  const [anchorEl, setAnchorEl] = useState();
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleChange = (event) => {
+    setSelectedItems((previousSelection) => {
+      return {
+        ...previousSelection,
+        [event.target.name]: !selectedItems[event.target.name]
+      };
+    });
+  };
+  const isInitialStateModified = useMemo(() => {
+    return Object.keys(selectedItems).some(
+      (key) => initialState[key] !== selectedItems[key]
+    );
+  }, [initialState, selectedItems]);
+  return /* @__PURE__ */ jsxs(Box, { sx: styles.container, children: [
+    /* @__PURE__ */ jsxs(IconButton, { onClick: handleClick, children: [
+      /* @__PURE__ */ jsx(Menu, { sx: styles.icon }),
+      isInitialStateModified && /* @__PURE__ */ jsx(Box, { sx: styles.notificationDot })
+    ] }),
+    /* @__PURE__ */ jsx(
+      MultiSelectList,
+      {
+        selectedItems,
+        handleChange,
+        handleClose,
+        anchor: anchorEl
+      }
+    )
+  ] });
+};
+export {
+  FilterButton
+};

package/dist/components/ReportViewer/log-report-item.js

@@ -0,0 +1,95 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const _LogReportItem = class _LogReportItem {
+  static resolveTemplateMessage(templateMessage, templateValues) {
+    const templateVars = {};
+    for (const [key, value] of Object.entries(templateValues)) {
+      templateVars[key] = value.value;
+    }
+    return templateMessage.replace(/\${([^{}]*)}/g, function(a, b) {
+      let r = templateVars[b];
+      return typeof r === "string" || typeof r === "number" ? r : a;
+    });
+  }
+  constructor(jsonReport, reportId) {
+    this.key = jsonReport.reportKey;
+    this.log = _LogReportItem.resolveTemplateMessage(
+      jsonReport.defaultMessage,
+      jsonReport.values
+    );
+    this.reportId = reportId;
+    this.severity = this.initSeverity(jsonReport.values.reportSeverity);
+  }
+  getLog() {
+    return this.log;
+  }
+  getReportId() {
+    return this.reportId;
+  }
+  getSeverity() {
+    return this.severity;
+  }
+  getSeverityName() {
+    return this.severity.name;
+  }
+  getColorName() {
+    return this.severity.colorName;
+  }
+  getColorHexCode() {
+    return this.severity.colorHexCode;
+  }
+  initSeverity(jsonSeverity) {
+    let severity = _LogReportItem.SEVERITY.UNKNOWN;
+    if (!jsonSeverity) {
+      return severity;
+    }
+    Object.values(_LogReportItem.SEVERITY).some((value) => {
+      let severityFound = jsonSeverity.value.includes(value.name);
+      if (severityFound) {
+        severity = value;
+      }
+      return severityFound;
+    });
+    return severity;
+  }
+};
+__publicField(_LogReportItem, "SEVERITY", {
+  UNKNOWN: {
+    name: "UNKNOWN",
+    level: 0,
+    colorName: "cornflowerblue",
+    colorHexCode: "#6495ED"
+  },
+  INFO: {
+    name: "INFO",
+    level: 1,
+    colorName: "mediumseagreen",
+    colorHexCode: "#3CB371"
+  },
+  WARN: {
+    name: "WARN",
+    level: 2,
+    colorName: "orange",
+    colorHexCode: "#FFA500"
+  },
+  ERROR: {
+    name: "ERROR",
+    level: 3,
+    colorName: "crimson",
+    colorHexCode: "#DC143C"
+  },
+  FATAL: {
+    name: "FATAL",
+    level: 4,
+    colorName: "mediumorchid",
+    colorHexCode: "#BA55D3"
+  }
+});
+let LogReportItem = _LogReportItem;
+export {
+  LogReportItem as default
+};

package/dist/components/ReportViewer/log-report.js

@@ -0,0 +1,49 @@
+import LogReportItem from "./log-report-item.js";
+import { v4 } from "uuid";
+class LogReport {
+  constructor(jsonReporter, parentReportId) {
+    this.id = v4();
+    this.key = jsonReporter.taskKey;
+    this.title = LogReportItem.resolveTemplateMessage(
+      jsonReporter.defaultName,
+      jsonReporter.taskValues
+    );
+    this.subReports = [];
+    this.logs = [];
+    this.parentReportId = parentReportId;
+    this.init(jsonReporter);
+  }
+  getId() {
+    return this.id;
+  }
+  getTitle() {
+    return this.title;
+  }
+  getSubReports() {
+    return this.subReports;
+  }
+  getLogs() {
+    return this.logs;
+  }
+  getAllLogs() {
+    return this.getLogs().concat(
+      this.getSubReports().flatMap((r) => r.getAllLogs())
+    );
+  }
+  init(jsonReporter) {
+    jsonReporter.subReporters.map(
+      (value) => this.subReports.push(new LogReport(value, this.id))
+    );
+    jsonReporter.reports.map(
+      (value) => this.logs.push(new LogReportItem(value, this.id))
+    );
+  }
+  getHighestSeverity(currentSeverity = LogReportItem.SEVERITY.UNKNOWN) {
+    let reduceFct = (p, c) => p.level < c.level ? c : p;
+    let highestSeverity = this.getLogs().map((r) => r.getSeverity()).reduce(reduceFct, currentSeverity);
+    return this.getSubReports().map((r) => r.getHighestSeverity(highestSeverity)).reduce(reduceFct, highestSeverity);
+  }
+}
+export {
+  LogReport as default
+};

package/dist/components/ReportViewer/log-table.js

@@ -0,0 +1,131 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback } from "react";
+import { useIntl } from "react-intl";
+import { useTheme, TableCell } from "@mui/material";
+import { styled } from "@mui/system";
+import MuiVirtualizedTable from "../MuiVirtualizedTable/MuiVirtualizedTable.js";
+import { FilterButton } from "./filter-button.js";
+const SEVERITY_COLUMN_FIXED_WIDTH = 115;
+const styles = {
+  flexContainer: {
+    display: "flex",
+    alignItems: "center",
+    boxSizing: "border-box"
+  },
+  table: (theme) => ({
+    // temporary right-to-left patch, waiting for
+    // https://github.com/bvaughn/react-virtualized/issues/454
+    "& .ReactVirtualized__Table__headerRow": {
+      flip: false,
+      paddingRight: theme.direction === "rtl" ? "0 !important" : void 0
+    }
+  }),
+  header: { variant: "header" }
+};
+const VirtualizedTable = styled(MuiVirtualizedTable)(styles);
+const LogTable = ({
+  logs,
+  onRowClick,
+  selectedSeverity,
+  setSelectedSeverity
+}) => {
+  const intl = useIntl();
+  const theme = useTheme();
+  const [selectedRowIndex, setSelectedRowIndex] = useState(-1);
+  const severityCellRender = (cellData) => {
+    return /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        component: "div",
+        variant: "body",
+        style: {
+          display: "flex",
+          flex: "1",
+          backgroundColor: cellData.rowData.backgroundColor
+        },
+        align: "center",
+        children: cellData.rowData.severity
+      }
+    );
+  };
+  const COLUMNS_DEFINITIONS = [
+    {
+      label: intl.formatMessage({ id: "report_viewer/severity" }).toUpperCase(),
+      id: "severity",
+      dataKey: "severity",
+      maxWidth: SEVERITY_COLUMN_FIXED_WIDTH,
+      minWidth: SEVERITY_COLUMN_FIXED_WIDTH,
+      cellRenderer: severityCellRender,
+      extra: /* @__PURE__ */ jsx(
+        FilterButton,
+        {
+          selectedItems: selectedSeverity,
+          setSelectedItems: setSelectedSeverity
+        }
+      )
+    },
+    {
+      label: intl.formatMessage({ id: "report_viewer/message" }).toUpperCase(),
+      id: "message",
+      dataKey: "message"
+    }
+  ];
+  const generateTableColumns = () => {
+    return Object.values(COLUMNS_DEFINITIONS).map((c) => {
+      return c;
+    });
+  };
+  const generateTableRows = () => {
+    return logs.map((log) => {
+      return {
+        severity: log.getSeverityName(),
+        message: log.getLog(),
+        backgroundColor: log.getColorName(),
+        reportId: log.getReportId()
+      };
+    });
+  };
+  const handleRowClick = (event) => {
+    setSelectedRowIndex(event.index);
+    onRowClick(event.rowData);
+  };
+  const rowStyleFormat = (row) => {
+    if (row.index < 0) {
+      return;
+    }
+    if (selectedRowIndex === row.index) {
+      return {
+        backgroundColor: theme.palette.action.selected
+      };
+    }
+  };
+  useEffect(() => {
+    setSelectedRowIndex(-1);
+  }, [logs]);
+  const filter = useCallback(
+    (row) => {
+      return row.severity && Object.entries(selectedSeverity).some(
+        ([key, value]) => key === row.severity && value
+      );
+    },
+    [selectedSeverity]
+  );
+  return (
+    //TODO do we need to useMemo/useCallback these props to avoid rerenders ?
+    /* @__PURE__ */ jsx(
+      VirtualizedTable,
+      {
+        columns: generateTableColumns(),
+        rows: generateTableRows(),
+        sortable: false,
+        onRowClick: handleRowClick,
+        rowStyle: rowStyleFormat,
+        filter
+      }
+    )
+  );
+};
+const LogTable$1 = memo(LogTable);
+export {
+  LogTable$1 as default
+};

package/dist/components/ReportViewer/multi-select-list.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Menu, MenuItem, FormControlLabel, Checkbox } from "@mui/material";
+const styles = {
+  label: {
+    width: "100%",
+    margin: 0
+  },
+  menuItem: {
+    padding: "0 10px 0 0"
+  }
+};
+const MultiSelectList = ({
+  selectedItems,
+  handleChange,
+  handleClose,
+  anchor
+}) => {
+  const open = Boolean(anchor);
+  return /* @__PURE__ */ jsx(Menu, { open, onClose: handleClose, anchorEl: anchor, children: Object.entries(selectedItems).map(([key, value]) => {
+    return /* @__PURE__ */ jsx(MenuItem, { sx: styles.menuItem, children: /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: value,
+            onChange: handleChange,
+            name: key
+          }
+        ),
+        label: key,
+        sx: styles.label
+      }
+    ) }, key);
+  }) });
+};
+export {
+  MultiSelectList
+};

package/dist/components/ReportViewer/report-item.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Box, Typography } from "@mui/material";
+import { styled, alpha } from "@mui/system";
+import PropTypes from "prop-types";
+import { TreeItem } from "@mui/lab";
+import { Label } from "@mui/icons-material";
+import ReportTreeViewContext from "./report-tree-view-context.js";
+const styles = {
+  root: (theme) => ({
+    color: theme.palette.text.secondary,
+    "&:hover > .MuiTreeItem-content": {
+      backgroundColor: theme.palette.action.hover
+    }
+  }),
+  content: (theme) => ({
+    color: theme.palette.text.secondary,
+    borderRadius: theme.spacing(2),
+    width: "fit-content",
+    paddingRight: theme.spacing(1),
+    fontWeight: theme.typography.fontWeightMedium,
+    "&.Mui-expanded": {
+      fontWeight: theme.typography.fontWeightRegular
+    },
+    /* &.MuiTreeItem-content.Mui-focused to increase specifity because mui5 has a rule for &.Mui-selected.Mui-focused */
+    "&.MuiTreeItem-content.Mui-focused, &.Mui-selected": {
+      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
+      color: "var(--tree-view-color)"
+    },
+    // same as mui v4 behavior on label text only right after clicking in contrast to after moving away with arrow keys.
+    "&.Mui-selected .MuiTreeItem-label:hover, &.Mui-selected.Mui-focused .MuiTreeItem-label": {
+      borderRadius: theme.spacing(2),
+      backgroundColor: alpha(
+        theme.palette.primary.main,
+        theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity
+      )
+    },
+    "&.Mui-focused .MuiTreeItem-label, &:hover .MuiTreeItem-label, &Mui-selected .MuiTreeItem-label": {
+      backgroundColor: "transparent"
+    }
+  }),
+  group: (theme) => ({
+    marginLeft: "10px",
+    "& .MuiTreeItem-content": {
+      paddingLeft: theme.spacing(2)
+    }
+  }),
+  expanded: {},
+  selected: {},
+  label: {
+    fontWeight: "inherit",
+    color: "inherit"
+  },
+  labelRoot: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0.5, 0)
+  }),
+  labelRootHighlighted: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0.5, 0),
+    backgroundColor: theme.palette.action.selected
+  }),
+  labelIcon: (theme) => ({
+    marginRight: theme.spacing(1)
+  }),
+  labelText: (theme) => ({
+    fontWeight: "inherit",
+    marginRight: theme.spacing(2)
+  })
+};
+const ReportItem = (props) => {
+  const { isHighlighted } = useContext(ReportTreeViewContext);
+  const highlighted = isHighlighted ? isHighlighted(props.nodeId) : false;
+  const { labelText, labelIconColor, className, ...other } = props;
+  return /* @__PURE__ */ jsx(
+    TreeItem,
+    {
+      className,
+      sx: {
+        "&": styles.root,
+        "& .MuiTreeItem-content": styles.content,
+        "& .Mui-expanded": styles.expanded,
+        "& .Mui-selected": styles.selected,
+        "& .MuiTreeItem-group": styles.group,
+        "& .MuiTreeItem-label": styles.label
+      },
+      label: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: highlighted ? styles.labelRootHighlighted : styles.labelRoot,
+          children: [
+            /* @__PURE__ */ jsx(Label, { htmlColor: labelIconColor, sx: styles.labelIcon }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: styles.labelText, children: labelText })
+          ]
+        }
+      ),
+      ...other
+    }
+  );
+};
+ReportItem.propTypes = {
+  bgColor: PropTypes.string,
+  color: PropTypes.string,
+  labelInfo: PropTypes.string,
+  labelText: PropTypes.string.isRequired
+};
+const ReportItem$1 = styled(ReportItem)({});
+export {
+  ReportItem$1 as default
+};

package/dist/components/ReportViewer/report-tree-view-context.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const ReportTreeViewContext = createContext({});
+if (process.env.NODE_ENV !== "production") {
+  ReportTreeViewContext.displayName = "ReportTreeViewContext";
+}
+export {
+  ReportTreeViewContext as default
+};