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

package/dist/components/DashboardShortcuts/useDashboardShortcuts.js

@@ -0,0 +1,365 @@
+// 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.
+import { useCallback } from 'react';
+import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';
+import { useSnackbar } from '@perses-dev/components';
+import { useTimeRange } from '@perses-dev/plugin-system';
+import { useHotkeys, useHotkeySequences } from '@tanstack/react-hotkeys';
+import { useFocusedPanel, buildShortcutOptions, requireShortcutHotkey, requireShortcutSequence, SAVE_DASHBOARD_SHORTCUT, REFRESH_DASHBOARD_SHORTCUT, TOGGLE_EDIT_MODE_SHORTCUT, TIME_ZOOM_OUT_SHORTCUT, TIME_ZOOM_IN_SHORTCUT, TIME_SHIFT_BACK_SHORTCUT, TIME_SHIFT_FORWARD_SHORTCUT, TIME_MAKE_ABSOLUTE_SHORTCUT, TIME_COPY_SHORTCUT, TIME_PASTE_SHORTCUT, PANEL_EDIT_SHORTCUT, PANEL_FULLSCREEN_SHORTCUT, PANEL_DUPLICATE_SHORTCUT, PANEL_DELETE_SHORTCUT } from '../../keyboard-shortcuts';
+import { useEditMode, useDashboardStore, useViewPanelGroup, useSaveDashboard } from '../../context/DashboardProvider';
+const SAVE_SHORTCUT_EDIT_MODE_MESSAGE = 'Enter edit mode to save this dashboard.';
+const SAVE_SHORTCUT_READONLY_MESSAGE = 'This dashboard is read-only. Keyboard save is disabled.';
+const SAVE_SHORTCUT_UNAVAILABLE_MESSAGE = 'Save action is unavailable for this dashboard.';
+function parsePanelKey(panelKey) {
+    const dashIndex = panelKey.indexOf('-');
+    if (dashIndex === -1) return null;
+    const panelGroupId = parseInt(panelKey.substring(0, dashIndex), 10);
+    const panelGroupItemLayoutId = panelKey.substring(dashIndex + 1);
+    if (isNaN(panelGroupId)) return null;
+    return {
+        panelGroupId,
+        panelGroupItemLayoutId
+    };
+}
+// Zoom limits: 1 second minimum, 10 years maximum
+const MIN_ZOOM_DURATION_MS = 1_000;
+const MAX_ZOOM_DURATION_MS = 10 * 365.25 * 24 * 60 * 60 * 1_000;
+function resolveAbsoluteRange(timeRange) {
+    const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;
+    const startMs = absoluteRange.start.getTime();
+    const endMs = absoluteRange.end.getTime();
+    const durationMs = endMs - startMs;
+    const midpointMs = Math.round(startMs + durationMs / 2);
+    return {
+        absoluteRange,
+        durationMs,
+        midpointMs
+    };
+}
+const selectPanelStoreActions = (state)=>({
+        openEditPanel: state.openEditPanel,
+        duplicatePanel: state.duplicatePanel,
+        openDeletePanelDialog: state.openDeletePanelDialog,
+        setViewPanel: state.setViewPanel,
+        panelEditor: state.panelEditor
+    });
+/** Registers dashboard, time-range, and panel keyboard shortcuts. Requires DashboardProvider context. */ export function useDashboardShortcuts({ onSave, onRefresh, isReadonly, onEditButtonClick, onCancelButtonClick, disabled = false }) {
+    const focusedPanelKey = useFocusedPanel();
+    const { isEditMode, setEditMode } = useEditMode();
+    const { timeRange, setTimeRange, refresh } = useTimeRange();
+    const { infoSnackbar, warningSnackbar } = useSnackbar();
+    const viewPanel = useViewPanelGroup();
+    const { openEditPanel, duplicatePanel, openDeletePanelDialog, setViewPanel, panelEditor } = useDashboardStore(selectPanelStoreActions);
+    const { saveDashboard } = useSaveDashboard(onSave);
+    const panelFocused = focusedPanelKey !== null;
+    // --- Handlers ---
+    const handleSave = useCallback(()=>{
+        if (isReadonly) {
+            warningSnackbar(SAVE_SHORTCUT_READONLY_MESSAGE);
+            return;
+        }
+        if (!isEditMode) {
+            infoSnackbar(SAVE_SHORTCUT_EDIT_MODE_MESSAGE);
+            return;
+        }
+        if (!onSave) {
+            warningSnackbar(SAVE_SHORTCUT_UNAVAILABLE_MESSAGE);
+            return;
+        }
+        saveDashboard();
+    }, [
+        infoSnackbar,
+        isEditMode,
+        isReadonly,
+        onSave,
+        saveDashboard,
+        warningSnackbar
+    ]);
+    const handleRefresh = useCallback(()=>{
+        refresh();
+        infoSnackbar('Dashboard refreshed.');
+        if (onRefresh) {
+            onRefresh();
+        }
+    }, [
+        refresh,
+        infoSnackbar,
+        onRefresh
+    ]);
+    const handleToggleEditMode = useCallback(()=>{
+        if (isEditMode) {
+            // Switching from edit to view: delegate to cancel flow (shows discard dialog if needed)
+            if (onCancelButtonClick) {
+                onCancelButtonClick();
+            } else {
+                setEditMode(false);
+            }
+        } else {
+            // Switching from view to edit: delegate to edit flow (saves original state)
+            if (onEditButtonClick) {
+                onEditButtonClick();
+            } else {
+                setEditMode(true);
+            }
+        }
+    }, [
+        isEditMode,
+        setEditMode,
+        onCancelButtonClick,
+        onEditButtonClick
+    ]);
+    // Time range handlers
+    const handleTimeZoomOut = useCallback(()=>{
+        const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);
+        const newDuration = Math.min(durationMs * 2, MAX_ZOOM_DURATION_MS);
+        const halfNew = Math.round(newDuration / 2);
+        setTimeRange({
+            start: new Date(midpointMs - halfNew),
+            end: new Date(midpointMs + halfNew)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeZoomIn = useCallback(()=>{
+        const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);
+        const newDuration = Math.max(Math.round(durationMs / 2), MIN_ZOOM_DURATION_MS);
+        const halfNew = Math.round(newDuration / 2);
+        setTimeRange({
+            start: new Date(midpointMs - halfNew),
+            end: new Date(midpointMs + halfNew)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeShiftBack = useCallback(()=>{
+        const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);
+        const shift = Math.round(durationMs / 2);
+        setTimeRange({
+            start: new Date(absoluteRange.start.getTime() - shift),
+            end: new Date(absoluteRange.end.getTime() - shift)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeShiftForward = useCallback(()=>{
+        const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);
+        const shift = Math.round(durationMs / 2);
+        setTimeRange({
+            start: new Date(absoluteRange.start.getTime() + shift),
+            end: new Date(absoluteRange.end.getTime() + shift)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeMakeAbsolute = useCallback(()=>{
+        if (isRelativeTimeRange(timeRange)) {
+            setTimeRange(toAbsoluteTimeRange(timeRange));
+        }
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeCopy = useCallback(()=>{
+        const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;
+        const text = `${absoluteRange.start.toISOString()} - ${absoluteRange.end.toISOString()}`;
+        navigator.clipboard.writeText(text).then(()=>{
+            infoSnackbar('Time range copied to clipboard.');
+        }).catch(()=>{
+            warningSnackbar('Failed to copy time range to clipboard.');
+        });
+    }, [
+        timeRange,
+        infoSnackbar,
+        warningSnackbar
+    ]);
+    const handleTimePaste = useCallback(()=>{
+        const FORMAT_HINT = 'Expected format: "<ISO date format> - <ISO date format>".';
+        navigator.clipboard.readText().then((text)=>{
+            const parts = text.split(' - ');
+            if (parts.length !== 2) {
+                warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);
+                return;
+            }
+            const [startStr, endStr] = parts;
+            const start = new Date(startStr.trim());
+            const end = new Date(endStr.trim());
+            if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+                warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);
+                return;
+            }
+            if (start >= end) {
+                warningSnackbar('Invalid time range: start must be before end.');
+                return;
+            }
+            const newRange = {
+                start,
+                end
+            };
+            setTimeRange(newRange);
+            infoSnackbar('Time range pasted from clipboard.');
+        }).catch(()=>{
+            warningSnackbar('Unable to read from clipboard. Check browser permissions.');
+        });
+    }, [
+        setTimeRange,
+        infoSnackbar,
+        warningSnackbar
+    ]);
+    // Panel handlers
+    const handlePanelEditToggle = useCallback(()=>{
+        if (panelEditor !== undefined) {
+            panelEditor.close();
+            return;
+        }
+        if (focusedPanelKey && isEditMode) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                openEditPanel(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        isEditMode,
+        openEditPanel,
+        panelEditor
+    ]);
+    const handlePanelFullscreenToggle = useCallback(()=>{
+        if (viewPanel !== undefined) {
+            setViewPanel(undefined);
+            return;
+        }
+        if (focusedPanelKey) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                setViewPanel(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        setViewPanel,
+        viewPanel
+    ]);
+    const handlePanelDuplicate = useCallback(()=>{
+        if (focusedPanelKey && isEditMode) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                duplicatePanel(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        isEditMode,
+        duplicatePanel
+    ]);
+    const handlePanelDelete = useCallback(()=>{
+        if (focusedPanelKey && isEditMode) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                openDeletePanelDialog(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        isEditMode,
+        openDeletePanelDialog
+    ]);
+    // Register shortcuts
+    useHotkeys([
+        {
+            def: SAVE_DASHBOARD_SHORTCUT,
+            enabled: !disabled,
+            callback: handleSave
+        },
+        {
+            def: PANEL_EDIT_SHORTCUT,
+            enabled: !disabled && (panelFocused || panelEditor !== undefined),
+            callback: handlePanelEditToggle
+        },
+        {
+            def: PANEL_FULLSCREEN_SHORTCUT,
+            enabled: !disabled && (panelFocused || viewPanel !== undefined),
+            callback: handlePanelFullscreenToggle
+        }
+    ].map(({ def, enabled, callback })=>({
+            hotkey: requireShortcutHotkey(def),
+            callback,
+            options: buildShortcutOptions(def, enabled)
+        })));
+    useHotkeySequences([
+        {
+            def: REFRESH_DASHBOARD_SHORTCUT,
+            enabled: !disabled,
+            callback: handleRefresh
+        },
+        {
+            def: TOGGLE_EDIT_MODE_SHORTCUT,
+            enabled: !disabled,
+            callback: handleToggleEditMode
+        },
+        {
+            def: TIME_ZOOM_OUT_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeZoomOut
+        },
+        {
+            def: TIME_ZOOM_IN_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeZoomIn
+        },
+        {
+            def: TIME_SHIFT_BACK_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeShiftBack
+        },
+        {
+            def: TIME_SHIFT_FORWARD_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeShiftForward
+        },
+        {
+            def: TIME_MAKE_ABSOLUTE_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeMakeAbsolute
+        },
+        {
+            def: TIME_COPY_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeCopy
+        },
+        {
+            def: TIME_PASTE_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimePaste
+        },
+        {
+            def: PANEL_DUPLICATE_SHORTCUT,
+            enabled: !disabled && panelFocused,
+            callback: handlePanelDuplicate
+        },
+        {
+            def: PANEL_DELETE_SHORTCUT,
+            enabled: !disabled && panelFocused,
+            callback: handlePanelDelete
+        }
+    ].map(({ def, enabled, callback })=>({
+            sequence: requireShortcutSequence(def),
+            callback,
+            options: buildShortcutOptions(def, enabled)
+        })));
+}
+
+//# sourceMappingURL=useDashboardShortcuts.js.map

package/dist/components/DashboardShortcuts/useDashboardShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DashboardShortcuts/useDashboardShortcuts.ts"],"sourcesContent":["// Copyright 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 { useCallback } from 'react';\nimport { AbsoluteTimeRange, TimeRangeValue, isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport { PanelGroupItemId } from '@perses-dev/core';\nimport { useSnackbar } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useHotkeys, useHotkeySequences } from '@tanstack/react-hotkeys';\nimport {\n  useFocusedPanel,\n  buildShortcutOptions,\n  requireShortcutHotkey,\n  requireShortcutSequence,\n  SAVE_DASHBOARD_SHORTCUT,\n  REFRESH_DASHBOARD_SHORTCUT,\n  TOGGLE_EDIT_MODE_SHORTCUT,\n  TIME_ZOOM_OUT_SHORTCUT,\n  TIME_ZOOM_IN_SHORTCUT,\n  TIME_SHIFT_BACK_SHORTCUT,\n  TIME_SHIFT_FORWARD_SHORTCUT,\n  TIME_MAKE_ABSOLUTE_SHORTCUT,\n  TIME_COPY_SHORTCUT,\n  TIME_PASTE_SHORTCUT,\n  PANEL_EDIT_SHORTCUT,\n  PANEL_FULLSCREEN_SHORTCUT,\n  PANEL_DUPLICATE_SHORTCUT,\n  PANEL_DELETE_SHORTCUT,\n} from '../../keyboard-shortcuts';\nimport {\n  OnSaveDashboard,\n  useEditMode,\n  useDashboardStore,\n  DashboardStoreState,\n  useViewPanelGroup,\n  useSaveDashboard,\n} from '../../context/DashboardProvider';\n\nconst SAVE_SHORTCUT_EDIT_MODE_MESSAGE = 'Enter edit mode to save this dashboard.';\nconst SAVE_SHORTCUT_READONLY_MESSAGE = 'This dashboard is read-only. Keyboard save is disabled.';\nconst SAVE_SHORTCUT_UNAVAILABLE_MESSAGE = 'Save action is unavailable for this dashboard.';\n\nfunction parsePanelKey(panelKey: string): PanelGroupItemId | null {\n  const dashIndex = panelKey.indexOf('-');\n  if (dashIndex === -1) return null;\n\n  const panelGroupId = parseInt(panelKey.substring(0, dashIndex), 10);\n  const panelGroupItemLayoutId = panelKey.substring(dashIndex + 1);\n\n  if (isNaN(panelGroupId)) return null;\n\n  return { panelGroupId, panelGroupItemLayoutId };\n}\n\n// Zoom limits: 1 second minimum, 10 years maximum\nconst MIN_ZOOM_DURATION_MS = 1_000;\nconst MAX_ZOOM_DURATION_MS = 10 * 365.25 * 24 * 60 * 60 * 1_000;\n\nfunction resolveAbsoluteRange(timeRange: TimeRangeValue): {\n  absoluteRange: AbsoluteTimeRange;\n  durationMs: number;\n  midpointMs: number;\n} {\n  const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n  const startMs = absoluteRange.start.getTime();\n  const endMs = absoluteRange.end.getTime();\n  const durationMs = endMs - startMs;\n  const midpointMs = Math.round(startMs + durationMs / 2);\n  return { absoluteRange, durationMs, midpointMs };\n}\n\nconst selectPanelStoreActions = (\n  state: DashboardStoreState\n): {\n  openEditPanel: DashboardStoreState['openEditPanel'];\n  duplicatePanel: DashboardStoreState['duplicatePanel'];\n  openDeletePanelDialog: DashboardStoreState['openDeletePanelDialog'];\n  setViewPanel: DashboardStoreState['setViewPanel'];\n  panelEditor: DashboardStoreState['panelEditor'];\n} => ({\n  openEditPanel: state.openEditPanel,\n  duplicatePanel: state.duplicatePanel,\n  openDeletePanelDialog: state.openDeletePanelDialog,\n  setViewPanel: state.setViewPanel,\n  panelEditor: state.panelEditor,\n});\n\nexport interface UseDashboardShortcutsOptions {\n  onSave?: OnSaveDashboard;\n  onRefresh?: () => void;\n  isReadonly: boolean;\n  onEditButtonClick?: () => void;\n  onCancelButtonClick?: () => void;\n  disabled?: boolean;\n}\n\n/** Registers dashboard, time-range, and panel keyboard shortcuts. Requires DashboardProvider context. */\nexport function useDashboardShortcuts({\n  onSave,\n  onRefresh,\n  isReadonly,\n  onEditButtonClick,\n  onCancelButtonClick,\n  disabled = false,\n}: UseDashboardShortcutsOptions): void {\n  const focusedPanelKey = useFocusedPanel();\n  const { isEditMode, setEditMode } = useEditMode();\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const { infoSnackbar, warningSnackbar } = useSnackbar();\n  const viewPanel = useViewPanelGroup();\n  const { openEditPanel, duplicatePanel, openDeletePanelDialog, setViewPanel, panelEditor } =\n    useDashboardStore(selectPanelStoreActions);\n  const { saveDashboard } = useSaveDashboard(onSave);\n\n  const panelFocused = focusedPanelKey !== null;\n\n  // --- Handlers ---\n\n  const handleSave = useCallback(() => {\n    if (isReadonly) {\n      warningSnackbar(SAVE_SHORTCUT_READONLY_MESSAGE);\n      return;\n    }\n\n    if (!isEditMode) {\n      infoSnackbar(SAVE_SHORTCUT_EDIT_MODE_MESSAGE);\n      return;\n    }\n\n    if (!onSave) {\n      warningSnackbar(SAVE_SHORTCUT_UNAVAILABLE_MESSAGE);\n      return;\n    }\n\n    saveDashboard();\n  }, [infoSnackbar, isEditMode, isReadonly, onSave, saveDashboard, warningSnackbar]);\n\n  const handleRefresh = useCallback(() => {\n    refresh();\n    infoSnackbar('Dashboard refreshed.');\n    if (onRefresh) {\n      onRefresh();\n    }\n  }, [refresh, infoSnackbar, onRefresh]);\n\n  const handleToggleEditMode = useCallback(() => {\n    if (isEditMode) {\n      // Switching from edit to view: delegate to cancel flow (shows discard dialog if needed)\n      if (onCancelButtonClick) {\n        onCancelButtonClick();\n      } else {\n        setEditMode(false);\n      }\n    } else {\n      // Switching from view to edit: delegate to edit flow (saves original state)\n      if (onEditButtonClick) {\n        onEditButtonClick();\n      } else {\n        setEditMode(true);\n      }\n    }\n  }, [isEditMode, setEditMode, onCancelButtonClick, onEditButtonClick]);\n\n  // Time range handlers\n\n  const handleTimeZoomOut = useCallback(() => {\n    const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);\n    const newDuration = Math.min(durationMs * 2, MAX_ZOOM_DURATION_MS);\n    const halfNew = Math.round(newDuration / 2);\n    setTimeRange({\n      start: new Date(midpointMs - halfNew),\n      end: new Date(midpointMs + halfNew),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeZoomIn = useCallback(() => {\n    const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);\n    const newDuration = Math.max(Math.round(durationMs / 2), MIN_ZOOM_DURATION_MS);\n    const halfNew = Math.round(newDuration / 2);\n    setTimeRange({\n      start: new Date(midpointMs - halfNew),\n      end: new Date(midpointMs + halfNew),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeShiftBack = useCallback(() => {\n    const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);\n    const shift = Math.round(durationMs / 2);\n    setTimeRange({\n      start: new Date(absoluteRange.start.getTime() - shift),\n      end: new Date(absoluteRange.end.getTime() - shift),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeShiftForward = useCallback(() => {\n    const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);\n    const shift = Math.round(durationMs / 2);\n    setTimeRange({\n      start: new Date(absoluteRange.start.getTime() + shift),\n      end: new Date(absoluteRange.end.getTime() + shift),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeMakeAbsolute = useCallback(() => {\n    if (isRelativeTimeRange(timeRange)) {\n      setTimeRange(toAbsoluteTimeRange(timeRange));\n    }\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeCopy = useCallback(() => {\n    const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n    const text = `${absoluteRange.start.toISOString()} - ${absoluteRange.end.toISOString()}`;\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        infoSnackbar('Time range copied to clipboard.');\n      })\n      .catch(() => {\n        warningSnackbar('Failed to copy time range to clipboard.');\n      });\n  }, [timeRange, infoSnackbar, warningSnackbar]);\n\n  const handleTimePaste = useCallback(() => {\n    const FORMAT_HINT = 'Expected format: \"<ISO date format> - <ISO date format>\".';\n    navigator.clipboard\n      .readText()\n      .then((text) => {\n        const parts = text.split(' - ');\n        if (parts.length !== 2) {\n          warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);\n          return;\n        }\n        const [startStr, endStr] = parts as [string, string];\n        const start = new Date(startStr.trim());\n        const end = new Date(endStr.trim());\n        if (isNaN(start.getTime()) || isNaN(end.getTime())) {\n          warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);\n          return;\n        }\n        if (start >= end) {\n          warningSnackbar('Invalid time range: start must be before end.');\n          return;\n        }\n        const newRange: AbsoluteTimeRange = { start, end };\n        setTimeRange(newRange);\n        infoSnackbar('Time range pasted from clipboard.');\n      })\n      .catch(() => {\n        warningSnackbar('Unable to read from clipboard. Check browser permissions.');\n      });\n  }, [setTimeRange, infoSnackbar, warningSnackbar]);\n\n  // Panel handlers\n  const handlePanelEditToggle = useCallback(() => {\n    if (panelEditor !== undefined) {\n      panelEditor.close();\n      return;\n    }\n\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        openEditPanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, openEditPanel, panelEditor]);\n\n  const handlePanelFullscreenToggle = useCallback(() => {\n    if (viewPanel !== undefined) {\n      setViewPanel(undefined);\n      return;\n    }\n\n    if (focusedPanelKey) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        setViewPanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, setViewPanel, viewPanel]);\n\n  const handlePanelDuplicate = useCallback(() => {\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        duplicatePanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, duplicatePanel]);\n\n  const handlePanelDelete = useCallback(() => {\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        openDeletePanelDialog(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, openDeletePanelDialog]);\n\n  // Register shortcuts\n\n  useHotkeys(\n    [\n      { def: SAVE_DASHBOARD_SHORTCUT, enabled: !disabled, callback: handleSave },\n      {\n        def: PANEL_EDIT_SHORTCUT,\n        enabled: !disabled && (panelFocused || panelEditor !== undefined),\n        callback: handlePanelEditToggle,\n      },\n      {\n        def: PANEL_FULLSCREEN_SHORTCUT,\n        enabled: !disabled && (panelFocused || viewPanel !== undefined),\n        callback: handlePanelFullscreenToggle,\n      },\n    ].map(({ def, enabled, callback }) => ({\n      hotkey: requireShortcutHotkey(def),\n      callback,\n      options: buildShortcutOptions(def, enabled),\n    }))\n  );\n\n  useHotkeySequences(\n    [\n      { def: REFRESH_DASHBOARD_SHORTCUT, enabled: !disabled, callback: handleRefresh },\n      { def: TOGGLE_EDIT_MODE_SHORTCUT, enabled: !disabled, callback: handleToggleEditMode },\n      { def: TIME_ZOOM_OUT_SHORTCUT, enabled: !disabled, callback: handleTimeZoomOut },\n      { def: TIME_ZOOM_IN_SHORTCUT, enabled: !disabled, callback: handleTimeZoomIn },\n      { def: TIME_SHIFT_BACK_SHORTCUT, enabled: !disabled, callback: handleTimeShiftBack },\n      { def: TIME_SHIFT_FORWARD_SHORTCUT, enabled: !disabled, callback: handleTimeShiftForward },\n      { def: TIME_MAKE_ABSOLUTE_SHORTCUT, enabled: !disabled, callback: handleTimeMakeAbsolute },\n      { def: TIME_COPY_SHORTCUT, enabled: !disabled, callback: handleTimeCopy },\n      { def: TIME_PASTE_SHORTCUT, enabled: !disabled, callback: handleTimePaste },\n      { def: PANEL_DUPLICATE_SHORTCUT, enabled: !disabled && panelFocused, callback: handlePanelDuplicate },\n      { def: PANEL_DELETE_SHORTCUT, enabled: !disabled && panelFocused, callback: handlePanelDelete },\n    ].map(({ def, enabled, callback }) => ({\n      sequence: requireShortcutSequence(def),\n      callback,\n      options: buildShortcutOptions(def, enabled),\n    }))\n  );\n}\n"],"names":["useCallback","isRelativeTimeRange","toAbsoluteTimeRange","useSnackbar","useTimeRange","useHotkeys","useHotkeySequences","useFocusedPanel","buildShortcutOptions","requireShortcutHotkey","requireShortcutSequence","SAVE_DASHBOARD_SHORTCUT","REFRESH_DASHBOARD_SHORTCUT","TOGGLE_EDIT_MODE_SHORTCUT","TIME_ZOOM_OUT_SHORTCUT","TIME_ZOOM_IN_SHORTCUT","TIME_SHIFT_BACK_SHORTCUT","TIME_SHIFT_FORWARD_SHORTCUT","TIME_MAKE_ABSOLUTE_SHORTCUT","TIME_COPY_SHORTCUT","TIME_PASTE_SHORTCUT","PANEL_EDIT_SHORTCUT","PANEL_FULLSCREEN_SHORTCUT","PANEL_DUPLICATE_SHORTCUT","PANEL_DELETE_SHORTCUT","useEditMode","useDashboardStore","useViewPanelGroup","useSaveDashboard","SAVE_SHORTCUT_EDIT_MODE_MESSAGE","SAVE_SHORTCUT_READONLY_MESSAGE","SAVE_SHORTCUT_UNAVAILABLE_MESSAGE","parsePanelKey","panelKey","dashIndex","indexOf","panelGroupId","parseInt","substring","panelGroupItemLayoutId","isNaN","MIN_ZOOM_DURATION_MS","MAX_ZOOM_DURATION_MS","resolveAbsoluteRange","timeRange","absoluteRange","startMs","start","getTime","endMs","end","durationMs","midpointMs","Math","round","selectPanelStoreActions","state","openEditPanel","duplicatePanel","openDeletePanelDialog","setViewPanel","panelEditor","useDashboardShortcuts","onSave","onRefresh","isReadonly","onEditButtonClick","onCancelButtonClick","disabled","focusedPanelKey","isEditMode","setEditMode","setTimeRange","refresh","infoSnackbar","warningSnackbar","viewPanel","saveDashboard","panelFocused","handleSave","handleRefresh","handleToggleEditMode","handleTimeZoomOut","newDuration","min","halfNew","Date","handleTimeZoomIn","max","handleTimeShiftBack","shift","handleTimeShiftForward","handleTimeMakeAbsolute","handleTimeCopy","text","toISOString","navigator","clipboard","writeText","then","catch","handleTimePaste","FORMAT_HINT","readText","parts","split","length","startStr","endStr","trim","newRange","handlePanelEditToggle","undefined","close","panelId","handlePanelFullscreenToggle","handlePanelDuplicate","handlePanelDelete","def","enabled","callback","map","hotkey","options","sequence"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAAQ,QAAQ;AACpC,SAA4CC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAE/G,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,UAAU,EAAEC,kBAAkB,QAAQ,0BAA0B;AACzE,SACEC,eAAe,EACfC,oBAAoB,EACpBC,qBAAqB,EACrBC,uBAAuB,EACvBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,yBAAyB,EACzBC,sBAAsB,EACtBC,qBAAqB,EACrBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,2BAA2B,EAC3BC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,yBAAyB,EACzBC,wBAAwB,EACxBC,qBAAqB,QAChB,2BAA2B;AAClC,SAEEC,WAAW,EACXC,iBAAiB,EAEjBC,iBAAiB,EACjBC,gBAAgB,QACX,kCAAkC;AAEzC,MAAMC,kCAAkC;AACxC,MAAMC,iCAAiC;AACvC,MAAMC,oCAAoC;AAE1C,SAASC,cAAcC,QAAgB;IACrC,MAAMC,YAAYD,SAASE,OAAO,CAAC;IACnC,IAAID,cAAc,CAAC,GAAG,OAAO;IAE7B,MAAME,eAAeC,SAASJ,SAASK,SAAS,CAAC,GAAGJ,YAAY;IAChE,MAAMK,yBAAyBN,SAASK,SAAS,CAACJ,YAAY;IAE9D,IAAIM,MAAMJ,eAAe,OAAO;IAEhC,OAAO;QAAEA;QAAcG;IAAuB;AAChD;AAEA,kDAAkD;AAClD,MAAME,uBAAuB;AAC7B,MAAMC,uBAAuB,KAAK,SAAS,KAAK,KAAK,KAAK;AAE1D,SAASC,qBAAqBC,SAAyB;IAKrD,MAAMC,gBAAgB5C,oBAAoB2C,aAAa1C,oBAAoB0C,aAAaA;IACxF,MAAME,UAAUD,cAAcE,KAAK,CAACC,OAAO;IAC3C,MAAMC,QAAQJ,cAAcK,GAAG,CAACF,OAAO;IACvC,MAAMG,aAAaF,QAAQH;IAC3B,MAAMM,aAAaC,KAAKC,KAAK,CAACR,UAAUK,aAAa;IACrD,OAAO;QAAEN;QAAeM;QAAYC;IAAW;AACjD;AAEA,MAAMG,0BAA0B,CAC9BC,QAOI,CAAA;QACJC,eAAeD,MAAMC,aAAa;QAClCC,gBAAgBF,MAAME,cAAc;QACpCC,uBAAuBH,MAAMG,qBAAqB;QAClDC,cAAcJ,MAAMI,YAAY;QAChCC,aAAaL,MAAMK,WAAW;IAChC,CAAA;AAWA,uGAAuG,GACvG,OAAO,SAASC,sBAAsB,EACpCC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,KAAK,EACa;IAC7B,MAAMC,kBAAkB9D;IACxB,MAAM,EAAE+D,UAAU,EAAEC,WAAW,EAAE,GAAG9C;IACpC,MAAM,EAAEmB,SAAS,EAAE4B,YAAY,EAAEC,OAAO,EAAE,GAAGrE;IAC7C,MAAM,EAAEsE,YAAY,EAAEC,eAAe,EAAE,GAAGxE;IAC1C,MAAMyE,YAAYjD;IAClB,MAAM,EAAE8B,aAAa,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,YAAY,EAAEC,WAAW,EAAE,GACvFnC,kBAAkB6B;IACpB,MAAM,EAAEsB,aAAa,EAAE,GAAGjD,iBAAiBmC;IAE3C,MAAMe,eAAeT,oBAAoB;IAEzC,mBAAmB;IAEnB,MAAMU,aAAa/E,YAAY;QAC7B,IAAIiE,YAAY;YACdU,gBAAgB7C;YAChB;QACF;QAEA,IAAI,CAACwC,YAAY;YACfI,aAAa7C;YACb;QACF;QAEA,IAAI,CAACkC,QAAQ;YACXY,gBAAgB5C;YAChB;QACF;QAEA8C;IACF,GAAG;QAACH;QAAcJ;QAAYL;QAAYF;QAAQc;QAAeF;KAAgB;IAEjF,MAAMK,gBAAgBhF,YAAY;QAChCyE;QACAC,aAAa;QACb,IAAIV,WAAW;YACbA;QACF;IACF,GAAG;QAACS;QAASC;QAAcV;KAAU;IAErC,MAAMiB,uBAAuBjF,YAAY;QACvC,IAAIsE,YAAY;YACd,wFAAwF;YACxF,IAAIH,qBAAqB;gBACvBA;YACF,OAAO;gBACLI,YAAY;YACd;QACF,OAAO;YACL,4EAA4E;YAC5E,IAAIL,mBAAmB;gBACrBA;YACF,OAAO;gBACLK,YAAY;YACd;QACF;IACF,GAAG;QAACD;QAAYC;QAAaJ;QAAqBD;KAAkB;IAEpE,sBAAsB;IAEtB,MAAMgB,oBAAoBlF,YAAY;QACpC,MAAM,EAAEmD,UAAU,EAAEC,UAAU,EAAE,GAAGT,qBAAqBC;QACxD,MAAMuC,cAAc9B,KAAK+B,GAAG,CAACjC,aAAa,GAAGT;QAC7C,MAAM2C,UAAUhC,KAAKC,KAAK,CAAC6B,cAAc;QACzCX,aAAa;YACXzB,OAAO,IAAIuC,KAAKlC,aAAaiC;YAC7BnC,KAAK,IAAIoC,KAAKlC,aAAaiC;QAC7B;IACF,GAAG;QAACzC;QAAW4B;KAAa;IAE5B,MAAMe,mBAAmBvF,YAAY;QACnC,MAAM,EAAEmD,UAAU,EAAEC,UAAU,EAAE,GAAGT,qBAAqBC;QACxD,MAAMuC,cAAc9B,KAAKmC,GAAG,CAACnC,KAAKC,KAAK,CAACH,aAAa,IAAIV;QACzD,MAAM4C,UAAUhC,KAAKC,KAAK,CAAC6B,cAAc;QACzCX,aAAa;YACXzB,OAAO,IAAIuC,KAAKlC,aAAaiC;YAC7BnC,KAAK,IAAIoC,KAAKlC,aAAaiC;QAC7B;IACF,GAAG;QAACzC;QAAW4B;KAAa;IAE5B,MAAMiB,sBAAsBzF,YAAY;QACtC,MAAM,EAAE6C,aAAa,EAAEM,UAAU,EAAE,GAAGR,qBAAqBC;QAC3D,MAAM8C,QAAQrC,KAAKC,KAAK,CAACH,aAAa;QACtCqB,aAAa;YACXzB,OAAO,IAAIuC,KAAKzC,cAAcE,KAAK,CAACC,OAAO,KAAK0C;YAChDxC,KAAK,IAAIoC,KAAKzC,cAAcK,GAAG,CAACF,OAAO,KAAK0C;QAC9C;IACF,GAAG;QAAC9C;QAAW4B;KAAa;IAE5B,MAAMmB,yBAAyB3F,YAAY;QACzC,MAAM,EAAE6C,aAAa,EAAEM,UAAU,EAAE,GAAGR,qBAAqBC;QAC3D,MAAM8C,QAAQrC,KAAKC,KAAK,CAACH,aAAa;QACtCqB,aAAa;YACXzB,OAAO,IAAIuC,KAAKzC,cAAcE,KAAK,CAACC,OAAO,KAAK0C;YAChDxC,KAAK,IAAIoC,KAAKzC,cAAcK,GAAG,CAACF,OAAO,KAAK0C;QAC9C;IACF,GAAG;QAAC9C;QAAW4B;KAAa;IAE5B,MAAMoB,yBAAyB5F,YAAY;QACzC,IAAIC,oBAAoB2C,YAAY;YAClC4B,aAAatE,oBAAoB0C;QACnC;IACF,GAAG;QAACA;QAAW4B;KAAa;IAE5B,MAAMqB,iBAAiB7F,YAAY;QACjC,MAAM6C,gBAAgB5C,oBAAoB2C,aAAa1C,oBAAoB0C,aAAaA;QACxF,MAAMkD,OAAO,GAAGjD,cAAcE,KAAK,CAACgD,WAAW,GAAG,GAAG,EAAElD,cAAcK,GAAG,CAAC6C,WAAW,IAAI;QACxFC,UAAUC,SAAS,CAChBC,SAAS,CAACJ,MACVK,IAAI,CAAC;YACJzB,aAAa;QACf,GACC0B,KAAK,CAAC;YACLzB,gBAAgB;QAClB;IACJ,GAAG;QAAC/B;QAAW8B;QAAcC;KAAgB;IAE7C,MAAM0B,kBAAkBrG,YAAY;QAClC,MAAMsG,cAAc;QACpBN,UAAUC,SAAS,CAChBM,QAAQ,GACRJ,IAAI,CAAC,CAACL;YACL,MAAMU,QAAQV,KAAKW,KAAK,CAAC;YACzB,IAAID,MAAME,MAAM,KAAK,GAAG;gBACtB/B,gBAAgB,CAAC,+CAA+C,EAAE2B,aAAa;gBAC/E;YACF;YACA,MAAM,CAACK,UAAUC,OAAO,GAAGJ;YAC3B,MAAMzD,QAAQ,IAAIuC,KAAKqB,SAASE,IAAI;YACpC,MAAM3D,MAAM,IAAIoC,KAAKsB,OAAOC,IAAI;YAChC,IAAIrE,MAAMO,MAAMC,OAAO,OAAOR,MAAMU,IAAIF,OAAO,KAAK;gBAClD2B,gBAAgB,CAAC,+CAA+C,EAAE2B,aAAa;gBAC/E;YACF;YACA,IAAIvD,SAASG,KAAK;gBAChByB,gBAAgB;gBAChB;YACF;YACA,MAAMmC,WAA8B;gBAAE/D;gBAAOG;YAAI;YACjDsB,aAAasC;YACbpC,aAAa;QACf,GACC0B,KAAK,CAAC;YACLzB,gBAAgB;QAClB;IACJ,GAAG;QAACH;QAAcE;QAAcC;KAAgB;IAEhD,iBAAiB;IACjB,MAAMoC,wBAAwB/G,YAAY;QACxC,IAAI6D,gBAAgBmD,WAAW;YAC7BnD,YAAYoD,KAAK;YACjB;QACF;QAEA,IAAI5C,mBAAmBC,YAAY;YACjC,MAAM4C,UAAUlF,cAAcqC;YAC9B,IAAI6C,SAAS;gBACXzD,cAAcyD;YAChB;QACF;IACF,GAAG;QAAC7C;QAAiBC;QAAYb;QAAeI;KAAY;IAE5D,MAAMsD,8BAA8BnH,YAAY;QAC9C,IAAI4E,cAAcoC,WAAW;YAC3BpD,aAAaoD;YACb;QACF;QAEA,IAAI3C,iBAAiB;YACnB,MAAM6C,UAAUlF,cAAcqC;YAC9B,IAAI6C,SAAS;gBACXtD,aAAasD;YACf;QACF;IACF,GAAG;QAAC7C;QAAiBT;QAAcgB;KAAU;IAE7C,MAAMwC,uBAAuBpH,YAAY;QACvC,IAAIqE,mBAAmBC,YAAY;YACjC,MAAM4C,UAAUlF,cAAcqC;YAC9B,IAAI6C,SAAS;gBACXxD,eAAewD;YACjB;QACF;IACF,GAAG;QAAC7C;QAAiBC;QAAYZ;KAAe;IAEhD,MAAM2D,oBAAoBrH,YAAY;QACpC,IAAIqE,mBAAmBC,YAAY;YACjC,MAAM4C,UAAUlF,cAAcqC;YAC9B,IAAI6C,SAAS;gBACXvD,sBAAsBuD;YACxB;QACF;IACF,GAAG;QAAC7C;QAAiBC;QAAYX;KAAsB;IAEvD,qBAAqB;IAErBtD,WACE;QACE;YAAEiH,KAAK3G;YAAyB4G,SAAS,CAACnD;YAAUoD,UAAUzC;QAAW;QACzE;YACEuC,KAAKjG;YACLkG,SAAS,CAACnD,YAAaU,CAAAA,gBAAgBjB,gBAAgBmD,SAAQ;YAC/DQ,UAAUT;QACZ;QACA;YACEO,KAAKhG;YACLiG,SAAS,CAACnD,YAAaU,CAAAA,gBAAgBF,cAAcoC,SAAQ;YAC7DQ,UAAUL;QACZ;KACD,CAACM,GAAG,CAAC,CAAC,EAAEH,GAAG,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAM,CAAA;YACrCE,QAAQjH,sBAAsB6G;YAC9BE;YACAG,SAASnH,qBAAqB8G,KAAKC;QACrC,CAAA;IAGFjH,mBACE;QACE;YAAEgH,KAAK1G;YAA4B2G,SAAS,CAACnD;YAAUoD,UAAUxC;QAAc;QAC/E;YAAEsC,KAAKzG;YAA2B0G,SAAS,CAACnD;YAAUoD,UAAUvC;QAAqB;QACrF;YAAEqC,KAAKxG;YAAwByG,SAAS,CAACnD;YAAUoD,UAAUtC;QAAkB;QAC/E;YAAEoC,KAAKvG;YAAuBwG,SAAS,CAACnD;YAAUoD,UAAUjC;QAAiB;QAC7E;YAAE+B,KAAKtG;YAA0BuG,SAAS,CAACnD;YAAUoD,UAAU/B;QAAoB;QACnF;YAAE6B,KAAKrG;YAA6BsG,SAAS,CAACnD;YAAUoD,UAAU7B;QAAuB;QACzF;YAAE2B,KAAKpG;YAA6BqG,SAAS,CAACnD;YAAUoD,UAAU5B;QAAuB;QACzF;YAAE0B,KAAKnG;YAAoBoG,SAAS,CAACnD;YAAUoD,UAAU3B;QAAe;QACxE;YAAEyB,KAAKlG;YAAqBmG,SAAS,CAACnD;YAAUoD,UAAUnB;QAAgB;QAC1E;YAAEiB,KAAK/F;YAA0BgG,SAAS,CAACnD,YAAYU;YAAc0C,UAAUJ;QAAqB;QACpG;YAAEE,KAAK9F;YAAuB+F,SAAS,CAACnD,YAAYU;YAAc0C,UAAUH;QAAkB;KAC/F,CAACI,GAAG,CAAC,CAAC,EAAEH,GAAG,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAM,CAAA;YACrCI,UAAUlH,wBAAwB4G;YAClCE;YACAG,SAASnH,qBAAqB8G,KAAKC;QACrC,CAAA;AAEJ"}

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

@@ -7,6 +7,7 @@ export interface DashboardToolbarProps {
     isReadonly: boolean;
     isVariableEnabled: boolean;
     isDatasourceEnabled: boolean;
+    isLinksEnabled?: boolean;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
     onSave?: OnSaveDashboard;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YAiG/D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAkC,MAAM,eAAe,CAAC;AAahF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YAyG/D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';
-import { useEditMode } from '../../context';
+import { useEditMode, useDashboardLinks } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
@@ -24,10 +24,13 @@ import { EditButton } from '../EditButton';
 import { EditJsonButton } from '../EditJsonButton';
 import { SaveDashboardButton } from '../SaveDashboardButton';
 import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
+import { EditDashboardLinksButton } from '../DashboardLinks';
+import { LinksDisplay } from '../LinksDisplay';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = useEditMode();
     const { timeZone, setTimeZone } = useTimeZoneParams('local');
+    const dashboardLinks = useDashboardLinks();
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
     const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
@@ -44,10 +47,21 @@ export const DashboardToolbar = (props)=>{
                     py: 1.5,
                     display: "flex",
                     sx: {
+                        gap: 2,
                         backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
                     },
                     children: [
                         dashboardTitle,
+                        isLinksEnabled && /*#__PURE__*/ _jsx(Stack, {
+                            display: "flex",
+                            justifyItems: "center",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            children: /*#__PURE__*/ _jsx(LinksDisplay, {
+                                links: dashboardLinks,
+                                variant: "dashboard"
+                            })
+                        }),
                         isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
                             gap: 1,
@@ -69,6 +83,7 @@ export const DashboardToolbar = (props)=>{
                                     children: [
                                         isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
                                         isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
+                                        isLinksEnabled && /*#__PURE__*/ _jsx(EditDashboardLinksButton, {}),
                                         /*#__PURE__*/ _jsx(AddPanelButton, {}),
                                         /*#__PURE__*/ _jsx(AddGroupButton, {})
                                     ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 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 { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\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?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams('local');\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\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      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"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              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\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 direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","alignItems","flexDirection","flexWrap","FallbackComponent","background","default","justifyContent","mt","onTimeZoneChange","tz","value"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 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 { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\nimport { EditDashboardLinksButton } from '../DashboardLinks';\nimport { LinksDisplay } from '../LinksDisplay';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isLinksEnabled?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    isLinksEnabled = true,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams('local');\n  const dashboardLinks = useDashboardLinks();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\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      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ gap: 2, backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isLinksEnabled && (\n            <Stack display=\"flex\" justifyItems=\"center\" alignItems=\"center\" justifyContent=\"center\">\n              <LinksDisplay links={dashboardLinks} variant=\"dashboard\" />\n            </Stack>\n          )}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"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              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                {isLinksEnabled && <EditDashboardLinksButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\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 direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","useDashboardLinks","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","EditDashboardLinksButton","LinksDisplay","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","isLinksEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","dashboardLinks","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","gap","backgroundColor","theme","palette","primary","main","justifyItems","alignItems","justifyContent","links","direction","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","flexDirection","flexWrap","FallbackComponent","background","default","mt","onTimeZoneChange","tz","value"],"mappings":"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"}

package/dist/components/Datasources/DatasourceEditor.d.ts

@@ -1,4 +1,4 @@
-import { DatasourceSpec } from '@perses-dev/core';
+import { DatasourceSpec } from '@perses-dev/spec';
 import { ReactElement } from 'react';
 export declare function DatasourceEditor(props: {
     datasources: Record<string, DatasourceSpec>;

package/dist/components/Datasources/DatasourceEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAgC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Jf"}
+{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Jf"}

package/dist/components/Datasources/DatasourceEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright 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 {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright 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 {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition } from '@perses-dev/core'; // TODO\nimport { DatasourceSpec } from '@perses-dev/spec';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}

package/dist/components/Datasources/EditDatasourcesButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditDatasourcesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/EditDatasourcesButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,wBAAgB,qBAAqB,IAAI,YAAY,CAwFpD"}
+{"version":3,"file":"EditDatasourcesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/EditDatasourcesButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,wBAAgB,qBAAqB,IAAI,YAAY,CA8EpD"}

package/dist/components/Datasources/EditDatasourcesButton.js

@@ -43,13 +43,7 @@ export function EditDatasourcesButton() {
             obj[key] = datasources[key];
             return obj;
         }, {});
-        setDashboard(dashboard.kind === 'Dashboard' ? {
-            ...dashboard,
-            spec: {
-                ...dashboard.spec,
-                datasources: datasources
-            }
-        } : {
+        setDashboard({
             ...dashboard,
             spec: {
                 ...dashboard.spec,