@perses-dev/dashboards 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/cjs/components/LeaveDialog/index.js

@@ -0,0 +1,30 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./LeaveDialog"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/Panel/Panel.js

@@ -34,7 +34,7 @@ function _interop_require_default(obj) {
     };
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
+    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, viewQueriesHandler, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -54,12 +54,96 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     ]);
     const chartsTheme = (0, _components.useChartsTheme)();
     const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
+    const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
+    const panelPropsForActions = (0, _react.useMemo)(()=>{
+        return {
+            spec: definition.spec.plugin.spec,
+            queryResults: queryResults.map((query)=>({
+                    definition: query.definition,
+                    data: query.data
+                })),
+            contentDimensions,
+            definition
+        };
+    }, [
+        definition,
+        contentDimensions,
+        queryResults
+    ]);
+    // Load plugin actions from the plugin
+    const [pluginActions, setPluginActions] = (0, _react.useState)([]);
+    (0, _react.useEffect)(()=>{
+        let cancelled = false;
+        const loadPluginActions = async ()=>{
+            const panelPluginKind = definition.spec.plugin.kind;
+            const panelProps = panelPropsForActions;
+            if (!panelPluginKind || !panelProps) {
+                if (!cancelled) {
+                    setPluginActions([]);
+                }
+                return;
+            }
+            try {
+                // Add defensive check for getPlugin availability
+                if (!getPlugin || typeof getPlugin !== 'function') {
+                    if (!cancelled) {
+                        setPluginActions([]);
+                    }
+                    return;
+                }
+                const plugin = await getPlugin('Panel', panelPluginKind);
+                if (cancelled) return;
+                // More defensive checking for plugin and actions
+                if (!plugin || typeof plugin !== 'object' || !plugin.actions || !Array.isArray(plugin.actions) || plugin.actions.length === 0) {
+                    if (!cancelled) {
+                        setPluginActions([]);
+                    }
+                    return;
+                }
+                // Render plugin actions in header location
+                const headerActions = plugin.actions.filter((action)=>!action.location || action.location === 'header').map((action, index)=>{
+                    const ActionComponent = action.component;
+                    try {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionComponent, {
+                            ...panelProps
+                        }, `plugin-action-${index}`);
+                    } catch (error) {
+                        console.warn(`Failed to render plugin action ${index}:`, error);
+                        return null;
+                    }
+                }).filter((item)=>Boolean(item));
+                if (!cancelled) {
+                    setPluginActions(headerActions);
+                }
+            } catch (error) {
+                if (!cancelled) {
+                    console.warn('Failed to load plugin actions:', error);
+                    setPluginActions([]);
+                }
+            }
+        };
+        // Use setTimeout to defer the async operation to the next tick
+        const timeoutId = setTimeout(()=>{
+            loadPluginActions();
+        }, 0);
+        return ()=>{
+            cancelled = true;
+            clearTimeout(timeoutId);
+        };
+    }, [
+        definition.spec.plugin.kind,
+        panelPropsForActions,
+        getPlugin
+    ]);
     const handleMouseEnter = (e)=>{
         onMouseEnter?.(e);
     };
     const handleMouseLeave = (e)=>{
         onMouseLeave?.(e);
     };
