@perses-dev/dashboards 0.29.1 → 0.30.0

package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -0,0 +1,79 @@
+// Copyright 2023 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, "DashboardStickyToolbar", {
+    enumerable: true,
+    get: ()=>DashboardStickyToolbar
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
+const _variables = require("../Variables");
+const _timeRangeControls = require("../TimeRangeControls");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function DashboardStickyToolbar(props) {
+    const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
+    const scrollTrigger = (0, _material.useScrollTrigger)({
+        disableHysteresis: true
+    });
+    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
+    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
+    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        marginBottom: -1,
+        "data-testid": "variable-list",
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
+            color: "inherit",
+            position: isSticky ? 'fixed' : 'static',
+            elevation: isSticky ? 4 : 0,
+            sx: {
+                backgroundColor: 'inherit',
+                ...props.sx
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        alignItems: "start",
+                        my: isSticky ? 2 : 0,
+                        ml: isSticky ? 2 : 0,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {}),
+                            props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                onClick: ()=>setIsPin(!isPin),
+                                children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
+                            })
+                        ]
+                    }),
+                    isSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        my: 2,
+                        mr: 2,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
+                    })
+                ]
+            })
+        })
+    }));
+}

package/dist/cjs/{stories/decorators/WithQueryClient.js → components/DashboardStickyToolbar/index.js}

@@ -14,16 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithQueryClient", {
-    enumerable: true,
-    get: ()=>WithQueryClient
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _reactQuery = require("@tanstack/react-query");
-const WithQueryClient = (Story)=>{
-    const queryClient = new _reactQuery.QueryClient({});
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
-        client: queryClient,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+_exportStar(require("./DashboardStickyToolbar"), 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/DashboardToolbar/DashboardToolbar.js

@@ -30,6 +30,7 @@ const _timeRangeControls = require("../TimeRangeControls");
 const _variables = require("../Variables");
 const _editButton = require("../EditButton");
 const _editJsonButton = require("../EditJsonButton");
+const _dashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const dashboard = (0, _context.useDashboard)();
@@ -106,7 +107,7 @@ 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)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
                                     backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
@@ -194,7 +195,7 @@ 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)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
                                 backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -22,6 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _dashboardProvider = require("../../context/DashboardProvider");
 const _useDashboard = require("../../context/useDashboard");
 const EditJsonDialog = ()=>{
@@ -42,11 +43,15 @@ const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
+    const { setTimeRange  } = (0, _pluginSystem.useTimeRange)();
     const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
     const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
         setDashboard(draftDashboard);
+        setTimeRange({
+            pastDuration: draftDashboard.spec.duration
+        });
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Form, {

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

@@ -98,17 +98,17 @@ const DEFAULT_HEIGHT = '34px';
 function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
     // TODO: Remove this since it couples to the dashboard context
-    const defaultTimeRange = (0, _context.useDefaultTimeRange)();
+    const dashboardDuration = (0, _context.useDashboardDuration)();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // 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)) {
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === dashboardDuration)) {
+        if ((0, _core.isDurationString)(dashboardDuration)) {
             TIME_OPTIONS.push({
                 value: {
-                    pastDuration: defaultTimeRange.pastDuration
+                    pastDuration: dashboardDuration
                 },
-                display: `Last ${defaultTimeRange.pastDuration}`
+                display: `Last ${dashboardDuration}`
             });
         }
     }

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

@@ -182,7 +182,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
     const refreshPreview = ()=>{
         setPreviewKey((prev)=>prev + 1);
     };
