@perses-dev/dashboards 0.14.0 → 0.15.0

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

@@ -33,7 +33,7 @@ function _interopRequireDefault(obj) {
     };
 }
 const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
     const { openAddPanelGroup , openAddPanel  } = (0, _context.useDashboardActions)();
     const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
@@ -89,7 +89,9 @@ const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                                initialVariableIsSticky: initialVariableIsSticky
+                            })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: 'row',
@@ -150,7 +152,9 @@ const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                            initialVariableIsSticky: initialVariableIsSticky
+                        })
                     })
                 })
             ]

package/dist/cjs/{css/styles.js → components/GridLayout/GridContainer.js}

@@ -14,40 +14,68 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "styles", {
+Object.defineProperty(exports, "GridContainer", {
     enumerable: true,
-    get: ()=>styles
+    get: ()=>GridContainer
 });
-const styles = (theme)=>{
-    return {
-        '&.react-grid-layout': {
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function GridContainer(props) {
+    const [isFirstRender, setIsFirstRender] = (0, _react.useState)(true);
+    (0, _react.useEffect)(()=>{
+        if (isFirstRender) {
+            setIsFirstRender(false);
+        }
+    }, [
+        isFirstRender
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ReactGridLayoutContainer, {
+        sx: {
+            // This adds spcing between grids (rows) in the overall dashboard
+            '& + &': {
+                marginTop: (theme)=>theme.spacing(1)
+            },
+            // This disables the animation of grid items when a grid is first rendered
+            // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
+            '& .react-grid-item.cssTransforms': {
+                transitionProperty: isFirstRender ? 'none' : 'transform'
+            }
+        },
+        children: props.children
+    });
+}
+/**
+ * These are the classes needed by react-grid-layout from their CSS stylesheet.
+ */ const ReactGridLayoutContainer = (0, _material.styled)('section')(({ theme  })=>({
+        '& .react-grid-layout': {
             position: 'relative',
             transition: 'height 200ms ease'
         },
-        '&.react-grid-item': {
+        '& .react-grid-item': {
             transition: 'all 200ms ease',
             transitionProperty: 'left, top'
         },
-        '&.react-grid-item img': {
+        '& .react-grid-item img': {
             pointerEvents: 'none',
             userSelect: 'none'
         },
-        '&.react-grid-item.cssTransforms': {
+        '& .react-grid-item.cssTransforms': {
             transitionProperty: 'transform'
         },
-        '&.react-grid-item.resizing': {
+        '& .react-grid-item.resizing': {
             zIndex: 1,
             willChange: 'width, height'
         },
-        '&.react-grid-item.react-draggable-dragging': {
+        '& .react-grid-item.react-draggable-dragging': {
             transition: 'none',
             zIndex: 3,
             willChange: 'transform'
         },
-        '&.react-grid-item.dropping': {
+        '& .react-grid-item.dropping': {
             visibility: 'hidden'
         },
-        '&.react-grid-item.react-grid-placeholder': {
+        '& .react-grid-item.react-grid-placeholder': {
             background: theme.palette.primary.main,
             opacity: 0.2,
             transitionDuration: '100ms',
@@ -58,12 +86,12 @@ const styles = (theme)=>{
             msUserSelect: 'none',
             OUserSelect: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle': {
+        '& .react-grid-item > .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px'
         },
-        '&.react-grid-item > .react-resizable-handle::after': {
+        '& .react-grid-item > .react-resizable-handle::after': {
             content: '""',
             position: 'absolute',
             right: '3px',
@@ -73,62 +101,62 @@ const styles = (theme)=>{
             borderRight: '2px solid rgba(0, 0, 0, 0.4)',
             borderBottom: '2px solid rgba(0, 0, 0, 0.4)'
         },
-        '&.react-resizable-hide > .react-resizable-handle': {
+        '& .react-resizable-hide > .react-resizable-handle': {
             display: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         },
-        '&.react-resizable': {
+        '& .react-resizable': {
             position: 'relative'
         },
-        '&.react-resizable-handle': {
+        '& .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px',
@@ -139,54 +167,53 @@ const styles = (theme)=>{
             backgroundPosition: 'bottom right',
             padding: '0 3px 3px 0'
         },
-        '&.react-resizable-handle-sw': {
+        '& .react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-resizable-handle-se': {
+        '& .react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-resizable-handle-nw': {
+        '& .react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-resizable-handle-ne': {
+        '& .react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-resizable-handle-w, .react-resizable-handle-e': {
+        '& .react-resizable-handle-w, .react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-resizable-handle-w': {
+        '& .react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-resizable-handle-e': {
+        '& .react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-resizable-handle-n, .react-resizable-handle-s': {
+        '& .react-resizable-handle-n, .react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-resizable-handle-n': {
+        '& .react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-resizable-handle-s': {
+        '& .react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         }
-    };
-};
+    }));

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

@@ -23,83 +23,70 @@ const _react = require("react");
 const _reactGridLayout = require("react-grid-layout");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _styles = require("../../css/styles");
 const _context = require("../../context");
 const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
+const _gridContainer = require("./GridContainer");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
 function GridLayout(props) {
-    const { panelGroupId , ...others } = props;
+    const { panelGroupId /*...others */  } = props;
     const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
     const { updatePanelGroupLayouts  } = (0, _context.usePanelGroupActions)(panelGroupId);
     var ref;
     const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = (0, _context.useEditMode)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.GlobalStyles, {
-                styles: _styles.styles
+            groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
+                panelGroupId: panelGroupId,
+                title: groupDefinition.title,
+                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                    isOpen,
+                    onToggleOpen: ()=>setIsOpen((current)=>!current)
+                }
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                ...others,
-                component: "section",
-                sx: {
-                    '& + &': {
-                        marginTop: (theme)=>theme.spacing(1)
-                    }
-                },
-                children: [
-                    groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
-                        panelGroupId: panelGroupId,
-                        title: groupDefinition.title,
-                        collapse: groupDefinition.isCollapsed === undefined ? undefined : {
-                            isOpen,
-                            onToggleOpen: ()=>setIsOpen((current)=>!current)
-                        }
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
-                        in: isOpen,
-                        unmountOnExit: true,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
-                            className: "layout",
-                            breakpoints: {
-                                sm: theme.breakpoints.values.sm,
-                                xxs: 0
-                            },
-                            cols: {
-                                sm: 24,
-                                xxs: 2
-                            },
-                            rowHeight: 30,
-                            draggableHandle: '.drag-handle',
-                            resizeHandles: [
-                                'se'
-                            ],
-                            isDraggable: isEditMode,
-                            isResizable: isEditMode,
-                            containerPadding: [
-                                0,
-                                10
-                            ],
-                            layouts: {
-                                sm: groupDefinition.itemLayouts
-                            },
-                            onLayoutChange: updatePanelGroupLayouts,
-                            children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                                        FallbackComponent: _components.ErrorAlert,
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
-                                            panelGroupItemId: {
-                                                panelGroupId,
-                                                panelGroupItemLayoutId: i
-                                            }
-                                        })
-                                    })
-                                }, i))
-                        })
-                    })
-                ]
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
+                in: isOpen,
+                unmountOnExit: true,
+                appear: false,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
+                    className: "layout",
+                    breakpoints: {
+                        sm: theme.breakpoints.values.sm,
+                        xxs: 0
+                    },
+                    cols: {
+                        sm: 24,
+                        xxs: 2
+                    },
+                    rowHeight: 30,
+                    draggableHandle: '.drag-handle',
+                    resizeHandles: [
+                        'se'
+                    ],
+                    isDraggable: isEditMode,
+                    isResizable: isEditMode,
+                    containerPadding: [
+                        0,
+                        10
+                    ],
+                    layouts: {
+                        sm: groupDefinition.itemLayouts
+                    },
+                    onLayoutChange: updatePanelGroupLayouts,
+                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i
+                                    }
+                                })
+                            })
+                        }, i))
+                })
             })
         ]
     });

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

@@ -37,7 +37,8 @@ function _interopRequireDefault(obj) {
 function GridTitle(props) {
     const { panelGroupId , title , collapse  } = props;
     const [isHovered, setIsHovered] = (0, _react.useState)(false);
-    const { openAddPanel , openEditPanelGroup , deletePanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
     const { isEditMode  } = (0, _context.useEditMode)();
     const text = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
@@ -81,7 +82,7 @@ function GridTitle(props) {
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             "aria-label": "delete group",
-                            onClick: deletePanelGroup,
+                            onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {

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

@@ -95,17 +95,17 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
             id: titleElementId,
             variant: "subtitle1",
-            sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            },
             children: title
         }),
         action: action,
         sx: (0, _components.combineSx)((theme)=>({
                 padding: theme.spacing(1),
-                borderBottom: `solid 1px ${theme.palette.divider}`
+                borderBottom: `solid 1px ${theme.palette.divider}`,
+                '.MuiCardHeader-content': {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                }
             }), sx),
         ...rest
     });

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

@@ -25,8 +25,6 @@ _export(exports, {
     TimeRangeControls: ()=>TimeRangeControls
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _core = require("@perses-dev/core");
 const _context = require("../../context");
@@ -88,58 +86,21 @@ const TIME_OPTIONS = [
 ];
 function TimeRangeControls() {
     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,
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
-                anchorEl: anchorEl.current,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'center'
+    const defaultTimeRange = (0, _context.useDefaultTimeRange)();
+    // add time shortcut if one does not match duration from dashboard JSON
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
+        if ((0, _core.isDurationString)(defaultTimeRange.pastDuration)) {
+            TIME_OPTIONS.push({
+                value: {
+                    pastDuration: defaultTimeRange.pastDuration
                 },
-                open: showCustomDateSelector,
-                onClose: ()=>setShowCustomDateSelector(false),
-                sx: (theme)=>({
-                        padding: theme.spacing(2)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.AbsoluteTimePicker, {
-                    initialTimeRange: convertedTimeRange,
-                    onChange: (timeRange)=>{
-                        setTimeRange(timeRange);
-                        setShowCustomDateSelector(false);
-                    }
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
-                fullWidth: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                    ref: anchorEl,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.TimeRangeSelector, {
-                        timeOptions: TIME_OPTIONS,
-                        value: timeRange,
-                        onSelectChange: (event)=>{
-                            const duration = event.target.value;
-                            const relativeTimeInput = {
-                                pastDuration: duration,
-                                end: new Date()
-                            };
-                            setTimeRange(relativeTimeInput);
-                            setShowCustomDateSelector(false);
-                        },
-                        onCustomClick: ()=>{
-                            setShowCustomDateSelector(true);
-                        }
-                    })
-                })
-            })
-        ]
+                display: `Last ${defaultTimeRange.pastDuration}`
+            });
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
+        timeOptions: TIME_OPTIONS,
+        value: timeRange,
+        onChange: setTimeRange
     });
 }

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

