@perses-dev/dashboards 0.0.0-snapshot-time-zone-selector-946f408 → 0.0.0-snapshot-timeseries-panel-actions-e28c1fe

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -24,7 +24,6 @@ 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 _context = require("../../context");
 const _AddPanelButton = require("../AddPanelButton");
 const _AddGroupButton = require("../AddGroupButton");
@@ -40,126 +39,116 @@ const DashboardToolbar = (props)=>{
     const { isEditMode } = (0, _context.useEditMode)();
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
-    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZone)();
-    const timeZoneOptions = (0, _components.getTimeZoneOptions)();
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
     });
     const testId = 'dashboard-toolbar';
-    const handleTimeZoneChange = (0, _react.useCallback)((timeZoneOption)=>{
-        setTimeZone(timeZoneOption.value);
-    }, [
-        setTimeZone
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        "data-testid": testId,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                px: 2,
-                py: 1.5,
-                display: "flex",
-                sx: {
-                    backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
-                },
-                children: [
-                    dashboardTitle,
-                    isEditMode ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        ml: "auto",
-                        children: [
-                            isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                                severity: "warning",
-                                sx: {
-                                    backgroundColor: 'transparent',
-                                    padding: 0
-                                },
-                                children: "Dashboard managed via code only. Download JSON and commit changes to save."
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                direction: "row",
-                                spacing: 0.5,
-                                ml: 1,
-                                whiteSpace: "nowrap",
-                                children: [
-                                    isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
-                                    isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SaveDashboardButton.SaveDashboardButton, {
-                                onSave: onSave,
-                                isDisabled: isReadonly
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                variant: "outlined",
-                                onClick: onCancelButtonClick,
-                                children: "Cancel"
-                            })
-                        ]
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-                        children: isBiggerThanSm && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            "data-testid": testId,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    px: 2,
+                    py: 1.5,
+                    display: "flex",
+                    sx: {
+                        backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
+                    },
+                    children: [
+                        dashboardTitle,
+                        isEditMode ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                             direction: "row",
                             gap: 1,
                             ml: "auto",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
-                                onClick: onEditButtonClick
-                            })
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                sx: {
-                    display: 'flex',
-                    width: '100%',
-                    alignItems: 'start',
-                    padding: (theme)=>theme.spacing(1, 2, 0, 2),
-                    flexDirection: isBiggerThanMd ? 'row' : 'column',
-                    flexWrap: 'nowrap',
-                    gap: 1
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        width: "100%",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {
-                                initialVariableIsSticky: initialVariableIsSticky,
-                                sx: {
-                                    backgroundColor: ({ palette })=>palette.background.default
-                                }
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        direction: "row",
-                        ml: "auto",
-                        flexWrap: "wrap",
-                        justifyContent: "end",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            mt: 1,
-                            ml: 1,
                             children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TimeZoneSelector, {
-                                    timeZoneOptions: timeZoneOptions,
-                                    value: timeZone,
-                                    onChange: handleTimeZoneChange
+                                isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                                    severity: "warning",
+                                    sx: {
+                                        backgroundColor: 'transparent',
+                                        padding: 0
+                                    },
+                                    children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
-                                    isReadonly: !isEditMode
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    spacing: 0.5,
+                                    ml: 1,
+                                    whiteSpace: "nowrap",
+                                    children: [
+                                        isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
+                                        isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_SaveDashboardButton.SaveDashboardButton, {
+                                    onSave: onSave,
+                                    isDisabled: isReadonly
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    variant: "outlined",
+                                    onClick: onCancelButtonClick,
+                                    children: "Cancel"
                                 })
                             ]
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                            children: isBiggerThanSm && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                direction: "row",
+                                gap: 1,
+                                ml: "auto",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
+                                    onClick: onEditButtonClick
+                                })
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'start',
+                        padding: (theme)=>theme.spacing(1, 2, 0, 2),
+                        flexDirection: isBiggerThanMd ? 'row' : 'column',
+                        flexWrap: 'nowrap',
+                        gap: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            width: "100%",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {
+                                    initialVariableIsSticky: initialVariableIsSticky,
+                                    sx: {
+                                        backgroundColor: ({ palette })=>palette.background.default
+                                    }
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                            direction: "row",
+                            ml: "auto",
+                            flexWrap: "wrap",
+                            justifyContent: "end",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                mt: 1,
+                                ml: 1,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
+                                        isReadonly: !isEditMode
+                                    })
+                                ]
+                            })
                         })
