@perses-dev/dashboards 0.9.0 → 0.11.0

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

@@ -28,51 +28,69 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _panelEditorModel = require("./panel-editor-model");
-const _panelTypeSelect = require("./PanelTypeSelect");
-const _panelSpecEditor = require("./PanelSpecEditor");
+const _panelPreview = require("./PanelPreview");
 function PanelEditorForm(props) {
+    var ref;
     const { initialValues , onSubmit  } = props;
-    const { layouts  } = (0, _context.useLayouts)();
+    const panelGroups = (0, _context.useListPanelGroups)();
     const [name, setName] = (0, _react.useState)(initialValues.name);
     const [description, setDescription] = (0, _react.useState)(initialValues.description);
-    const [group, setGroup] = (0, _react.useState)(initialValues.group);
+    const [groupId, setGroupId] = (0, _react.useState)(initialValues.groupId);
     const [kind, setKind] = (0, _react.useState)(initialValues.kind);
-    const { spec , onSpecChange  } = (0, _panelEditorModel.usePanelSpecState)(kind, initialValues.spec);
+    const [spec, setSpec] = (0, _react.useState)(initialValues.spec);
+    // Use common plugin editor logic even though we've split the inputs up in this form
+    const pluginEditor = (0, _pluginSystem.usePluginEditor)({
+        pluginType: 'Panel',
+        value: {
+            kind,
+            spec
+        },
+        onChange: (plugin)=>{
+            setKind(plugin.kind);
+            setSpec(plugin.spec);
+        }
+    });
     // Ignore string values (which would be an "empty" value from the Select) since we don't allow them to unset it
     const handleGroupChange = (e)=>{
         const { value  } = e.target;
         if (typeof value === 'string') {
             return;
         }
-        setGroup(value);
+        setGroupId(value);
     };
     const handleSubmit = (e)=>{
         e.preventDefault();
         const values = {
             name,
             description,
-            group,
+            groupId,
             kind,
             spec
         };
         onSubmit(values);
     };
-    var ref;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("form", {
+    var _title, ref1;
+    return(// Grid maxHeight allows user to scroll inside Drawer to see all content
+    /*#__PURE__*/ (0, _jsxRuntime.jsx)("form", {
         id: panelEditorFormId,
         onSubmit: handleSubmit,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
             container: true,
             spacing: 2,
+            sx: {
+                overflowY: 'scroll',
+                maxHeight: '90vh'
+            },
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                         required: true,
-                        label: "Panel Name",
+                        fullWidth: true,
+                        label: "Name",
                         value: name,
                         variant: "outlined",
                         onChange: (e)=>setName(e.target.value)
@@ -82,6 +100,7 @@ function PanelEditorForm(props) {
                     item: true,
                     xs: 4,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                        fullWidth: true,
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
                                 id: "select-group",
@@ -91,15 +110,12 @@ function PanelEditorForm(props) {
                                 required: true,
                                 labelId: "select-group",
                                 label: "Group",
-                                value: group !== null && group !== void 0 ? group : 0,
+                                value: groupId,
                                 onChange: handleGroupChange,
-                                children: layouts.map((layout, index)=>{
-                                    var ref1;
-                                    /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                        value: index,
-                                        children: (ref = (ref1 = layout.spec.display) === null || ref1 === void 0 ? void 0 : ref1.title) !== null && ref !== void 0 ? ref : `Group ${index + 1}`
-                                    }, index);
-                                })
+                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                        value: panelGroup.id,
+                                        children: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, panelGroup.id))
                             })
                         ]
                     })
