@perses-dev/dashboards 0.21.1 → 0.23.0

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -21,6 +21,7 @@ Object.defineProperty(exports, "VariableEditor", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
+const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
 const _useImmer = require("use-immer");
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
@@ -194,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, {
@@ -209,8 +210,7 @@ function VariableEditor(props) {
                                                             children: "Type"
                                                         }),
                                                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                            align: "right",
-                                                            children: "Action"
+                                                            align: "right"
                                                         })
                                                     ]
                                                 })
@@ -274,9 +274,13 @@ function VariableEditor(props) {
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                                     display: "flex",
                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                        onClick: addVariable,
                                         variant: "contained",
-                                        children: "Add New"
+                                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addVariable,
+                                        children: "Add Variable"
                                     })
                                 })
                             ]

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -26,6 +26,7 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
 const _clipboardOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ClipboardOutline"));
+const _constants = require("../../../constants");
 const _variableModel = require("../variable-model");
 const _variableEditorFormModel = require("./variable-editor-form-model");
 function _interopRequireDefault(obj) {
@@ -115,18 +116,16 @@ function VariableListPreview({ definition , onRefresh  }) {
                         variant: "caption",
                         children: "Preview Values"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
-                        title: "Refresh Values",
-                        placement: "right",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             onClick: onRefresh,
                             size: "small",
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
-                        title: "Copy Values to Clipboard",
-                        placement: "right",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             onClick: async ()=>{
                                 if (data === null || data === void 0 ? void 0 : data.length) {

package/dist/cjs/components/Variables/VariableEditorForm/index.js

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

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -19,132 +19,66 @@ Object.defineProperty(exports, "TemplateVariableList", {
     get: ()=>TemplateVariableList
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
-const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
 const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
-const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _variable = require("./Variable");
-const _variableEditor = require("./VariableEditor");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-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 _interopRequireWildcard(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 = {};
-    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;
-}
+const VARIABLE_INPUT_MIN_WIDTH = '120px';
+const VARIABLE_INPUT_MAX_WIDTH = '240px';
 function TemplateVariableList(props) {
-    const [isEditing, setIsEditing] = (0, _react.useState)(false);
     const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    const { isEditMode  } = (0, _context.useEditMode)();
-    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
     const scrollTrigger = (0, _material.useScrollTrigger)({
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
-    const onClose = ()=>{
-        setIsEditing(false);
-    };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
-                isOpen: isEditing,
-                onClose: onClose,
-                PaperProps: {
-                    sx: {
-                        width: '50%'
-                    }
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
-                    variableDefinitions: variableDefinitions,
-                    onCancel: onClose,
-                    onChange: (v)=>{
-                        setVariableDefinitions(v);
-                        setIsEditing(false);
-                    }
-                })
-            }),
-            isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                pb: 2,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                    onClick: ()=>setIsEditing(true),
-                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {}),
-                    children: "Edit Variables"
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
-                color: 'inherit',
-                position: isSticky ? 'fixed' : 'static',
-                elevation: isSticky ? 4 : 0,
-                sx: {
-                    ...props.sx
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                    display: 'flex',
-                    justifyContent: "space-between",
-                    my: isSticky ? 2 : 0,
-                    ml: isSticky ? 2 : 0,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            children: variableDefinitions.map((v)=>{
-                                var ref;
-                                /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
-                                    display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
-                                        name: v.spec.name
-                                    }, v.spec.name)
-                                }, v.spec.name);
-                            })
-                        }),
-                        props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            onClick: ()=>setIsPin(!isPin),
-                            children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
-                        })
-                    ]
-                })
+    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, {
+                display: "flex",
+                flexWrap: "wrap",
+                alignItems: "start",
+                my: isSticky ? 2 : 0,
+                ml: isSticky ? 2 : 0,
+                children: [
+                    variableDefinitions.map((v)=>{
+                        var ref;
+                        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
+                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                            minWidth: VARIABLE_INPUT_MIN_WIDTH,
+                            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)
+                        }, v.spec.name);
+                    }),
+                    props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                        onClick: ()=>setIsPin(!isPin),
+                        children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
+                    })
+                ]
             })
-        ]
-    });
+        })
+    }));
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -14,9 +14,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./EditVariablesButton"), exports);
 _exportStar(require("./Variable"), exports);
-_exportStar(require("./VariableList"), exports);
+_exportStar(require("./VariableEditor"), exports);
 _exportStar(require("./VariableEditorForm"), exports);
+_exportStar(require("./VariableList"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/components/Variables/variable-model.js

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

package/dist/cjs/components/Variables/variable-model.test.js

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

package/dist/cjs/components/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -14,17 +14,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./AddGroupButton"), exports);
+_exportStar(require("./AddPanelButton"), exports);
 _exportStar(require("./Dashboard"), exports);
 _exportStar(require("./DashboardToolbar"), exports);
 _exportStar(require("./DeletePanelDialog"), exports);
 _exportStar(require("./DeletePanelGroupDialog"), exports);
+_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
 _exportStar(require("./DownloadButton"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
 _exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
-_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
+_exportStar(require("./ToolbarIconButton"), exports);
 _exportStar(require("./Variables"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

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

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

@@ -0,0 +1,29 @@
+// 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
+});
+_exportStar(require("./grid-layout-config"), exports);
+_exportStar(require("./user-interface-text"), 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/constants/user-interface-text.js

@@ -0,0 +1,61 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TOOLTIP_TEXT: ()=>TOOLTIP_TEXT,
+    ARIA_LABEL_TEXT: ()=>ARIA_LABEL_TEXT
+});
+const TOOLTIP_TEXT = {
+    // Toolbar buttons
+    addPanel: 'Add panel',
+    addGroup: 'Add panel group',
+    downloadDashboard: 'Download JSON',
+    editVariables: 'Edit variables',
+    refreshDashboard: 'Refresh dashboard',
+    // Group buttons
+    addPanelToGroup: 'Add panel to group',
+    deleteGroup: 'Delete group',
+    editGroup: 'Edit group',
+    moveGroupDown: 'Move group down',
+    moveGroupUp: 'Move group up',
+    // Panel buttons
+    editPanel: 'Edit',
+    duplicatePanel: 'Duplicate',
+    deletePanel: 'Delete',
+    movePanel: 'Move',
+    // Variable editor buttons
+    refreshVariableValues: 'Refresh values',
+    copyVariableValues: 'Copy values to clipboard'
+};
+const ARIA_LABEL_TEXT = {
+    // Group buttons
+    addPanelToGroup: (groupName)=>`add panel to group ${groupName}`,
+    deleteGroup: (groupName)=>`delete group ${groupName}`,
+    editGroup: (groupName)=>`edit group ${groupName}`,
+    moveGroupDown: (groupName)=>`move group ${groupName} down`,
+    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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -31,6 +31,7 @@ const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
 const _shallow = /*#__PURE__*/ _interopRequireDefault(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,6 +39,7 @@ 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");
+const _duplicatePanelSlice = require("./duplicate-panel-slice");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -55,7 +57,27 @@ 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 +85,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 +96,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 +106,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/common.js

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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -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/delete-panel-group-slice.js

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

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

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

package/dist/cjs/context/DashboardProvider/discard-changes-dialog-slice.js

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