@perses-dev/dashboards 0.12.0 → 0.14.0

package/dist/cjs/components/{Dashboard.js → Dashboard/Dashboard.js}

@@ -21,8 +21,8 @@ Object.defineProperty(exports, "Dashboard", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _context = require("../context");
-const _gridLayout = require("./GridLayout");
+const _context = require("../../context");
+const _gridLayout = require("../GridLayout");
 function Dashboard(props) {
     const panelGroupIds = (0, _context.usePanelGroupIds)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {

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

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./Dashboard"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/{DashboardToolbar.js → DashboardToolbar/DashboardToolbar.js}

@@ -19,39 +19,29 @@ Object.defineProperty(exports, "DashboardToolbar", {
     get: ()=>DashboardToolbar
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _plusBoxOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PlusBoxOutline"));
 const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
 const _components = require("@perses-dev/components");
-const _context = require("../context");
-const _components1 = require("../components");
+const _context = require("../../context");
+const _variables = require("../Variables");
+const _timeRangeControls = require("../TimeRangeControls");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const DashboardToolbar = (props)=>{
-    const { dashboardName  } = props;
+    const { dashboardName , dashboardTitleComponent , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
-    const { openAddPanelGroup , openAddPanel , save  } = (0, _context.useDashboardActions)();
+    const { openAddPanelGroup , openAddPanel  } = (0, _context.useDashboardActions)();
     const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
-    const [originalSpec, setOriginalSpec] = (0, _react.useState)(undefined);
-    const { spec , resetSpec  } = (0, _context.useDashboardSpec)();
-    const onEditButtonClick = ()=>{
-        setOriginalSpec(spec);
-        setEditMode(true);
-    };
-    const onCancelButtonClick = ()=>{
-        // Reset to the original spec and exit edit mode
-        if (originalSpec) {
-            resetSpec(originalSpec);
-        }
-        setEditMode(false);
-    };
+    const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h2",
+        children: dashboardName
+    });
     const onSave = ()=>{
-        save();
         setEditMode(false);
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -66,13 +56,7 @@ const DashboardToolbar = (props)=>{
                         padding: 2,
                         display: "flex",
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
-                                variant: "h2",
-                                children: [
-                                    "Edit ",
-                                    dashboardName
-                                ]
-                            }),
+                            dashboardTitle,
                             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 spacing: 1,
@@ -105,7 +89,7 @@ const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TemplateVariableList, {})
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: 'row',
@@ -124,7 +108,7 @@ const DashboardToolbar = (props)=>{
                                     onClick: openAddPanel,
                                     children: "Add Panel"
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TimeRangeControls, {})
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
                             ]
                         })
                     ]
@@ -140,10 +124,7 @@ const DashboardToolbar = (props)=>{
                         width: '100%'
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                            variant: "h2",
-                            children: dashboardName
-                        }),
+                        dashboardTitle,
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 2,
@@ -151,7 +132,7 @@ const DashboardToolbar = (props)=>{
                                 marginLeft: 'auto'
                             },
                             children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TimeRangeControls, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
                                 isLaptopSize && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
@@ -169,7 +150,7 @@ const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TemplateVariableList, {})
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
                     })
                 })
             ]

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

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./DashboardToolbar"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/{Panel → DeletePanelDialog}/DeletePanelDialog.js

@@ -14,9 +14,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "DeletePanelDialog", {
     enumerable: true,
-    get: ()=>_default
+    get: ()=>DeletePanelDialog
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
@@ -90,4 +90,3 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
         ]
     });
 };
-const _default = DeletePanelDialog;

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

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./DeletePanelDialog"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./DeletePanelGroupDialog"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -24,8 +24,18 @@ const _panel = require("../Panel/Panel");
 function GridItemContent(props) {
     const { panelGroupItemId  } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
+    const { isEditMode  } = (0, _context.useEditMode)();
+    const { openEditPanel , openDeletePanelDialog  } = (0, _context.usePanelActions)(panelGroupItemId);
+    // Provide actions to the panel when in edit mode
+    let editHandlers = undefined;
+    if (isEditMode) {
+        editHandlers = {
+            onEditPanelClick: openEditPanel,
+            onDeletePanelClick: openDeletePanelDialog
+        };
+    }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
         definition: panelDefinition,
-        panelGroupItemId: panelGroupItemId
+        editHandlers: editHandlers
     });
 }

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

@@ -24,11 +24,8 @@ const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-res
 const _reactIntersectionObserver = require("react-intersection-observer");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
