@perses-dev/dashboards 0.11.0 → 0.13.0

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

@@ -0,0 +1,116 @@
+// 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
+});
+Object.defineProperty(exports, "PanelHeader", {
+    enumerable: true,
+    get: ()=>PanelHeader
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+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"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
+    const titleElementId = `${id}-title`;
+    const descriptionTooltipId = `${id}-description`;
+    // Don't show any actions unless panel is hovered
+    let action = undefined;
+    if (isHovered) {
+        if (editHandlers !== undefined) {
+            // If there are edit handlers, always just show the edit buttons
+            action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "edit panel",
+                        size: "small",
+                        onClick: editHandlers.onEditPanelClick,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "delete panel",
+                        size: "small",
+                        onClick: editHandlers.onDeletePanelClick,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "drag handle",
+                        size: "small",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                            className: "drag-handle",
+                            sx: {
+                                cursor: 'grab'
+                            }
+                        })
+                    })
+                ]
+            });
+        } else if (description !== undefined) {
+            // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
+            action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                id: descriptionTooltipId,
+                description: description,
+                placement: _components.TooltipPlacement.Bottom,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": "Panel Description",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                        "aria-describedby": "info-tooltip",
+                        "aria-hidden": false,
+                        sx: {
+                            color: (theme)=>theme.palette.grey[700]
+                        }
+                    })
+                })
+            });
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
+        id: id,
+        component: "header",
+        "aria-labelledby": titleElementId,
+        "aria-describedby": descriptionTooltipId,
+        disableTypography: true,
+        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            id: titleElementId,
+            variant: "subtitle1",
+            sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: title
+        }),
+        action: action,
+        sx: (0, _components.combineSx)((theme)=>({
+                padding: theme.spacing(1),
+                borderBottom: `solid 1px ${theme.palette.divider}`
+            }), sx),
+        ...rest
+    });
+}
+const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));

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

