@perses-dev/dashboards 0.29.1 → 0.31.0

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/Variables/index.js

@@ -19,6 +19,7 @@ _exportStar(require("./TemplateVariable"), exports);
 _exportStar(require("./VariableEditor"), exports);
 _exportStar(require("./VariableEditorForm"), exports);
 _exportStar(require("./VariableList"), exports);
+_exportStar(require("./variable-model"), 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/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);
@@ -30,6 +31,7 @@ _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
 _exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./QuerySummaryTable"), exports);
+_exportStar(require("./SaveChangesConfirmationDialog"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
 _exportStar(require("./ToolbarIconButton"), exports);
 _exportStar(require("./Variables"), exports);

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

@@ -39,6 +39,7 @@ const _panelSlice = require("./panel-slice");
 const _deletePanelGroupSlice = require("./delete-panel-group-slice");
 const _deletePanelSlice = require("./delete-panel-slice");
 const _discardChangesDialogSlice = require("./discard-changes-dialog-slice");
+const _saveChangesDialogSlice = require("./save-changes-dialog-slice");
 const _duplicatePanelSlice = require("./duplicate-panel-slice");
 const _editJsonDialogSlice = require("./edit-json-dialog-slice");
 const _common = require("./common");
@@ -98,16 +99,15 @@ function initStore(props) {
             ...(0, _duplicatePanelSlice.createDuplicatePanelSlice)()(...args),
             /* General */ ...(0, _discardChangesDialogSlice.createDiscardChangesDialogSlice)(...args),
             ...(0, _editJsonDialogSlice.createEditJsonDialogSlice)(...args),
+            ...(0, _saveChangesDialogSlice.createSaveChangesDialogSlice)(...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 +115,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,8 @@ _export(exports, {
     usePanelActions: ()=>usePanelActions,
     usePanelEditor: ()=>usePanelEditor,
     useDeletePanelDialog: ()=>useDeletePanelDialog,
-    useDefaultTimeRange: ()=>useDefaultTimeRange,
+    useDashboardDuration: ()=>useDashboardDuration,
+    useSaveChangesConfirmationDialog: ()=>useSaveChangesConfirmationDialog,
     useDiscardChangesConfirmationDialog: ()=>useDiscardChangesConfirmationDialog,
     useEditJsonDialog: ()=>useEditJsonDialog
 });
@@ -189,9 +190,17 @@ 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 selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog , openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  })=>({
+        saveChangesConfirmationDialog,
+        openSaveChangesConfirmationDialog,
+        closeSaveChangesConfirmationDialog
+    });
+function useSaveChangesConfirmationDialog() {
+    return (0, _dashboardProvider.useDashboardStore)(selectSaveChangesConfirmationDialog);
 }
 const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog , openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  })=>({
         discardChangesConfirmationDialog,

package/dist/cjs/context/DashboardProvider/save-changes-dialog-slice.js

@@ -0,0 +1,33 @@
+// 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, "createSaveChangesDialogSlice", {
+    enumerable: true,
+    get: ()=>createSaveChangesDialogSlice
+});
+const createSaveChangesDialogSlice = (set)=>({
+        isOpen: false,
+        openSaveChangesConfirmationDialog (dialog) {
+            set((state)=>{
+                state.saveChangesConfirmationDialog = dialog;
+            }, false, 'openSaveChangesConfirmationDialog');
+        },
+        closeSaveChangesConfirmationDialog () {
+            set((state)=>{
+                state.saveChangesConfirmationDialog = undefined;
+            }, false, 'closeSaveChangesConfirmationDialog');
+        }
+    });

package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js

@@ -33,9 +33,16 @@ const _react = require("react");
 const _zustand = require("zustand");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
+const _immer1 = /*#__PURE__*/ _interopRequireDefault(require("immer"));
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
 const _queryParams = require("./query-params");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const TemplateVariableStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useTemplateVariableStoreCtx() {
     const context = (0, _react.useContext)(TemplateVariableStoreContext);
@@ -80,7 +87,9 @@ function useTemplateVariableActions() {
             setVariableValue: s.setVariableValue,
             setVariableLoading: s.setVariableLoading,
             setVariableOptions: s.setVariableOptions,
-            setVariableDefinitions: s.setVariableDefinitions
+            setVariableDefinitions: s.setVariableDefinitions,
+            setVariableDefaultValues: s.setVariableDefaultValues,
+            getSavedVariablesStatus: s.getSavedVariablesStatus
         };
     });
 }