@@ -108,45 +124,77 @@ function PanelEditorForm(props) {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                        label: "Panel Description",
+                        fullWidth: true,
+                        label: "Description",
                         value: description,
                         variant: "outlined",
                         onChange: (e)=>setDescription(e.target.value)
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
                     item: true,
                     xs: 4,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                id: "panel-type-label",
-                                children: "Panel Type"
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelTypeSelect.PanelTypeSelect, {
-                                required: true,
-                                labelId: "panel-type-label",
-                                label: "Panel Type",
-                                value: kind,
-                                onChange: (e)=>setKind(e.target.value)
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                            fullWidth: true,
+                            disabled: pluginEditor.isLoading,
+                            error: pluginEditor.error !== null,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                    id: "panel-type-label",
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginKindSelect, {
+                                    pluginType: "Panel",
+                                    required: true,
+                                    labelId: "panel-type-label",
+                                    label: "Type",
+                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : kind,
+                                    onChange: pluginEditor.onKindChange
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormHelperText, {
+                            children: (ref1 = (ref = pluginEditor.error) === null || ref === void 0 ? void 0 : ref.message) !== null && ref1 !== void 0 ? ref1 : ''
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                    item: true,
+                    xs: 12,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h4",
+                            marginBottom: 1,
+                            children: "Preview"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                            FallbackComponent: _components.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelPreview.PanelPreview, {
+                                kind: kind,
+                                name: name,
+                                description: description,
+                                spec: spec,
+                                groupId: groupId
                             })
-                        ]
-                    })
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                     item: true,
                     xs: 12,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: spec !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelSpecEditor.PanelSpecEditor, {
-                            panelPluginKind: kind,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginSpecEditor, {
+                            pluginType: "Panel",
+                            pluginKind: kind,
                             value: spec,
-                            onChange: onSpecChange
+                            onChange: pluginEditor.onSpecChange
                         })
                     })
                 })
             ]
         })
-    });
+    }));
 }
 const panelEditorFormId = 'panel-editor-form';

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

@@ -0,0 +1,54 @@
+// 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, "PanelPreview", {
+    enumerable: true,
+    get: ()=>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
+                }
+            }
+        },
+        // TODO: what should itemIndex be?
+        panelGroupItemId: {
+            panelGroupId: groupId,
+            itemIndex: 0
+        }
+    };
+    if (!kind) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        height: 300,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+            ...previewValues
+        })
+    });
+}

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

@@ -0,0 +1,88 @@
+// 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, "DeletePanelGroupDialog", {
+    enumerable: true,
+    get: ()=>DeletePanelGroupDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeletePanelGroupDialog = ()=>{
+    const { deletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _context.useDeletePanelGroupDialog)();
+    const panelGroupId = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupId;
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        if (panelGroupId == undefined) {
+            throw new Error('group index is undefined');
+        }
+        deletePanelGroup(panelGroupId);
+        closeDeletePanelGroupDialog();
+    };
+    var ref;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: deletePanelGroupDialog !== undefined,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Delete Panel Group"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closeDeletePanelGroupDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+                onSubmit: handleDelete,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: [
+                            "Are you sure you want to delete ",
+                            (ref = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupName) !== null && ref !== void 0 ? ref : 'panel group',
+                            "? This will delete all the panels within the group."
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                type: "submit",
+                                children: "Delete"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>closeDeletePanelGroupDialog(),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};

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

