@perses-dev/dashboards 0.29.1 → 0.31.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

@@ -19,7 +19,6 @@ Object.defineProperty(exports, "DashboardToolbar", {
     get: ()=>DashboardToolbar
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
@@ -30,30 +29,17 @@ const _timeRangeControls = require("../TimeRangeControls");
 const _variables = require("../Variables");
 const _editButton = require("../EditButton");
 const _editJsonButton = require("../EditJsonButton");
+const _saveDashboardButton = require("../SaveDashboardButton");
+const _dashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
-    const dashboard = (0, _context.useDashboard)();
-    const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
+    const { isEditMode  } = (0, _context.useEditMode)();
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
-    const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
     });
-    const onSaveButtonClick = ()=>{
-        if (onSave !== undefined) {
-            setSavingDashboard(true);
-            onSave(dashboard.dashboard).then(()=>{
-                setSavingDashboard(false);
-                setEditMode(false);
-            }).catch(()=>{
-                setSavingDashboard(false);
-            });
-        } else {
-            setEditMode(false);
-        }
-    };
     const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -81,11 +67,9 @@ const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    variant: "contained",
-                                    onClick: onSaveButtonClick,
-                                    disabled: isReadonly || isSavingDashboard,
-                                    children: "Save"
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_saveDashboardButton.SaveDashboardButton, {
+                                    onSave: onSave,
+                                    isDisabled: isReadonly
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
@@ -106,7 +90,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 +178,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/EditJsonButton/EditJsonButton.js

@@ -34,6 +34,7 @@ const EditJsonButton = ()=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
         description: _constants.TOOLTIP_TEXT.editJson,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
+            "aria-label": _constants.TOOLTIP_TEXT.editJson,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_codeBraces.default, {})

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/GridLayout/GridTitle.js

@@ -42,24 +42,25 @@ function GridTitle(props) {
     const { isEditMode  } = (0, _context.useEditMode)();
     const text = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
-        sx: {
-            marginLeft: collapse !== undefined ? 1 : undefined
-        },
         children: title
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
         sx: {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
+            cursor: collapse ? 'pointer' : 'auto',
             backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                    onClick: collapse.onToggleOpen,
+                    sx: {
+                        marginRight: 1
+                    },
                     "aria-label": `${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`,
                     children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
                 }),
@@ -72,7 +73,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.addPanelToGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.addPanelToGroup(title),
-                                onClick: openAddPanel,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openAddPanel();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
                             })
                         }),
@@ -80,7 +85,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.editGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.editGroup(title),
-                                onClick: openEditPanelGroup,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openEditPanelGroup();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                             })
                         }),
@@ -88,7 +97,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.deleteGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.deleteGroup(title),
-                                onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openDeletePanelGroupDialog(panelGroupId);
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                             })
                         }),
@@ -97,7 +110,11 @@ function GridTitle(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupDown(title),
                                 disabled: moveDown === undefined,
-                                onClick: moveDown,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveDown && moveDown();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
                             })
                         }),
@@ -106,7 +123,11 @@ function GridTitle(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupUp(title),
                                 disabled: moveUp === undefined,
-                                onClick: moveUp,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveUp && moveUp();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
                             })
                         })

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -0,0 +1,88 @@
+// 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, "SaveChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>SaveChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+const SaveChangesConfirmationDialog = ()=>{
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(true);
+    const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(true);
+    const { saveChangesConfirmationDialog: dialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const isOpen = dialog !== undefined;
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
+    const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
+    const timeRangeInfoText = `Save current time range as new default ${currentTimeRangeText}`;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog, {
+        open: isOpen,
+        children: dialog !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Header, {
+                    onClose: ()=>dialog.onCancel(),
+                    children: "Save Dashboard"
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Content, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            marginBottom: 2,
+                            children: dialog.description || _core.SAVE_DEFAULTS_DIALOG_TEXT
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormGroup, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
+                                        disabled: !(0, _core.isRelativeTimeRange)(timeRange),
+                                        checked: saveDefaultTimeRange && (0, _core.isRelativeTimeRange)(timeRange),
+                                        onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
+                                    }),
+                                    label: timeRangeInfoText
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
+                                        checked: saveDefaultVariables,
+                                        onChange: (e)=>setSaveDefaultVariables(e.target.checked)
+                                    }),
+                                    label: "Save current variable values as new default."
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Actions, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.PrimaryButton, {
+                            onClick: ()=>{
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                            },
+                            children: "Save Changes"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.SecondaryButton, {
+                            onClick: ()=>dialog.onCancel(),
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/cjs/{stories/decorators/WithQueryParams.js → components/SaveChangesConfirmationDialog/index.js}

@@ -14,16 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithQueryParams", {
-    enumerable: true,
-    get: ()=>WithQueryParams
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _window = require("use-query-params/adapters/window");
-const _useQueryParams = require("use-query-params");
-const WithQueryParams = (Story)=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
-        adapter: _window.WindowHistoryAdapter,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+_exportStar(require("./SaveChangesConfirmationDialog"), 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/SaveDashboardButton/SaveDashboardButton.js

@@ -0,0 +1,78 @@
+// 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, "SaveDashboardButton", {
+    enumerable: true,
+    get: ()=>SaveDashboardButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _context = require("../../context");
+const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
+    const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
+    const { dashboard  } = (0, _context.useDashboard)();
+    const { getSavedVariablesStatus , setVariableDefaultValues  } = (0, _context.useTemplateVariableActions)();
+    const isSavedVariableModified = getSavedVariablesStatus();
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
+    const { setEditMode  } = (0, _context.useEditMode)();
+    const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const onSaveButtonClick = ()=>{
+        const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
+        // Save dashboard if active timeRange from plugin-system is relative and different than currently saved
+        if (isSavedDurationModified || isSavedVariableModified) {
+            openSaveChangesConfirmationDialog({
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
+                    if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange === true) {
+                        dashboard.spec.duration = timeRange.pastDuration;
+                    }
+                    if (saveDefaultVariables === true) {
+                        const variables = setVariableDefaultValues();
+                        dashboard.spec.variables = variables;
+                    }
+                    saveDashboard();
+                },
+                onCancel: ()=>{
+                    closeSaveChangesConfirmationDialog();
+                }
+            });
+        } else {
+            saveDashboard();
+        }
+    };
+    const saveDashboard = ()=>{
+        if (onSave !== undefined) {
+            setSavingDashboard(true);
+            onSave(dashboard).then(()=>{
+                setSavingDashboard(false);
+                closeSaveChangesConfirmationDialog();
+                setEditMode(false);
+            }).catch(()=>{
+                setSavingDashboard(false);
+            });
+        } else {
+            setEditMode(false);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+        variant: variant,
+        onClick: onSaveButtonClick,
+        disabled: isDisabled || isSavingDashboard,
+        children: "Save"
+    });
+};

package/dist/cjs/components/SaveDashboardButton/index.js

@@ -0,0 +1,28 @@
+// 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
+});
+_exportStar(require("./SaveDashboardButton"), 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/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}`
             });
         }
     }