@apia/dashboard-controller 3.0.8 → 3.0.10

package/dist/index.js

@@ -1,9 +1,9 @@
 import { ApiaApi, makeApiaUrl } from '@apia/api';
-import { EventEmitter, useMount, useImperativeComponentEvents, getLabel, makeImperativeComponent, parseXmlAsync, toBoolean, isChild, getSpecificParent, ucfirst, useLatest } from '@apia/util';
+import { EventEmitter, useMount, useImperativeComponentEvents, getLabel, makeImperativeComponent, parseXmlAsync, toBoolean, isChild, getSpecificParent, ucfirst, downloadUrl, useLatest } from '@apia/util';
 import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef, useDeferredValue, Suspense, lazy, Component, startTransition } from 'react';
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
 import { Icon } from '@apia/icons';
-import { spacing, responsive, getSpacingLayouts, spacingLayouts, Box, makeStyledComponent, Heading, Paragraph } from '@apia/theme';
+import { spacingLayouts, Box, getVariant, Heading, makeStyledComponent, Paragraph } from '@apia/theme';
 import { shallowEqual } from 'react-redux';
 import { createSlice, injectReducers, shallowEqual as shallowEqual$1 } from '@apia/store';
 import { IconButton, AutoEllipsis, SimpleButton } from '@apia/components';
@@ -214,18 +214,14 @@ function usePanelOnEvent(distinction, callback) {
   });
 }
 