@@ -15,7 +15,6 @@ 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 _testUtils = require("react-dom/test-utils");
@@ -29,21 +28,16 @@ function _interopRequireDefault(obj) {
 }
 describe('Panel Drawer', ()=>{
     const renderPanelDrawer = ()=>{
-        const { addMockPlugin , pluginRegistryProps  } = (0, _test.mockPluginRegistryProps)();
-        addMockPlugin('Panel', 'TimeSeriesChart', _test.FAKE_PANEL_PLUGIN);
         const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
-            ...pluginRegistryProps,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
-                initialState: {
-                    dashboardSpec: (0, _test.getTestDashboard)().spec,
-                    isEditMode: true
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.PanelDrawer, {})
-                ]
-            })
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
+            initialState: {
+                dashboardResource: (0, _test.getTestDashboard)(),
+                isEditMode: true
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.PanelDrawer, {})
+            ]
         }));
         const { value: storeApi  } = store;
         if (storeApi === undefined) {
@@ -53,8 +47,8 @@ describe('Panel Drawer', ()=>{
     };
     it('should add new panel', async ()=>{
         const storeApi = renderPanelDrawer();
-        // Open the drawer for a new panel (i.e. no panel key)
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel(0));
+        // Open the drawer for a new panel
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.type(nameInput, 'New Panel');
         _userEvent.default.click(_react.screen.getByText('Add'));
@@ -79,9 +73,17 @@ describe('Panel Drawer', ()=>{
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Test group not found');
+        }
+        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
+        if (layout === undefined) {
+            throw new Error('Test panel not found');
+        }
         (0, _testUtils.act)(()=>storeApi.getState().openEditPanel({
-                panelGroupId: 0,
-                itemIndex: 0
+                panelGroupId: group.id,
+                panelGroupItemLayoutId: layout[0]
             }));
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.clear(nameInput);

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -21,34 +21,27 @@ Object.defineProperty(exports, "PanelPreview", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _panel = require("../Panel");
-function PanelPreview({ name , description , kind , spec , groupId  }) {
-    const previewValues = {
-        definition: {
-            kind: 'Panel',
-            spec: {
-                display: {
-                    name,
-                    description
-                },
-                plugin: {
-                    kind,
-                    spec
-                }
+function PanelPreview({ name , description , kind , spec  }) {
+    const definition = {
+        kind: 'Panel',
+        spec: {
+            display: {
+                name,
+                description: description === '' ? undefined : description
+            },
+            plugin: {
+                kind,
+                spec
             }
-        },
-        // TODO: what should itemIndex be?
-        panelGroupItemId: {
-            panelGroupId: groupId,
-            itemIndex: 0
         }
     };
-    if (!kind) {
+    if (kind === '') {
         return null;
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         height: 300,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-            ...previewValues
+            definition: definition
         })
     });
 }

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

@@ -20,7 +20,6 @@ const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-librar
 const _testUtils = require("react-dom/test-utils");
 const _context = require("../../context");
 const _test = require("../../test");
-const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
 const _panelGroupDialog = require("./PanelGroupDialog");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -32,7 +31,7 @@ describe('Add Panel Group', ()=>{
         const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
             initialState: {
-                dashboardSpec: (0, _test.getTestDashboard)().spec,
+                dashboardResource: (0, _test.getTestDashboard)(),
                 isEditMode: true
             },
             children: [
@@ -54,21 +53,23 @@ describe('Add Panel Group', ()=>{
         _userEvent.default.type(nameInput, 'New Panel Group');
         _userEvent.default.click(_react.screen.getByText('Add'));
         // TODO: Figure out how to test this without coupling to the store state
-        const panelGroups = storeApi.getState().panelGroups;
-        expect(panelGroups).toMatchObject({
-            '3': {
-                id: 3,
-                title: 'New Panel Group',
-                isCollapsed: false,
-                items: []
-            }
+        const panelGroups = Object.values(storeApi.getState().panelGroups);
+        expect(panelGroups).toContainEqual({
+            id: expect.any(Number),
+            title: 'New Panel Group',
+            isCollapsed: false,
+            itemLayouts: expect.any(Array),
+            itemPanelKeys: expect.any(Object)
         });
     });
     it('should edit existing panel group', async ()=>{
-        var ref;
         const storeApi = renderDialog();
         // Open the dialog for an existing panel group
-        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(0));
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Missing test group');
+        }
+        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(group.id));
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.clear(nameInput);
         _userEvent.default.type(nameInput, 'New Name');
@@ -76,11 +77,10 @@ describe('Add Panel Group', ()=>{
         // TODO: Figure out how to test this without coupling to the store state
         const panelGroups = storeApi.getState().panelGroups;
         expect(panelGroups).toMatchObject({
-            '0': {
-                id: 0,
+            [group.id]: {
+                id: group.id,
                 title: 'New Name',
-                isCollapsed: false,
-                items: (ref = _testDashboard.default.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
+                isCollapsed: false
             }
         });
     });

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

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./PanelGroupDialog"), exports);
-_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, {

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

@@ -42,7 +42,7 @@ describe('TimeRangeControls', ()=>{
     };
     beforeEach(()=>{
         initialState = {
-            dashboardSpec: _testDashboard.default.spec
+            dashboardResource: _testDashboard.default
         };
     });
     const renderTimeRangeControls = ()=>{

package/dist/cjs/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js

@@ -0,0 +1,67 @@
+// 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
+});
+Object.defineProperty(exports, "UnsavedChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>UnsavedChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const UnsavedChangesConfirmationDialog = ({ isOpen , onSave , onClose  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: isOpen,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Unsaved Changes"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: onClose,
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                sx: {
+                    width: '500px'
+                },
+                children: "You have unsaved changes in this dashboard. Would you like to save these changes?"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        onClick: onSave,
+                        children: "Save"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        onClick: onClose,
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/cjs/components/UnsavedChangesConfirmationDialog/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("./UnsavedChangesConfirmationDialog"), 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/Variables/Variable.js

@@ -75,14 +75,17 @@ function ListVariable({ name  }) {
         });
     }
     const variablesValueKey = getVariableValuesKey(variables);
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const variablesOptionsQuery = (0, _reactQuery.useQuery)([
         name,
         definition,
-        variablesValueKey
+        variablesValueKey,
+        timeRange
     ], async ()=>{
         const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
             datasourceStore,
-            variables
+            variables,
+            timeRange
         }));
         var ref;
         return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
@@ -128,22 +131,26 @@ function ListVariable({ name  }) {
         options,
         allowAllValue
     ]);
-    (0, _react.useEffect)(()=>{
-        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
-        const valueIsInOptions = Boolean(finalOptions.find((v)=>{
+    const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(finalOptions.find((v)=>{
             if (allowMultiple) {
                 return value.includes(v.value);
             }
             return value === v.value;
-        }));
+        })), [
+        finalOptions,
+        value,
+        allowMultiple
+    ]);
+    let selectValue = value;
+    if (!valueIsInOptions) {
+        selectValue = allowMultiple ? [] : '';
+    }
+    (0, _react.useEffect)(()=>{
+        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
         // If there is no value but there are options, set the value to the first option.
         if (!value && firstOption) {
             setVariableValue(name, firstOption.value);
         }
-        // If there is a value but it's not in the options, select the first value or set to null
-        if (value && !valueIsInOptions && !definition.spec.default_value) {
-            setVariableValue(name, (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) || null);
-        }
     }, [
         finalOptions,
         setVariableValue,
@@ -167,7 +174,7 @@ function ListVariable({ name  }) {
                     },
                     id: name,
                     label: name,
-                    value: value !== null && value !== void 0 ? value : '',
+                    value: selectValue,
                     onChange: (e)=>{
                         // Must be selected
                         if (e.target.value === null || e.target.value.length === 0) {

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

@@ -117,18 +117,19 @@ function VariableEditor(props) {
                         justifyContent: "end",
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                disabled: props.variableDefinitions === variableDefinitions,
+                                variant: "contained",
                                 onClick: ()=>{
-                                    props.onCancel();
+                                    props.onChange(variableDefinitions);
                                 },
-                                children: "Cancel"
+                                children: "Apply"
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                disabled: props.variableDefinitions === variableDefinitions,
-                                variant: "contained",
+                                variant: "outlined",
                                 onClick: ()=>{
-                                    props.onChange(variableDefinitions);
+                                    props.onCancel();
                                 },
-                                children: "Apply Changes"
+                                children: "Cancel"
                             })
                         ]
                     }),

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

@@ -54,6 +54,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            fullWidth: true,
                             label: "Name",
                             value: state.name,
                             onChange: (v)=>{
@@ -95,6 +96,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            fullWidth: true,
                             label: "Label",
                             value: state.label,
                             onChange: (v)=>{
@@ -108,6 +110,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 12,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            fullWidth: true,
                             label: "Description",
                             value: state.description,
                             onChange: (v)=>{
@@ -217,17 +220,18 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                 justifyContent: "end",
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
                         onClick: ()=>{
-                            onCancel();
+                            onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
                         },
-                        children: "Cancel"
+                        children: "Update"
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        variant: "contained",
+                        variant: "outlined",
                         onClick: ()=>{
-                            onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
+                            onCancel();
                         },
-                        children: "Update Variable"
+                        children: "Cancel"
                     })
                 ]
             })

package/dist/cjs/components/index.js

@@ -15,11 +15,15 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./Dashboard"), exports);
+_exportStar(require("./DashboardToolbar"), exports);
+_exportStar(require("./DeletePanelDialog"), exports);
+_exportStar(require("./DeletePanelGroupDialog"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
 _exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
+_exportStar(require("./UnsavedChangesConfirmationDialog"), exports);
 _exportStar(require("./Variables"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -34,6 +34,9 @@ const _react = require("react");
 const _panelGroupEditorSlice = require("./panel-group-editor-slice");
 const _panelGroupSlice = require("./panel-group-slice");
 const _panelEditorSlice = require("./panel-editor-slice");
+const _panelSlice = require("./panel-slice");
+const _deletePanelGroupSlice = require("./delete-panel-group-slice");
+const _deletePanelSlice = require("./delete-panel-slice");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -48,35 +51,44 @@ function useDashboardStore(selector) {
     return (0, _zustand.useStore)(store, selector, _shallow.default);
 }
 function DashboardProvider(props) {
-    const { children , initialState: { dashboardSpec , isEditMode  } ,  } = props;
-    const { layouts , panels  } = dashboardSpec;
-    const dashboardStore = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
-        const [set, get] = args;
+    const createDashboardStore = (0, _react.useCallback)(initStore, [
+        props
+    ]);
+    const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
+        value: store,
+        children: props.children
+    });
+}
+function initStore(props) {
+    const { initialState: { dashboardResource , isEditMode  } ,  } = props;
+    const { spec: { layouts , panels , duration  } , metadata ,  } = dashboardResource;
+    const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
+        const [set] = args;
         return {
-            ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
             ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
-            ...(0, _panelEditorSlice.createPanelEditorSlice)(panels)(...args),
+            ...(0, _panelSlice.createPanelSlice)(panels)(...args),
+            ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
+            ...(0, _deletePanelGroupSlice.createDeletePanelGroupSlice)(...args),
+            ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
+            ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
+            metadata,
             defaultTimeRange: {
-                pastDuration: dashboardSpec.duration
+                pastDuration: duration
             },
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            reset: ()=>{
-                const { resetPanels , resetPanelGroups  } = get();
-                resetPanels();
-                resetPanelGroups();
-            },
-            save: ()=>{
-                const { savePanels , savePanelGroups  } = get();
-                savePanels();
-                savePanelGroups();
+            setDashboard: ({ spec: { panels , layouts  }  })=>{
+                set((state)=>{
+                    const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
+                    state.panels = panels;
+                    state.panelGroups = panelGroups;
+                    state.panelGroupOrder = panelGroupOrder;
+                });
             }
         };
     })));
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
-        value: dashboardStore,
-        children: children
-    });
+    return store;
 }