@perses-dev/dashboards 0.15.0 → 0.17.0

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -27,6 +27,7 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _variables = require("../Variables");
 const _timeRangeControls = require("../TimeRangeControls");
+const _downloadButton = require("../DownloadButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -60,9 +61,7 @@ const DashboardToolbar = (props)=>{
                             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 spacing: 1,
-                                sx: {
-                                    marginLeft: 'auto'
-                                },
+                                marginLeft: "auto",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                         variant: "contained",
@@ -94,11 +93,9 @@ const DashboardToolbar = (props)=>{
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                            direction: 'row',
+                            direction: "row",
                             spacing: 1,
-                            sx: {
-                                marginLeft: 'auto'
-                            },
+                            marginLeft: "auto",
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plusBoxOutline.default, {}),
@@ -117,7 +114,7 @@ const DashboardToolbar = (props)=>{
                 })
             ]
         }) : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            spacing: 2,
+            spacing: 1,
             padding: 2,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
@@ -129,12 +126,11 @@ const DashboardToolbar = (props)=>{
                         dashboardTitle,
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
-                            spacing: 2,
-                            sx: {
-                                marginLeft: 'auto'
-                            },
+                            spacing: 1,
+                            marginLeft: "auto",
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
                                 isLaptopSize && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),

package/dist/cjs/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,109 @@
+// 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, "DownloadButton", {
+    enumerable: true,
+    get: ()=>DownloadButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _downloadOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DownloadOutline"));
+const _material = require("@mui/material");
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function DownloadButton() {
+    const { dashboard  } = (0, _context.useDashboard)();
+    const hiddenLinkRef = (0, _react.useRef)(null);
+    const onDownloadButtonClick = ()=>{
+        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+        // Create blob URL
+        const hiddenLinkUrl = URL.createObjectURL(new Blob([
+            JSON.stringify(dashboard)
+        ], {
+            type: 'application/json'
+        }));
+        // Simulate click
+        hiddenLinkRef.current.href = hiddenLinkUrl;
+        hiddenLinkRef.current.click();
+        // Remove blob URL (for memory management)
+        URL.revokeObjectURL(hiddenLinkUrl);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+const DownloadIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px',
+        color: theme.palette.grey[900]
+    }));

package/dist/cjs/{utils/component-ids.js → components/DownloadButton/index.js}