-function changePanelTitle(panelId, newTitle) {
-  eventsController.fireEvent(
-    { panelId },
-    "changeTitle",
-    newTitle
-  );
+function changePanelTitle(identifier, newTitle) {
+  eventsController.fireEvent(identifier, "__changePanelTitle__", newTitle);
 }
 function usePanelChangeTitle() {
   const fireEvent = usePanelFireEvent();
   return useCallback(
     (newTitle) => {
-      fireEvent("changeTitle", newTitle);
+      fireEvent("__changePanelTitle__", newTitle);
     },
     [fireEvent]
   );
@@ -238,20 +234,22 @@ function changePanelFooter(panelId, footer) {
     footer
   );
 }
-function usePanelFooter(panelId, { initialData }) {
+function usePanelFooter({
+  initialData
+}) {
+  const identifier = usePanelIdentity();
   const [footer, setFooter] = useState(
     initialData?.footer?.footer?.text ? initialData?.footer?.footer : null
   );
   const handleFooterClick = useCallback(
     (ev) => {
-      console.log(ev.type);
       if (footer)
-        handleAction(panelId, ev, footer);
+        handleAction(identifier, ev, footer);
     },
-    [footer, panelId]
+    [footer, identifier]
   );
   usePanelOnEvent(
-    { eventType: "changeFooter", panelId },
+    { eventType: "changeFooter", panelId: identifier.panelId },
     (ev) => {
       if (!ev.payload.text)
         setFooter(null);
@@ -301,113 +299,6 @@ function useDashboardContext() {
   return context;
 }
 
-const defaultPanelWrapperStyles = {
-  pb: spacing(6),
-  "&:last-child": {
-    pb: 0
-  },
-  ".panel__container": {
-    background: "palette.background.paper",
-    border: "1px solid",
-    borderColor: "palette.gray.800",
-    display: "flex",
-    flexDirection: "column",
-    borderRadius: "panel",
-    boxShadow: "panel"
-  },
-  ".panel__icon": {
-    height: "24px",
-    width: "24px",
-    borderRadius: "100%",
-    transform: "scale(1.25)",
-    marginRight: "6px"
-  },
-  ".panel__header": {
-    alignItems: "center",
-    cursor: "grab",
-    display: "flex",
-    flexWrap: "nowrap",
-    fontWeight: "bold",
-    justifyContent: "space-between",
-    maxWidth: "100%",
-    overflow: "visible",
-    backgroundColor: "palette.secondary.light",
-    borderBottomRightRadius: "0px !important",
-    borderBottomLeftRadius: "0px !important",
-    pl: 4,
-    py: 4,
-    borderRadius: "panel",
-    ".panel__header__left": {
-      alignItems: "center",
-      display: "flex",
-      gap: 2,
-      overflow: "visible",
-      svg: {
-        color: "palette.error.dark"
-      }
-    },
-    "& > *": {
-      flexShrink: 0
-    },
-    ".panel__header__buttons": {
-      alignSelf: "end",
-      display: "flex",
-      flexGrow: 1,
-      fontWeight: "normal",
-      gap: 2,
-      justifyContent: "end",
-      right: 0,
-      background: "transparent",
-      pr: 3,
-      opacity: responsive({ 0: 1, 3: 0 }),
-      alignItems: "center",
-      pl: 3,
-      height: "24px",
-      button: {
-        width: "30px",
-        height: "30px"
-      }
-    }
-  },
-  ".panel__content": {
-    ...getSpacingLayouts()
-  },
-  ".panel__container:hover, .panel__container:focus, .panel__container:focus-within, .panel__container.isLoading": {
-    ".panel__header__buttons, .lastUpdate__wrapper": {
-      opacity: responsive({ 0: 1 })
-    }
-  },
-  ".panel__footer": {
-    display: "flex",
-    justifyContent: "space-between",
-    gap: spacing(3),
-    background: "palette.secondary.light",
-    px: 4,
-    py: 3,
-    color: "palette.text.primary",
-    borderRadius: "panel",
-    borderTopRightRadius: "0px",
-    borderTopLeftRadius: "0px",
-    overflow: "hidden",
-    alignItems: "center"
-  },
-  ".panel__iconButton, .lastUpdate__wrapper": {
-    transition: "opacity 300ms"
-  },
-  ".lastUpdate__wrapper": {
-    fontSize: 14,
-    opacity: 0,
-    flexShrink: 0
-  },
-  ".panel__footer__text": {
-    overflow: "hidden",
-    flexShrink: 1
-  },
-  "span.panel__title": {
-    flexShrink: "1 !important"
-  }
-};
-
 const RefreshButton = (props) => {
   const [isDisabled, setIsDisabled] = useState(false);
   const isLoading = usePanelIsLoading();
@@ -546,25 +437,23 @@ const PanelContextProvider = ({
 }) => {
   return /* @__PURE__ */ jsx(PanelContext.Provider, { value, children });
 };
-function useMakePanelContext(panelId, panelProps) {
+function useMakePanelContext(panelProps) {
+  const identifier = usePanelIdentity();
   const setTitle = useCallback(
     (newTitle) => {
-      changePanelTitle(panelId, newTitle);
+      changePanelTitle(identifier, newTitle);
     },
-    [panelId]
+    [identifier]
   );
   const { ref, setLayout } = usePanelContextLayout();
   const [title, setTitleState] = useState(panelProps.title);
   usePanelOnEvent(
-    { eventType: "changeTitle", panelId },
+    { eventType: "changeTitle", panelId: identifier.panelId },
     (ev) => {
       setTitleState(ev.payload);
     }
   );
-  const { footer, handleFooterClick } = usePanelFooter(
-    panelId,
-    panelProps.initialData
-  );
+  const { footer, handleFooterClick } = usePanelFooter(panelProps.initialData);
   const [footerContent, setFooterContent] = useState(null);
   const dispatch = usePanelActions();
   const hasRefreshedOnStartup = useRef(false);
@@ -575,14 +464,19 @@ function useMakePanelContext(panelId, panelProps) {
         hasRefreshedOnStartup.current = true;
         if (panelProps.refreshOnStart) {
           void dispatch({ action: "refresh" }).then(() => {
-            dashboard.bootstrapper.setPanelHasLoaded(panelId);
+            dashboard.bootstrapper.setPanelHasLoaded(identifier.panelId);
           });
         } else {
-          dashboard.bootstrapper.setPanelHasLoaded(panelId);
+          dashboard.bootstrapper.setPanelHasLoaded(identifier.panelId);
         }
       }
     },
-    [dashboard.bootstrapper, dispatch, panelId, panelProps.refreshOnStart]
+    [
+      dashboard.bootstrapper,
+      dispatch,
+      identifier.panelId,
+      panelProps.refreshOnStart
+    ]
   );
   const contextValue = useMemo(
     () => ({ setFooterContent, setTitle, setLayout, panelProps, setRef }),
@@ -654,64 +548,56 @@ const PanelFooter = ({
   ] }) });
 };
 
-const DefaultPanelWrapper = makeStyledComponent(
-  "DefaultPanelWrapper",
-  "layout.common.dashboards.panel",
-  defaultPanelWrapperStyles,
-  ({ children, ...props }) => {
-    const { panelId, panelName, panelType } = usePanelIdentity();
-    const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
-      panelId,
-      props
-    );
-    const panelTitleDescription = usePanelTitleDescription();
-    const panelImage = usePanelImage() ?? props.image;
-    const showHeader = props.showTitle || props.isConfigurable || props.isRefreshable || panelImage;
-    const isLoading = usePanelIsLoading();
-    return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: `panel__container ${isLoading ? "isLoading" : ""}`,
-        "data-panelname": panelName,
-        "data-paneltype": panelType,
-        "data-panelid": panelId,
-        children: [
-          showHeader && /* @__PURE__ */ jsxs("div", { draggable: props.canMove, className: `panel__header`, children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "panel__header__left",
-                sx: {
-                  maxWidth: "80%",
-                  overflow: "hidden",
-                  whiteSpace: "nowrap"
-                },
-                children: [
-                  panelImage && !panelImage.match("(^.+null$)") && /* @__PURE__ */ jsx("img", { src: panelImage, className: "panel__icon" }),
-                  /* @__PURE__ */ jsxs(AutoEllipsis, { children: [
-                    props.showTitle && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "panel__title",
-                        title: panelTitleDescription ?? title,
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(NetworkState, { title })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: `panel__header__buttons`, children: /* @__PURE__ */ jsx(PanelButtons, { ...props, id: panelId }) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "panel__content", children }),
-          /* @__PURE__ */ jsx(PanelFooter, { isRefreshable: props.isRefreshable, ...footerProps })
-        ]
-      }
-    ) });
-  }
-);
+const DefaultPanelWrapper = ({ children, ...props }) => {
+  const { panelId, panelName, panelType } = usePanelIdentity();
+  const { contextValue, title, ref, ...footerProps } = useMakePanelContext(props);
+  const panelTitleDescription = usePanelTitleDescription();
+  const panelImage = usePanelImage() ?? props.image;
+  const showHeader = props.showTitle || props.isConfigurable || props.isRefreshable || panelImage;
+  const isLoading = usePanelIsLoading();
+  return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.dashboards.panel"), children: /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `panel__container ${isLoading ? "isLoading" : ""}`,
+      "data-panelname": panelName,
+      "data-paneltype": panelType,
+      "data-panelid": panelId,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { draggable: props.canMove, className: `panel__header`, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "panel__header__left",
+              sx: {
+                maxWidth: "80%",
+                overflow: "hidden",
+                whiteSpace: "nowrap"
+              },
+              children: [
+                panelImage && !panelImage.match("(^.+null$)") && /* @__PURE__ */ jsx("img", { src: panelImage, className: "panel__icon" }),
+                /* @__PURE__ */ jsxs(AutoEllipsis, { children: [
+                  props.showTitle && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "panel__title",
+                      title: panelTitleDescription ?? title,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(NetworkState, { title })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `panel__header__buttons`, children: /* @__PURE__ */ jsx(PanelButtons, { ...props, id: panelId }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "panel__content", children }),
+        /* @__PURE__ */ jsx(PanelFooter, { isRefreshable: props.isRefreshable, ...footerProps })
+      ]
+    }
+  ) }) });
+};
 
 var __defProp$5 = Object.defineProperty;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -845,13 +731,43 @@ _removeSkeletons = new WeakMap();
 
 const PanelNotFound = () => {
   const props = usePanelIdentity();
+  useYieldPanelIsReady();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Heading, { children: [
     "Panel not found: ",
     props.panelType
   ] }) });
 };
 
