@perses-dev/dashboards 0.50.1 → 0.51.0-beta.0

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

@@ -0,0 +1,365 @@
+// 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
+});
+Object.defineProperty(exports, "PanelActions", {
+    enumerable: true,
+    get: function() {
+        return PanelActions;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _components = require("@perses-dev/components");
+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"));
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _DragVertical = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DragVertical"));
+const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
+const _Menu = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Menu"));
+const _Alert = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Alert"));
+const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
+const _constants = require("../../constants");
+const _HeaderIconButton = require("./HeaderIconButton");
+const _PanelLinks = require("./PanelLinks");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ConditionalBox = (0, _material.styled)(_material.Box)({
+    display: 'none',
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'flex-end'
+});
+const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults })=>{
+    const descriptionAction = (0, _react.useMemo)(()=>{
+        if (description && description.trim().length > 0) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                id: descriptionTooltipId,
+                description: description,
+                enterDelay: 100,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                    "aria-label": "panel description",
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
+                        "aria-describedby": "info-tooltip",
+                        "aria-hidden": false,
+                        fontSize: "inherit",
+                        sx: {
+                            color: (theme)=>theme.palette.text.secondary
+                        }
+                    })
+                })
+            });
+        }
+        return undefined;
+    }, [
+        descriptionTooltipId,
+        description
+    ]);
+    const linksAction = links && links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelLinks.PanelLinks, {
+        links: links
+    });
+    const extraActions = editHandlers === undefined && extra;
+    const queryStateIndicator = (0, _react.useMemo)(()=>{
+        const hasData = queryResults.some((q)=>q.data);
+        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"
+            });
+        } 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');
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: errorTexts,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                    "aria-label": "panel errors",
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                        fontSize: "inherit"
+                    })
+                })
+            });
+        }
+    }, [
+        queryResults
+    ]);
+    const readActions = (0, _react.useMemo)(()=>{
+        if (readHandlers !== undefined) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.viewPanel,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                    "aria-label": _constants.ARIA_LABEL_TEXT.viewPanel(title),
+                    size: "small",
+                    onClick: readHandlers.onViewPanelClick,
+                    children: readHandlers.isPanelViewed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowCollapse.default, {
+                        fontSize: "inherit"
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowExpand.default, {
+                        fontSize: "inherit"
+                    })
+                })
+            });
+        }
+        return undefined;
+    }, [
+        readHandlers,
+        title
+    ]);
+    const editActions = (0, _react.useMemo)(()=>{
+        if (editHandlers !== undefined) {
+            // If there are edit handlers, always just show the edit buttons
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.editPanel,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                            "aria-label": _constants.ARIA_LABEL_TEXT.editPanel(title),
+                            size: "small",
+                            onClick: editHandlers.onEditPanelClick,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {
+                                fontSize: "inherit"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.duplicatePanel,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                            "aria-label": _constants.ARIA_LABEL_TEXT.duplicatePanel(title),
+                            size: "small",
+                            onClick: editHandlers.onDuplicatePanelClick,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContentCopy.default, {
+                                fontSize: "inherit",
+                                sx: {
+                                    // Shrink this icon a little bit to look more consistent
+                                    // with the other icons in the header.
+                                    transform: 'scale(0.925)'
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.deletePanel,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                            "aria-label": _constants.ARIA_LABEL_TEXT.deletePanel(title),
+                            size: "small",
+                            onClick: editHandlers.onDeletePanelClick,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {
+                                fontSize: "inherit"
+                            })
+                        })
+                    })
+                ]
+            });
+        }
+        return undefined;
+    }, [
+        editHandlers,
+        title
+    ]);
+    const moveAction = (0, _react.useMemo)(()=>{
+        if (editActions && !readHandlers?.isPanelViewed) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.movePanel,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                    "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragVertical.default, {
+                        className: "drag-handle",
+                        sx: {
+                            cursor: 'grab'
+                        },
+                        fontSize: "inherit"
+                    })
+                })
+            });
+        }
+        return undefined;
+    }, [
+        editActions,
+        readHandlers,
+        title
+    ]);
+    const divider = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        sx: {
+            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, {
+            sx: {
+                display: 'var(--panel-hover, none)'
+            },
+            children: children
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: children
+        });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(ConditionalBox, {
+                sx: (theme)=>({
+                        [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).between(0, _constants.HEADER_SMALL_WIDTH)]: {
+                            display: 'flex'
+                        }
+                    }),
+                children: [
+                    divider,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(OverflowMenu, {
+                                title: title,
+                                children: [
+                                    descriptionAction,
+                                    " ",
+                                    linksAction,
+                                    " ",
+                                    queryStateIndicator,
+                                    " ",
+                                    extraActions,
+                                    " ",
+                                    readActions,
+                                    " ",
+                                    editActions
+                                ]
+                            }),
+                            moveAction
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(ConditionalBox, {
+                sx: (theme)=>({
+                        [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).between(_constants.HEADER_SMALL_WIDTH, _constants.HEADER_MEDIUM_WIDTH)]: {
+                            display: 'flex'
+                        }
+                    }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
+                        children: [
+                            descriptionAction,
+                            " ",
+                            linksAction
+                        ]
+                    }),
+                    divider,
+                    " ",
+                    queryStateIndicator,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
+                        children: [
+                            extraActions,
+                            " ",
+                            readActions,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(OverflowMenu, {
+                                title: title,
+                                children: editActions
+                            }),
+                            moveAction
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(ConditionalBox, {
+                sx: (theme)=>({
+                        // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons
+                        display: 'flex',
+                        [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).down(_constants.HEADER_MEDIUM_WIDTH)]: {
+                            display: 'none'
+                        }
+                    }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
+                        children: [
+                            descriptionAction,
+                            " ",
+                            linksAction
+                        ]
+                    }),
+                    divider,
+                    " ",
+                    queryStateIndicator,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
+                        children: [
+                            extraActions,
+                            " ",
+                            readActions,
+                            " ",
+                            editActions,
+                            " ",
+                            moveAction
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const OverflowMenu = ({ children, title })=>{
+    const [anchorPosition, setAnchorPosition] = (0, _react.useState)();
+    // 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;
+    }
+    const handleClick = (event)=>{
+        setAnchorPosition(event.currentTarget.getBoundingClientRect());
+    };
+    const handleClose = ()=>{
+        setAnchorPosition(undefined);
+    };
+    const open = Boolean(anchorPosition);
+    const id = open ? 'actions-menu' : undefined;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                className: "show-actions",
+                "aria-describedby": id,
+                onClick: handleClick,
+                "aria-label": _constants.ARIA_LABEL_TEXT.showPanelActions(title),
+                size: "small",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Menu.default, {
+                    fontSize: "inherit"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
+                id: id,
+                open: open,
+                anchorReference: "anchorPosition",
+                anchorPosition: anchorPosition,
+                onClose: handleClose,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    sx: {
+                        padding: 1
+                    },
+                    onClick: handleClose,
+                    children: children
+                })
+            })
+        ]
+    });
+};

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

