@perses-dev/dashboards 0.0.0-snapshot-color-palette-gen-test-0ebddd6 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

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,8 @@ _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
 _exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./QuerySummaryTable"), exports);
+_exportStar(require("./SaveChangesConfirmationDialog"), exports);
+_exportStar(require("./SaveDashboardButton"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
 _exportStar(require("./ToolbarIconButton"), exports);
 _exportStar(require("./Variables"), exports);

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

@@ -39,8 +39,10 @@ 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");
 const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDashboardStore(selector) {
     const store = (0, _react.useContext)(DashboardContext);
@@ -61,12 +63,11 @@ function DashboardProvider(props) {
     const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
     (0, _react.useEffect)(()=>{
         if (plugin === undefined) return;
-        const spec = plugin.createInitialOptions();
-        // set default panel kind and spec for add panel editor
+        const defaultPanelSpec = plugin.createInitialOptions();
+        // set default panel kind, spec, and queries for add panel editor
         store.setState({
             initialValues: {
-                kind: defaultPanelKind,
-                spec
+                panelDefinition: (0, _common.createPanelDefinition)(defaultPanelKind, defaultPanelSpec)
             }
         });
     }, [
@@ -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/common.js

@@ -10,15 +10,19 @@
 // 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.
-/**
- * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "generateId", {
-    enumerable: true,
-    get: ()=>generateId
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    generateId: ()=>generateId,
+    createPanelDefinition: ()=>createPanelDefinition
 });
 function generateId() {
     if (globalThis.dashboardStoreId === undefined) {
@@ -26,3 +30,19 @@ function generateId() {
     }
     return globalThis.dashboardStoreId++;
 }
+function createPanelDefinition(defaultPanelKind, defaultPanelSpec) {
+    return {
+        kind: 'Panel',
+        spec: {
+            display: {
+                name: '',
+                description: undefined
+            },
+            plugin: {
+                kind: defaultPanelKind !== null && defaultPanelKind !== void 0 ? defaultPanelKind : '',
+                spec: defaultPanelSpec !== null && defaultPanelSpec !== void 0 ? defaultPanelSpec : {}
+            },
+            queries: []
+        }
+    };
+}

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

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./common"), exports);
 _exportStar(require("./dashboard-provider-api"), exports);
 _exportStar(require("./DashboardProvider"), exports);
 function _exportStar(from, to) {

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -40,20 +40,15 @@ function createPanelEditorSlice() {
                 if (panelToEdit === undefined) {
                     throw new Error(`Cannot find Panel with key '${panelKey}'`);
                 }
-                var _description;
                 const editorState = {
                     mode: 'Edit',
                     initialValues: {
-                        name: panelToEdit.spec.display.name,
-                        description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
                         groupId: panelGroupItemId.panelGroupId,
-                        kind: panelToEdit.spec.plugin.kind,
-                        spec: panelToEdit.spec.plugin.spec
+                        panelDefinition: panelToEdit
                     },
                     applyChanges: (next)=>{
-                        const panelDefinititon = createPanelDefinitionFromEditorValues(next);
                         set((state)=>{
-                            state.panels[panelKey] = panelDefinititon;
+                            state.panels[panelKey] = next.panelDefinition;
                             // If the panel didn't change groups, nothing else to do
                             if (next.groupId === panelGroupId) {
                                 return;
@@ -99,7 +94,7 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                var ref, ref1;
+                var ref;
                 // If a panel group isn't supplied, add to the first group or create a group if there aren't any
                 let newGroup = undefined;
                 panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
@@ -108,22 +103,19 @@ function createPanelEditorSlice() {
                     newGroup.title = 'Panel Group';
                     panelGroupId = newGroup.id;
                 }
-                var ref2, ref3;
+                var ref1;
                 const editorState = {
                     mode: 'Add',
                     initialValues: {
-                        name: '',
-                        description: '',
                         groupId: panelGroupId,
-                        kind: (ref2 = (ref = get().initialValues) === null || ref === void 0 ? void 0 : ref.kind) !== null && ref2 !== void 0 ? ref2 : '',
-                        spec: (ref3 = (ref1 = get().initialValues) === null || ref1 === void 0 ? void 0 : ref1.spec) !== null && ref3 !== void 0 ? ref3 : {}
+                        panelDefinition: (ref1 = (ref = get().initialValues) === null || ref === void 0 ? void 0 : ref.panelDefinition) !== null && ref1 !== void 0 ? ref1 : (0, _common.createPanelDefinition)()
                     },
                     applyChanges: (next)=>{
-                        const panelDef = createPanelDefinitionFromEditorValues(next);
-                        const panelKey = (0, _panelUtils.getValidPanelKey)(next.name, get().panels);
+                        const name = next.panelDefinition.spec.display.name;
+                        const panelKey = (0, _panelUtils.getValidPanelKey)(name, get().panels);
                         set((state)=>{
                             // Add a panel
-                            state.panels[panelKey] = panelDef;
+                            state.panels[panelKey] = next.panelDefinition;
                             // Also add a panel group item referencing the panel
                             const group = state.panelGroups[next.groupId];
                             if (group === undefined) {
@@ -158,19 +150,3 @@ function createPanelEditorSlice() {
         };
     };
 }
-// Helper to create PanelDefinitions when saving
-function createPanelDefinitionFromEditorValues(editorValues) {
-    return {
-        kind: 'Panel',
-        spec: {
-            display: {
-                name: editorValues.name,
-                description: editorValues.description !== '' ? editorValues.description : undefined
-            },
-            plugin: {
-                kind: editorValues.kind,
-                spec: editorValues.spec
-            }
-        }
-    };
-}

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.checkSavedDefaultVariableStatus)(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,44 @@
+// 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, "checkSavedDefaultVariableStatus", {
+    enumerable: true,
+    get: ()=>checkSavedDefaultVariableStatus
+});
+function checkSavedDefaultVariableStatus(definitions, varState) {
+    let isSavedVariableModified = false;
+    const modifiedVariableNames = [];
+    for (const savedVariable of definitions){
+        if (savedVariable.kind === 'ListVariable') {
+            const currentVariable = varState[savedVariable.spec.name];
+            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== null && (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== savedVariable.spec.default_value) {
+                modifiedVariableNames.push(savedVariable.spec.name);
+                isSavedVariableModified = 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) {
+                modifiedVariableNames.push(savedVariable.spec.name);
+                isSavedVariableModified = true;
+            }
+        }
+    }
+    return {
+        isSavedVariableModified,
+        modifiedVariableNames
+    };
+}

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/WithDatasourceStore.js

@@ -20,62 +20,17 @@ Object.defineProperty(exports, "WithDatasourceStore", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _dashboards = require("@perses-dev/dashboards");
-const _constants = require("./constants");
+const _test = require("../../test");
 // Type guard because storybook types parameters as `any`
 function isWithDatasourceStoreParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
-const prometheusDemo = {
-    kind: 'GlobalDatasource',
-    metadata: {
-        name: 'PrometheusDemo',
-        created_at: '0001-01-01T00:00:00Z',
-        updated_at: '0001-01-01T00:00:00Z',
-        version: 0
-    },
-    spec: {
-        default: true,
-        plugin: {
-            kind: 'PrometheusDatasource',
-            spec: {
-                direct_url: prometheusDemoUrl
-            }
-        }
-    }
-};
 const WithDatasourceStore = (Story, context)=>{
     const initParameter = context.parameters.withDatasourceStore;
     const parameter = isWithDatasourceStoreParameter(initParameter) ? initParameter : undefined;
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    // This default currently defines the bare minimum to get a story working in
-    // the `Dashboard` storybook with the Prometheus demo api. We'll likely want
-    // to expand it to do more in the future.
-    const defaultDatasourceProps = {
-        dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE,
-        datasourceApi: {
-            getDatasource: ()=>{
-                return Promise.resolve(undefined);
-            },
-            getGlobalDatasource: (selector)=>{
-                if (selector.kind === 'PrometheusDatasource') {
-                    return Promise.resolve({
-                        resource: prometheusDemo,
-                        proxyUrl: prometheusDemoUrl
-                    });
-                }
-                return Promise.resolve(undefined);
-            },
-            listDatasources: ()=>{
-                return Promise.resolve([]);
-            },
-            listGlobalDatasources: ()=>{
-                return Promise.resolve([]);
-            }
-        }
-    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.DatasourceStoreProvider, {
-        ...defaultDatasourceProps,
+        ..._test.defaultDatasourceProps,
         ...props,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
     });

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

@@ -17,11 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _exportStar(require("./constants"), exports);
 _exportStar(require("./WithDashboard"), 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, {