@perses-dev/dashboards 0.9.0 → 0.10.0

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

@@ -0,0 +1,156 @@
+// 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, "createPanelEditorSlice", {
+    enumerable: true,
+    get: ()=>createPanelEditorSlice
+});
+const _functions = require("../../utils/functions");
+function createPanelEditorSlice(panels) {
+    // Return the state creator function for Zustand that uses the panels provided as intitial state
+    return (set, get)=>{
+        return {
+            panels,
+            panelEditor: undefined,
+            editPanel (item) {
+                const { panels , getPanelKey  } = get();
+                // Ask the layout store for the panel key at that location
+                const panelKey = getPanelKey(item);
+                // Find the panel to edit
+                const panelToEdit = panels[panelKey];
+                if (panelToEdit === undefined) {
+                    throw new Error(`Cannot find Panel with key '${panelKey}'`);
+                }
+                var _description;
+                const editorState = {
+                    mode: 'Edit',
+                    initialValues: {
+                        name: panelToEdit.spec.display.name,
+                        description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
+                        groupIndex: item.groupIndex,
+                        kind: panelToEdit.spec.plugin.kind,
+                        spec: panelToEdit.spec.plugin.spec
+                    },
+                    applyChanges: (next)=>{
+                        const panelDefinititon = createPanelDefinitionFromEditorValues(next);
+                        set((state)=>{
+                            state.panels[panelKey] = panelDefinititon;
+                        });
+                        // Move the panel to another group if it changed
+                        if (next.groupIndex !== item.groupIndex) {
+                            get().movePanelToGroup(item, next.groupIndex);
+                        }
+                    },
+                    close: ()=>{
+                        set((state)=>{
+                            state.panelEditor = undefined;
+                        });
+                    }
+                };
+                // Open the editor with the new state
+                set((state)=>{
+                    state.panelEditor = editorState;
+                });
+            },
+            addPanel (initialGroup) {
+                const editorState = {
+                    mode: 'Add',
+                    initialValues: {
+                        name: '',
+                        description: '',
+                        groupIndex: initialGroup,
+                        // TODO: If we knew what plugins were available (and how to create the initial spec), we might be able to
+                        // set a smarter default here?
+                        kind: '',
+                        spec: {}
+                    },
+                    applyChanges: (next)=>{
+                        const panelDef = createPanelDefinitionFromEditorValues(next);
+                        const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
+                        set((state)=>{
+                            state.panels[panelKey] = panelDef;
+                        });
+                        get().addPanelToGroup(panelKey, next.groupIndex);
+                    },
+                    close: ()=>{
+                        set((state)=>{
+                            state.panelEditor = undefined;
+                        });
+                    }
+                };
+                // Open the editor with the new state
+                set((state)=>{
+                    state.panelEditor = editorState;
+                });
+            },
+            deletePanels (items) {
+                const { mapPanelToPanelGroups , deletePanelInPanelGroup , getPanelKey  } = get();
+                const map = mapPanelToPanelGroups();
+                // get panel key first before deleting panel from panel group since getPanelKey relies on index
+                const panels = items.map((panel)=>{
+                    return {
+                        ...panel,
+                        panelKey: getPanelKey(panel)
+                    };
+                });
+                panels.forEach(({ panelKey , ...panel })=>{
+                    var ref;
+                    deletePanelInPanelGroup(panel);
+                    // make sure panel is only referenced in one panel group before deleting it from state.panels
+                    if (map[panelKey] && ((ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.length) === 1) {
+                        set((state)=>{
+                            delete state.panels[panelKey];
+                        });
+                    }
+                });
+            },
+            openDeletePanelDialog (item) {
+                set((state)=>{
+                    var ref;
+                    const { panels , getPanelKey  } = get();
+                    const panelKey = getPanelKey(item);
+                    var _name;
+                    state.deletePanelDialog = {
+                        panelKey,
+                        panelName: (_name = (ref = panels[panelKey]) === null || ref === void 0 ? void 0 : ref.spec.display.name) !== null && _name !== void 0 ? _name : '',
+                        layoutItem: item
+                    };
+                });
+            },
+            closeDeletePanelDialog () {
+                set((state)=>{
+                    state.deletePanelDialog = undefined;
+                });
+            }
+        };
+    };
+}
+// Helper to create PanelDefinitions when saving
+function createPanelDefinitionFromEditorValues(editorValues) {
+    return {
+        kind: 'Panel',
+        spec: {
+            display: {
+                name: editorValues.name,
+                description: editorValues.description !== '' ? editorValues.description : undefined
+            },
+            plugin: {
+                kind: editorValues.kind,
+                spec: editorValues.spec
+            }
+        }
+    };
+}

package/dist/{context/DashboardAppSlice.js → cjs/context/DashboardProvider/panel-group-slice.js}

@@ -10,18 +10,15 @@
 // 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.
-import { immer } from 'zustand/middleware/immer';
-import { useDashboardStore } from './DashboardProvider';
-export const createDashboardAppSlice = immer((set)=>({
-        openPanelDrawer: ({ groupIndex , panelKey  })=>set((state)=>{
-                state.panelDrawer = {
-                    groupIndex,
-                    panelKey
-                };
-            }),
-        closePanelDrawer: ()=>set((state)=>{
-                state.panelDrawer = undefined;
-            }),
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createPanelGroupSlice", {
+    enumerable: true,
+    get: ()=>createPanelGroupSlice
+});
+const createPanelGroupSlice = (set)=>({
         openPanelGroupDialog: (groupIndex)=>set((state)=>{
                 state.panelGroupDialog = {
                     groupIndex
@@ -29,17 +26,13 @@ export const createDashboardAppSlice = immer((set)=>({
             }),
         closePanelGroupDialog: ()=>set((state)=>{
                 state.panelGroupDialog = undefined;
+            }),
+        openDeletePanelGroupDialog: (groupIndex)=>set((state)=>{
+                state.deletePanelGroupDialog = {
+                    groupIndex
+                };
+            }),
+        closeDeletePanelGroupDialog: ()=>set((state)=>{
+                state.deletePanelGroupDialog = undefined;
             })
-    }));
-export function useDashboardApp() {
-    return useDashboardStore(({ panelDrawer , openPanelDrawer , closePanelDrawer , panelGroupDialog , openPanelGroupDialog , closePanelGroupDialog ,  })=>({
-            panelDrawer,
-            openPanelDrawer,
-            closePanelDrawer,
-            panelGroupDialog,
-            openPanelGroupDialog,
-            closePanelGroupDialog
-        }));
-}
-
-//# sourceMappingURL=DashboardAppSlice.js.map
+    });

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -24,30 +24,98 @@ const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
     const { dashboardResource , datasourceApi , children  } = props;
-    const getDatasource = (0, _core.useEvent)(async (selector)=>{
+    const { project  } = dashboardResource.metadata;
+    const { getPlugin , listPluginMetadata  } = (0, _pluginSystem.usePluginRegistry)();
+    const findDatasource = (0, _core.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         const { datasources  } = dashboardResource.spec;
         const dashboardDatasource = findDashboardDatasource(datasources, selector);
         if (dashboardDatasource !== undefined) {
-            return dashboardDatasource;
+            return {
+                spec: dashboardDatasource,
+                proxyUrl: undefined
+            };
         }
         // Try to find it at the project level as a Datasource resource
-        const { project  } = dashboardResource.metadata;
         const datasource = await datasourceApi.getDatasource(project, selector);
         if (datasource !== undefined) {
-            return datasource.spec;
+            return {
+                spec: datasource.resource.spec,
+                proxyUrl: datasource.proxyUrl
+            };
         }
         // Try to find it at the global level as a GlobalDatasource resource
         const globalDatasource = await datasourceApi.getGlobalDatasource(selector);
         if (globalDatasource !== undefined) {
-            return globalDatasource.spec;
+            return {
+                spec: globalDatasource.resource.spec,
+                proxyUrl: globalDatasource.proxyUrl
+            };
         }
         throw new Error(`No datasource found for kind '${selector.kind}' and name '${selector.name}'`);
     });
+    // Gets a datasource spec for a given selector
+    const getDatasource = (0, _react.useCallback)(async (selector)=>{
+        const { spec  } = await findDatasource(selector);
+        return spec;
+    }, [
+        findDatasource
+    ]);
+    // Given a Datasource selector, finds the spec for it and then uses its corresponding plugin the create a client
+    const getDatasourceClient = (0, _react.useCallback)(async function getClient(selector) {
+        const { kind  } = selector;
+        const [{ spec , proxyUrl  }, plugin] = await Promise.all([
+            findDatasource(selector),
+            getPlugin('Datasource', kind)
+        ]);
+        return plugin.createClient(spec.plugin.spec, {
+            proxyUrl
+        });
+    }, [
+        findDatasource,
+        getPlugin
+    ]);
+    const listDatasourceMetadata = (0, _core.useEvent)(async (datasourcePluginKind)=>{
+        const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
+            listPluginMetadata('Datasource'),
+            datasourceApi.listDatasources(project, datasourcePluginKind),
+            datasourceApi.listGlobalDatasources(datasourcePluginKind)
+        ]);
+        // Find the metadata for the plugin type they asked for so we can use it for the name of the default datasource
+        const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.kind === datasourcePluginKind);
+        if (datasourcePluginMetadata === undefined) {
+            throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);
+        }
+        // Get helper for de-duping results properly
+        const { results , addResult  } = buildListDatasourceMetadataResults(datasourcePluginMetadata.display.name);
+        // Start with dashboard datasources that have highest precedence
+        if (dashboardResource.spec.datasources !== undefined) {
+            for(const selectorName in dashboardResource.spec.datasources){
+                const spec = dashboardResource.spec.datasources[selectorName];
+                if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;
+                addResult(spec, selectorName);
+            }
+        }
+        // Now look at project-level datasources
+        for (const datasource of datasources){
+            const selectorName1 = datasource.metadata.name;
+            addResult(datasource.spec, selectorName1);
+        }
+        // And finally global datasources
+        for (const globalDatasource of globalDatasources){
+            const selectorName2 = globalDatasource.metadata.name;
+            addResult(globalDatasource.spec, selectorName2);
+        }
+        return results;
+    });
     const ctxValue = (0, _react.useMemo)(()=>({
-            getDatasource
+            getDatasource,
+            getDatasourceClient,
+            listDatasourceMetadata
         }), [
-        getDatasource
+        getDatasource,
+        getDatasourceClient,
+        listDatasourceMetadata
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceStoreContext.Provider, {
         value: ctxValue,
@@ -66,3 +134,37 @@ function findDashboardDatasource(dashboardDatasources, selector) {
     // If only using a kind, try to find one with that kind that is the default
     return Object.values(dashboardDatasources).find((ds)=>ds.plugin.kind === selector.kind && ds.default === true);
 }
+// Helper for building a list of DatasourceMetadata results that will take care of de-duping already used selectors
+function buildListDatasourceMetadataResults(pluginDisplayName) {
+    const results = [];
+    const usedNames = new Set();
+    let defaultAdded = false;
+    const addResult = (spec, selectorName)=>{
+        var ref;
+        // If we haven't added a default yet and this is a default, add default option to the beginning of the results
+        if (spec.default && defaultAdded === false) {
+            results.unshift({
+                name: `Default ${pluginDisplayName}`,
+                selector: {
+                    kind: spec.plugin.kind
+                }
+            });
+            defaultAdded = true;
+        }
+        // If we already have a datasource with this selector name, ignore it, otherwise add to end of list
+        if (usedNames.has(selectorName)) return;
+        var ref1;
+        results.push({
+            name: (ref1 = (ref = spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref1 !== void 0 ? ref1 : selectorName,
+            selector: {
+                kind: spec.plugin.kind,
+                name: selectorName
+            }
+        });
+        usedNames.add(selectorName);
+    };
+    return {
+        results,
+        addResult
+    };
+}

package/dist/cjs/context/TemplateVariableProvider.js

@@ -77,7 +77,8 @@ function useTemplateVariableActions() {
         return {
             setVariableValue: s.setVariableValue,
             setVariableLoading: s.setVariableLoading,
-            setVariableOptions: s.setVariableOptions
+            setVariableOptions: s.setVariableOptions,
+            setVariableDefinitions: s.setVariableDefinitions
         };
     });
 }
@@ -122,6 +123,12 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[]  }) {
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set)=>({
             variableState: hydrateTemplateVariableStates(initialVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
+            setVariableDefinitions (definitions) {
+                set((state)=>{
+                    state.variableDefinitions = definitions;
+                    state.variableState = hydrateTemplateVariableStates(definitions);
+                });
+            },
             setVariableOptions (name, options) {
                 set((state)=>{
                     const varState = state.variableState[name];

package/dist/cjs/context/index.js

@@ -14,10 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./DashboardAppSlice"), exports);
 _exportStar(require("./DashboardProvider"), exports);
 _exportStar(require("./DatasourceStoreProvider"), exports);
-_exportStar(require("./LayoutsSlice"), exports);
 _exportStar(require("./QueryStringProvider"), exports);
 _exportStar(require("./TemplateVariableProvider"), exports);
 _exportStar(require("./TimeRangeProvider"), exports);

package/dist/cjs/test/testDashboard.js

@@ -209,7 +209,10 @@ const testDashboard = {
                 kind: 'Grid',
                 spec: {
                     display: {
-                        title: 'CPU Stats'
+                        title: 'CPU Stats',
+                        collapse: {
+                            open: true
+                        }
                     },
                     items: [
                         // First Row
@@ -221,6 +224,15 @@ const testDashboard = {
                             content: {
                                 $ref: '#/spec/panels/cpu'
                             }
+                        },
+                        {
+                            x: 0,
+                            y: 5,
+                            width: 6,
+                            height: 2,
+                            content: {
+                                $ref: '#/spec/panels/diskIO'
+                            }
                         }
                     ]
                 }

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -24,7 +24,8 @@ const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
 const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/PanelGroupDialog"));
 const _dashboardToolbar = require("../../components/DashboardToolbar");
-const _context = require("../../context");
+const _deletePanelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/DeletePanelGroupDialog"));
+const _deletePanelDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/Panel/DeletePanelDialog"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -32,8 +33,6 @@ function _interopRequireDefault(obj) {
 }
 const DashboardApp = (props)=>{
     const { dashboardResource  } = props;
-    const { dashboard  } = (0, _context.useDashboard)();
-    const { panelGroupDialog  } = (0, _context.useDashboardApp)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             padding: (theme)=>theme.spacing(1, 0),
@@ -54,12 +53,12 @@ const DashboardApp = (props)=>{
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {
-                            spec: dashboard
-                        })
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {})
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
-                    panelGroupDialog && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {})
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelGroupDialog.default, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelDialog.default, {})
                 ]
             })
         ]

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -0,0 +1,165 @@
+// 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _context = require("../../../context");
+const _test = require("../../../test");
+const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../../test/testDashboard"));
+const _dashboardApp = require("../DashboardApp");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('Panel Groups', ()=>{
+    const renderDashboard = ()=>{
+        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.QueryStringProvider, {
+            queryString: new URLSearchParams('https://localhost:3000/'),
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+                initialTimeRange: {
+                    pastDuration: '30m'
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
+                        initialState: {
+                            dashboardSpec: (0, _test.getTestDashboard)().spec,
+                            isEditMode: true
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
+                                dashboardResource: (0, _test.getTestDashboard)()
+                            })
+                        ]
+                    })
+                })
+            })
+        }));
+        const { value: storeApi  } = store;
+        if (storeApi === undefined) {
+            throw new Error('Expected dashboard store to be set after initial render');
+        }
+        return storeApi;
+    };
+    beforeEach(()=>{
+        const mockIntersectionObserver = jest.fn();
+        mockIntersectionObserver.mockReturnValue({
+            observe: ()=>null,
+            unobserve: ()=>null,
+            disconnect: ()=>null
+        });
+        window.IntersectionObserver = mockIntersectionObserver;
+    });
+    it('should delete panel', ()=>{
+        var ref;
+        const storeApi = renderDashboard();
+        const panel = _react.screen.getByText('CPU');
+        _userEvent.default.hover(panel);
+        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        _userEvent.default.click(deletePanelButton);
+        _react.screen.getByText('Delete Panel');
+        const deleteButton = _react.screen.getByText('Delete');
+        _userEvent.default.click(deleteButton);
+        const layouts = storeApi.getState().layouts;
+        const deletedPanel = _testDashboard.default.spec.panels['cpu'];
+        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.items).toEqual(expect.not.objectContaining(deletedPanel));
+        const panels = storeApi.getState().panels;
+        // should remove cpu from state.panels since it's not used anymore
+        expect(panels).toEqual(expect.not.objectContaining({
+            cpu: _testDashboard.default.spec.panels['cpu']
+        }));
+    });
+    it('should only delete panel from panel group if panel is referenced more than once', ()=>{
+        var ref;
+        const storeApi = renderDashboard();
+        const panel = _react.screen.getByText('Disk I/O Utilization');
+        _userEvent.default.hover(panel);
+        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        _userEvent.default.click(deletePanelButton);
+        _react.screen.getByText('Delete Panel');
+        const deleteButton = _react.screen.getByText('Delete');
+        _userEvent.default.click(deleteButton);
+        const layouts = storeApi.getState().layouts;
+        const deletedPanel = _testDashboard.default.spec.panels['diskIO'];
+        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.items).toEqual(expect.not.objectContaining(deletedPanel));
+        const panels = storeApi.getState().panels;
+        // should NOT remove diskIO from state.panels since it's used in another panel group
+        expect(panels).toEqual(expect.objectContaining({
+            diskIO: _testDashboard.default.spec.panels['diskIO']
+        }));
+    });
+    it('should swap panels', ()=>{
+        var ref, ref1, ref2;
+        const storeApi = renderDashboard();
+        // should move panel down
+        const group1 = _react.screen.getByText('CPU Stats');
+        _userEvent.default.hover(group1);
+        const moveGroupDownBtn = _react.screen.getByLabelText('move group down');
+        _userEvent.default.click(moveGroupDownBtn);
+        _userEvent.default.unhover(moveGroupDownBtn);
+        // should move panel up
+        const group2 = _react.screen.getByText('Disk Stats');
+        _userEvent.default.hover(group2);
+        const moveGroupUpBtn = _react.screen.getByLabelText('move group up');
+        _userEvent.default.click(moveGroupUpBtn);
+        const layouts = storeApi.getState().layouts;
+        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.title).toBe(undefined);
+        expect((ref1 = layouts[1]) === null || ref1 === void 0 ? void 0 : ref1.title).toBe('Disk Stats');
+        expect((ref2 = layouts[2]) === null || ref2 === void 0 ? void 0 : ref2.title).toBe('CPU Stats');
+    });
+    it('should delete a panel group', ()=>{
+        const storeApi = renderDashboard();
+        const group = _react.screen.getByText('CPU Stats');
+        _userEvent.default.hover(group);
+        const deleteGroupIcon = _react.screen.getByLabelText('delete group');
+        _userEvent.default.click(deleteGroupIcon);
+        _react.screen.getByText('Delete Panel Group');
+        const deleteButton = _react.screen.getByText('Delete');
+        _userEvent.default.click(deleteButton);
+        // should remove group from state.layouts
+        const layouts = storeApi.getState().layouts;
+        expect(layouts).toHaveLength(2);
+        const deletedLayout = {
+            id: 0,
+            title: 'CPU Stats',
+            isCollapsed: false,
+            items: [
+                {
+                    x: 0,
+                    y: 0,
+                    width: 12,
+                    height: 4,
+                    content: {
+                        $ref: '#/spec/panels/cpu'
+                    }
+                }
+            ]
+        };
+        expect(layouts).toEqual(expect.not.objectContaining(deletedLayout));
+        const panels = storeApi.getState().panels;
+        // should remove cpu from state.panels since it's not used anymore
+        expect(panels).toEqual(expect.not.objectContaining({
+            cpu: _testDashboard.default.spec.panels['cpu']
+        }));
+        // should not remove diskIO from state.panels since it's still used in another group
+        expect(panels).toEqual(expect.objectContaining({
+            diskIO: _testDashboard.default.spec.panels['diskIO']
+        }));
+    });
+});

package/dist/components/Dashboard.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { DashboardSpec } from '@perses-dev/core';
-export interface DashboardProps extends BoxProps {
-    spec: DashboardSpec;
-}
+export declare type DashboardProps = BoxProps;
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */

package/dist/components/Dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,IAAI,EAAE,aAAa,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAmB9C"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK9C,oBAAY,cAAc,GAAG,QAAQ,CAAC;AAEtC;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAW9C"}