+const ContainerNotFound = () => {
+  const props = usePanelIdentity();
+  return /* @__PURE__ */ jsxs(Heading, { children: [
+    "Container not found for panel: ",
+    props.panelName
+  ] });
+};
+
+const importedContainers = {};
 const importedPanels = {};
+function importContainer(path) {
+  if (!importedContainers[path])
+    importedContainers[path] = lazy(() => {
+      return new Promise((resolve) => {
+        import(
+          /* webpackChunkName: "[request]" */
+          /* webpackInclude: /\.tsx?$/ */
+          /* webpackPreload: true */
+          `/containers/${path}`
+        ).then((result) => {
+          resolve(result.default);
+        }).catch(() => {
+          resolve({
+            default: ContainerNotFound
+          });
+        });
+      });
+    });
+  return importedContainers[path];
+}
 function importPanel(path) {
   if (!importedPanels[path])
     importedPanels[path] = lazy(() => {
@@ -984,10 +900,7 @@ class DashboardPanel extends EventEmitter {
         __privateGet$3(this, _loaders).props();
       },
       initialData: () => {
-        const panel = this.getContainer();
-        const panelContent = panel.querySelector(
-          ".panel__content"
-        );
+        const panelContent = this.getContainer();
         const xml = panelContent.innerHTML.replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&amp;", "&");
         panelContent.innerHTML = "";
         this.initialData = parseXmlAsync(xml.replace(/<!--?[^>]+>/, ""));
@@ -1085,7 +998,7 @@ class DashboardPanel extends EventEmitter {
             this.dashboard.bootstrapper.SuspendPanelUntilDashbordReady,
             {
               panelId: this.id,
-              children: /* @__PURE__ */ jsx(PanelErrorBoundary, { children: isVisible ? /* @__PURE__ */ jsx(Element, { initialData: resolvedInitialData.initialData }) : null })
+              children: /* @__PURE__ */ jsx(PanelErrorBoundary, { children: isVisible ? /* @__PURE__ */ jsx(Element, { initialData: resolvedInitialData }) : null })
             }
           )
         }
@@ -1102,7 +1015,7 @@ class DashboardPanel extends EventEmitter {
           Element: importPanel(this.props.type)
         }
       ),
-      this.getContainer().querySelector(".panel__content"),
+      this.getContainer(),
       this.id
     );
   }
