@perses-dev/dashboards 0.0.0-snapshot-explorer-plugin-c4a7621 → 0.0.0-snapshot-profile-8090608

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

@@ -35,7 +35,7 @@ const _EditJsonButton = require("../EditJsonButton");
 const _SaveDashboardButton = require("../SaveDashboardButton");
 const _DashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, onEditButtonClick, onCancelButtonClick, onSave } = 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'));
@@ -76,8 +76,8 @@ const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
+                                        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, {})
                                     ]

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

@@ -40,11 +40,13 @@ const DeletePanelDialog = ()=>{
 };
 const DeletePanelForm = ({ deletePanelDialog })=>{
     const { deletePanel, closeDeletePanelDialog } = (0, _context.useDeletePanelDialog)();
+    const { setViewPanel } = (0, _context.useViewPanel)();
     const handleDelete = (e)=>{
         e.preventDefault();
         const { panelGroupItemId } = deletePanelDialog;
         deletePanel(panelGroupItemId);
         closeDeletePanelDialog();
+        setViewPanel(undefined);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("form", {
         onSubmit: handleDelete,

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

@@ -31,6 +31,7 @@ function _interop_require_default(obj) {
 }
 const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _context.useDeletePanelGroupDialog)();
+    const { setViewPanel } = (0, _context.useViewPanel)();
     const panelGroupId = deletePanelGroupDialog?.panelGroupId;
     const handleDelete = (e)=>{
         e.preventDefault();
@@ -39,6 +40,7 @@ const DeletePanelGroupDialog = ()=>{
         }
         deletePanelGroup(panelGroupId);
         closeDeletePanelGroupDialog();
+        setViewPanel(undefined);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
         open: deletePanelGroupDialog !== undefined,

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

@@ -21,53 +21,159 @@ Object.defineProperty(exports, "DownloadButton", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
+const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _constants = require("../../constants");
+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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function DownloadButton({ heightPx }) {
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function DownloadButton() {
     const { dashboard } = (0, _context.useDashboard)();
     const hiddenLinkRef = (0, _react.useRef)(null);
-    const height = heightPx === undefined ? undefined : `${heightPx}px`;
-    const onDownloadButtonClick = ()=>{
-        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
-        // Create blob URL
-        const hiddenLinkUrl = URL.createObjectURL(new Blob([
-            JSON.stringify(dashboard)
-        ], {
-            type: 'application/json'
-        }));
-        // Simulate click
-        hiddenLinkRef.current.href = hiddenLinkUrl;
-        hiddenLinkRef.current.click();
-        // Remove blob URL (for memory management)
-        URL.revokeObjectURL(hiddenLinkUrl);
+    const [anchorEl, setAnchorEl] = _react.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
     };
+    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;
+            }
+            if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+            // Create blob URL
+            const hiddenLinkUrl = URL.createObjectURL(new Blob([
+                content
+            ], {
+                type
+            }));
+            // Simulate click
+            hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;
+            hiddenLinkRef.current.href = hiddenLinkUrl;
+            hiddenLinkRef.current.click();
+            // Remove blob URL (for memory management)
+            URL.revokeObjectURL(hiddenLinkUrl);
+        };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                description: _constants.TOOLTIP_TEXT.downloadDashboard,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
-                    "aria-label": _constants.TOOLTIP_TEXT.downloadDashboard,
-                    onClick: onDownloadButtonClick,
-                    sx: {
-                        height
-                    },
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {})
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                id: "download-dashboard-button",
+                "aria-controls": open ? 'basic-menu' : undefined,
+                "aria-haspopup": "true",
+                "aria-expanded": open ? 'true' : undefined,
+                onClick: handleClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                id: "download-dashboard-formats",
+                anchorEl: anchorEl,
+                open: open,
+                hideBackdrop: true,
+                onClose: ()=>setAnchorEl(null),
+                MenuListProps: {
+                    'aria-labelledby': 'download-dashboard-button'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
+                        onClickAway: ()=>setAnchorEl(null),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuList, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('json'),
+                                    children: "JSON"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('yaml'),
+                                    children: "YAML"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('yaml', 'cr'),
+                                    children: "YAML (CR)"
+                                })
+                            ]
+                        })
+                    })
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
                 ref: hiddenLinkRef,
                 style: {
                     display: 'none'
-                },
-                download: `${dashboard.metadata.name}.json`
+                }
             })
         ]
     });

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