@@ -14,136 +14,88 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "PanelGroupDialog", {
     enumerable: true,
-    get: ()=>_default
+    get: ()=>PanelGroupDialog
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _react = require("react");
 const _context = require("../../context");
+const _panelGroupEditorForm = require("./PanelGroupEditorForm");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const PanelGroupDialog = ()=>{
-    var ref, ref1, ref2, ref3, ref4;
-    const { layouts , updateLayout  } = (0, _context.useLayouts)();
-    const { panelGroupDialog , closePanelGroupDialog  } = (0, _context.useDashboardApp)();
-    const groupIndex = panelGroupDialog === null || panelGroupDialog === void 0 ? void 0 : panelGroupDialog.groupIndex;
-    const isEditingPanelGroup = groupIndex !== undefined;
-    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(isEditingPanelGroup && !((ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.display) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.collapse) === null || ref2 === void 0 ? void 0 : ref2.open));
-    const [name, setName] = (0, _react.useState)(isEditingPanelGroup ? (ref4 = (ref3 = layouts[groupIndex]) === null || ref3 === void 0 ? void 0 : ref3.spec.display) === null || ref4 === void 0 ? void 0 : ref4.title : '');
-    const handleSubmit = (e)=>{
-        var ref;
-        e.preventDefault();
-        var _items;
-        const newLayout = {
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: name !== null && name !== void 0 ? name : '',
-                    collapse: {
-                        open: !isCollapsed
-                    }
-                },
-                items: groupIndex === undefined ? [] : (_items = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.items) !== null && _items !== void 0 ? _items : []
-            }
-        };
-        updateLayout(newLayout, groupIndex);
-        closePanelGroupDialog();
+function PanelGroupDialog() {
+    const panelGroupEditor = (0, _context.usePanelGroupEditor)();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = (0, _react.useState)(false);
+    const handleClose = ()=>setIsClosing(true);
+    // Don't call close on the store until the Dialog has completely transitioned out
+    const handleExited = ()=>{
+        panelGroupEditor === null || panelGroupEditor === void 0 ? void 0 : panelGroupEditor.close();
+        setIsClosing(false);
     };
-    const handleSelectCollapsedStateChange = (e)=>{
-        const isCollapsed = e.target.value === 'Close';
-        setIsCollapsed(isCollapsed);
+    // Dialog is open if we have a model and we're not transitioning out
+    const isOpen = panelGroupEditor !== undefined && isClosing === false;
+    const handleSubmit = (values)=>{
+        // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
+        if (panelGroupEditor === undefined) {
+            throw new Error('Cannot apply changes');
+        }
+        panelGroupEditor.applyChanges(values);
+        handleClose();
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
-        open: true,
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
-                children: "Panel Group"
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
-                onSubmit: handleSubmit,
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
-                        sx: {
-                            width: '500px'
-                        },
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                            spacing: 2,
-                            children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                        required: true,
-                                        label: "Name",
-                                        variant: "outlined",
-                                        value: name,
-                                        onChange: (e)=>setName(e.target.value)
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                                    sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        width: '100%',
-                                        justifyContent: 'space-between'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                            children: "Collapse State"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
-                                            required: true,
-                                            displayEmpty: true,
-                                            labelId: "select-collapse-state",
-                                            size: "small",
-                                            value: isCollapsed ? 'Close' : 'Open',
-                                            onChange: handleSelectCollapsedStateChange,
-                                            children: [
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                                    value: 'Open',
-                                                    children: "Open"
-                                                }, 'open'),
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                                    value: 'Close',
-                                                    children: "Close"
-                                                }, 'close')
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                variant: "contained",
-                                type: "submit",
-                                children: isEditingPanelGroup ? 'Apply' : 'Add'
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                onClick: ()=>closePanelGroupDialog(),
-                                children: "Cancel"
-                            })
-                        ]
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Dialog, {
+        open: isOpen,
+        TransitionProps: {
+            onExited: handleExited
+        },
+        children: panelGroupEditor !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogTitle, {
+                    children: [
+                        panelGroupEditor.mode,
+                        " Panel Group"
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                    "aria-label": "Close",
+                    onClick: panelGroupEditor.close,
+                    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: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupEditorForm.PanelGroupEditorForm, {
+                        initialValues: panelGroupEditor.initialValues,
+                        onSubmit: handleSubmit
                     })
-                ]
-            })
-        ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            variant: "contained",
+                            type: "submit",
+                            form: _panelGroupEditorForm.panelGroupEditorFormId,
+                            children: panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            onClick: panelGroupEditor.close,
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
     });
-};
-const _default = PanelGroupDialog;
+}

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

@@ -20,7 +20,8 @@ const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-librar
 const _testUtils = require("react-dom/test-utils");
 const _context = require("../../context");
 const _test = require("../../test");
-const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("./PanelGroupDialog"));
+const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
+const _panelGroupDialog = require("./PanelGroupDialog");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -36,7 +37,7 @@ describe('Add Panel Group', ()=>{
             },
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {})
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.PanelGroupDialog, {})
             ]
         }));
         const { value: storeApi  } = store;
@@ -46,56 +47,40 @@ describe('Add Panel Group', ()=>{
         return storeApi;
     };
     it('should add new panel group', async ()=>{
-        // jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
         const storeApi = renderDialog();
         // Open the dialog for a new panel group
-        (0, _testUtils.act)(()=>storeApi.getState().openPanelGroupDialog());
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanelGroup());
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.type(nameInput, 'New Panel Group');
         _userEvent.default.click(_react.screen.getByText('Add'));
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Panel Group',
-                    collapse: {
-                        open: true
-                    }
-                },
+        // 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: []
             }
         });
     });
     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().openPanelGroupDialog(0));
+        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(0));
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.clear(nameInput);
         _userEvent.default.type(nameInput, 'New Name');
         _userEvent.default.click(_react.screen.getByText('Apply'));
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Name',
-                    collapse: {
-                        open: true
-                    }
-                },
-                items: [
-                    {
-                        content: {
-                            $ref: '#/spec/panels/cpu'
-                        },
-                        height: 4,
-                        width: 12,
-                        x: 0,
-                        y: 0
-                    }
-                ]
+        // TODO: Figure out how to test this without coupling to the store state
+        const panelGroups = storeApi.getState().panelGroups;
+        expect(panelGroups).toMatchObject({
+            '0': {
+                id: 0,
+                title: 'New Name',
+                isCollapsed: false,
+                items: (ref = _testDashboard.default.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
             }
         });
     });