-const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
-const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
-const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
-const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
-const _context = require("../../context");
+const _componentIds = require("../../utils/component-ids");
+const _panelHeader = require("./PanelHeader");
 const _panelContent = require("./PanelContent");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -36,7 +33,10 @@ function _interopRequireDefault(obj) {
     };
 }
 function Panel(props) {
-    const { definition , panelGroupItemId , ...others } = props;
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    // Make sure we have an ID we can use for aria attributes
+    const generatedPanelId = (0, _componentIds.useId)('Panel');
+    const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = (0, _react.useState)(null);
     const [isHovered, setIsHovered] = (0, _react.useState)(false);
     const { width , height  } = (0, _useResizeObserver.default)({
@@ -59,102 +59,47 @@ function Panel(props) {
     });
     // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
     const panelPadding = 1.5;
-    const { isEditMode  } = (0, _context.useEditMode)();
-    const { openEditPanel , openDeletePanelDialog  } = (0, _context.usePanelActions)(panelGroupItemId);
+    const handleMouseEnter = (e)=>{
+        setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    };
+    const handleMouseLeave = (e)=>{
+        setIsHovered(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Card, {
         ref: ref,
-        sx: {
-            ...others.sx,
+        component: "section",
+        sx: (0, _components.combineSx)({
             width: '100%',
             height: '100%',
             display: 'flex',
             flexFlow: 'column nowrap'
-        },
+        }, sx),
         variant: "outlined",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "aria-labelledby": headerId,
+        "aria-describedby": headerId,
         ...others,
-        onMouseEnter: ()=>setIsHovered(true),
-        onMouseLeave: ()=>setIsHovered(false),
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
-                title: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                    sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        minHeight: '32px'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                            variant: "subtitle1",
-                            whiteSpace: "nowrap",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            children: definition.spec.display.name
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                            sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginLeft: 'auto'
-                            },
-                            children: [
-                                !isEditMode && isHovered && definition.spec.display.description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                                    id: "info-tooltip",
-                                    description: definition.spec.display.description,
-                                    placement: _components.TooltipPlacement.Bottom,
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
-                                        "aria-describedby": "info-tooltip",
-                                        "aria-hidden": false,
-                                        sx: {
-                                            cursor: 'pointer',
-                                            color: (theme)=>theme.palette.grey[700]
-                                        }
-                                    })
-                                }),
-                                isEditMode && isHovered && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                    direction: "row",
-                                    alignItems: "center",
-                                    spacing: 0.5,
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
-                                            "aria-label": "edit panel",
-                                            size: "small",
-                                            onClick: openEditPanel,
-                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
-                                            "aria-label": "delete panel",
-                                            size: "small",
-                                            onClick: openDeletePanelDialog,
-                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
-                                            "aria-label": "drag handle",
-                                            size: "small",
-                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
-                                                className: "drag-handle",
-                                                sx: {
-                                                    cursor: 'grab'
-                                                }
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {
+                id: headerId,
+                title: definition.spec.display.name,
+                description: definition.spec.display.description,
+                editHandlers: editHandlers,
+                isHovered: isHovered,
                 sx: {
-                    display: 'block',
-                    paddingX: (theme)=>theme.spacing(panelPadding),
-                    paddingY: '4px',
-                    borderBottom: (theme)=>`solid 1px ${theme.palette.divider}`
+                    paddingX: (theme)=>theme.spacing(panelPadding)
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardContent, {
+                component: "figure",
                 sx: {
                     position: 'relative',
                     overflow: 'hidden',
                     flexGrow: 1,
+                    margin: 0,
                     padding: (theme)=>theme.spacing(panelPadding),
                     // Override MUI default style for last-child
                     ':last-child': {
@@ -174,7 +119,3 @@ function Panel(props) {
         ]
     });
 }
-const IconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
-        borderRadius: theme.shape.borderRadius,
-        padding: '4px'
-    }));

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

@@ -15,11 +15,9 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
 const _react = require("@testing-library/react");
 const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
 const _test = require("../../test");