@@ -33,7 +33,7 @@ function GridItemContent(props) {
     const { spec: { queries } } = panelDefinition;
     const { isEditMode } = (0, _context.useEditMode)();
     const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = (0, _context.usePanelActions)(panelGroupItemId);
-    const viewPanelGroupItemId = (0, _context.useViewPanel)();
+    const viewPanelGroupItemId = (0, _context.useViewPanelGroup)();
     const { ref, inView } = (0, _reactintersectionobserver.useInView)({
         threshold: 0.2,
         initialInView: false,
@@ -68,6 +68,7 @@ function GridItemContent(props) {
             spec: query.spec.plugin.spec
         };
     });
+    const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ref: ref,
         sx: {
@@ -78,7 +79,7 @@ function GridItemContent(props) {
             definitions: definitions,
             options: {
                 suggestedStepMs,
-                ...plugin?.queryOptions
+                ...pluginQueryOptions
             },
             queryOptions: {
                 enabled: inView

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

@@ -37,25 +37,21 @@ function GridLayout(props) {
     const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
     const { updatePanelGroupLayouts } = (0, _context.usePanelGroupActions)(panelGroupId);
-    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed ?? true);
+    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
     const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
-    const viewPanelItemId = (0, _context.useViewPanel)();
+    const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
     const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
-    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
-    const isGridDisplayed = (0, _react.useMemo)(()=>{
-        if (viewPanelItemId === undefined) {
-            return true;
-        }
+    (0, _react.useEffect)(()=>{
         if (hasViewPanel) {
             setIsOpen(true);
         }
-        return hasViewPanel;
     }, [
-        hasViewPanel,
-        viewPanelItemId
+        hasViewPanel
     ]);
+    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
+    const isGridDisplayed = viewPanelItemId === undefined || hasViewPanel;
     // Item layout is override if there is a panel in view mode
     const itemLayouts = (0, _react.useMemo)(()=>{
         if (itemLayoutViewed) {

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

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "Panel", {
 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 _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
 const _PanelContent = require("./PanelContent");
@@ -52,6 +53,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         height
     ]);
     const chartsTheme = (0, _components.useChartsTheme)();
+    const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
     const handleMouseEnter = (e)=>{
         onMouseEnter?.(e);
     };
@@ -66,7 +68,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
             display: 'flex',
             flexFlow: 'column nowrap',
             ':hover': {
-                '--panel-hover': 'true'
+                '--panel-hover': 'block'
             }
         }, sx),
         variant: "outlined",
@@ -85,6 +87,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
+                queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
@@ -115,7 +118,8 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                         definition: definition,
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
-                        contentDimensions: contentDimensions
+                        contentDimensions: contentDimensions,
+                        queryResults: queryResults
                     })
                 })
             })

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

@@ -31,14 +31,80 @@ const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-mater
 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 PanelActions = ({ editHandlers, readHandlers, extra, title })=>{
+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, {
@@ -111,43 +177,9 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title })=>{
         editHandlers,
         title
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(HeaderActionWrapper, {
-        direction: "row",
-        spacing: 0.25,
-        alignItems: "center",
-        sx: {
-            display: editHandlers !== undefined || readHandlers?.isPanelViewed ? 'flex' : 'var(--panel-hover, none)'
-        },
-        children: [
-            editHandlers === undefined && extra,
-            " ",
-            readActions,
-            editActions && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        sx: (0, _components.combineSx)((theme)=>({
-                                display: 'block',
-                                [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).down(_constants.HEADER_ACTIONS_MIN_WIDTH)]: {
-                                    display: 'none'
-                                }
-                            })),
-                        children: editActions
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        sx: (0, _components.combineSx)((theme)=>({
-                                display: 'block',
-                                [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).up(_constants.HEADER_ACTIONS_MIN_WIDTH)]: {
-                                    display: 'none'
-                                }
-                            })),
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ShowAction, {
-                            title: title,
-                            children: editActions
-                        })
-                    })
-                ]
-            }),
-            editActions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+    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),
@@ -160,28 +192,142 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title })=>{
                         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 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
-    }));
-const ShowAction = ({ children, title })=>{
-    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+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)=>{
-        setAnchorEl(event.currentTarget);
+        setAnchorPosition(event.currentTarget.getBoundingClientRect());
     };
     const handleClose = ()=>{
-        setAnchorEl(null);
+        setAnchorPosition(undefined);
     };
-    const open = Boolean(anchorEl);
-    const id = open ? 'actions-popover' : 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, {
@@ -197,15 +343,18 @@ const ShowAction = ({ children, title })=>{
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
                 id: id,
                 open: open,
-                anchorEl: anchorEl,
+                anchorReference: "anchorPosition",
+                anchorPosition: anchorPosition,
                 onClose: handleClose,
                 anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'left'
                 },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
                     sx: {
-                        padding: '8px'
+                        padding: 1
                     },
                     onClick: handleClose,
                     children: children