@@ -14,18 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useId", {
-    enumerable: true,
-    get: ()=>useId
-});
-const _react = require("react");
-function useId(prefix) {
-    if (globalThis.useIdValue === undefined) {
-        globalThis.useIdValue = 0;
-    }
-    const id = (0, _react.useRef)(undefined);
-    if (id.current === undefined) {
-        id.current = `${prefix}-${globalThis.useIdValue++}`;
-    }
-    return id.current;
+_exportStar(require("./DownloadButton"), 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/GridLayout/GridLayout.js

@@ -28,6 +28,7 @@ const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
 const _gridContainer = require("./GridContainer");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
+const SMALL_LAYOUT_BREAKPOINT = 'sm';
 function GridLayout(props) {
     const { panelGroupId /*...others */  } = props;
     const theme = (0, _material.useTheme)();
@@ -36,6 +37,16 @@ function GridLayout(props) {
     var ref;
     const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = (0, _context.useEditMode)();
+    const handleLayoutChange = (currentLayout, allLayouts)=>{
+        // Using the value from `allLayouts` instead of `currentLayout` because of
+        // a bug in react-layout-grid where `currentLayout` does not adjust properly
+        // when going to a smaller breakpoint and then back to a larger breakpoint.
+        // https://github.com/react-grid-layout/react-grid-layout/issues/1663
+        const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];
+        if (smallLayout) {
+            updatePanelGroupLayouts(smallLayout);
+        }
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
@@ -72,9 +83,9 @@ function GridLayout(props) {
                         10
                     ],
                     layouts: {
-                        sm: groupDefinition.itemLayouts
+                        [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
                     },
-                    onLayoutChange: updatePanelGroupLayouts,
+                    onLayoutChange: handleLayoutChange,
                     children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -19,11 +19,10 @@ Object.defineProperty(exports, "GridTitle", {
     get: ()=>GridTitle
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
-const _chevronUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronUp"));
 const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
-const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
+const _chevronRight = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronRight"));
+const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
 const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
@@ -36,7 +35,6 @@ function _interopRequireDefault(obj) {
 }
 function GridTitle(props) {
     const { panelGroupId , title , collapse  } = props;
-    const [isHovered, setIsHovered] = (0, _react.useState)(false);
     const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
     const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
     const { isEditMode  } = (0, _context.useEditMode)();
@@ -55,44 +53,40 @@ function GridTitle(props) {
             padding: (theme)=>theme.spacing(1),
             backgroundColor: (theme)=>theme.palette.background.default
         },
-        onMouseEnter: ()=>setIsHovered(true),
-        onMouseLeave: ()=>setIsHovered(false),
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                     onClick: collapse.onToggleOpen,
-                    children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronUp.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {})
+                    children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
                 }),
                 text,
-                isEditMode && isHovered && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                     direction: "row",
-                    sx: {
-                        marginLeft: 'auto'
-                    },
+                    marginLeft: "auto",
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "add panel to group",
+                            "aria-label": `add panel to group ${title}`,
                             onClick: openAddPanel,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "edit group",
+                            "aria-label": `edit group ${title}`,
                             onClick: openEditPanelGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "delete group",
+                            "aria-label": `delete group ${title}`,
                             onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "move group down",
+                            "aria-label": `move group ${title} down`,
                             disabled: moveDown === undefined,
                             onClick: moveDown,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "move group up",
+                            "aria-label": `move group ${title} up`,
                             disabled: moveUp === undefined,
                             onClick: moveUp,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})

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

@@ -24,7 +24,6 @@ const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-res
 const _reactIntersectionObserver = require("react-intersection-observer");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
-const _componentIds = require("../../utils/component-ids");
 const _panelHeader = require("./PanelHeader");
 const _panelContent = require("./PanelContent");
 function _interopRequireDefault(obj) {
@@ -35,7 +34,7 @@ function _interopRequireDefault(obj) {
 function Panel(props) {
     const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
-    const generatedPanelId = (0, _componentIds.useId)('Panel');
+    const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = (0, _react.useState)(null);
     const [isHovered, setIsHovered] = (0, _react.useState)(false);
@@ -109,6 +108,9 @@ function Panel(props) {
                 ref: setContentElement,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                     FallbackComponent: _components.ErrorAlert,
+                    resetKeys: [
+                        definition.spec.plugin.spec
+                    ],
                     children: inView === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelContent.PanelContent, {
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,

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

@@ -33,58 +33,55 @@ function _interopRequireDefault(obj) {
 function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    // Don't show any actions unless panel is hovered
     let action = undefined;
-    if (isHovered) {
-        if (editHandlers !== undefined) {
-            // If there are edit handlers, always just show the edit buttons
-            action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                spacing: 0.5,
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "edit panel",
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "delete panel",
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "drag handle",
-                        size: "small",
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            }
-                        })
-                    })
-                ]
-            });
-        } else if (description !== undefined) {
-            // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-            action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                id: descriptionTooltipId,
-                description: description,
-                placement: _components.TooltipPlacement.Bottom,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                    "aria-label": "Panel Description",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
-                        "aria-describedby": "info-tooltip",
-                        "aria-hidden": false,
+    if (editHandlers !== undefined) {
+        // If there are edit handlers, always just show the edit buttons
+        action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 0.5,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `edit panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onEditPanelClick,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `delete panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onDeletePanelClick,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `move panel ${title}`,
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                        className: "drag-handle",
                         sx: {
-                            color: (theme)=>theme.palette.grey[700]
+                            cursor: 'grab'
                         }
                     })
                 })