@@ -1765,9 +1678,14 @@ class Dashboard extends EventEmitter {
         "[data-panel]"
       );
       Array.from(panelsElements).forEach((current) => {
+        let container = __privateGet(this, _PanelContainer);
+        const customContainer = current.dataset.panelContainer;
+        if (customContainer) {
+          container = importContainer(current.dataset.panelContainer);
+        }
         const panel = new DashboardPanel({
           dashboard: this,
-          PanelContainer: __privateGet(this, _PanelContainer),
+          PanelContainer: container,
           id: current.dataset.id
         });
         let panelPath = panel.getParameters().PAR_SPA_PATH || "*";
@@ -1811,14 +1729,12 @@ class Dashboard extends EventEmitter {
         {
           route: new RegExp(`(?:/spa)?/(\\w+)`),
           callback: (result) => {
-            console.log("Dashboard", { scene: result[1] });
             this.loadScene(result[1]);
           }
         },
         {
           route: new RegExp(`/`),
           callback: () => {
-            console.log("Dashboard", { noScene: "/" });
             this.loadScene("/");
           }
         }
@@ -1952,7 +1868,7 @@ function firePanelAction(panelId, action, parameters, options) {
         startTransition(() => {
           if (result?.data?.title) {
             changePanelTitle(
-              panelId,
+              { panelId },
               result?.data?.title
             );
           }
@@ -1965,9 +1881,7 @@ function firePanelAction(panelId, action, parameters, options) {
           if (result?.data?.titleAction) {
             setPanelTitleAction(panelId, result?.data?.titleAction);
           }
-          if (result?.data?.image) {
-            setPanelImageAction(panelId, result?.data?.image);
-          }
+          setPanelImageAction(panelId, result?.data?.image ?? "");
           if (result?.data?.titleDescription) {
             setPanelTitleDescritpion(
               panelId,
@@ -1992,7 +1906,7 @@ function firePanelAction(panelId, action, parameters, options) {
   });
 }
 
-function handleAction(panelId, event, action) {
+function handleAction(panelIdentifier, event, action) {
   if (event.type === "dblclick" && action.actionSource === "DOUBLE_CLICK" || (event.type === "click" || event.type === "mousedown") && action.actionSource === "CLICK" || event.type === "keydown" && event.code === "Enter") {
     if (action?.action) {
       switch (action.actionBehavior) {
@@ -2006,20 +1920,28 @@ function handleAction(panelId, event, action) {
           break;
         case "OPEN_TAB":
           window.top?.tabsController.openTabByUrl(
-            action.actionNewTabTitle || action.text,
+            action.additionalData || action.text,
             action.action
           );
           break;
         case "RUN_ACTION":
           firePanelAction(
-            panelId,
+            panelIdentifier.panelId,
             action.action,
             {},
-            { requestConfig: {
-              handleLoad: true
-            } }
+            { requestConfig: { handleLoad: true } }
           );
           break;
+        case "FIRE_EVENT":
+          eventsController.fireEvent(
+            panelIdentifier,
+            action.action,
+            JSON.parse(action.additionalData)
+          );
+          break;
+        case "DOWNLOAD":
+          downloadUrl(action.action);
+          break;
         default:
           console.error("Unknown action behavior: ", action);
       }
@@ -2044,6 +1966,41 @@ function usePanelIsLoading() {
   return isLoading;
 }
 
+const useActionEventHandlers = () => {
+  const identifier = usePanelIdentity();
+  const onClick = useCallback(
+    (ev) => {
+      return (action) => {
+        if (action.actionSource !== "CLICK")
+          return;
+        handleAction(identifier, ev, action);
+      };
+    },
+    [identifier]
+  );
+  const onDoubleClick = useCallback(
+    (ev) => {
+      return (action) => {
+        if (action.actionSource !== "DOUBLE_CLICK")
+          return;
+        handleAction(identifier, ev, action);
+      };
+    },
+    [identifier]
+  );
+  const onKeyDown = useCallback(
+    (ev) => {
+      return (action) => {
+        if (ev.code !== "Enter")
+          return;
+        handleAction(identifier, ev, action);
+      };
+    },
+    [identifier]
+  );
+  return { onClick, onDoubleClick, onKeyDown };
+};
+
 const NetworkState = ({ title }) => {
   const isConnected = usePanelNetworkState();
   return /* @__PURE__ */ jsx(Fragment, { children: !isConnected && /* @__PURE__ */ jsx(
@@ -2070,10 +2027,7 @@ const LandingPagePanelWrapper = ({
   ...props
 }) => {
   const { panelId, panelName, panelType } = usePanelIdentity();
-  const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
-    panelId,
-    props
-  );
+  const { contextValue, title, ref, ...footerProps } = useMakePanelContext(props);
   const panelTitleAction = usePanelTitleAction();
   const panelTitleDescription = usePanelTitleDescription();
   const dashboard = useDashboardContext();
@@ -2107,6 +2061,11 @@ const LandingPagePanelWrapper = ({
   ) });
 };
 
+const EmptyPanelWrapper = (props) => {
+  const { contextValue } = useMakePanelContext(props);
+  return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: props.children });
+};
+
 const reducers = {};
 function initPanelTypeUpdater(panelType) {
   if (!reducers[panelType]) {
@@ -2235,5 +2194,5 @@ function createPanelStore(panelType, initialState, reducers) {
   return [usePanelDispatcher, useSelector];
 }
 
-export { Dashboard, LandingPagePanelWrapper, PanelIdentifier, PanelIdentifierContext, changePanelTitle, createPanelStore, eventsController, externalFirePanelAction, handleAction, store as parametersStore, saveParameters, useDashboardContext, useDashboardPanel, usePanelActions, usePanelChangeTitle, usePanelContext, usePanelFireEvent, usePanelIdentity, usePanelIsLoading, usePanelNetworkState, usePanelOnEvent, usePanelParametersSelector, usePanelPosition, useYieldPanelIsReady };
+export { Dashboard, EmptyPanelWrapper, LandingPagePanelWrapper, NetworkState, PanelButtons, PanelContextProvider, PanelFooter, PanelIdentifier, PanelIdentifierContext, changePanelTitle, createPanelStore, eventsController, externalFirePanelAction, handleAction, store as parametersStore, saveParameters, useActionEventHandlers, useDashboardContext, useDashboardPanel, useMakePanelContext, usePanelActions, usePanelChangeTitle, usePanelContext, usePanelFireEvent, usePanelIdentity, usePanelImage, usePanelIsLoading, usePanelNetworkState, usePanelOnEvent, usePanelParametersSelector, usePanelPosition, usePanelTitleDescription, useYieldPanelIsReady };
 //# sourceMappingURL=index.js.map