@gridsuite/commons-ui 0.46.0 → 0.48.0

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

@@ -0,0 +1,2 @@
+export { default, generateMuiVirtualizedTableClass } from "./MuiVirtualizedTable";
+export { KeyedColumnsRowIndexer, CHANGE_WAYS } from "./KeyedColumnsRowIndexer";

package/dist/components/MultipleSelectionDialog/MultipleSelectionDialog.d.ts

@@ -0,0 +1,10 @@
+export default MultipleSelectionDialog;
+declare function MultipleSelectionDialog({ options, selectedOptions, open, getOptionLabel, handleClose, handleValidate, titleId, }: {
+    options: any;
+    selectedOptions: any;
+    open: any;
+    getOptionLabel: any;
+    handleClose: any;
+    handleValidate: any;
+    titleId: any;
+}): import("react/jsx-runtime").JSX.Element;

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/MultipleSelectionDialog/index.d.ts

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

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

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

package/dist/components/OverflowableText/overflowable-text.d.ts

@@ -0,0 +1,2 @@
+export const OverflowableText: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export default OverflowableText;

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.d.ts

@@ -0,0 +1 @@
+export function FilterButton({ selectedItems, setSelectedItems }: Object): import("react/jsx-runtime").JSX.Element;

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/index.d.ts

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

package/dist/components/ReportViewer/log-report-item.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2021, 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/.
+ */
+export default class LogReportItem {
+    static SEVERITY: {
+        UNKNOWN: {
+            name: string;
+            level: number;
+            colorName: string;
+            colorHexCode: string;
+        };
+        INFO: {
+            name: string;
+            level: number;
+            colorName: string;
+            colorHexCode: string;
+        };
+        WARN: {
+            name: string;
+            level: number;
+            colorName: string;
+            colorHexCode: string;
+        };
+        ERROR: {
+            name: string;
+            level: number;
+            colorName: string;
+            colorHexCode: string;
+        };
+        FATAL: {
+            name: string;
+            level: number;
+            colorName: string;
+            colorHexCode: string;
+        };
+    };
+    static resolveTemplateMessage(templateMessage: any, templateValues: any): any;
+    constructor(jsonReport: any, reportId: any);
+    key: any;
+    log: any;
+    reportId: any;
+    severity: {
+        name: string;
+        level: number;
+        colorName: string;
+        colorHexCode: string;
+    };
+    getLog(): any;
+    getReportId(): any;
+    getSeverity(): {
+        name: string;
+        level: number;
+        colorName: string;
+        colorHexCode: string;
+    };
+    getSeverityName(): string;
+    getColorName(): string;
+    getColorHexCode(): string;
+    initSeverity(jsonSeverity: any): {
+        name: string;
+        level: number;
+        colorName: string;
+        colorHexCode: string;
+    };
+}

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.d.ts

@@ -0,0 +1,21 @@
+export default class LogReport {
+    constructor(jsonReporter: any, parentReportId: any);
+    id: any;
+    key: any;
+    title: any;
+    subReports: any[];
+    logs: any[];
+    parentReportId: any;
+    getId(): any;
+    getTitle(): any;
+    getSubReports(): any[];
+    getLogs(): any[];
+    getAllLogs(): any[];
+    init(jsonReporter: any): void;
+    getHighestSeverity(currentSeverity?: {
+        name: string;
+        level: number;
+        colorName: string;
+        colorHexCode: string;
+    }): any;
+}

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.d.ts

@@ -0,0 +1,8 @@
+declare const _default: React.MemoExoticComponent<({ logs, onRowClick, selectedSeverity, setSelectedSeverity, }: {
+    logs: any;
+    onRowClick: any;
+    selectedSeverity: any;
+    setSelectedSeverity: any;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+import React from 'react';

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.d.ts

@@ -0,0 +1 @@
+export function MultiSelectList({ selectedItems, handleChange, handleClose, anchor, }: Object): import("react/jsx-runtime").JSX.Element;

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
+};