@@ -45,29 +45,43 @@ describe('TimeRangeControls', ()=>{
             dashboardResource: _testDashboard.default
         };
     });
-    const renderTimeRangeControls = ()=>{
+    const renderTimeRangeControls = (testURLParams)=>{
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
             initialState: initialState,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                timeRange: testDefaultTimeRange,
+                initialTimeRange: testDefaultTimeRange,
+                enabledURLParams: testURLParams,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
             })
         }), undefined, history);
     };
-    it('should render correct initial relative time shortcut', async ()=>{
-        renderTimeRangeControls();
-        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();
+    it('should default to dashboard duration and update selected time option when clicked', async ()=>{
+        renderTimeRangeControls(false);
+        expect(_react.screen.getByText('Last 30 minutes')).toBeInTheDocument();
         const dateButton = _react.screen.getByRole('button');
         _userEvent.default.click(dateButton);
-        const firstOption = _react.screen.getByRole('option', {
+        const firstSelected = _react.screen.getByRole('option', {
             name: 'Last 5 minutes'
         });
-        _userEvent.default.click(firstOption);
+        _userEvent.default.click(firstSelected);
         expect(dateButton).toHaveTextContent(/5 minutes/i);
     });
+    it('should update URL params with correct time range values', ()=>{
+        renderTimeRangeControls(true);
+        const dateButton = _react.screen.getByRole('button');
+        _userEvent.default.click(dateButton);
+        const firstSelected = _react.screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        _userEvent.default.click(firstSelected);
+        expect(history.location.search).toEqual('?start=5m');
+        // pick another option from TimeRangeSelector dropdown
+        const secondSelected = _react.screen.getByText('Last 12 hours');
+        _userEvent.default.click(secondSelected);
+        expect(history.location.search).toEqual('?start=12h');
+        // back button should return to first option selected
+        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

@@ -57,16 +57,24 @@ function ListVariable({ name  }) {
     const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
     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) {
-        dependsOnVariables = variablePlugin.dependsOn(spec);
+        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 label = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.label) !== null && ref4 !== void 0 ? ref4 : name;
+    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)=>{
@@ -75,7 +83,6 @@ function ListVariable({ name  }) {
         });
     }
     const variablesValueKey = getVariableValuesKey(variables);
-    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const variablesOptionsQuery = (0, _reactQuery.useQuery)([
         name,
         definition,
@@ -165,7 +172,7 @@ function ListVariable({ name  }) {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
                     id: name,
-                    children: label
+                    children: title
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
                     sx: {

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

@@ -60,6 +60,7 @@ function VariableEditor(props) {
             }
             if (!v.spec.display) {
                 v.spec.display = {
+                    name: v.spec.name,
                     hidden: false
                 };
             }