+    // default value for showIcons: if the dashboard is in editing mode or the panel is in fullscreen mode: 'always', otherwise 'hover'
+    const showIcons = panelOptions?.showIcons ?? (editHandlers || readHandlers?.isPanelViewed ? 'always' : 'hover');
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
         component: "section",
         sx: (0, _components.combineSx)({
@@ -90,10 +174,14 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
+                viewQueriesHandler: viewQueriesHandler,
                 links: definition.spec.links,
+                pluginActions: pluginActions,
+                showIcons: showIcons,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
-                }
+                },
+                dimension: contentDimensions
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardContent, {
                 component: "figure",

package/dist/cjs/components/Panel/PanelActions.js

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _components = require("@perses-dev/components");
+const _DatabaseSearch = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DatabaseSearch"));
 const _ArrowCollapse = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowCollapse"));
 const _ArrowExpand = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowExpand"));
 const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
@@ -47,7 +48,7 @@ const ConditionalBox = (0, _material.styled)(_material.Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults })=>{
+const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [], showIcons })=>{
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -82,8 +83,6 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
         const isFetching = queryResults.some((q)=>q.isFetching);
         const queryErrors = queryResults.filter((q)=>q.error);
         if (isFetching && hasData) {
-            // If the panel has no data, the panel content will show the loading overlay.
-            // Therefore, show the circular loading indicator only in case the panel doesn't display the loading overlay already.
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
                 "aria-label": "loading",
                 size: "1.125rem"
@@ -126,6 +125,23 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
         readHandlers,
         title
     ]);
+    const viewQueryAction = (0, _react.useMemo)(()=>{
+        if (!viewQueriesHandler?.onClick) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+            description: _constants.TOOLTIP_TEXT.queryView,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                "aria-label": _constants.ARIA_LABEL_TEXT.openQueryView(title),
+                size: "small",
+                onClick: viewQueriesHandler.onClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DatabaseSearch.default, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }, [
+        viewQueriesHandler,
+        title
+    ]);
     const editActions = (0, _react.useMemo)(()=>{
         if (editHandlers !== undefined) {
             // If there are edit handlers, always just show the edit buttons
@@ -205,8 +221,8 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             flexGrow: 1
         }
     });
-    // if the panel is in non-editing, non-fullscreen mode, show certain icons only on hover
-    const OnHover = ({ children })=>editHandlers === undefined && !readHandlers?.isPanelViewed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+    // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode
+    const OnHover = ({ children })=>showIcons === 'hover' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             sx: {
                 display: 'var(--panel-hover, none)'
             },
@@ -237,8 +253,10 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                                     " ",
                                     extraActions,
                                     " ",
+                                    viewQueryAction,
                                     readActions,
                                     " ",
+                                    pluginActions,
                                     editActions
                                 ]
                             }),
@@ -267,11 +285,16 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
                         children: [
                             extraActions,
-                            " ",
                             readActions,
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(OverflowMenu, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(OverflowMenu, {
                                 title: title,
-                                children: editActions
+                                children: [
+                                    editActions,
+                                    " ",
+                                    viewQueryAction,
+                                    " ",
+                                    pluginActions
+                                ]
                             }),
                             moveAction
                         ]
@@ -300,11 +323,14 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
                         children: [
                             extraActions,
-                            " ",
+                            viewQueryAction,
                             readActions,
                             " ",
                             editActions,
-                            " ",
+                            pluginActions.length <= 1 ? pluginActions : /*#__PURE__*/ (0, _jsxruntime.jsx)(OverflowMenu, {
+                                title: title,
+                                children: pluginActions
+                            }),
                             moveAction
                         ]
                     })
@@ -318,7 +344,7 @@ const OverflowMenu = ({ children, title })=>{
     // do not show overflow menu if there is no content (for example, edit actions are hidden)
     const hasContent = /*#__PURE__*/ (0, _react.isValidElement)(children) || Array.isArray(children) && children.some(_react.isValidElement);
     if (!hasContent) {
-        return undefined;
+        return null;
     }
     const handleClick = (event)=>{
         setAnchorPosition(event.currentTarget.getBoundingClientRect());

package/dist/cjs/components/Panel/PanelHeader.js

@@ -24,13 +24,24 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, showIcons, viewQueriesHandler, dimension, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
+    const textRef = (0, _react.useRef)(null);
+    const [isEllipsisActive, setIsEllipsisActive] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        if (textRef.current && dimension?.width) {
+            setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);
+        }
+    }, [
+        title,
+        dimension?.width
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -39,30 +50,40 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
         disableTypography: true,
         title: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             direction: "row",
+            alignItems: "center",
+            height: "var(--panel-header-height, 30px)",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    id: titleElementId,
-                    variant: "subtitle1",
-                    sx: {
-                        // `minHeight` guarantees that the header has the correct height
-                        // when there is no title (i.e. in the preview)
-                        lineHeight: '24px',
-                        minHeight: '26px',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    },
-                    children: title
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                    title: title,
+                    disableHoverListener: !isEllipsisActive,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        id: titleElementId,
+                        variant: "subtitle1",
+                        ref: textRef,
+                        sx: {
+                            // `minHeight` guarantees that the header has the correct height
+                            // when there is no title (i.e. in the preview)
+                            lineHeight: '24px',
+                            minHeight: '26px',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
+                        },
+                        children: title
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
                     title: title,
                     description: description,
                     descriptionTooltipId: descriptionTooltipId,
                     links: links,
-                    queryResults: queryResults,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
-                    extra: extra
+                    viewQueriesHandler: viewQueriesHandler,
+                    extra: extra,
+                    queryResults: queryResults,
+                    pluginActions: pluginActions,
+                    showIcons: showIcons
                 })
             ]
         }),

