@perses-dev/dashboards 0.53.0-rc.1 → 0.53.0-rc.3

package/dist/cjs/components/AddGroupButton/AddGroupButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/AddPanelButton/AddPanelButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/Dashboard/Dashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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
@@ -39,6 +39,7 @@ function DashboardStickyToolbar(props) {
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
+    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)('local');
     return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
     // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
@@ -99,7 +100,10 @@ function DashboardStickyToolbar(props) {
                         ml: isBiggerThanMd ? 1.5 : 'auto',
                         direction: "row",
                         justifyContent: "end",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {})
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {
+                            timeZone: timeZone,
+                            onTimeZoneChange: (tz)=>setTimeZone(tz.value)
+                        })
                     })
                 ]
             })

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -37,6 +37,7 @@ const _DashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
     const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = (0, _context.useEditMode)();
+    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)('local');
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -138,7 +139,10 @@ const DashboardToolbar = (props)=>{
                                 mt: 1,
                                 ml: 1,
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {
+                                        timeZone: timeZone,
+                                        onTimeZoneChange: (tz)=>setTimeZone(tz.value)
+                                    }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
                                         isReadonly: !isEditMode

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/Datasources/DatasourceEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/Datasources/EditDatasourcesButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/DeletePanelDialog/DeletePanelDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -92,7 +92,7 @@ function DownloadButton() {
                 type: contentType
             }));
             // Simulate click
