@perses-dev/dashboards 0.10.0 → 0.12.0

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

@@ -10,56 +10,33 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DashboardProvider, QueryStringProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';
-import { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../../test';
-import testDashboard from '../../../test/testDashboard';
+import { DashboardProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';
+import { getTestDashboard, renderWithContext } from '../../../test';
 import { DashboardApp } from '../DashboardApp';
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
-        const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
-        renderWithContext(/*#__PURE__*/ _jsx(QueryStringProvider, {
-            queryString: new URLSearchParams('https://localhost:3000/'),
-            children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
-                initialTimeRange: {
-                    pastDuration: '30m'
-                },
-                children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
-                    children: /*#__PURE__*/ _jsxs(DashboardProvider, {
-                        initialState: {
-                            dashboardSpec: getTestDashboard().spec,
-                            isEditMode: true
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(DashboardProviderSpy, {}),
-                            /*#__PURE__*/ _jsx(DashboardApp, {
-                                dashboardResource: getTestDashboard()
-                            })
-                        ]
+        renderWithContext(/*#__PURE__*/ _jsx(TimeRangeProvider, {
+            timeRange: {
+                pastDuration: '30m'
+            },
+            children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
+                children: /*#__PURE__*/ _jsx(DashboardProvider, {
+                    initialState: {
+                        dashboardSpec: getTestDashboard().spec,
+                        isEditMode: true
+                    },
+                    children: /*#__PURE__*/ _jsx(DashboardApp, {
+                        dashboardResource: 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();
+        renderDashboard();
         const panel = screen.getByText('CPU');
         userEvent.hover(panel);
         const deletePanelButton = screen.getByLabelText('delete panel');
@@ -67,37 +44,28 @@ describe('Panel Groups', ()=>{
         screen.getByText('Delete Panel');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = testDashboard.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.spec.panels['cpu']
-        }));
+        // The panel should disappear
+        const deletedPanel = screen.queryByText('CPU');
+        expect(deletedPanel).not.toBeInTheDocument();
     });
-    it('should only delete panel from panel group if panel is referenced more than once', ()=>{
-        var ref;
-        const storeApi = renderDashboard();
-        const panel = screen.getByText('Disk I/O Utilization');
+    it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
+        renderDashboard();
+        const panels = screen.getAllByText('Disk I/O Utilization');
+        expect(panels).toHaveLength(2);
+        const panel = panels[0];
+        if (panel === undefined) throw new Error('Missing panel');
         userEvent.hover(panel);
         const deletePanelButton = screen.getByLabelText('delete panel');
         userEvent.click(deletePanelButton);
         screen.getByText('Delete Panel');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = testDashboard.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.spec.panels['diskIO']
-        }));
+        // The deleted panel should still be on screen in the other group
+        const deletedPanel = screen.queryByText('Disk I/O Utilization');
+        expect(deletedPanel).toBeInTheDocument();
     });
     it('should swap panels', ()=>{
-        var ref, ref1, ref2;
-        const storeApi = renderDashboard();
+        renderDashboard();
         // should move panel down
         const group1 = screen.getByText('CPU Stats');
         userEvent.hover(group1);
@@ -109,13 +77,14 @@ describe('Panel Groups', ()=>{
         userEvent.hover(group2);
         const moveGroupUpBtn = screen.getByLabelText('move group up');
         userEvent.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');
-    });
+    /* TODO: Figure out how to test this visually without coupling to the store
+    const layouts = storeApi.getState().layouts;
+    expect(layouts[0]?.title).toBe(undefined);
+    expect(layouts[1]?.title).toBe('Disk Stats');
+    expect(layouts[2]?.title).toBe('CPU Stats');
+    */ });
     it('should delete a panel group', ()=>{
-        const storeApi = renderDashboard();
+        renderDashboard();
         const group = screen.getByText('CPU Stats');
         userEvent.hover(group);
         const deleteGroupIcon = screen.getByLabelText('delete group');
@@ -123,35 +92,15 @@ describe('Panel Groups', ()=>{
         screen.getByText('Delete Panel Group');
         const deleteButton = screen.getByText('Delete');
         userEvent.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.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.spec.panels['diskIO']
-        }));
+        // should remove group
+        const deletedGroup = screen.queryByText('CPU Stats');
+        expect(deletedGroup).not.toBeInTheDocument();
+        // CPU panel should be completely gone since it wasn't in any other group
+        let panel = screen.queryByText('CPU');
+        expect(panel).not.toBeInTheDocument();
+        // A DiskIO panel should still be present in the other group that wasn't deleted
+        panel = screen.queryByText('Disk I/O Utilization');
+        expect(panel).toBeInTheDocument();
     });
 });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/ViewDashboard/tests/panelGroups.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { DashboardProvider, QueryStringProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';\nimport { PanelGroupDefinition } from '../../../context/DashboardProvider/layout-slice';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../../test';\nimport testDashboard from '../../../test/testDashboard';\nimport { DashboardApp } from '../DashboardApp';\n\ndescribe('Panel Groups', () => {\n  const renderDashboard = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n    renderWithContext(\n      <QueryStringProvider queryString={new URLSearchParams('https://localhost:3000/')}>\n        <TimeRangeProvider initialTimeRange={{ pastDuration: '30m' }}>\n          <TemplateVariableProvider>\n            <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n              <DashboardProviderSpy />\n              <DashboardApp dashboardResource={getTestDashboard()} />\n            </DashboardProvider>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </QueryStringProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  beforeEach(() => {\n    const mockIntersectionObserver = jest.fn();\n    mockIntersectionObserver.mockReturnValue({\n      observe: () => null,\n      unobserve: () => null,\n      disconnect: () => null,\n    });\n    window.IntersectionObserver = mockIntersectionObserver;\n  });\n\n  it('should delete panel', () => {\n    const storeApi = renderDashboard();\n    const panel = screen.getByText('CPU');\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    const layouts = storeApi.getState().layouts;\n    const deletedPanel = testDashboard.spec.panels['cpu'];\n    expect(layouts[0]?.items).toEqual(expect.not.objectContaining(deletedPanel));\n\n    const panels = storeApi.getState().panels;\n    // should remove cpu from state.panels since it's not used anymore\n    expect(panels).toEqual(expect.not.objectContaining({ cpu: testDashboard.spec.panels['cpu'] }));\n  });\n\n  it('should only delete panel from panel group if panel is referenced more than once', () => {\n    const storeApi = renderDashboard();\n    const panel = screen.getByText('Disk I/O Utilization');\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n    const layouts = storeApi.getState().layouts;\n    const deletedPanel = testDashboard.spec.panels['diskIO'];\n    expect(layouts[0]?.items).toEqual(expect.not.objectContaining(deletedPanel));\n\n    const panels = storeApi.getState().panels;\n    // should NOT remove diskIO from state.panels since it's used in another panel group\n    expect(panels).toEqual(expect.objectContaining({ diskIO: testDashboard.spec.panels['diskIO'] }));\n  });\n\n  it('should swap panels', () => {\n    const storeApi = renderDashboard();\n    // should move panel down\n    const group1 = screen.getByText('CPU Stats');\n    userEvent.hover(group1);\n    const moveGroupDownBtn = screen.getByLabelText('move group down');\n    userEvent.click(moveGroupDownBtn);\n    userEvent.unhover(moveGroupDownBtn);\n    // should move panel up\n    const group2 = screen.getByText('Disk Stats');\n    userEvent.hover(group2);\n    const moveGroupUpBtn = screen.getByLabelText('move group up');\n    userEvent.click(moveGroupUpBtn);\n\n    const layouts = storeApi.getState().layouts;\n    expect(layouts[0]?.title).toBe(undefined);\n    expect(layouts[1]?.title).toBe('Disk Stats');\n    expect(layouts[2]?.title).toBe('CPU Stats');\n  });\n\n  it('should delete a panel group', () => {\n    const storeApi = renderDashboard();\n    const group = screen.getByText('CPU Stats');\n    userEvent.hover(group);\n    const deleteGroupIcon = screen.getByLabelText('delete group');\n    userEvent.click(deleteGroupIcon);\n    screen.getByText('Delete Panel Group');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // should remove group from state.layouts\n    const layouts = storeApi.getState().layouts;\n    expect(layouts).toHaveLength(2);\n    const deletedLayout: PanelGroupDefinition = {\n      id: 0,\n      title: 'CPU Stats',\n      isCollapsed: false,\n      items: [\n        {\n          x: 0,\n          y: 0,\n          width: 12,\n          height: 4,\n          content: { $ref: '#/spec/panels/cpu' },\n        },\n      ],\n    };\n    expect(layouts).toEqual(expect.not.objectContaining(deletedLayout));\n\n    const panels = storeApi.getState().panels;\n    // should remove cpu from state.panels since it's not used anymore\n    expect(panels).toEqual(expect.not.objectContaining({ cpu: testDashboard.spec.panels['cpu'] }));\n    // should not remove diskIO from state.panels since it's still used in another group\n    expect(panels).toEqual(expect.objectContaining({ diskIO: testDashboard.spec.panels['diskIO'] }));\n  });\n});\n"],"names":["screen","userEvent","DashboardProvider","QueryStringProvider","TemplateVariableProvider","TimeRangeProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","testDashboard","DashboardApp","describe","renderDashboard","store","DashboardProviderSpy","queryString","URLSearchParams","initialTimeRange","pastDuration","initialState","dashboardSpec","spec","isEditMode","dashboardResource","value","storeApi","undefined","Error","beforeEach","mockIntersectionObserver","jest","fn","mockReturnValue","observe","unobserve","disconnect","window","IntersectionObserver","it","layouts","panel","getByText","hover","deletePanelButton","getByLabelText","click","deleteButton","getState","deletedPanel","panels","expect","items","toEqual","not","objectContaining","cpu","diskIO","group1","moveGroupDownBtn","unhover","group2","moveGroupUpBtn","title","toBe","group","deleteGroupIcon","toHaveLength","deletedLayout","id","isCollapsed","x","y","width","height","content","$ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/views/ViewDashboard/tests/panelGroups.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { DashboardProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';\nimport { getTestDashboard, renderWithContext } from '../../../test';\nimport { DashboardApp } from '../DashboardApp';\n\ndescribe('Panel Groups', () => {\n  const renderDashboard = () => {\n    renderWithContext(\n      <TimeRangeProvider timeRange={{ pastDuration: '30m' }}>\n        <TemplateVariableProvider>\n          <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n            <DashboardApp dashboardResource={getTestDashboard()} />\n          </DashboardProvider>\n        </TemplateVariableProvider>\n      </TimeRangeProvider>\n    );\n  };\n  it('should delete panel', () => {\n    renderDashboard();\n    const panel = screen.getByText('CPU');\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // The panel should disappear\n    const deletedPanel = screen.queryByText('CPU');\n    expect(deletedPanel).not.toBeInTheDocument();\n  });\n\n  it('should only delete panel from panel group if panel is not referenced more than once', () => {\n    renderDashboard();\n\n    const panels = screen.getAllByText('Disk I/O Utilization');\n    expect(panels).toHaveLength(2);\n\n    const panel = panels[0];\n    if (panel === undefined) throw new Error('Missing panel');\n\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // The deleted panel should still be on screen in the other group\n    const deletedPanel = screen.queryByText('Disk I/O Utilization');\n    expect(deletedPanel).toBeInTheDocument();\n  });\n\n  it('should swap panels', () => {\n    renderDashboard();\n\n    // should move panel down\n    const group1 = screen.getByText('CPU Stats');\n    userEvent.hover(group1);\n    const moveGroupDownBtn = screen.getByLabelText('move group down');\n    userEvent.click(moveGroupDownBtn);\n    userEvent.unhover(moveGroupDownBtn);\n\n    // should move panel up\n    const group2 = screen.getByText('Disk Stats');\n    userEvent.hover(group2);\n    const moveGroupUpBtn = screen.getByLabelText('move group up');\n    userEvent.click(moveGroupUpBtn);\n\n    /* TODO: Figure out how to test this visually without coupling to the store\n    const layouts = storeApi.getState().layouts;\n    expect(layouts[0]?.title).toBe(undefined);\n    expect(layouts[1]?.title).toBe('Disk Stats');\n    expect(layouts[2]?.title).toBe('CPU Stats');\n    */\n  });\n\n  it('should delete a panel group', () => {\n    renderDashboard();\n    const group = screen.getByText('CPU Stats');\n    userEvent.hover(group);\n    const deleteGroupIcon = screen.getByLabelText('delete group');\n    userEvent.click(deleteGroupIcon);\n    screen.getByText('Delete Panel Group');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // should remove group\n    const deletedGroup = screen.queryByText('CPU Stats');\n    expect(deletedGroup).not.toBeInTheDocument();\n\n    // CPU panel should be completely gone since it wasn't in any other group\n    let panel = screen.queryByText('CPU');\n    expect(panel).not.toBeInTheDocument();\n\n    // A DiskIO panel should still be present in the other group that wasn't deleted\n    panel = screen.queryByText('Disk I/O Utilization');\n    expect(panel).toBeInTheDocument();\n  });\n});\n"],"names":["screen","userEvent","DashboardProvider","TemplateVariableProvider","TimeRangeProvider","getTestDashboard","renderWithContext","DashboardApp","describe","renderDashboard","timeRange","pastDuration","initialState","dashboardSpec","spec","isEditMode","dashboardResource","it","panel","getByText","hover","deletePanelButton","getByLabelText","click","deleteButton","deletedPanel","queryByText","expect","not","toBeInTheDocument","panels","getAllByText","toHaveLength","undefined","Error","group1","moveGroupDownBtn","unhover","group2","moveGroupUpBtn","group","deleteGroupIcon","deletedGroup"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -27,9 +27,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.10.0",
-    "@perses-dev/core": "^0.10.0",
-    "@perses-dev/plugin-system": "^0.10.0",
+    "@perses-dev/components": "^0.12.0",
+    "@perses-dev/core": "^0.12.0",
+    "@perses-dev/plugin-system": "^0.12.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -37,6 +37,7 @@
     "react-grid-layout": "^1.3.4",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.7.0",
+    "use-query-params": "^2.1.1",
     "use-resize-observer": "^9.0.0",
     "zustand": "^4.1.1"
   },

package/dist/cjs/context/DashboardProvider/layout-slice.js

@@ -1,200 +0,0 @@
-// 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, "createLayoutSlice", {
-    enumerable: true,
-    get: ()=>createLayoutSlice
-});
-const _core = require("@perses-dev/core");
-function createLayoutSlice(layouts) {
-    // Return the state creator function for Zustand that uses the layouts provided as initial state
-    let id = -1;
-    function createPanelGroupId() {
-        id++;
-        return id;
-    }
-    var ref;
-    return (set, get)=>{
-        return {
-            layouts: layouts.map((layout)=>{
-                var ref1, ref2, ref3;
-                return {
-                    ...layout,
-                    id: createPanelGroupId(),
-                    title: (ref1 = layout.spec.display) === null || ref1 === void 0 ? void 0 : ref1.title,
-                    isCollapsed: (ref = !((ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : (ref3 = ref2.collapse) === null || ref3 === void 0 ? void 0 : ref3.open)) !== null && ref !== void 0 ? ref : false,
-                    items: layout.spec.items
-                };
-            }),
-            getPanelKey ({ groupIndex , itemIndex  }) {
-                const { layouts  } = get();
-                const group = findGroup(layouts, groupIndex);
-                const item = findItem(group, itemIndex);
-                return (0, _core.getPanelKeyFromRef)(item.content);
-            },
-            addPanelToGroup (panelKey, groupIndex) {
-                const { layouts  } = get();
-                const group = findGroup(layouts, groupIndex);
-                const gridItem = {
-                    x: 0,
-                    y: getYForNewRow(group),
-                    width: 12,
-                    height: 6,
-                    content: (0, _core.createPanelRef)(panelKey)
-                };
-                set((state)=>{
-                    var ref;
-                    (ref = state.layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items.push(gridItem);
-                });
-            },
-            movePanelToGroup ({ groupIndex , itemIndex  }, newGroupIndex) {
-                const { layouts  } = get();
-                // Find the existing item to make sure it exists
-                const group = findGroup(layouts, groupIndex);
-                const item = findItem(group, itemIndex);
-                // Find the new group and figure out where a new row should go
-                const newGroup = findGroup(layouts, newGroupIndex);
-                const newGroupY = getYForNewRow(newGroup);
-                set((state)=>{
-                    var // Remove the item from its current group
-                    ref, // Add a new item to the new group
-                    ref1;
-                    (ref = state.layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items.splice(itemIndex, 1);
-                    (ref1 = state.layouts[newGroupIndex]) === null || ref1 === void 0 ? void 0 : ref1.items.push({
-                        x: 0,
-                        y: newGroupY,
-                        width: item.width,
-                        height: item.height,
-                        content: item.content
-                    });
-                });
-            },
-            // TODO: Maybe combine this into some kind of groupEditor state
-            updatePanelGroup (next, groupIndex) {
-                set((state)=>{
-                    if (groupIndex === undefined) {
-                        state.layouts.unshift({
-                            ...next,
-                            id: createPanelGroupId()
-                        });
-                    } else {
-                        const layout = state.layouts[groupIndex];
-                        if (layout === undefined) {
-                            throw new Error(`No layout at index ${groupIndex}`);
-                        }
-                        state.layouts[groupIndex] = {
-                            ...next,
-                            id: layout.id
-                        };
-                    }
-                });
-            },
-            swapPanelGroups (x, y) {
-                set((state)=>{
-                    if (x < 0 || x >= state.layouts.length || y < 0 || y >= state.layouts.length) {
-                        throw new Error('index out of bound');
-                    }
-                    const xPanelGroup = state.layouts[x];
-                    const yPanelGroup = state.layouts[y];
-                    if (xPanelGroup === undefined || yPanelGroup === undefined) {
-                        throw new Error('panel group is undefined');
-                    }
-                    // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups
-                    [state.layouts[x], state.layouts[y]] = [
-                        yPanelGroup,
-                        xPanelGroup
-                    ];
-                });
-            },
-            deletePanelInPanelGroup ({ groupIndex , itemIndex  }) {
-                set((state)=>{
-                    const group = state.layouts[groupIndex];
-                    if (group === undefined) {
-                        throw new Error(`No panel group found: ${groupIndex}`);
-                    }
-                    // remove panel from panel group
-                    group.items.splice(itemIndex, 1);
-                });
-            },
-            deletePanelGroup (groupIndex) {
-                const { layouts , deletePanels  } = get();
-                const group = layouts[groupIndex];
-                if (group === undefined) {
-                    throw new Error(`No panel group found: ${groupIndex}`);
-                }
-                // remove panels from group first
-                const panelsToBeDeleted = [];
-                for(let i = 0; i < group.items.length; i++){
-                    panelsToBeDeleted.push({
-                        groupIndex,
-                        itemIndex: i
-                    });
-                }
-                deletePanels(panelsToBeDeleted);
-                // remove group from state.layouts
-                set((state)=>{
-                    state.layouts.splice(groupIndex, 1);
-                });
-            },
-            // Return an object that maps each panel to the groups it belongs
-            mapPanelToPanelGroups () {
-                const map = {}; // { panel key: [group ids] }
-                get().layouts.forEach((group)=>{
-                    // for each panel in a group, add the group id to map[panelKey]
-                    group.items.forEach((panel)=>{
-                        const panelKey = (0, _core.getPanelKeyFromRef)(panel.content);
-                        if (map[panelKey]) {
-                            var ref;
-                            (ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.push(group.id);
-                        } else {
-                            map[panelKey] = [
-                                group.id
-                            ];
-                        }
-                    });
-                });
-                return map;
-            }
-        };
-    };
-}
-// Helper to find a group and throw if not found
-function findGroup(layouts, groupIndex) {
-    const group = layouts[groupIndex];
-    if (group === undefined) {
-        throw new Error(`No layout at index ${groupIndex}`);
-    }
-    return group;
-}
-// Helper to get an item in a group and throw if not found
-function findItem(group, itemIndex) {
-    const item = group.items[itemIndex];
-    if (item === undefined) {
-        throw new Error(`No grid item found at position ${itemIndex}`);
-    }
-    return item;
-}
-// Given a Grid, will find the Y coordinate for adding a new row to the grid, taking into account the items present
-function getYForNewRow(group) {
-    let newRowY = 0;
-    for (const item of group.items){
-        const itemMaxY = item.y + item.height;
-        if (itemMaxY > newRowY) {
-            newRowY = itemMaxY;
-        }
-    }
-    return newRowY;
-}

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

@@ -1,156 +0,0 @@
-// 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
-            }
-        }
-    };
-}