package/dist/cjs/components/Panel/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./HeaderIconButton"), exports);
 _export_star(require("./Panel"), exports);
 _export_star(require("./PanelPluginLoader"), exports);
 function _export_star(from, to) {

package/dist/cjs/components/PanelDrawer/PanelDrawer.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "PanelDrawer", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _PanelEditorForm = require("./PanelEditorForm");
 const PanelDrawer = ()=>{
@@ -30,42 +31,78 @@ const PanelDrawer = ()=>{
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = (0, _react.useState)(false);
     // Drawer is open if we have a model and we're not transitioning out
-    const isOpen = panelEditor !== undefined && isClosing === false;
-    function handleSave(values) {
+    const isOpen = panelEditor !== undefined && !isClosing;
+    const handleSave = (0, _react.useCallback)((values)=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
         if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
         setIsClosing(true);
-    }
+    }, [
+        panelEditor
+    ]);
     const handleClose = ()=>{
         setIsClosing(true);
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
-    const handleExited = ()=>{
+    const handleExited = (0, _react.useCallback)(()=>{
         panelEditor?.close();
         setIsClosing(false);
-    };
+    }, [
+        panelEditor
+    ]);
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
     // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
     const handleClickOut = ()=>{
     /* do nothing */ };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
-        isOpen: isOpen,
-        onClose: handleClickOut,
-        SlideProps: {
-            onExited: handleExited
-        },
-        "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-            FallbackComponent: _components.ErrorAlert,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
-                initialAction: panelEditor.mode,
-                initialValues: panelEditor.initialValues,
-                onSave: handleSave,
-                onClose: handleClose
+    const drawer = (0, _react.useMemo)(()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
+            isOpen: isOpen,
+            onClose: handleClickOut,
+            SlideProps: {
+                onExited: handleExited
+            },
+            "data-testid": "panel-editor",
+            children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                FallbackComponent: _components.ErrorAlert,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
+                    initialAction: panelEditor.mode,
+                    initialValues: panelEditor.initialValues,
+                    onSave: handleSave,
+                    onClose: handleClose
+                })
             })
-        })
-    });
+        });
+    }, [
+        handleExited,
+        handleSave,
+        isOpen,
+        panelEditor
+    ]);
+    // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider
+    if (panelEditor?.panelGroupItemId?.repeatVariable) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(RepeatVariableWrapper, {
+            repeatVariable: panelEditor.panelGroupItemId.repeatVariable,
+            children: drawer
+        });
+    }
+    return drawer;
 };
+// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value
+// This is necessary for previewing panels that use repeat variables and query editor
+function RepeatVariableWrapper({ repeatVariable, children }) {
+    const variables = (0, _pluginsystem.useVariableValues)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
+        value: {
+            state: {
+                ...variables,
+                [repeatVariable[0]]: {
+                    value: repeatVariable[1],
+                    loading: false
+                }
+            }
+        },
+        children: children
+    });
+}