@@ -123,14 +132,16 @@ function PluginProvider({ children  }) {
 }
 function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , queryParams  }) {
     const initialParams = (0, _queryParams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
-    const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set)=>({
+    const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>{
+        return {
             variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams),
             variableDefinitions: initialVariableDefinitions,
             setVariableDefinitions (definitions) {
                 set((state)=>{
                     state.variableDefinitions = definitions;
                     state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams);
-                });
+                }, false, '[Variables] setVariableDefinitions' // Used for action name in Redux devtools
+                );
             },
             setVariableOptions (name, options) {
                 set((state)=>{
@@ -139,7 +150,7 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                         return;
                     }
                     varState.options = options;
-                });
+                }, false, '[Variables] setVariableOptions');
             },
             setVariableLoading (name, loading) {
                 set((state)=>{
@@ -148,7 +159,7 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                         return;
                     }
                     varState.loading = loading;
-                });
+                }, false, '[Variables] setVariableLoading');
             },
             setVariableValue: (name, value)=>set((state)=>{
                     let val = value;
@@ -171,8 +182,46 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                         });
                     }
                     varState.value = val;
-                })
-        }))));
+                }, false, '[Variables] setVariableValue'),
+            setVariableDefaultValues: ()=>{
+                const variableDefinitions = get().variableDefinitions;
+                const variableState = get().variableState;
+                const updatedVariables = (0, _immer1.default)(variableDefinitions, (draft)=>{
+                    draft.forEach((variable, index)=>{
+                        if (variable.kind === 'ListVariable') {
+                            const currentVariable = variableState[variable.spec.name];
+                            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
+                                draft[index] = {
+                                    kind: 'ListVariable',
+                                    spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
+                                        specDraft.default_value = currentVariable.value;
+                                    })
+                                };
+                            }
+                        } else if (variable.kind === 'TextVariable') {
+                            const currentVariable1 = variableState[variable.spec.name];
+                            const currentVariableValue = typeof (currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) === 'string' ? currentVariable1.value : '';
+                            if ((currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) !== undefined) {
+                                draft[index] = {
+                                    kind: 'TextVariable',
+                                    spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
+                                        specDraft.value = currentVariableValue;
+                                    })
+                                };
+                            }
+                        }
+                    });
+                });
+                set((state)=>{
+                    state.variableDefinitions = updatedVariables;
+                }, false, '[Variables] setVariableDefaultValues');
+                return updatedVariables;
+            },
+            getSavedVariablesStatus: ()=>{
+                return (0, _utils.isSavedVariableModified)(get().variableDefinitions, get().variableState);
+            }
+        };
+    })));
     return store;
 }
 function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }) {

package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "hydrateTemplateVariableStates", {
     get: ()=>hydrateTemplateVariableStates
 });
 const _pluginSystem = require("@perses-dev/plugin-system");
+// TODO: move to TemplateVariableProvider/utils.ts
 function hydrateTemplateVariableState(variable, initialValue) {
     const varState = {
         value: null,
@@ -32,6 +33,7 @@ function hydrateTemplateVariableState(variable, initialValue) {
             varState.options = [];
             var ref;
             varState.value = (ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.default_value) !== null && ref !== void 0 ? ref : null;
+            // TODO: smarter fallbacks for default_value when allow_all_value is true
             if (varState.options.length > 0 && !varState.value) {
                 var ref1;
                 var ref2;

package/dist/cjs/context/TemplateVariableProvider/utils.js

@@ -0,0 +1,37 @@
+// 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, "isSavedVariableModified", {
+    enumerable: true,
+    get: ()=>isSavedVariableModified
+});
+function isSavedVariableModified(definitions, varState) {
+    for (const savedVariable of definitions){
+        if (savedVariable.kind === 'ListVariable') {
+            const currentVariable = varState[savedVariable.spec.name];
+            if (savedVariable.spec.default_value !== (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value)) {
+                return true;
+            }
+        } else if (savedVariable.kind === 'TextVariable') {
+            const currentVariable1 = varState[savedVariable.spec.name];
+            const currentVariableValue = typeof (currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) === 'string' ? currentVariable1.value : '';
+            if (savedVariable.spec.value !== currentVariableValue) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

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/cjs/views/ViewDashboard/DashboardApp.js

@@ -98,7 +98,8 @@ const DashboardApp = (props)=>{
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DiscardChangesConfirmationDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {})
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
                 ]
             })
         ]

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":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,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,gBA+G5D,CAAC"}