-                    })
-                ]
-            })
-        ]
+                    ]
+                })
+            ]
+        })
     });
 };

package/dist/cjs/components/DownloadButton/DownloadButton.js

@@ -25,8 +25,8 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _yaml = require("yaml");
 const _context = require("../../context");
+const _serializeDashboard = require("./serializeDashboard");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -83,43 +83,13 @@ function DownloadButton() {
     };
     const handleItemClick = (format, shape)=>()=>{
             setAnchorEl(null);
-            let type, content = '';
-            switch(format){
-                case 'json':
-                    type = 'application/json';
-                    content = JSON.stringify(dashboard, null, 2);
-                    break;
-                case 'yaml':
-                    {
-                        type = 'application/yaml';
-                        if (shape === 'cr') {
-                            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-                            content = (0, _yaml.stringify)({
-                                apiVersion: 'perses.dev/v1alpha1',
-                                kind: 'PersesDashboard',
-                                metadata: {
-                                    labels: {
-                                        'app.kubernetes.io/name': 'perses-dashboard',
-                                        'app.kubernetes.io/instance': name,
-                                        'app.kubernetes.io/part-of': 'perses-operator'
-                                    },
-                                    name
-                                },
-                                namespace: dashboard.metadata.project,
-                                spec: dashboard.spec
-                            });
-                        } else {
-                            content = (0, _yaml.stringify)(dashboard);
-                        }
-                    }
-                    break;
-            }
+            const { contentType, content } = (0, _serializeDashboard.serializeDashboard)(dashboard, format, shape);
             if (!hiddenLinkRef || !hiddenLinkRef.current) return;
             // Create blob URL
             const hiddenLinkUrl = URL.createObjectURL(new Blob([
                 content
             ], {
-                type
+                type: contentType
             }));
             // Simulate click
             hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;

package/dist/cjs/components/DownloadButton/serializeDashboard.js

@@ -0,0 +1,64 @@
+// Copyright 2023 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
+});
+Object.defineProperty(exports, "serializeDashboard", {
+    enumerable: true,
+    get: function() {
+        return serializeDashboard;
+    }
+});
+const _yaml = require("yaml");
+function serializeYaml(dashboard, shape) {
+    let content;
+    if (shape === 'cr') {
+        const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+        content = (0, _yaml.stringify)({
+            apiVersion: 'perses.dev/v1alpha1',
+            kind: 'PersesDashboard',
+            metadata: {
+                labels: {
+                    'app.kubernetes.io/name': 'perses-dashboard',
+                    'app.kubernetes.io/instance': name,
+                    'app.kubernetes.io/part-of': 'perses-operator'
+                },
+                name,
+                namespace: dashboard.metadata.project
+            },
+            spec: dashboard.spec
+        }, {
+            schema: 'yaml-1.1'
+        });
+    } else {
+        content = (0, _yaml.stringify)(dashboard, {
+            schema: 'yaml-1.1'
+        });
+    }
+    return {
+        contentType: 'application/yaml',
+        content
+    };
+}
+function serializeDashboard(dashboard, format, shape) {
+    switch(format){
+        case 'json':
+            return {
+                contentType: 'application/json',
+                content: JSON.stringify(dashboard, null, 2)
+            };
+        case 'yaml':
+            return serializeYaml(dashboard, shape);
+    }
+}

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

@@ -54,6 +54,88 @@ 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);
     };
@@ -91,6 +173,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
+                pluginActions: pluginActions,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }
@@ -112,7 +195,8 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                     FallbackComponent: _components.ErrorAlert,
                     resetKeys: [
-                        definition.spec
+                        definition.spec,
+                        queryResults
                     ],
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelContent.PanelContent, {
                         definition: definition,

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 _pluginsystem = require("@perses-dev/plugin-system");
 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,10 @@ 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, extra, title, description, descriptionTooltipId, links, panelContentProps, pluginActions = [] })=>{
+    const { isFetching, errors } = (0, _pluginsystem.useDataQueriesContext)();
+    // Only destructure queryResults since we removed panelPluginKind and spec
+    const { queryResults } = panelContentProps;
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -78,19 +82,45 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
     });
     const extraActions = editHandlers === undefined && extra;
     const queryStateIndicator = (0, _react.useMemo)(()=>{
-        const hasData = queryResults.some((q)=>q.data);
-        const isFetching = queryResults.some((q)=>q.isFetching);
+        // Check if any query is fetching
+        const isQueryFetching = queryResults.some((q)=>q.isFetching);
+        // Get query-specific errors
         const queryErrors = queryResults.filter((q)=>q.error);
-        if (isFetching && hasData) {
+        // Convert QueryData[] to TimeSeriesData format for data availability check
+        const timeSeriesData = queryResults && queryResults.length > 0 ? {
+            series: queryResults.flatMap((q)=>{
+                // Only extract series if the data type is TimeSeriesData
+                if (q.data && typeof q.data === 'object' && 'series' in q.data) {
+                    return q.data.series || [];
+                }
+                return [];
+            })
+        } : undefined;
+        const hasData = timeSeriesData && timeSeriesData.series && timeSeriesData.series.length > 0;
+        // Show loading indicator if queries are fetching AND we already have data
+        if ((isFetching || isQueryFetching) && 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"
             });
-        } else if (queryErrors.length > 0) {
-            const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any
-            .join('\n');
+        }
+        // Check for errors from both context and query results
+        const contextErrors = (errors || []).filter((error)=>error !== null);
+        const allErrors = [
+            ...contextErrors,
+            ...queryErrors.map((q)=>q.error)
+        ].filter(Boolean);
+        if (allErrors.length > 0) {
+            const errorTexts = allErrors.map((e)=>{
+                if (typeof e === 'string') return e;
+                if (e && typeof e === 'object') {
+                    const errorObj = e;
+                    return errorObj.message ?? errorObj.toString?.() ?? 'Unknown error';
+                }
+                return 'Unknown error';
+            }).join('\n');
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: errorTexts,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
@@ -103,7 +133,9 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             });
         }
     }, [
-        queryResults
+        queryResults,
+        isFetching,
+        errors
     ]);
     const readActions = (0, _react.useMemo)(()=>{
         if (readHandlers !== undefined) {
@@ -242,6 +274,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                                     editActions
                                 ]
                             }),
+                            pluginActions,
                             moveAction
                         ]
                     })
@@ -269,6 +302,8 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             extraActions,
                             " ",
                             readActions,
+                            " ",
+                            pluginActions,
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(OverflowMenu, {
                                 title: title,
                                 children: editActions
@@ -303,6 +338,8 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             " ",
                             readActions,
                             " ",
+                            pluginActions,
+                            " ",
                             editActions,
                             " ",
                             moveAction

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

@@ -24,13 +24,20 @@ 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, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
+    // Create the panelContentProps object with only queryResults
+    const panelContentProps = (0, _react.useMemo)(()=>({
+            queryResults
+        }), [
+        queryResults
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -59,10 +66,11 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     description: description,
                     descriptionTooltipId: descriptionTooltipId,
                     links: links,
-                    queryResults: queryResults,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
-                    extra: extra
+                    extra: extra,
+                    panelContentProps: panelContentProps,
+                    pluginActions: pluginActions
                 })
             ]
         }),

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -31,11 +31,8 @@ const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
-    const isSavedTimeZoneModified = dialog?.isSavedTimeZoneModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
-    const [saveDefaultTimeZone, setSaveDefaultTimeZone] = (0, _react.useState)(isSavedTimeZoneModified);
-    const { timeZone } = (0, _pluginsystem.useTimeZone)();
     const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
@@ -43,7 +40,6 @@ const SaveChangesConfirmationDialog = ()=>{
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
     const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
     const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
-    const saveTimeZoneText = `Save time zone as "${timeZone}" time`;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -75,14 +71,6 @@ const SaveChangesConfirmationDialog = ()=>{
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
                                     label: saveVariablesText
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                    control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                        disabled: !isSavedTimeZoneModified,
-                                        checked: saveDefaultTimeZone && isSavedTimeZoneModified,
-                                        onChange: (e)=>setSaveDefaultTimeZone(e.target.checked)
-                                    }),
-                                    label: saveTimeZoneText
                                 })
                             ]
                         })
@@ -92,7 +80,7 @@ const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables, saveDefaultTimeZone);
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
                             },
                             children: "Save Changes"
                         }),