-    /** We use the `previewKey` that we increment to know when to explicity update the
+    /** We use the `previewKey` that we increment to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
    */ const previewSpec = (0, _react.useMemo)(()=>{

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -58,17 +58,15 @@ function getInitialState(initialVariableDefinition) {
 }
 function getVariableDefinitionFromState(state) {
     const { name , title , kind  } = state;
-    const commonSpec = {
-        name,
-        display: {
-            name: title
-        }
-    };
+    const display = title ? {
+        name: title
+    } : undefined;
     if (kind === 'TextVariable') {
         return {
             kind,
             spec: {
-                ...commonSpec,
+                name,
+                display,
                 ...state.textVariableFields
             }
         };
@@ -77,7 +75,8 @@ function getVariableDefinitionFromState(state) {
         return {
             kind,
             spec: {
-                ...commonSpec,
+                name,
+                display,
                 allow_multiple: state.listVariableFields.allowMultiple,
                 allow_all_value: state.listVariableFields.allowAll,
                 capturing_regexp: state.listVariableFields.capturing_regexp,

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

@@ -19,66 +19,27 @@ Object.defineProperty(exports, "TemplateVariableList", {
     get: ()=>TemplateVariableList
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
-const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
-const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
 const _context = require("../../context");
 const _templateVariable = require("./TemplateVariable");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const VARIABLE_INPUT_MIN_WIDTH = '120px';
 const VARIABLE_INPUT_MAX_WIDTH = '240px';
-function TemplateVariableList(props) {
-    const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
+function TemplateVariableList() {
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    const scrollTrigger = (0, _material.useScrollTrigger)({
-        disableHysteresis: true
-    });
-    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
-    return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
-    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
-    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-        marginBottom: -1,
-        "data-testid": "variable-list",
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
-            color: "inherit",
-            position: isSticky ? 'fixed' : 'static',
-            elevation: isSticky ? 4 : 0,
-            sx: {
-                backgroundColor: 'inherit',
-                ...props.sx
-            },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                display: "flex",
-                flexWrap: "wrap",
-                alignItems: "start",
-                my: isSticky ? 2 : 0,
-                ml: isSticky ? 2 : 0,
-                children: [
-                    variableDefinitions.map((v)=>{
-                        var ref;
-                        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
-                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                            minWidth: VARIABLE_INPUT_MIN_WIDTH,
-                            maxWidth: VARIABLE_INPUT_MAX_WIDTH,
-                            marginBottom: 1,
-                            marginRight: 1,
-                            "data-testid": "template-variable",
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_templateVariable.TemplateVariable, {
-                                name: v.spec.name
-                            }, v.spec.name)
-                        }, v.spec.name);
-                    }),
-                    props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                        onClick: ()=>setIsPin(!isPin),
-                        children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
-                    })
-                ]
-            })
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: variableDefinitions.map((v)=>{
+            var ref;
+            /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
+                display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                minWidth: VARIABLE_INPUT_MIN_WIDTH,
+                maxWidth: VARIABLE_INPUT_MAX_WIDTH,
+                marginBottom: 1,
+                marginRight: 1,
+                "data-testid": "template-variable",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_templateVariable.TemplateVariable, {
+                    name: v.spec.name
+                }, v.spec.name)
+            }, v.spec.name);
         })
-    }));
+    });
 }

package/dist/cjs/components/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./AddGroupButton"), exports);
 _exportStar(require("./AddPanelButton"), exports);
 _exportStar(require("./Dashboard"), exports);
 _exportStar(require("./DashboardToolbar"), exports);
+_exportStar(require("./DashboardStickyToolbar"), exports);
 _exportStar(require("./DeletePanelDialog"), exports);
 _exportStar(require("./DeletePanelGroupDialog"), exports);
 _exportStar(require("./DiscardChangesConfirmationDialog"), exports);

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

@@ -100,14 +100,12 @@ function initStore(props) {
             ...(0, _editJsonDialogSlice.createEditJsonDialogSlice)(...args),
             metadata,
             display,
-            defaultTimeRange: {
-                pastDuration: duration
-            },
+            duration,
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[]  }  })=>{
+            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration  }  })=>{
                 set((state)=>{
                     state.metadata = metadata;
                     state.display = display;
@@ -115,6 +113,7 @@ function initStore(props) {
                     const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
+                    state.duration = duration;
                 });
             }
         };

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -33,7 +33,7 @@ _export(exports, {
     usePanelActions: ()=>usePanelActions,
     usePanelEditor: ()=>usePanelEditor,
     useDeletePanelDialog: ()=>useDeletePanelDialog,
-    useDefaultTimeRange: ()=>useDefaultTimeRange,
+    useDashboardDuration: ()=>useDashboardDuration,
     useDiscardChangesConfirmationDialog: ()=>useDiscardChangesConfirmationDialog,
     useEditJsonDialog: ()=>useEditJsonDialog
 });
@@ -189,9 +189,9 @@ function useDeletePanelDialog() {
     // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
     return (0, _dashboardProvider.useDashboardStore)(selectDeletePanelDialog);
 }