-            });
-        }
+            ]
+        });
+    } else if (description !== undefined && isHovered) {
+        // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
+        action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            id: descriptionTooltipId,
+            description: description,
+            placement: _components.TooltipPlacement.Bottom,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                "aria-label": "Panel Description",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                    "aria-describedby": "info-tooltip",
+                    "aria-hidden": false,
+                    sx: {
+                        color: (theme)=>theme.palette.grey[700]
+                    }
+                })
+            })
+        });
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
         id: id,
@@ -95,6 +92,15 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
             id: titleElementId,
             variant: "subtitle1",
+            sx: {
+                // `minHeight` guarantees that the header has the correct height
+                // when there is no title (i.e. in the preview)
+                lineHeight: '24px',
+                minHeight: '24px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
             children: title
         }),
         action: action,
@@ -102,9 +108,7 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
+                    overflow: 'hidden'
                 }
             }), sx),
         ...rest

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

@@ -70,9 +70,7 @@ const PanelDrawer = ()=>{
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 1,
-                            sx: {
-                                marginLeft: 'auto'
-                            },
+                            marginLeft: "auto",
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     type: "submit",

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

@@ -70,6 +70,29 @@ describe('Panel Drawer', ()=>{
             }
         });
     });
+    it('should add panel with duplicate panel name', async ()=>{
+        const storeApi = renderPanelDrawer();
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'cpu');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // make sure we don't have duplicate panel key by appending "-1"
+            'cpu-1': {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel

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

@@ -80,7 +80,9 @@ describe('TimeRangeControls', ()=>{
         _userEvent.default.click(secondSelected);
         expect(history.location.search).toEqual('?start=12h');
         // back button should return to first option selected
-        history.back();
+        (0, _react.act)(()=>{
+            history.back();
+        });
         expect(history.location.search).toEqual('?start=5m');
     });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.

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

@@ -22,8 +22,8 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _pluginSystem = require("@perses-dev/plugin-system");
-const _reactQuery = require("@tanstack/react-query");
 const _context = require("../../context");
+const _variableModel = require("./variable-model");
 function TemplateVariable({ name  }) {
     var ref;
     const ctx = (0, _context.useTemplateVariable)(name);
@@ -45,60 +45,16 @@ function TemplateVariable({ name  }) {
         ]
     });
 }
-/**
- * Returns a serialized string of the current state of variable values.
- */ function getVariableValuesKey(v) {
-    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
-}
 function ListVariable({ name  }) {
     var ref, ref1, ref2, ref3;
     const ctx = (0, _context.useTemplateVariable)(name);
     const definition = ctx.definition;
-    const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
+    const variablesOptionsQuery = (0, _variableModel.useListVariablePluginValues)(definition);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
-    const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
-    const allVariables = (0, _pluginSystem.useTemplateVariableValues)();
-    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
-    const variablePluginCtx = {
-        timeRange,
-        datasourceStore,
-        variables: allVariables
-    };
-    const spec = definition.spec.plugin.spec;
-    let dependsOnVariables;
-    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
-        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
-        dependsOnVariables = dependencies.variables;
-    }
-    const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
     var ref4;
     const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
-    let waitToLoad = false;
-    if (dependsOnVariables) {
-        waitToLoad = dependsOnVariables.some((v)=>{
-            var ref;
-            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
-        });
-    }
-    const variablesValueKey = getVariableValuesKey(variables);
-    const variablesOptionsQuery = (0, _reactQuery.useQuery)([
-        name,
-        definition,
-        variablesValueKey,
-        timeRange
-    ], async ()=>{
-        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
-            datasourceStore,
-            variables,
-            timeRange
-        }));
-        var ref;
-        return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
-    }, {
-        enabled: !!variablePlugin || waitToLoad
-    });
     (0, _react.useEffect)(()=>{
         setVariableLoading(name, variablesOptionsQuery.isFetching);
         if (variablesOptionsQuery.data) {
@@ -199,6 +155,11 @@ function ListVariable({ name  }) {
                             disabled: true,
                             children: "Loading"
                         }),
+                        finalOptions.length === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                            value: "empty",
+                            disabled: true,
+                            children: "No options"
+                        }),
                         finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
                                 value: option.value,
                                 children: option.label