@@ -22,27 +22,73 @@ Object.defineProperty(exports, "PanelContent", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
+const _PanelPluginLoader = require("./PanelPluginLoader");
 function PanelContent(props) {
-    const { panelPluginKind, contentDimensions, definition, ...others } = props;
-    const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
-        useErrorBoundary: true
+    const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;
+    const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
+        throwOnError: true
     });
-    const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
-    if (isLoading) {
+    // Show fullsize skeleton if the panel plugin is loading.
+    if (isPanelLoading) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
             variant: "rectangular",
-            width: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.width,
-            height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height,
+            width: contentDimensions?.width,
+            height: contentDimensions?.height,
             "aria-label": "Loading..."
         });
     }
-    if (PanelComponent === undefined) {
-        throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
+    // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).
+    // Loading indicator or errors of other queries are shown in the panel header.
+    const queryResultsWithData = queryResults.flatMap((q)=>q.data ? [
+            {
+                data: q.data,
+                definition: q.definition
+            }
+        ] : []);
+    if (queryResultsWithData.length > 0 || queryResults.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPluginLoader.PanelPluginLoader, {
+            kind: panelPluginKind,
+            spec: spec,
+            contentDimensions: contentDimensions,
+            definition: definition,
+            queryResults: queryResultsWithData
+        });
+    }
+    // No query has data, show loading overlay if any query is fetching data.
+    if (queryResults.some((q)=>q.isFetching)) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelLoading, {
+            plugin: plugin,
+            spec: spec,
+            definition: definition,
+            contentDimensions: contentDimensions
+        });
+    }
+    // No query has data or is loading, show the error if any query has an error.
+    // The error will be catched in <ErrorBoundary> of <Panel>.
+    const queryError = queryResults.find((q)=>q.error);
+    if (queryError) {
+        throw queryError.error;
     }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelComponent, {
-        ...others,
-        contentDimensions: contentDimensions,
-        definition: definition
+    // At this point, one or more queries are defined, but no query has data, is loading, or has an error.
+    // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).
+    // Most likely, some query will be enabled later. Render the panel loading skeleton.
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelLoading, {
+        plugin: plugin,
+        spec: spec,
+        definition: definition,
+        contentDimensions: contentDimensions
     });
 }
+function PanelLoading({ plugin, spec, definition, contentDimensions }) {
+    if (plugin?.LoadingComponent) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(plugin.LoadingComponent, {
+            spec: spec,
+            contentDimensions: contentDimensions,
+            definition: definition,
+            queryResults: []
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LoadingOverlay, {});
+}

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -23,102 +23,14 @@ Object.defineProperty(exports, "PanelHeader", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
-const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
-const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _DragVertical = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DragVertical"));
-const _ArrowExpand = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowExpand"));
-const _ArrowCollapse = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowCollapse"));
-const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
-const _PanelLinks = require("./PanelLinks");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }) {
+const _PanelActions = require("./PanelActions");
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
-    let readActions = undefined;
-    if (readHandlers !== undefined) {
-        readActions = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-            description: _constants.TOOLTIP_TEXT.viewPanel,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                "aria-label": _constants.ARIA_LABEL_TEXT.viewPanel(title),
-                size: "small",
-                onClick: readHandlers.onViewPanelClick,
-                children: readHandlers.isPanelViewed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowCollapse.default, {
-                    fontSize: "inherit"
-                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowExpand.default, {
-                    fontSize: "inherit"
-                })
-            })
-        });
-    }
-    let editActions = undefined;
-    if (editHandlers !== undefined) {
-        // If there are edit handlers, always just show the edit buttons
-        editActions = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.editPanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.editPanel(title),
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.duplicatePanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.duplicatePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDuplicatePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContentCopy.default, {
-                            fontSize: "inherit",
-                            sx: {
-                                // Shrink this icon a little bit to look more consistent
-                                // with the other icons in the header.
-                                transform: 'scale(0.925)'
-                            }
-                        })
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.deletePanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.deletePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.movePanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
-                        size: "small",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragVertical.default, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            },
-                            fontSize: "inherit"
-                        })
-                    })
-                })
-            ]
-        });
-    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -135,73 +47,34 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                         // `minHeight` guarantees that the header has the correct height
                         // when there is no title (i.e. in the preview)
                         lineHeight: '24px',
-                        minHeight: '24px',
+                        minHeight: '26px',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis'
                     },
                     children: title
                 }),
-                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    id: descriptionTooltipId,
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
+                    title: title,
                     description: description,
-                    enterDelay: 100,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": "panel description",
-                        size: "small",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
-                            "aria-describedby": "info-tooltip",
-                            "aria-hidden": false,
-                            fontSize: "inherit",
-                            sx: {
-                                color: (theme)=>theme.palette.text.secondary
-                            }
-                        })
-                    })
-                }),
-                links !== undefined && links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelLinks.PanelLinks, {
-                    links: links
+                    descriptionTooltipId: descriptionTooltipId,
+                    links: links,
+                    queryResults: queryResults,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    extra: extra
                 })
             ]
         }),
-        action: /*#__PURE__*/ (0, _jsxruntime.jsxs)(HeaderActionWrapper, {
-            direction: "row",
-            spacing: 0.25,
-            alignItems: "center",
-            children: [
-                editHandlers === undefined && extra,
-                " ",
-                readActions,
-                " ",
-                editActions
-            ]
-        }),
         sx: (0, _components.combineSx)((theme)=>({
+                containerType: 'inline-size',
+                containerName: _constants.HEADER_ACTIONS_CONTAINER_NAME,
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
                     overflow: 'hidden'
-                },
-                '.MuiCardHeader-action': {
-                    // Overriding the negative margins from MUI's defaults, so we
-                    // can vertically center the icons. Moving these values to a wrapper
-                    // inside the action in `HeaderActionWrapper` below.
-                    // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
-                    margin: 'auto'
                 }
             }), sx),
         ...rest
     });
 }
-const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme })=>({
-        borderRadius: theme.shape.borderRadius,
-        padding: '4px'
-    }));
-const HeaderActionWrapper = (0, _material.styled)(_material.Stack)(()=>({
-        // Adding back the negative margins from MUI's defaults for actions, so we
-        // avoid increasing the header size when actions are present while also being
-        // able to vertically center the actions.
-        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
-        marginTop: -4,
-        marginBottom: -4
-    }));