-const selectDefaultTimeRange = (state)=>state.defaultTimeRange;
-function useDefaultTimeRange() {
-    return (0, _dashboardProvider.useDashboardStore)(selectDefaultTimeRange);
+const selectDashboardDuration = (state)=>state.duration;
+function useDashboardDuration() {
+    return (0, _dashboardProvider.useDashboardStore)(selectDashboardDuration);
 }
 const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog , openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  })=>({
         discardChangesConfirmationDialog,

package/dist/cjs/context/useDashboard.js

@@ -22,14 +22,14 @@ const _core = require("@perses-dev/core");
 const _dashboardProvider = require("./DashboardProvider");
 const _templateVariableProvider = require("./TemplateVariableProvider");
 function useDashboard() {
-    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard: setDashboardResource , metadata , display ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard , metadata , display  })=>({
+    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration  })=>({
             panels,
             panelGroups,
             panelGroupOrder,
-            defaultTimeRange,
             setDashboard,
             metadata,
-            display
+            display,
+            duration
         }));
     const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
     const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
@@ -42,7 +42,7 @@ function useDashboard() {
             panels,
             layouts,
             variables,
-            duration: defaultTimeRange.pastDuration
+            duration
         }
     };
     const setDashboard = (dashboardResource)=>{

package/dist/cjs/stories/decorators/index.js

@@ -16,13 +16,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./constants"), exports);
 _exportStar(require("./WithDashboard"), exports);
-_exportStar(require("./WithDataQueriesProvider"), exports);
 _exportStar(require("./WithDatasourceStore"), exports);
-_exportStar(require("./WithPluginRegistry"), exports);
-_exportStar(require("./WithQueryClient"), exports);
-_exportStar(require("./WithQueryParams"), exports);
 _exportStar(require("./WithTemplateVariables"), exports);
-_exportStar(require("./WithTimeRange"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+interface DashboardStickyToolbarProps {
+    initialVariableIsSticky?: boolean;
+    sx?: SxProps<Theme>;
+}
+export declare function DashboardStickyToolbar(props: DashboardStickyToolbarProps): JSX.Element;
+export {};
+//# sourceMappingURL=DashboardStickyToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA2B,OAAO,EAAE,KAAK,EAAoB,MAAM,eAAe,CAAC;AAM1F,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAgCxE"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -0,0 +1,68 @@
+// Copyright 2023 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AppBar, Box, IconButton, useScrollTrigger } from '@mui/material';
+import PinOutline from 'mdi-material-ui/PinOutline';
+import PinOffOutline from 'mdi-material-ui/PinOffOutline';
+import { TemplateVariableList } from '../Variables';
+import { TimeRangeControls } from '../TimeRangeControls';
+export function DashboardStickyToolbar(props) {
+    const [isPin, setIsPin] = useState(props.initialVariableIsSticky);
+    const scrollTrigger = useScrollTrigger({
+        disableHysteresis: true
+    });
+    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
+    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
+    /*#__PURE__*/ _jsx(Box, {
+        marginBottom: -1,
+        "data-testid": "variable-list",
+        children: /*#__PURE__*/ _jsx(AppBar, {
+            color: "inherit",
+            position: isSticky ? 'fixed' : 'static',
+            elevation: isSticky ? 4 : 0,
+            sx: {
+                backgroundColor: 'inherit',
+                ...props.sx
+            },
+            children: /*#__PURE__*/ _jsxs(Box, {
+                display: "flex",
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        alignItems: "start",
+                        my: isSticky ? 2 : 0,
+                        ml: isSticky ? 2 : 0,
+                        children: [
+                            /*#__PURE__*/ _jsx(TemplateVariableList, {}),
+                            props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
+                                onClick: ()=>setIsPin(!isPin),
+                                children: isPin ? /*#__PURE__*/ _jsx(PinOutline, {}) : /*#__PURE__*/ _jsx(PinOffOutline, {})
+                            })
+                        ]
+                    }),
+                    isSticky && /*#__PURE__*/ _jsx(Box, {
+                        my: 2,
+                        mr: 2,
+                        children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
+                    })
+                ]
+            })
+        })
+    }));
+}
+
+//# sourceMappingURL=DashboardStickyToolbar.js.map

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { AppBar, Box, IconButton, SxProps, Theme, useScrollTrigger } from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box display=\"flex\" justifyContent=\"space-between\">\n          <Box display=\"flex\" flexWrap=\"wrap\" alignItems=\"start\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n            <TemplateVariableList></TemplateVariableList>\n            {props.initialVariableIsSticky && (\n              <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Box my={2} mr={2}>\n              <TimeRangeControls></TimeRangeControls>\n            </Box>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","useScrollTrigger","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexWrap","alignItems","my","ml","onClick","mr"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,EAAEC,GAAG,EAAEC,UAAU,EAAkBC,gBAAgB,QAAQ,eAAe,CAAC;AAC1F,OAAOC,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAOC,aAAa,MAAM,+BAA+B,CAAC;AAC1D,SAASC,oBAAoB,QAAQ,cAAc,CAAC;AACpD,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AAOzD,OAAO,SAASC,sBAAsB,CAACC,KAAkC,EAAE;IACzE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAACU,KAAK,CAACG,uBAAuB,CAAC,AAAC;IAElE,MAAMC,aAAa,GAAGV,gBAAgB,CAAC;QAAEW,iBAAiB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpE,MAAMC,QAAQ,GAAGF,aAAa,IAAIJ,KAAK,CAACG,uBAAuB,IAAIF,KAAK,AAAC;IAEzE,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACT,GAAG;QAACe,YAAY,EAAE,CAAC,CAAC;QAAEC,aAAW,EAAC,eAAe;kBAChD,cAAA,KAACjB,MAAM;YACLkB,KAAK,EAAC,SAAS;YACfC,QAAQ,EAAEJ,QAAQ,GAAG,OAAO,GAAG,QAAQ;YACvCK,SAAS,EAAEL,QAAQ,GAAG,CAAC,GAAG,CAAC;YAC3BM,EAAE,EAAE;gBAAEC,eAAe,EAAE,SAAS;gBAAE,GAAGb,KAAK,CAACY,EAAE;aAAE;sBAE/C,cAAA,MAACpB,GAAG;gBAACsB,OAAO,EAAC,MAAM;gBAACC,cAAc,EAAC,eAAe;;kCAChD,MAACvB,GAAG;wBAACsB,OAAO,EAAC,MAAM;wBAACE,QAAQ,EAAC,MAAM;wBAACC,UAAU,EAAC,OAAO;wBAACC,EAAE,EAAEZ,QAAQ,GAAG,CAAC,GAAG,CAAC;wBAAEa,EAAE,EAAEb,QAAQ,GAAG,CAAC,GAAG,CAAC;;0CAC/F,KAACT,oBAAoB,KAAwB;4BAC5CG,KAAK,CAACG,uBAAuB,kBAC5B,KAACV,UAAU;gCAAC2B,OAAO,EAAE,IAAMlB,QAAQ,CAAC,CAACD,KAAK,CAAC;0CAAGA,KAAK,iBAAG,KAACN,UAAU,KAAG,iBAAG,KAACC,aAAa,KAAG;8BAAc,AACvG;;sBACG;oBACLU,QAAQ,kBACP,KAACd,GAAG;wBAAC0B,EAAE,EAAE,CAAC;wBAAEG,EAAE,EAAE,CAAC;kCACf,cAAA,KAACvB,iBAAiB,KAAqB;sBACnC,AACP;;cACG;UACC;MACL,EACN;AACJ,CAAC"}

