@perses-dev/dashboards 0.31.0 → 0.33.0

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

@@ -93,7 +93,7 @@ const DashboardToolbar = (props)=>{
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
-                                    backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                    backgroundColor: ({ palette  })=>palette.background.default
                                 }
                             })
                         }),
@@ -181,7 +181,7 @@ const DashboardToolbar = (props)=>{
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
-                                backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                backgroundColor: ({ palette  })=>palette.background.default
                             }
                         })
                     })

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

@@ -52,7 +52,7 @@ function GridTitle(props) {
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
             cursor: collapse ? 'pointer' : 'auto',
-            backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
+            backgroundColor: ({ palette  })=>palette.background.paper
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

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

@@ -26,13 +26,20 @@ 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)();
+    var ref;
+    const isSavedDurationModified = (ref = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && ref !== void 0 ? ref : true;
+    var ref1;
+    const isSavedVariableModified = (ref1 = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && ref1 !== void 0 ? ref1 : true;
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
+    const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
+    const { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
+    const { modifiedVariableNames  } = getSavedVariablesStatus();
     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}`;
+    const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -51,18 +58,19 @@ const SaveChangesConfirmationDialog = ()=>{
                             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),
+                                        disabled: !isSavedDurationModified || !(0, _core.isRelativeTimeRange)(timeRange),
+                                        checked: saveDefaultTimeRange && isSavedDurationModified && (0, _core.isRelativeTimeRange)(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
-                                    label: timeRangeInfoText
+                                    label: saveTimeRangeText
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
                                     control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
-                                        checked: saveDefaultVariables,
+                                        disabled: !isSavedVariableModified,
+                                        checked: saveDefaultVariables && isSavedVariableModified,
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
-                                    label: "Save current variable values as new default."
+                                    label: saveVariablesText
                                 })
                             ]
                         })

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

@@ -26,9 +26,9 @@ 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 { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const { getSavedVariablesStatus , setVariableDefaultValues  } = (0, _context.useTemplateVariableActions)();
-    const isSavedVariableModified = getSavedVariablesStatus();
+    const { isSavedVariableModified  } = getSavedVariablesStatus();
     const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const { setEditMode  } = (0, _context.useEditMode)();
     const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = (0, _context.useSaveChangesConfirmationDialog)();
@@ -45,26 +45,33 @@ const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    setDashboard(dashboard);
                     saveDashboard();
                 },
                 onCancel: ()=>{
                     closeSaveChangesConfirmationDialog();
-                }
+                },
+                isSavedDurationModified,
+                isSavedVariableModified
             });
         } else {
             saveDashboard();
         }
     };
-    const saveDashboard = ()=>{
-        if (onSave !== undefined) {
-            setSavingDashboard(true);
-            onSave(dashboard).then(()=>{
-                setSavingDashboard(false);
+    const saveDashboard = async ()=>{
+        if (onSave) {
+            try {
+                setSavingDashboard(true);
+                await onSave(dashboard);
                 closeSaveChangesConfirmationDialog();
                 setEditMode(false);
-            }).catch(()=>{
-                setSavingDashboard(false);
-            });
+            } catch (error) {
+                throw new Error(`An error occurred while saving the dashboard. ${error}`);
+            } finally{
+                if (isSavingDashboard) {
+                    setSavingDashboard(false);
+                }
+            }
         } else {
             setEditMode(false);
         }

package/dist/cjs/components/index.js

@@ -32,6 +32,7 @@ _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/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/TemplateVariableProvider/TemplateVariableProvider.js

@@ -218,7 +218,7 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                 return updatedVariables;
             },
             getSavedVariablesStatus: ()=>{
-                return (0, _utils.isSavedVariableModified)(get().variableDefinitions, get().variableState);
+                return (0, _utils.checkSavedDefaultVariableStatus)(get().variableDefinitions, get().variableState);
             }
         };
     })));

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

@@ -14,24 +14,31 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "isSavedVariableModified", {
+Object.defineProperty(exports, "checkSavedDefaultVariableStatus", {
     enumerable: true,
-    get: ()=>isSavedVariableModified
+    get: ()=>checkSavedDefaultVariableStatus
 });
-function isSavedVariableModified(definitions, varState) {
+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 (savedVariable.spec.default_value !== (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value)) {
-                return true;
+            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) {
-                return true;
+                modifiedVariableNames.push(savedVariable.spec.name);
+                isSavedVariableModified = true;
             }
         }
     }
-    return false;
+    return {
+        isSavedVariableModified,
+        modifiedVariableNames
+    };
 }

package/dist/cjs/test/render.js

@@ -19,7 +19,8 @@ Object.defineProperty(exports, "renderWithContext", {
     get: ()=>renderWithContext
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("@testing-library/react");
+const _react = require("react");
+const _react1 = require("@testing-library/react");
 const _reactRouterDom = require("react-router-dom");
 const _history = require("history");
 const _useQueryParams = require("use-query-params");
@@ -28,6 +29,24 @@ const _reactQuery = require("@tanstack/react-query");
 const _components = require("@perses-dev/components");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _pluginRegistry = require("./plugin-registry");
+/*
+ * Workaround for React router upgrade type errors.
+ * More details: https://stackoverflow.com/a/69948457/17575201
+ */ const CustomRouter = ({ history , children  })=>{
+    const [state, setState] = (0, _react.useState)({
+        action: history.action,
+        location: history.location
+    });
+    (0, _react.useLayoutEffect)(()=>history.listen(setState), [
+        history
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactRouterDom.Router, {
+        location: state.location,
+        navigationType: state.action,
+        navigator: history,
+        children: children
+    });
+};
 function renderWithContext(ui, options, history) {
     // Create a new QueryClient for each test to avoid caching issues
     const queryClient = new _reactQuery.QueryClient({
@@ -38,25 +57,28 @@ function renderWithContext(ui, options, history) {
             }
         }
     });
-    const BaseRender = ()=>{
-        const HistoryRouter = _reactRouterDom.unstable_HistoryRouter;
-        history = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(HistoryRouter, {
-            history: history,
+    const customHistory = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
+    const BaseRender = ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(CustomRouter, {
+            history: customHistory,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
                 client: queryClient,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
                     adapter: _reactRouter6.ReactRouter6Adapter,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
-                        chartsTheme: _components.testChartsTheme,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
-                            ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),
-                            children: ui
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SnackbarProvider, {
+                        anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
+                            chartsTheme: _components.testChartsTheme,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
+                                ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),
+                                children: ui
+                            })
                         })
                     })
                 })
             })
         });
-    };
-    return (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(BaseRender, {}), options);
+    return (0, _react1.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(BaseRender, {}), options);
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DashboardResource } from '@perses-dev/core';
+import { OnSaveDashboard } from '../../context';
 export interface DashboardToolbarProps {
     dashboardName: string;
     dashboardTitleComponent?: JSX.Element;
@@ -7,7 +7,7 @@ export interface DashboardToolbarProps {
     isReadonly: boolean;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
-    onSave?: (entity: DashboardResource) => Promise<DashboardResource>;
+    onSave?: OnSaveDashboard;
 }
 export declare const DashboardToolbar: (props: DashboardToolbarProps) => JSX.Element;
 //# sourceMappingURL=DashboardToolbar.d.ts.map

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":";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"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,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,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6G5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -85,7 +85,7 @@ export const DashboardToolbar = (props)=>{
                             children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
-                                    backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                    backgroundColor: ({ palette  })=>palette.background.default
                                 }
                             })
                         }),
@@ -173,7 +173,7 @@ export const DashboardToolbar = (props)=>{
                         children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
-                                backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                backgroundColor: ({ palette  })=>palette.background.default
                             }
                         })
                     })

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: (entity: DashboardResource) => Promise<DashboardResource>;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","mode","background","default","paper","whiteSpace","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","background","default","whiteSpace","paddingY"],"mappings":"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"}

package/dist/components/GridLayout/GridTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAsG9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAqG9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -42,7 +42,7 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
             cursor: collapse ? 'pointer' : 'auto',
-            backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
+            backgroundColor: ({ palette  })=>palette.background.paper
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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 { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) =>\n          palette.mode === 'dark' ? palette.background.paper : palette.background.default,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","padding","theme","spacing","cursor","backgroundColor","palette","mode","background","paper","default","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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 { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","padding","theme","spacing","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAoBA,eAAO,MAAM,6BAA6B,mBA2DzC,CAAC"}
+{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAoBA,eAAO,MAAM,6BAA6B,mBAqEzC,CAAC"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -16,15 +16,22 @@ import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';
 import { Dialog } from '@perses-dev/components';
-import { useSaveChangesConfirmationDialog } from '../../context';
+import { useSaveChangesConfirmationDialog, useTemplateVariableActions } from '../../context';
 export const SaveChangesConfirmationDialog = ()=>{
-    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(true);
-    const [saveDefaultVariables, setSaveDefaultVariables] = useState(true);
     const { saveChangesConfirmationDialog: dialog  } = useSaveChangesConfirmationDialog();
+    var ref;
+    const isSavedDurationModified = (ref = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && ref !== void 0 ? ref : true;
+    var ref1;
+    const isSavedVariableModified = (ref1 = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && ref1 !== void 0 ? ref1 : true;
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);
+    const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);
+    const { getSavedVariablesStatus  } = useTemplateVariableActions();
+    const { modifiedVariableNames  } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange  } = useTimeRange();
     const currentTimeRangeText = isRelativeTimeRange(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
-    const timeRangeInfoText = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
     return /*#__PURE__*/ _jsx(Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
@@ -43,18 +50,19 @@ export const SaveChangesConfirmationDialog = ()=>{
                             children: [
                                 /*#__PURE__*/ _jsx(FormControlLabel, {
                                     control: /*#__PURE__*/ _jsx(Checkbox, {
-                                        disabled: !isRelativeTimeRange(timeRange),
-                                        checked: saveDefaultTimeRange && isRelativeTimeRange(timeRange),
+                                        disabled: !isSavedDurationModified || !isRelativeTimeRange(timeRange),
+                                        checked: saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
-                                    label: timeRangeInfoText
+                                    label: saveTimeRangeText
                                 }),
                                 /*#__PURE__*/ _jsx(FormControlLabel, {
                                     control: /*#__PURE__*/ _jsx(Checkbox, {
-                                        checked: saveDefaultVariables,
+                                        disabled: !isSavedVariableModified,
+                                        checked: saveDefaultVariables && isSavedVariableModified,
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
-                                    label: "Save current variable values as new default."
+                                    label: saveVariablesText
                                 })
                             ]
                         })

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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 { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog } from '../../context';\n\nexport const SaveChangesConfirmationDialog = () => {\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(true);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(true);\n\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const timeRangeInfoText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={timeRangeInfoText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    checked={saveDefaultVariables}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label=\"Save current variable values as new default.\"\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","SaveChangesConfirmationDialog","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","saveChangesConfirmationDialog","dialog","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","timeRangeInfoText","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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 { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useTemplateVariableActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = () => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useTemplateVariableActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useTemplateVariableActions","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { ButtonProps } from '@mui/material';
-import { DashboardResource } from '@perses-dev/core';
+import { OnSaveDashboard } from '../../context';
 export interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {
-    onSave?: (entity: DashboardResource) => Promise<DashboardResource>;
+    onSave?: OnSaveDashboard;
     isDisabled: boolean;
     variant?: 'contained' | 'text' | 'outlined';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAI1E,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACnE,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,oCAAmD,wBAAwB,gBAyD1G,CAAC"}
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,oCAAmD,wBAAwB,gBA8D1G,CAAC"}