-const _context = require("../../context");
 const _panel = require("./Panel");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -27,57 +25,105 @@ function _interopRequireDefault(obj) {
     };
 }
 describe('Panel', ()=>{
-    // Helper to create panel props for rendering tests
-    const createPanelProps = ()=>{
-        return {
-            definition: {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name: 'Fake Panel',
-                        description: 'This is a fake panel'
-                    },
-                    plugin: {
-                        kind: 'FakePanel',
-                        spec: {}
-                    }
+    const createTestPanel = ()=>({
+            kind: 'Panel',
+            spec: {
+                display: {
+                    name: 'Fake Panel Title',
+                    description: 'This is a fake panel'
+                },
+                plugin: {
+                    kind: 'TimeSeriesChart',
+                    spec: {}
                 }
-            },
-            // TODO: This is coupled to ID generation which is not good and the tests will probably fail
-            panelGroupItemId: {
-                panelGroupId: 0,
-                panelGroupItemLayoutId: ''
             }
-        };
-    };
+        });
     // Helper to render the panel with some context set
-    const renderPanel = (isEditMode = false)=>{
-        const { addMockPlugin , pluginRegistryProps  } = (0, _test.mockPluginRegistryProps)();
-        addMockPlugin('Panel', 'FakePanel', _test.FAKE_PANEL_PLUGIN);
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
-            ...pluginRegistryProps,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
-                initialState: {
-                    dashboardSpec: (0, _test.getTestDashboard)().spec,
-                    isEditMode
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-                    ...createPanelProps()
-                })
-            })
+    const renderPanel = (definition, editHandlers)=>{
+        definition !== null && definition !== void 0 ? definition : definition = createTestPanel();
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+            definition: definition,
+            editHandlers: editHandlers
         }));
     };
-    it('should render name and info icon', async ()=>{
+    // Helper to get the panel once rendered
+    const getPanel = ()=>_react.screen.getByRole('region', {
+            name: 'Fake Panel Title'
+        });
+    it('should render panel', async ()=>{
         renderPanel();
-        await _react.screen.findByText('Fake Panel');
-        _react.screen.queryByLabelText('info-tooltip');
+        const panel = getPanel();
+        expect(panel).toBeInTheDocument();
+        // Should diplay header with panel's title
+        const header = _react.screen.getByRole('banner');
+        expect(header).toHaveTextContent('Fake Panel Title');
+        // Should display chart's content from the fake panel plugin
+        const content = _react.screen.getByRole('figure');
+        await (0, _react.waitFor)(()=>{
+            expect(content).toHaveTextContent('TimeSeriesChart panel');
+        });
+        expect(content);
+    });
+    it('shows panel description', async ()=>{
+        renderPanel();
+        const panel = getPanel();
+        // Description button should not be visible until hover on panel
+        const missingButton = _react.screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(missingButton).not.toBeInTheDocument();
+        _userEvent.default.hover(panel);
+        const descriptionButton = _react.screen.getByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).toBeInTheDocument();
+        // Can hover to see panel description in tooltip
+        _userEvent.default.hover(descriptionButton);
+        const tooltip = await _react.screen.findByRole('tooltip');
+        expect(tooltip).toHaveTextContent('This is a fake panel');
+    });
+    it('does not show description when panel does not have one', ()=>{
+        // Render a panel without a description set
+        const withoutDescription = createTestPanel();
+        withoutDescription.spec.display.description = undefined;
+        renderPanel(withoutDescription);
+        const panel = getPanel();
+        _userEvent.default.hover(panel);
+        const descriptionButton = _react.screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
+    });
+    it('does not show description in edit mode', ()=>{
+        renderPanel(undefined, {
+            onEditPanelClick: jest.fn(),
+            onDeletePanelClick: jest.fn()
+        });
+        const panel = getPanel();
+        _userEvent.default.hover(panel);
+        const descriptionButton = _react.screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
     });
-    it('should render edit icons when in edit mode', ()=>{
-        renderPanel(true);
-        const panelTitle = _react.screen.getByText('Fake Panel');
-        _userEvent.default.hover(panelTitle);
-        _react.screen.getByLabelText('drag handle');
-        _react.screen.getByLabelText('edit panel');
-        _react.screen.getByLabelText('delete panel');
+    it('can trigger panel actions in edit mode', ()=>{
+        const onEditPanelClick = jest.fn();
+        const onDeletePanelClick = jest.fn();
+        renderPanel(undefined, {
+            onEditPanelClick,
+            onDeletePanelClick
+        });
+        const panel = getPanel();
+        _userEvent.default.hover(panel);
+        const editButton = _react.screen.getByRole('button', {
+            name: /edit/i
+        });
+        _userEvent.default.click(editButton);
+        const deleteButton = _react.screen.getByRole('button', {
+            name: /delete/i
+        });
+        _userEvent.default.click(deleteButton);
+        expect(onEditPanelClick).toHaveBeenCalledTimes(1);
+        expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
     });
 });