@perses-dev/dashboards 0.22.0 → 0.23.1

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

@@ -58,9 +58,11 @@ const DashboardToolbar = (props)=>{
             setEditMode(false);
         }
     };
+    const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
             spacing: 1,
+            "data-testid": testId,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     p: 2,
@@ -167,6 +169,7 @@ const DashboardToolbar = (props)=>{
         }) : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
             spacing: 1,
             padding: 2,
+            "data-testid": testId,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {

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

@@ -19,32 +19,17 @@ Object.defineProperty(exports, "DeletePanelDialog", {
     get: ()=>DeletePanelDialog
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _components = require("@perses-dev/components");
 const _context = require("../../context");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const DeletePanelDialog = ()=>{
     const { deletePanelDialog , closeDeletePanelDialog  } = (0, _context.useDeletePanelDialog)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog, {
         open: deletePanelDialog !== undefined,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Header, {
+                onClose: ()=>closeDeletePanelDialog(),
                 children: "Delete Panel"
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closeDeletePanelDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
-            }),
             deletePanelDialog && /*#__PURE__*/ (0, _jsxRuntime.jsx)(DeletePanelForm, {
                 deletePanelDialog: deletePanelDialog
             })
@@ -62,11 +47,7 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
         onSubmit: handleDelete,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogContent, {
-                dividers: true,
-                sx: {
-                    width: '500px'
-                },
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Content, {
                 children: [
                     "Are you sure you want to delete ",
                     deletePanelDialog.panelName,
@@ -75,15 +56,12 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
                     "? This action cannot be undone."
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Actions, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        variant: "contained",
-                        type: "submit",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.PrimaryButton, {
                         children: "Delete"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        variant: "outlined",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.SecondaryButton, {
                         onClick: ()=>closeDeletePanelDialog(),
                         children: "Cancel"
                     })

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

@@ -78,6 +78,7 @@ const DeletePanelGroupDialog = ()=>{
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                 variant: "outlined",
+                                color: "secondary",
                                 onClick: ()=>closeDeletePanelGroupDialog(),
                                 children: "Cancel"
                             })

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

@@ -63,6 +63,7 @@ const DiscardChangesConfirmationDialog = ()=>{
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                             variant: "outlined",
+                            color: "secondary",
                             onClick: dialog.onCancel,
                             children: "Cancel"
                         })

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

@@ -25,12 +25,13 @@ function GridItemContent(props) {
     const { panelGroupItemId  } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
     const { isEditMode  } = (0, _context.useEditMode)();
-    const { openEditPanel , openDeletePanelDialog  } = (0, _context.usePanelActions)(panelGroupItemId);
+    const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _context.usePanelActions)(panelGroupItemId);
     // Provide actions to the panel when in edit mode
     let editHandlers = undefined;
     if (isEditMode) {
         editHandlers = {
             onEditPanelClick: openEditPanel,
+            onDuplicatePanelClick: duplicatePanel,
             onDeletePanelClick: openDeletePanelDialog
         };
     }

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

@@ -24,11 +24,11 @@ const _reactGridLayout = require("react-grid-layout");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
+const _constants = require("../../constants");
 const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
 const _gridContainer = require("./GridContainer");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
-const SMALL_LAYOUT_BREAKPOINT = 'sm';
 function GridLayout(props) {
     const { panelGroupId /*...others */  } = props;
     const theme = (0, _material.useTheme)();
@@ -42,7 +42,7 @@ function GridLayout(props) {
         // a bug in react-layout-grid where `currentLayout` does not adjust properly
         // when going to a smaller breakpoint and then back to a larger breakpoint.
         // https://github.com/react-grid-layout/react-grid-layout/issues/1663
-        const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];
+        const smallLayout = allLayouts[_constants.GRID_LAYOUT_SMALL_BREAKPOINT];
         if (smallLayout) {
             updatePanelGroupLayouts(smallLayout);
         }
@@ -68,10 +68,7 @@ function GridLayout(props) {
                         sm: theme.breakpoints.values.sm,
                         xxs: 0
                     },
-                    cols: {
-                        sm: 24,
-                        xxs: 2
-                    },
+                    cols: _constants.GRID_LAYOUT_COLS,
                     rowHeight: 30,
                     draggableHandle: '.drag-handle',
                     resizeHandles: [
@@ -84,7 +81,7 @@ function GridLayout(props) {
                         10
                     ],
                     layouts: {
-                        [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
+                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts
                     },
                     onLayoutChange: handleLayoutChange,
                     children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {

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

@@ -56,8 +56,7 @@ function Panel(props) {
         initialInView: false,
         triggerOnce: true
     });
-    // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
-    const panelPadding = 1.5;
+    const chartsTheme = (0, _components.useChartsTheme)();
     const handleMouseEnter = (e)=>{
         setIsHovered(true);
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
@@ -90,7 +89,7 @@ function Panel(props) {
                 editHandlers: editHandlers,
                 isHovered: isHovered,
                 sx: {
-                    paddingX: (theme)=>theme.spacing(panelPadding)
+                    paddingX: `${chartsTheme.container.padding.default}px`
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardContent, {
@@ -100,10 +99,10 @@ function Panel(props) {
                     overflow: 'hidden',
                     flexGrow: 1,
                     margin: 0,
-                    padding: (theme)=>theme.spacing(panelPadding),
+                    padding: 0,
                     // Override MUI default style for last-child
                     ':last-child': {
-                        padding: (theme)=>theme.spacing(panelPadding)
+                        padding: 0
                     }
                 },
                 ref: setContentElement,

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

@@ -97,7 +97,8 @@ describe('Panel', ()=>{
     it('does not show description in edit mode', ()=>{
         renderPanel(undefined, {
             onEditPanelClick: jest.fn(),
-            onDeletePanelClick: jest.fn()
+            onDeletePanelClick: jest.fn(),
+            onDuplicatePanelClick: jest.fn()
         });
         const panel = getPanel();
         _userEvent.default.hover(panel);
@@ -109,9 +110,11 @@ describe('Panel', ()=>{
     it('can trigger panel actions in edit mode', ()=>{
         const onEditPanelClick = jest.fn();
         const onDeletePanelClick = jest.fn();
+        const onDuplicatePanelClick = jest.fn();
         renderPanel(undefined, {
             onEditPanelClick,
-            onDeletePanelClick
+            onDeletePanelClick,
+            onDuplicatePanelClick
         });
         const panel = getPanel();
         _userEvent.default.hover(panel);
@@ -123,7 +126,12 @@ describe('Panel', ()=>{
             name: /delete/i
         });
         _userEvent.default.click(deleteButton);
+        const duplicateButton = _react.screen.getByRole('button', {
+            name: /duplicate/i
+        });
+        _userEvent.default.click(duplicateButton);
         expect(onEditPanelClick).toHaveBeenCalledTimes(1);
         expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
+        expect(onDuplicatePanelClick).toHaveBeenCalledTimes(1);
     });
 });

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

@@ -31,7 +31,8 @@ function PanelContent(props) {
         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
+            height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height,
+            "aria-label": "Loading..."
         });
     }
     if (PanelComponent === undefined) {

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

@@ -25,6 +25,7 @@ const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-ma
 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 _contentCopy = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentCopy"));
 const _constants = require("../../constants");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -50,6 +51,22 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
                         })
                     })
                 }),
+                /*#__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, {

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -92,6 +92,7 @@ function PanelGroupDialog() {
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                             variant: "outlined",
+                            color: "secondary",
                             onClick: panelGroupEditor.close,
                             children: "Cancel"
                         })

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

@@ -61,7 +61,7 @@ describe('TimeRangeControls', ()=>{
         renderTimeRangeControls(false);
         expect(_react.screen.getByText('Last 30 minutes')).toBeInTheDocument();
         const dateButton = _react.screen.getByRole('button', {
-            name: /last/i
+            name: /time range/i
         });
         _userEvent.default.click(dateButton);
         const firstSelected = _react.screen.getByRole('option', {
@@ -73,7 +73,7 @@ describe('TimeRangeControls', ()=>{
     it('should update URL params with correct time range values', ()=>{
         renderTimeRangeControls(true);
         const dateButton = _react.screen.getByRole('button', {
-            name: /last/i
+            name: /time range/i
         });
         _userEvent.default.click(dateButton);
         const firstSelected = _react.screen.getByRole('option', {

package/dist/cjs/components/Variables/EditVariablesButton.js

@@ -60,6 +60,7 @@ function EditVariablesButton() {
                         width: '50%'
                     }
                 },
+                "data-testid": "variable-editor",
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
                     variableDefinitions: variableDefinitions,
                     onCancel: closeVariableEditor,

package/dist/cjs/components/Variables/VariableEditor.js

@@ -195,7 +195,7 @@ function VariableEditor(props) {
                                         sx: {
                                             minWidth: 650
                                         },
-                                        "aria-label": "simple table",
+                                        "aria-label": "table of variables",
                                         children: [
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
                                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {

package/dist/cjs/components/Variables/VariableList.js

@@ -39,12 +39,17 @@ function TemplateVariableList(props) {
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    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, {
+        marginBottom: -1,
+        "data-testid": "variable-list",
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
             color: "inherit",
             position: isSticky ? 'fixed' : 'static',
             elevation: isSticky ? 4 : 0,
             sx: {
+                backgroundColor: 'inherit',
                 ...props.sx
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
@@ -62,6 +67,7 @@ function TemplateVariableList(props) {
                             maxWidth: VARIABLE_INPUT_MAX_WIDTH,
                             marginBottom: 1,
                             marginRight: 1,
+                            "data-testid": "template-variable",
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
                                 name: v.spec.name
                             }, v.spec.name)
@@ -74,5 +80,5 @@ function TemplateVariableList(props) {
                 ]
             })
         })
-    });
+    }));
 }

package/dist/cjs/{utils/functions.js → constants/grid-layout-config.js}

@@ -14,10 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "removeWhiteSpacesAndSpecialCharacters", {
-    enumerable: true,
-    get: ()=>removeWhiteSpacesAndSpecialCharacters
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GRID_LAYOUT_COLS: ()=>GRID_LAYOUT_COLS,
+    GRID_LAYOUT_SMALL_BREAKPOINT: ()=>GRID_LAYOUT_SMALL_BREAKPOINT
 });
-const removeWhiteSpacesAndSpecialCharacters = (str)=>{
-    return str.replace(/\s+/g, '');
+const GRID_LAYOUT_COLS = {
+    sm: 24,
+    xxs: 2
 };
+const GRID_LAYOUT_SMALL_BREAKPOINT = 'sm';

package/dist/cjs/constants/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./grid-layout-config"), exports);
 _exportStar(require("./user-interface-text"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/constants/user-interface-text.js

@@ -39,6 +39,7 @@ const TOOLTIP_TEXT = {
     moveGroupUp: 'Move group up',
     // Panel buttons
     editPanel: 'Edit',
+    duplicatePanel: 'Duplicate',
     deletePanel: 'Delete',
     movePanel: 'Move',
     // Variable editor buttons
@@ -54,6 +55,7 @@ const ARIA_LABEL_TEXT = {
     moveGroupUp: (groupName)=>`move group ${groupName} up`,
     // Panel buttons
     editPanel: (panelName)=>`edit panel ${panelName}`,
+    duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
     movePanel: (panelName)=>`move panel ${panelName}`
 };

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -29,8 +29,9 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _zustand = require("zustand");
 const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
-const _shallow = /*#__PURE__*/ _interopRequireDefault(require("zustand/shallow"));
+const _shallow = require("zustand/shallow");
 const _react = require("react");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _panelGroupEditorSlice = require("./panel-group-editor-slice");
 const _panelGroupSlice = require("./panel-group-slice");
 const _panelEditorSlice = require("./panel-editor-slice");
@@ -38,24 +39,40 @@ const _panelSlice = require("./panel-slice");
 const _deletePanelGroupSlice = require("./delete-panel-group-slice");
 const _deletePanelSlice = require("./delete-panel-slice");
 const _discardChangesDialogSlice = require("./discard-changes-dialog-slice");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+const _duplicatePanelSlice = require("./duplicate-panel-slice");
 const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDashboardStore(selector) {
     const store = (0, _react.useContext)(DashboardContext);
     if (store === undefined) {
         throw new Error('No DashboardContext found. Did you forget a Provider?');
     }
-    return (0, _zustand.useStore)(store, selector, _shallow.default);
+    return (0, _zustand.useStore)(store, selector, _shallow.shallow);
 }
 function DashboardProvider(props) {
     const createDashboardStore = (0, _react.useCallback)(initStore, [
         props
     ]);
+    // load plugin to retrieve initial spec if default panel kind is defined
+    const { defaultPluginKinds  } = (0, _pluginSystem.usePluginRegistry)();
+    var ref;
+    const defaultPanelKind = (ref = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds['Panel']) !== null && ref !== void 0 ? ref : '';
+    const { data: plugin  } = (0, _pluginSystem.usePlugin)('Panel', defaultPanelKind);
     const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
+    (0, _react.useEffect)(()=>{
+        if (plugin === undefined) return;
+        const spec = plugin.createInitialOptions();
+        // set default panel kind and spec for add panel editor
+        store.setState({
+            initialValues: {
+                kind: defaultPanelKind,
+                spec
+            }
+        });
+    }, [
+        plugin,
+        store,
+        defaultPanelKind
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
         value: store,
         children: props.children
@@ -63,7 +80,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource , isEditMode  } ,  } = props;
-    const { spec: { layouts , panels , duration  } , metadata ,  } = dashboardResource;
+    const { spec: { display , layouts , panels , duration  } , metadata ,  } = dashboardResource;
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set] = args;
         return {
@@ -74,7 +91,9 @@ function initStore(props) {
             ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
             ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
             ...(0, _discardChangesDialogSlice.createDiscardChangesDialogSlice)(...args),
+            ...(0, _duplicatePanelSlice.createDuplicatePanelSlice)()(...args),
             metadata,
+            display,
             defaultTimeRange: {
                 pastDuration: duration
             },
@@ -82,9 +101,10 @@ function initStore(props) {
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ metadata , spec: { panels , layouts  }  })=>{
+            setDashboard: ({ metadata , spec: { display , panels , layouts  }  })=>{
                 set((state)=>{
                     state.metadata = metadata;
+                    state.display = display;
                     const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
                     state.panels = panels;
                     state.panelGroups = panelGroups;

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -162,15 +162,17 @@ function usePanel(panelGroupItemId) {
     }
     return panel;
 }
-const selectPanelActions = ({ openEditPanel , openDeletePanelDialog  })=>({
+const selectPanelActions = ({ openEditPanel , openDeletePanelDialog , duplicatePanel  })=>({
         openEditPanel,
-        openDeletePanelDialog
+        openDeletePanelDialog,
+        duplicatePanel
     });
 function usePanelActions(panelGroupItemId) {
-    const { openEditPanel , openDeletePanelDialog  } = (0, _dashboardProvider.useDashboardStore)(selectPanelActions);
+    const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _dashboardProvider.useDashboardStore)(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
-        openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId)
+        openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId),
+        duplicatePanel: ()=>duplicatePanel(panelGroupItemId)
     };
 }
 const selectPanelEditor = (state)=>state.panelEditor;

package/dist/cjs/context/DashboardProvider/duplicate-panel-slice.js

@@ -0,0 +1,62 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createDuplicatePanelSlice", {
+    enumerable: true,
+    get: ()=>createDuplicatePanelSlice
+});
+const _panelUtils = require("../../utils/panelUtils");
+const _common = require("./common");
+function createDuplicatePanelSlice() {
+    return (set)=>({
+            duplicatePanel (panelGroupItemId) {
+                set((state)=>{
+                    const panels = state.panels;
+                    // Figure out the panel key at that location
+                    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                    const group = state.panelGroups[panelGroupId];
+                    if (group === undefined) {
+                        throw new Error(`Missing panel group ${panelGroupId}`);
+                    }
+                    const panelKey = group.itemPanelKeys[panelGroupLayoutId];
+                    if (panelKey === undefined) {
+                        throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
+                    }
+                    // Find the panel to edit
+                    const panelToDupe = panels[panelKey];
+                    if (panelToDupe === undefined) {
+                        throw new Error(`Cannot find Panel with key '${panelKey}'`);
+                    }
+                    // Find the layout for the item being duped
+                    const matchingLayout = group.itemLayouts.find((itemLayout)=>{
+                        return itemLayout.i === panelGroupLayoutId;
+                    });
+                    if (matchingLayout === undefined) {
+                        throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);
+                    }
+                    const dupePanelKey = (0, _panelUtils.getValidPanelKey)(panelKey, panels);
+                    state.panels[dupePanelKey] = panelToDupe;
+                    const duplicateLayout = {
+                        i: (0, _common.generateId)().toString(),
+                        w: matchingLayout.w,
+                        h: matchingLayout.h
+                    };
+                    group.itemLayouts = (0, _panelUtils.insertPanelInLayout)(duplicateLayout, matchingLayout, group.itemLayouts);
+                    group.itemPanelKeys[duplicateLayout.i] = dupePanelKey;
+                });
+            }
+        });
+}