package/dist/components/DashboardStickyToolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DashboardStickyToolbar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DashboardStickyToolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/index.ts"],"names":[],"mappings":"AAaA,cAAc,0BAA0B,CAAC"}

package/dist/{stories/decorators/WithQueryClient.js → components/DashboardStickyToolbar/index.js}

@@ -10,14 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-export const WithQueryClient = (Story)=>{
-    const queryClient = new QueryClient({});
-    return /*#__PURE__*/ _jsx(QueryClientProvider, {
-        client: queryClient,
-        children: /*#__PURE__*/ _jsx(Story, {})
-    });
-};
+export * from './DashboardStickyToolbar';
 
-//# sourceMappingURL=WithQueryClient.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/DashboardStickyToolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './DashboardStickyToolbar';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,0BAA0B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAUrD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAoI5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAWrD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAoI5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -19,9 +19,10 @@ import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
 import { TimeRangeControls } from '../TimeRangeControls';
-import { TemplateVariableList, EditVariablesButton } from '../Variables';
+import { EditVariablesButton } from '../Variables';
 import { EditButton } from '../EditButton';
 import { EditJsonButton } from '../EditJsonButton';
+import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const dashboard = useDashboard();
@@ -98,7 +99,7 @@ export const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                            children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
                                     backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
@@ -186,7 +187,7 @@ export const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                        children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
                                 backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper