@perses-dev/dashboards 0.10.0 → 0.11.0

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

@@ -14,129 +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;
-    const { layouts , updatePanelGroup  } = (0, _context.useLayouts)();
-    const { panelGroupDialog , closePanelGroupDialog  } = (0, _context.usePanelGroupDialog)();
-    const groupIndex = panelGroupDialog === null || panelGroupDialog === void 0 ? void 0 : panelGroupDialog.groupIndex;
-    const isEditingPanelGroup = groupIndex !== undefined;
-    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(isEditingPanelGroup && ((ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.isCollapsed));
-    const [name, setName] = (0, _react.useState)(isEditingPanelGroup ? (ref1 = layouts[groupIndex]) === null || ref1 === void 0 ? void 0 : ref1.title : '');
-    const handleSubmit = (e)=>{
-        var ref;
-        e.preventDefault();
-        var ref1;
-        const newGroup = {
-            isCollapsed,
-            title: name !== null && name !== void 0 ? name : '',
-            items: groupIndex === undefined ? [] : (ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items) !== null && ref1 !== void 0 ? ref1 : []
-        };
-        updatePanelGroup(newGroup, 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: panelGroupDialog !== undefined,
-        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

@@ -21,7 +21,7 @@ const _testUtils = require("react-dom/test-utils");
 const _context = require("../../context");
 const _test = require("../../test");
 const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
-const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("./PanelGroupDialog"));
+const _panelGroupDialog = require("./PanelGroupDialog");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -37,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;
@@ -49,33 +49,39 @@ describe('Add Panel Group', ()=>{
     it('should add new panel group', async ()=>{
         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({
-            id: 3,
-            title: 'New Panel Group',
-            isCollapsed: false,
-            items: []
+        // 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({
-            id: 0,
-            title: 'New Name',
-            isCollapsed: false,
-            items: (ref = _testDashboard.default.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
+        // 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
+            }
         });
     });
 });

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

@@ -0,0 +1,92 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PanelGroupEditorForm: ()=>PanelGroupEditorForm,
+    panelGroupEditorFormId: ()=>panelGroupEditorFormId
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function PanelGroupEditorForm(props) {
+    const { initialValues , onSubmit  } = props;
+    const [title, setTitle] = (0, _react.useState)(initialValues.title);
+    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(initialValues.isCollapsed);
+    const handleCollapsedChange = (e)=>{
+        const next = e.target.value;
+        setIsCollapsed(next === 'Closed');
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        onSubmit({
+            title,
+            isCollapsed
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+        id: panelGroupEditorFormId,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                    required: true,
+                    label: "Name",
+                    variant: "outlined",
+                    value: title,
+                    onChange: (e)=>setTitle(e.target.value)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "select-collapse-state",
+                        children: "Collapse State"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+                        required: true,
+                        displayEmpty: true,
+                        labelId: "select-collapse-state",
+                        label: "Collapse State",
+                        size: "small",
+                        value: isCollapsed ? 'Closed' : 'Open',
+                        onChange: handleCollapsedChange,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                value: "Open",
+                                children: "Open"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                value: "Closed",
+                                children: "Closed"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+const panelGroupEditorFormId = 'panel-group-editor-form';

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

@@ -0,0 +1,29 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./PanelGroupDialog"), exports);
+_exportStar(require("./DeletePanelGroupDialog"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -29,7 +29,6 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const TIME_OPTIONS = [
     {
@@ -88,14 +87,14 @@ const TIME_OPTIONS = [
     }
 ];
 function TimeRangeControls() {
-    const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRange)();
-    const dashboardDefaultTimeRange = (0, _context.useDefaultTimeRange)();
-    const { queryString  } = (0, _pluginSystem.useQueryString)();
-    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboardDefaultTimeRange, queryString);
-    // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
-    const [selectedTimeRange, setSelectedTimeRange] = (0, _react.useState)(defaultTimeRange);
+    const { timeRange , setTimeRange  } = (0, _context.useDashboardTimeRange)();
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
     const anchorEl = (0, _react.useRef)();
+    const convertedTimeRange = (0, _react.useMemo)(()=>{
+        return (0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange;
+    }, [
+        timeRange
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         spacing: 1,
@@ -112,10 +111,9 @@ function TimeRangeControls() {
                         padding: theme.spacing(2)
                     }),
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.AbsoluteTimePicker, {
-                    initialTimeRange: timeRange,
+                    initialTimeRange: convertedTimeRange,
                     onChange: (timeRange)=>{
                         setTimeRange(timeRange);
-                        setSelectedTimeRange(timeRange);
                         setShowCustomDateSelector(false);
                     }
                 })
@@ -126,7 +124,7 @@ function TimeRangeControls() {
                     ref: anchorEl,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.TimeRangeSelector, {
                         timeOptions: TIME_OPTIONS,
-                        value: selectedTimeRange,
+                        value: timeRange,
                         onSelectChange: (event)=>{
                             const duration = event.target.value;
                             const relativeTimeInput = {
@@ -134,7 +132,6 @@ function TimeRangeControls() {
                                 end: new Date()
                             };
                             setTimeRange(relativeTimeInput);
-                            setSelectedTimeRange(relativeTimeInput);
                             setShowCustomDateSelector(false);
                         },
                         onCustomClick: ()=>{

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

@@ -15,8 +15,9 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const _reactRouter = require("react-router");
+const _history = require("history");
 const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _core = require("@perses-dev/core");
 const _react = require("@testing-library/react");
 const _test = require("../../test");
 const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
@@ -27,31 +28,37 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+const history = (0, _history.createMemoryHistory)({
+    initialEntries: [
+        (0, _reactRouter.generatePath)('/dashboards/:id', {
+            id: 'test'
+        })
+    ]
+});
 describe('TimeRangeControls', ()=>{
     let initialState;
+    const testDefaultTimeRange = {
+        pastDuration: _testDashboard.default.spec.duration
+    };
     beforeEach(()=>{
         initialState = {
             dashboardSpec: _testDashboard.default.spec
         };
     });
     const renderTimeRangeControls = ()=>{
-        const queryString = new URLSearchParams();
-        const defaultTimeRange = (0, _core.getDefaultTimeRange)(initialState.dashboardSpec.duration, queryString);
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.QueryStringProvider, {
-            queryString: queryString,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
-                initialState: initialState,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                    initialTimeRange: defaultTimeRange,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
-                })
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+            initialState: initialState,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+                timeRange: testDefaultTimeRange,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
             })
-        }));
+        }), undefined, history);
     };
     it('should render correct initial relative time shortcut', async ()=>{
         renderTimeRangeControls();
-        expect(_react.screen.getByText('Last 1 day')).toBeInTheDocument();
+        expect(_react.screen.getByText('Last 5 minutes')).toBeInTheDocument();
     });
+    // TODO: fix setTimeRange no-op, test query params
     it('should be able to select the first option', ()=>{
         renderTimeRangeControls();
         const dateButton = _react.screen.getByRole('button');

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

@@ -154,6 +154,7 @@ function ListVariable({ name  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         display: 'flex',
         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            fullWidth: true,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
                     id: name,

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

@@ -24,6 +24,8 @@ const _material = require("@mui/material");
 const _useImmer = require("use-immer");
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
+const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
+const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
 const _variableEditorForm = require("./VariableEditorForm");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -64,6 +66,27 @@ function VariableEditor(props) {
             v.spec.display.hidden = visible === false;
         });
     };
+    const changeVariableOrder = (index, direction)=>{
+        setVariableDefinitions((draft)=>{
+            if (direction === 'up') {
+                const prevElement = draft[index - 1];
+                const currentElement = draft[index];
+                if (index === 0 || !prevElement || !currentElement) {
+                    return;
+                }
+                draft[index - 1] = currentElement;
+                draft[index] = prevElement;
+            } else {
+                const nextElement = draft[index + 1];
+                const currentElement1 = draft[index];
+                if (index === draft.length - 1 || !nextElement || !currentElement1) {
+                    return;
+                }
+                draft[index + 1] = currentElement1;
+                draft[index] = nextElement;
+            }
+        });
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         p: 4,
         children: [
@@ -173,6 +196,16 @@ function VariableEditor(props) {
                                                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
                                                             align: "right",
                                                             children: [
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'up'),
+                                                                    disabled: idx === 0,
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'down'),
+                                                                    disabled: idx === variableDefinitions.length - 1,
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                                                                }),
                                                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                                                     onClick: ()=>setVariableEditIdx(idx),
                                                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})

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

@@ -39,7 +39,6 @@ function TemplateVariableList() {
     const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-        m: 2,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
                 anchor: 'right',

package/dist/cjs/components/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./Dashboard"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
+_exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
 _exportStar(require("./Variables"), exports);
 function _exportStar(from, to) {

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

@@ -31,9 +31,9 @@ const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
 const _shallow = /*#__PURE__*/ _interopRequireDefault(require("zustand/shallow"));
 const _react = require("react");
+const _panelGroupEditorSlice = require("./panel-group-editor-slice");
 const _panelGroupSlice = require("./panel-group-slice");
-const _layoutSlice = require("./layout-slice");
-const _panelEditingSlice = require("./panel-editing-slice");
+const _panelEditorSlice = require("./panel-editor-slice");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -51,16 +51,28 @@ function DashboardProvider(props) {
     const { children , initialState: { dashboardSpec , isEditMode  } ,  } = props;
     const { layouts , panels  } = dashboardSpec;
     const dashboardStore = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
-        const [set] = args;
+        const [set, get] = args;
         return {
-            ...(0, _panelGroupSlice.createPanelGroupSlice)(...args),
-            ...(0, _layoutSlice.createLayoutSlice)(layouts)(...args),
-            ...(0, _panelEditingSlice.createPanelEditorSlice)(panels)(...args),
-            defaultTimeRange: dashboardSpec.duration,
+            ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
+            ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
+            ...(0, _panelEditorSlice.createPanelEditorSlice)(panels)(...args),
+            defaultTimeRange: {
+                pastDuration: dashboardSpec.duration
+            },
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
-                })
+                }),
+            reset: ()=>{
+                const { resetPanels , resetPanelGroups  } = get();
+                resetPanels();
+                resetPanelGroups();
+            },
+            save: ()=>{
+                const { savePanels , savePanelGroups  } = get();
+                savePanels();
+                savePanelGroups();
+            }
         };
     })));
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {