@perses-dev/dashboards 0.53.1 → 0.54.0-beta.0

package/dist/cjs/components/Panel/PanelActions.js

@@ -37,8 +37,8 @@ const _AlertCircle = /*#__PURE__*/ _interop_require_default(require("mdi-materia
 const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
 const _LightningBolt = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/LightningBolt"));
 const _constants = require("../../constants");
+const _LinksDisplay = require("../LinksDisplay");
 const _HeaderIconButton = require("./HeaderIconButton");
-const _PanelLinks = require("./PanelLinks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -89,8 +89,9 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
         descriptionTooltipId,
         description
     ]);
-    const linksAction = links && links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelLinks.PanelLinks, {
-        links: links
+    const linksAction = links && links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_LinksDisplay.LinksDisplay, {
+        links: links,
+        variant: "panel"
     });
     const extraActions = editHandlers === undefined && extra;
     const queryStateIndicator = (0, _react.useMemo)(()=>{
@@ -398,20 +399,20 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
         ]
     });
 };
-const OverflowMenu = ({ children, title, icon, direction = 'row' })=>{
-    const [anchorPosition, setAnchorPosition] = (0, _react.useState)();
+const OverflowMenu = ({ children, title, icon, direction = 'row', placement = 'bottom', offsetX = -2, offsetY = -25 })=>{
+    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
     // do not show overflow menu if there is no content (for example, edit actions are hidden)
     const hasContent = /*#__PURE__*/ (0, _react.isValidElement)(children) || Array.isArray(children) && children.some(_react.isValidElement);
     if (!hasContent) {
         return null;
     }
     const handleClick = (event)=>{
-        setAnchorPosition(event.currentTarget.getBoundingClientRect());
+        setAnchorEl(anchorEl ? null : event.currentTarget);
     };
     const handleClose = ()=>{
-        setAnchorPosition(undefined);
+        setAnchorEl(null);
     };
-    const open = Boolean(anchorPosition);
+    const open = Boolean(anchorEl);
     const id = open ? 'actions-menu' : undefined;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
@@ -428,24 +429,38 @@ const OverflowMenu = ({ children, title, icon, direction = 'row' })=>{
                     fontSize: "inherit"
                 })
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popper, {
                 id: id,
                 open: open,
-                anchorReference: "anchorPosition",
-                anchorPosition: anchorPosition,
-                onClose: handleClose,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left'
+                anchorEl: anchorEl,
+                placement: placement,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [
+                                offsetX,
+                                offsetY
+                            ]
+                        }
+                    }
+                ],
+                sx: {
+                    backgroundColor: (theme)=>theme.palette.background.paper,
+                    borderRadius: 1,
+                    boxShadow: (theme)=>theme.shadows[4]
                 },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                    direction: direction,
-                    alignItems: "center",
-                    sx: {
-                        padding: 1
-                    },
-                    onClick: handleClose,
-                    children: children
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
+                    onClickAway: handleClose,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        direction: direction,
+                        alignItems: "center",
+                        sx: {
+                            padding: 1
+                        },
+                        onClick: handleClose,
+                        children: children
+                    })
                 })
             })
         ]

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

@@ -24,7 +24,7 @@ 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 _spec = require("@perses-dev/spec");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const SAVE_DEFAULTS_DIALOG_TEXT = 'You have made changes to the time range or the variables values. Would you like to save these as defaults?';
@@ -40,7 +40,7 @@ const SaveChangesConfirmationDialog = ()=>{
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
-    const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
+    const currentTimeRangeText = (0, _spec.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
     const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;
     const saveVariableMessage = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
     const refreshIntervalDisplay = _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.display === refreshInterval) ? refreshInterval : _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.value.pastDuration === refreshInterval)?.display;