-            hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;
+            hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape ? `-${shape}` : ''}.${format}`;
             hiddenLinkRef.current.href = hiddenLinkUrl;
             hiddenLinkRef.current.click();
             // Remove blob URL (for memory management)
@@ -131,8 +131,12 @@ function DownloadButton() {
                                     children: "YAML"
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                    onClick: handleItemClick('yaml', 'cr'),
-                                    children: "YAML (CR)"
+                                    onClick: handleItemClick('yaml', 'cr-v1alpha2'),
+                                    children: "YAML (CR v1alpha2)"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('yaml', 'cr-v1alpha1'),
+                                    children: "YAML (CR v1alpha1)"
                                 })
                             ]
                         })

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -23,7 +23,7 @@ Object.defineProperty(exports, "serializeDashboard", {
 const _yaml = require("yaml");
 function serializeYaml(dashboard, shape) {
     let content;
-    if (shape === 'cr') {
+    if (shape === 'cr-v1alpha1') {
         const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
         content = (0, _yaml.stringify)({
             apiVersion: 'perses.dev/v1alpha1',
@@ -41,6 +41,26 @@ function serializeYaml(dashboard, shape) {
         }, {
             schema: 'yaml-1.1'
         });
+    } else if (shape === 'cr-v1alpha2') {
+        const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+        content = (0, _yaml.stringify)({
+            apiVersion: 'perses.dev/v1alpha2',
+            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: {
+                config: dashboard.spec
+            }
+        }, {
+            schema: 'yaml-1.1'
+        });
     } else {
         content = (0, _yaml.stringify)(dashboard, {
             schema: 'yaml-1.1'

package/dist/cjs/components/EditButton/EditButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/EditJsonButton/EditJsonButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/EmptyDashboard/EmptyDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/GridLayout/GridContainer.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/components/GridLayout/Row.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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
@@ -72,31 +72,17 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     // 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([]);
-                }
+            if (!panelPluginKind || !panelPropsForActions || !getPlugin || typeof getPlugin !== 'function') {
+                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([]);
-                    }
+                    setPluginActions([]);
                     return;
                 }
                 // Render plugin actions in header location
@@ -105,31 +91,20 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                     try {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionComponent, {
-                            ...panelProps
+                            ...panelPropsForActions
                         }, `plugin-action-${index}`);
                     } catch (error) {
                         console.warn(`Failed to render plugin action ${index}:`, error);
                         return null;
                     }
                 }).filter((item)=>Boolean(item));
-                if (!cancelled) {
-                    setPluginActions(headerActions);
-                }
+                setPluginActions(headerActions);
             } catch (error) {
-                if (!cancelled) {
-                    console.warn('Failed to load plugin actions:', error);
-                    setPluginActions([]);
-                }
+                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);
-        };
+        loadPluginActions();
     }, [
         definition.spec.plugin.kind,
         panelPropsForActions,
@@ -143,76 +118,83 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     };
     // 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)({
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexFlow: 'column nowrap',
-            ':hover': {
-                '--panel-hover': 'block'
-            }
-        }, sx),
-        variant: "outlined",
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        "aria-labelledby": headerId,
-        "aria-describedby": headerId,
-        "data-testid": "panel",
-        ...others,
-        children: [
-            !panelOptions?.hideHeader && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelHeader.PanelHeader, {
-                extra: panelOptions?.extra?.({
-                    panelDefinition: definition,
-                    panelGroupItemId
-                }),
-                id: headerId,
-                title: definition.spec.display.name,
-                description: definition.spec.display.description,
-                queryResults: queryResults,
-                readHandlers: readHandlers,
-                editHandlers: editHandlers,
-                viewQueriesHandler: viewQueriesHandler,
-                links: definition.spec.links,
-                pluginActions: pluginActions,
-                showIcons: showIcons,
-                sx: {
-                    py: '2px',
-                    pl: '8px',
-                    pr: '2px'
-                },
-                dimension: contentDimensions
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardContent, {
-                component: "figure",
-                sx: {
-                    position: 'relative',
-                    overflow: 'hidden',
-                    flexGrow: 1,
-                    margin: 0,
-                    padding: 0,
-                    // Override MUI default style for last-child
-                    ':last-child': {
-                        padding: 0
+    const itemActionsConfig = definition.spec.plugin.spec?.actions ? definition.spec.plugin.spec.actions : undefined;
+    const itemActionsListConfig = itemActionsConfig?.enabled && itemActionsConfig.displayInHeader ? itemActionsConfig.actionsList : [];
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SelectionProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ItemActionsProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
+                component: "section",
+                sx: (0, _components.combineSx)({
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexFlow: 'column nowrap',
+                    ':hover': {
+                        '--panel-hover': 'block'
                     }
-                },
-                ref: setContentElement,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                    FallbackComponent: _components.ErrorAlert,
-                    resetKeys: [
-                        definition.spec,
-                        queryResults
-                    ],
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelContent.PanelContent, {
-                        definition: definition,
-                        panelPluginKind: definition.spec.plugin.kind,
-                        spec: definition.spec.plugin.spec,
-                        contentDimensions: contentDimensions,
-                        queryResults: queryResults
+                }, sx),
+                variant: "outlined",
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                "aria-labelledby": headerId,
+                "aria-describedby": headerId,
+                "data-testid": "panel",
+                ...others,
+                children: [
+                    !panelOptions?.hideHeader && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelHeader.PanelHeader, {
+                        extra: panelOptions?.extra?.({
+                            panelDefinition: definition,
+                            panelGroupItemId
+                        }),
+                        id: headerId,
+                        title: definition.spec.display?.name ?? '',
+                        description: definition.spec.display?.description,
+                        queryResults: queryResults,
+                        readHandlers: readHandlers,
+                        editHandlers: editHandlers,
+                        viewQueriesHandler: viewQueriesHandler,
+                        links: definition.spec.links,
+                        pluginActions: pluginActions,
+                        itemActionsListConfig: itemActionsListConfig,
+                        showIcons: showIcons,
+                        sx: {
+                            py: '2px',
+                            pl: '8px',
+                            pr: '2px'
+                        },
+                        dimension: contentDimensions
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardContent, {
+                        component: "figure",
+                        sx: {
+                            position: 'relative',
+                            overflow: 'hidden',
+                            flexGrow: 1,
+                            margin: 0,
+                            padding: 0,
+                            // Override MUI default style for last-child
+                            ':last-child': {
+                                padding: 0
+                            }
+                        },
+                        ref: setContentElement,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                            FallbackComponent: _components.ErrorAlert,
+                            resetKeys: [
+                                definition.spec,
+                                queryResults
+                            ],
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelContent.PanelContent, {
+                                definition: definition,
+                                panelPluginKind: definition.spec.plugin.kind,
+                                spec: definition.spec.plugin.spec,
+                                contentDimensions: contentDimensions,
+                                queryResults: queryResults
+                            })
+                        })
                     })
-                })
+                ]
             })
-        ]
+        })
     });
 });