@@ -63,8 +63,8 @@ const SaveChangesConfirmationDialog = ()=>{
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                     control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                        disabled: !isSavedDurationModified || !(0, _core.isRelativeTimeRange)(timeRange),
-                                        checked: saveDefaultTimeRange && isSavedDurationModified && (0, _core.isRelativeTimeRange)(timeRange),
+                                        disabled: !isSavedDurationModified || !(0, _spec.isRelativeTimeRange)(timeRange),
+                                        checked: saveDefaultTimeRange && isSavedDurationModified && (0, _spec.isRelativeTimeRange)(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
                                     label: saveTimeRangeMessage

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

@@ -21,72 +21,14 @@ Object.defineProperty(exports, "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, setDashboard } = (0, _context.useDashboard)();
-    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useVariableDefinitionActions)();
-    const { isSavedVariableModified } = getSavedVariablesStatus();
-    const { timeRange, refreshInterval } = (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;
-        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
-        // Save dashboard
-        // - if active timeRange from plugin-system is relative and different from currently saved
-        // - or if the saved variables are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
-            openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
-                    if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange) {
-                        dashboard.spec.duration = timeRange.pastDuration;
-                    }
-                    if (saveDefaultVariables) {
-                        const variables = setVariableDefaultValues();
-                        dashboard.spec.variables = variables;
-                    }
-                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
-                        dashboard.spec.refreshInterval = refreshInterval;
-                    }
-                    setDashboard(dashboard);
-                    saveDashboard();
-                },
-                onCancel: ()=>{
-                    closeSaveChangesConfirmationDialog();
-                },
-                isSavedDurationModified,
-                isSavedVariableModified,
-                isSavedRefreshIntervalModified
-            });
-        } else {
-            saveDashboard();
-        }
-    };
-    const saveDashboard = async ()=>{
-        if (onSave) {
-            try {
-                setSavingDashboard(true);
-                await onSave(dashboard);
-                closeSaveChangesConfirmationDialog();
-                setEditMode(false);
-            } catch (error) {
-                throw new Error(`An error occurred while saving the dashboard. ${error}`);
-            } finally{
-                setSavingDashboard(false);
-            }
-        } else {
-            setEditMode(false);
-        }
-    };
+    const { saveDashboard, isSaving } = (0, _context.useSaveDashboard)(onSave);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
         variant: variant,
-        onClick: onSaveButtonClick,
-        disabled: isDisabled || isSavingDashboard,
+        onClick: saveDashboard,
+        disabled: isDisabled || isSaving,
         children: "Save"
     });
 };

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

@@ -34,7 +34,7 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -107,13 +107,13 @@ function useListVariableListBoxContext() {
     if (isIndeterminate) {
         if (allowAllValue) {
             if (filteredOptions.length === options.length) {
-                if (selectedOptions[0]?.value === _core.DEFAULT_ALL_VALUE) {
-                    onChange(options.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE));
+                if (selectedOptions[0]?.value === _spec.DEFAULT_ALL_VALUE) {
+                    onChange(options.filter((o)=>o.value !== _spec.DEFAULT_ALL_VALUE));
                 } else {
                     onChange([
                         {
-                            label: _core.DEFAULT_ALL_VALUE,
-                            value: _core.DEFAULT_ALL_VALUE
+                            label: _spec.DEFAULT_ALL_VALUE,
+                            value: _spec.DEFAULT_ALL_VALUE
                         }
                     ]);
                 }
@@ -123,7 +123,7 @@ function useListVariableListBoxContext() {
                 } else {
                     onChange([
                         ...selectedOptions,
-                        ...filteredOptions.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE)
+                        ...filteredOptions.filter((o)=>o.value !== _spec.DEFAULT_ALL_VALUE)
                     ]);
                 }
             }

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

@@ -31,7 +31,7 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _constants = require("../../constants");
@@ -104,7 +104,7 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
         if (allowAllValue) {
             computedOptions = [
                 {
-                    value: _core.DEFAULT_ALL_VALUE,
+                    value: _spec.DEFAULT_ALL_VALUE,
                     label: 'All'
                 },
                 ...computedOptions
@@ -292,7 +292,7 @@ function ListVariable({ name, source }) {
             value: selectedOptions,
             onChange: (_, value)=>{
                 if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
-                    setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
+                    setVariableValue(name, _spec.DEFAULT_ALL_VALUE, source);
                 } else {
                     setVariableValue(name, variableOptionToVariableValue(value), source);
                 }

package/dist/cjs/components/index.js

@@ -17,6 +17,8 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./AddGroupButton"), exports);
 _export_star(require("./AddPanelButton"), exports);
 _export_star(require("./Dashboard"), exports);
+_export_star(require("./DashboardLinks"), exports);
+_export_star(require("./DashboardShortcuts"), exports);
 _export_star(require("./DashboardToolbar"), exports);
 _export_star(require("./DashboardStickyToolbar"), exports);
 _export_star(require("./Datasources"), exports);

package/dist/cjs/constants/user-interface-text.js

@@ -34,6 +34,7 @@ const TOOLTIP_TEXT = {
     addGroup: 'Add panel group',
     editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
+    editLinks: 'Edit links',
     editVariables: 'Edit variables',
     viewJson: 'View JSON',
     // Group buttons

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

@@ -52,6 +52,7 @@ const _duplicatepanelslice = require("./duplicate-panel-slice");
 const _editjsondialogslice = require("./edit-json-dialog-slice");
 const _common = require("./common");
 const _viewpanelslice = require("./view-panel-slice");
+const _linksslice = require("./links-slice");
 const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDashboardStore(selector) {
     const store = (0, _react.useContext)(DashboardContext);
@@ -92,6 +93,7 @@ function DashboardProvider(props) {
 function initStore(props) {
     const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
     const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
+    const links = dashboardResource.spec.links ?? [];
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set] = args;
@@ -104,6 +106,7 @@ function initStore(props) {
             ...(0, _deletepanelslice.createDeletePanelSlice)()(...args),
             ...(0, _duplicatepanelslice.createDuplicatePanelSlice)()(...args),
             ...(0, _viewpanelslice.createViewPanelSlice)(viewPanelRef, setViewPanelRef)(...args),
+            /* Links */ ...(0, _linksslice.createLinksSlice)(links)(...args),
             /* General */ ...(0, _discardchangesdialogslice.createDiscardChangesDialogSlice)(...args),
             ...(0, _editjsondialogslice.createEditJsonDialogSlice)(...args),
             ...(0, _savechangesdialogslice.createSaveChangesDialogSlice)(...args),
@@ -120,7 +123,7 @@ function initStore(props) {
                     isEditMode
                 });
             },
-            setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
+            setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {}, links = [] } })=>{
                 set((state)=>{
                     state.kind = kind;
                     state.metadata = metadata;
@@ -132,6 +135,7 @@ function initStore(props) {
                     state.duration = duration;
                     state.refreshInterval = refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
                     state.datasources = datasources;
+                    state.links = links;
                 // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
                 });
             }

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

@@ -27,6 +27,12 @@ _export(exports, {
     get useDashboardDuration () {
         return useDashboardDuration;
     },
+    get useDashboardLinks () {
+        return useDashboardLinks;
+    },
+    get useDashboardLinksActions () {
+        return useDashboardLinksActions;
+    },
     get useDeletePanelDialog () {
         return useDeletePanelDialog;
     },
@@ -101,6 +107,16 @@ function useDashboardActions() {
         openAddPanel: ()=>openAddPanel()
     };
 }
+const selectDashboardLinks = (state)=>state.links;
+function useDashboardLinks() {
+    return (0, _DashboardProvider.useDashboardStore)(selectDashboardLinks) ?? [];
+}
+const selectDashboardLinksActions = (state)=>({
+        setLinks: state.setLinks
+    });
+function useDashboardLinksActions() {
+    return (0, _DashboardProvider.useDashboardStore)(selectDashboardLinksActions);
+}
 const selectPanelGroupOrder = (state)=>state.panelGroupOrder;
 function usePanelGroupIds() {
     return (0, _DashboardProvider.useDashboardStore)(selectPanelGroupOrder);

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

@@ -14,9 +14,16 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "useSaveDashboard", {
+    enumerable: true,
+    get: function() {
+        return _usesavedashboard.useSaveDashboard;
+    }
+});
 _export_star(require("./common"), exports);
 _export_star(require("./dashboard-provider-api"), exports);
 _export_star(require("./DashboardProvider"), exports);
+const _usesavedashboard = require("./use-save-dashboard");
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/context/DashboardProvider/links-slice.js

@@ -0,0 +1,32 @@
+// Copyright 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, "createLinksSlice", {
+    enumerable: true,
+    get: function() {
+        return createLinksSlice;
+    }
+});
+function createLinksSlice(initLinks) {
+    return (set)=>({
+            links: initLinks,
+            setLinks: (links)=>{
+                set((state)=>{
+                    state.links = links;
+                });
+            }
+        });
+}

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

@@ -34,7 +34,7 @@ _export(exports, {
         return createPanelGroupSlice;
     }
 });
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _common = require("./common");
 function createPanelGroupSlice(layouts) {
     const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);
@@ -87,7 +87,7 @@ function convertLayoutsToPanelGroups(layouts) {
                 x: item.x,
                 y: item.y
             });
-            itemPanelKeys[panelGroupLayoutId] = (0, _core.getPanelKeyFromRef)(item.content);
+            itemPanelKeys[panelGroupLayoutId] = (0, _spec.getPanelKeyFromRef)(item.content);
         }
         // Create the panel group and keep track of the ID order
         const panelGroupId = (0, _common.generateId)();

package/dist/cjs/context/DashboardProvider/use-save-dashboard.js

@@ -0,0 +1,104 @@
+// Copyright 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, "useSaveDashboard", {
+    enumerable: true,
+    get: function() {
+        return useSaveDashboard;
+    }
+});
+const _react = require("react");
+const _spec = require("@perses-dev/spec");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _VariableProvider = require("../VariableProvider/VariableProvider");
+const _useDashboard = require("../useDashboard");
+const _dashboardproviderapi = require("./dashboard-provider-api");
+function useSaveDashboard(onSave) {
+    const [isSaving, setSaving] = (0, _react.useState)(false);
+    const { dashboard, setDashboard } = (0, _useDashboard.useDashboard)();
+    const { setEditMode } = (0, _dashboardproviderapi.useEditMode)();
+    const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
+    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _VariableProvider.useVariableDefinitionActions)();
+    const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _dashboardproviderapi.useSaveChangesConfirmationDialog)();
+    const performSave = (0, _react.useCallback)(async ()=>{
+        if (!onSave) {
+            setEditMode(false);
+            return;
+        }
+        try {
+            setSaving(true);
+            await onSave(dashboard);
+            closeSaveChangesConfirmationDialog();
+            setEditMode(false);
+        } finally{
+            setSaving(false);
+        }
+    }, [
+        closeSaveChangesConfirmationDialog,
+        dashboard,
+        onSave,
+        setEditMode
+    ]);
+    const saveDashboard = (0, _react.useCallback)(()=>{
+        if (isSaving) {
+            return;
+        }
+        const { isSavedVariableModified } = getSavedVariablesStatus();
+        const isSavedDurationModified = (0, _spec.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
+        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
+        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
+            openSaveChangesConfirmationDialog({
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
+                    if ((0, _spec.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange) {
+                        dashboard.spec.duration = timeRange.pastDuration;
+                    }
+                    if (saveDefaultVariables) {
+                        const variables = setVariableDefaultValues();
+                        dashboard.spec.variables = variables;
+                    }
+                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
+                        dashboard.spec.refreshInterval = refreshInterval;
+                    }
+                    setDashboard(dashboard);
+                    performSave();
+                },
+                onCancel: ()=>{
+                    closeSaveChangesConfirmationDialog();
+                },
+                isSavedDurationModified,
+                isSavedVariableModified,
+                isSavedRefreshIntervalModified
+            });
+        } else {
+            performSave();
+        }
+    }, [
+        isSaving,
+        getSavedVariablesStatus,
+        timeRange,
+        dashboard,
+        refreshInterval,
+        openSaveChangesConfirmationDialog,
+        setVariableDefaultValues,
+        setDashboard,
+        performSave,
+        closeSaveChangesConfirmationDialog
+    ]);
+    return {
+        saveDashboard,
+        isSaving
+    };
+}

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -47,7 +47,7 @@ function DatasourceStoreProvider(props) {
         }
         if (project) {
             // Try to find it at the project level as a Datasource resource
-            const datasource = await datasourceApi.getDatasource(project, selector);
+            const datasource = await datasourceApi.getDatasource(String(project), selector);
             if (datasource !== undefined) {
                 return {
                     spec: datasource.spec,
@@ -102,7 +102,7 @@ function DatasourceStoreProvider(props) {
             listPluginMetadata([
                 'Datasource'
             ]),
-            project ? datasourceApi.listDatasources(project, datasourcePluginName) : [],
+            project ? datasourceApi.listDatasources(String(project), datasourcePluginName) : [],
             datasourceApi.listGlobalDatasources(datasourcePluginName)
         ]);
         // Find the metadata for the plugin type they asked for, so we can use it for the name of the default datasource
@@ -160,13 +160,7 @@ function DatasourceStoreProvider(props) {
     ]);
     const setLocalDatasources = (0, _react.useCallback)((datasources)=>{
         if (dashboardResource) {
-            setDashboardResource(dashboardResource.kind === 'Dashboard' ? {
-                ...dashboardResource,
-                spec: {
-                    ...dashboardResource.spec,
-                    datasources: datasources
-                }
-            } : {
+            setDashboardResource({
                 ...dashboardResource,
                 spec: {
                     ...dashboardResource.spec,

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -56,6 +56,7 @@ const _shallow = require("zustand/shallow");
 const _immer1 = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
 const _queryparams = require("./query-params");
@@ -154,7 +155,7 @@ function PluginProvider({ children, builtinVariables }) {
             const v = {
                 ...originalValues[name]
             };
-            if (v.value === _core.DEFAULT_ALL_VALUE) {
+            if (v.value === _spec.DEFAULT_ALL_VALUE) {
                 const definition = (0, _utils.findVariableDefinitionByName)(name, definitions, externalDefinitions);
                 // If the variable is a list variable and has a custom all value, then use that value instead
                 if (definition?.kind === 'ListVariable' && definition.spec.customAllValue) {
@@ -203,7 +204,7 @@ function PluginProvider({ children, builtinVariables }) {
                 kind: 'BuiltinVariable',
                 spec: {
                     name: '__range',
-                    value: ()=>(0, _core.formatDuration)((0, _core.intervalToPrometheusDuration)(absoluteTimeRange)),
+                    value: ()=>(0, _spec.formatDuration)((0, _core.intervalToPrometheusDuration)(absoluteTimeRange)),
                     source: 'Dashboard',
                     display: {
                         name: '__range',
@@ -304,11 +305,11 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                         return;
                     }
                     // Make sure there is only one all value
-                    if (Array.isArray(val) && val.includes(_core.DEFAULT_ALL_VALUE)) {
-                        if (val.at(-1) === _core.DEFAULT_ALL_VALUE) {
-                            val = _core.DEFAULT_ALL_VALUE;
+                    if (Array.isArray(val) && val.includes(_spec.DEFAULT_ALL_VALUE)) {
+                        if (val.at(-1) === _spec.DEFAULT_ALL_VALUE) {
+                            val = _spec.DEFAULT_ALL_VALUE;
                         } else {
-                            val = val.filter((v)=>v !== _core.DEFAULT_ALL_VALUE);
+                            val = val.filter((v)=>v !== _spec.DEFAULT_ALL_VALUE);
                         }
                     }
                     if (queryParams) {

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

@@ -20,7 +20,7 @@ Object.defineProperty(exports, "hydrateVariableDefinitionStates", {
         return hydrateVariableDefinitionStates;
     }
 });
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _pluginsystem = require("@perses-dev/plugin-system");
 // TODO: move to VariableProvider/utils.ts
 function hydrateVariableState(variable, initialValue) {
@@ -51,8 +51,8 @@ function hydrateVariableState(variable, initialValue) {
             // to end up in a buggy state if the variables are initialized with an "all"
             // value inside an array. When hydrating variables, normalize this to minimize
             // bugs.
-            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _core.DEFAULT_ALL_VALUE) {
-                varState.value = _core.DEFAULT_ALL_VALUE;
+            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _spec.DEFAULT_ALL_VALUE) {
+                varState.value = _spec.DEFAULT_ALL_VALUE;
             }
             break;
         default: