@perses-dev/dashboards 0.0.0-snapshot-ts-panel-actions-76080ec → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/cjs/components/index.js

@@ -24,14 +24,16 @@ _export_star(require("./DeletePanelDialog"), exports);
 _export_star(require("./DeletePanelGroupDialog"), exports);
 _export_star(require("./DiscardChangesConfirmationDialog"), exports);
 _export_star(require("./DownloadButton"), exports);
-_export_star(require("./EditJsonButton"), exports);
 _export_star(require("./EditJsonDialog"), exports);
+_export_star(require("./EditJsonButton"), exports);
 _export_star(require("./EmptyDashboard"), exports);
 _export_star(require("./GridLayout"), exports);
+_export_star(require("./LeaveDialog"), exports);
 _export_star(require("./Panel"), exports);
 _export_star(require("./PanelDrawer"), exports);
 _export_star(require("./PanelGroupDialog"), exports);
 _export_star(require("./QuerySummaryTable"), exports);
+_export_star(require("./QueryViewerDialog"), exports);
 _export_star(require("./SaveChangesConfirmationDialog"), exports);
 _export_star(require("./SaveDashboardButton"), exports);
 _export_star(require("./Variables"), exports);

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

@@ -50,7 +50,8 @@ const TOOLTIP_TEXT = {
     movePanel: 'Move',
     // Variable editor buttons
     refreshVariableValues: 'Refresh values',
-    copyVariableValues: 'Copy values to clipboard'
+    copyVariableValues: 'Copy values to clipboard',
+    queryView: 'Open query view'
 };
 const ARIA_LABEL_TEXT = {
     // Group buttons
@@ -65,5 +66,6 @@ const ARIA_LABEL_TEXT = {
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
     showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
-    movePanel: (panelName)=>`move panel ${panelName}`
+    movePanel: (panelName)=>`move panel ${panelName}`,
+    openQueryView: (panelName)=>`open query view for panel ${panelName}`
 };

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

@@ -61,14 +61,15 @@ function useDashboardStore(selector) {
     return (0, _traditional.useStoreWithEqualityFn)(store, selector, _shallow.shallow);
 }
 function DashboardProvider(props) {
+    // Prevent calling createDashboardStore every time it rerenders
     const createDashboardStore = (0, _react.useCallback)(initStore, [
         props
     ]);
+    const [store] = (0, _react.useState)(createDashboardStore(props));
     // load plugin to retrieve initial spec if default panel kind is defined
     const { defaultPluginKinds } = (0, _pluginsystem.usePluginRegistry)();
     const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';
     const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', defaultPanelKind);
-    const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
     (0, _react.useEffect)(()=>{
         if (plugin === undefined) return;
         const defaultPanelSpec = plugin.createInitialOptions ? plugin.createInitialOptions() : {};
@@ -90,12 +91,8 @@ 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 } } = dashboardResource;
+    const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
-    let { spec: { layouts, panels } } = dashboardResource;
-    // Set fallbacks in case the frontend is used with a non-Perses backend
-    layouts = layouts ?? [];
-    panels = panels ?? {};
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set] = args;
         return {
@@ -118,9 +115,11 @@ function initStore(props) {
             datasources,
             ttl,
             isEditMode: !!isEditMode,
-            setEditMode: (isEditMode)=>set({
+            setEditMode: (isEditMode)=>{
+                set({
                     isEditMode
-                }),
+                });
+            },
             setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
                 set((state)=>{
                     state.kind = kind;

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 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
@@ -24,12 +24,12 @@ const _jsxruntime = require("react/jsx-runtime");
 const _usequeryparams = require("use-query-params");
 const _DashboardProvider = require("./DashboardProvider");
 function DashboardProviderWithQueryParams({ children, initialState }) {
-    const [viewPanelRef, setViewPanelRef] = (0, _usequeryparams.useQueryParam)('viewPanelRef', _usequeryparams.StringParam);
+    const [viewPanelRef, setViewPanelRef] = (0, _usequeryparams.useQueryParam)('viewPanelRef', _usequeryparams.JsonParam);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProvider.DashboardProvider, {
         initialState: {
+            ...initialState,
             viewPanelRef: viewPanelRef ?? undefined,
-            setViewPanelRef: setViewPanelRef,
-            ...initialState
+            setViewPanelRef: setViewPanelRef
         },
         children: children
     });

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

@@ -49,7 +49,7 @@ function createDuplicatePanelSlice() {
                     if (matchingLayout === undefined) {
                         throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);
                     }
-                    const dupePanelKey = (0, _panelUtils.getValidPanelKey)(panelKey, panels);
+                    const dupePanelKey = crypto.randomUUID().replaceAll('-', '');
                     state.panels[dupePanelKey] = panelToDupe;
                     const duplicateLayout = {
                         i: (0, _common.generateId)().toString(),

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

@@ -42,6 +42,7 @@ function createPanelEditorSlice() {
                 }
                 const editorState = {
                     mode: 'update',
+                    panelGroupItemId: panelGroupItemId,
                     initialValues: {
                         groupId: panelGroupItemId.panelGroupId,
                         panelDefinition: panelToEdit
@@ -109,8 +110,7 @@ function createPanelEditorSlice() {
                         panelDefinition: get().initialValues?.panelDefinition ?? (0, _common.createPanelDefinition)()
                     },
                     applyChanges: (next)=>{
-                        const name = next.panelDefinition.spec.display.name;
-                        const panelKey = (0, _utils.getValidPanelKey)(name, get().panels);
+                        const panelKey = crypto.randomUUID().replaceAll('-', '');
                         set((state)=>{
                             // Add a panel
                             state.panels[panelKey] = next.panelDefinition;

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

@@ -29,12 +29,14 @@ const createPanelGroupEditorSlice = (set, get)=>({
                 mode: 'Add',
                 initialValues: {
                     title: '',
-                    isCollapsed: false
+                    isCollapsed: false,
+                    repeatVariable: ''
                 },
                 applyChanges (next) {
                     const newGroup = (0, _panelgroupslice.createEmptyPanelGroup)();
                     newGroup.title = next.title;
                     newGroup.isCollapsed = next.isCollapsed;
+                    newGroup.repeatVariable = next.repeatVariable;
                     set((draft)=>{
                         (0, _panelgroupslice.addPanelGroup)(draft, newGroup);
                     });
@@ -60,7 +62,8 @@ const createPanelGroupEditorSlice = (set, get)=>({
                 mode: 'Edit',
                 initialValues: {
                     title: existingGroup.title ?? '',
-                    isCollapsed: existingGroup.isCollapsed
+                    isCollapsed: existingGroup.isCollapsed,
+                    repeatVariable: existingGroup.repeatVariable ?? ''
                 },
                 applyChanges (next) {
                     set((draft)=>{
@@ -70,6 +73,7 @@ const createPanelGroupEditorSlice = (set, get)=>({
                         }
                         group.title = next.title;
                         group.isCollapsed = next.isCollapsed;
+                        group.repeatVariable = next.repeatVariable;
                     });
                 },
                 close () {

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

@@ -100,6 +100,7 @@ function convertLayoutsToPanelGroups(layouts) {
         panelGroups[panelGroupId] = {
             id: panelGroupId,
             isCollapsed: layout.spec.display?.collapse?.open === false,
+            repeatVariable: layout.spec.repeatVariable,
             title: layout.spec.display?.title,
             itemLayouts,
             itemPanelKeys

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

@@ -55,12 +55,13 @@ function getViewPanelGroupId(panelGroups, panelGroupItemId, panelRef) {
 // Find the PanelGroupItemId of a Panel from a PanelRef
 function findPanelGroupItemIdOfPanelRef(panelGroups, panelRef) {
     for (const panelGroup of Object.values(panelGroups)){
-        const itemPanel = Object.entries(panelGroup.itemPanelKeys ?? []).find(([_, value])=>value === panelRef);
+        const itemPanel = Object.entries(panelGroup.itemPanelKeys ?? []).find(([_, value])=>value === panelRef.ref);
         if (itemPanel) {
             const [key] = itemPanel;
             return {
                 panelGroupId: panelGroup.id,
-                panelGroupItemLayoutId: key
+                panelGroupItemLayoutId: key,
+                repeatVariable: panelRef.repeatVariable
             };
         }
     }
@@ -73,7 +74,13 @@ function findPanelRefOfPanelGroupItemId(panelGroups, panelGroupItemId) {
     }
     const panelGroup = panelGroups[panelGroupItemId.panelGroupId];
     if (panelGroup) {
-        return panelGroup.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+        const panelRef = panelGroup.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+        if (panelRef) {
+            return {
+                ref: panelRef,
+                repeatVariable: panelGroupItemId.repeatVariable
+            };
+        }
     }
     return undefined;
 }

package/dist/cjs/context/PanelEditorProvider/PanelEditorProvider.js

@@ -0,0 +1,49 @@
+// Copyright 2025 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PanelEditorContext: function() {
+        return PanelEditorContext;
+    },
+    PanelEditorProvider: function() {
+        return PanelEditorProvider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const PanelEditorContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+const PanelEditorProvider = ({ children })=>{
+    const [previewPanelWidth, setPreviewPanelWidth] = (0, _react.useState)(undefined);
+    const ctx = (0, _react.useMemo)(()=>({
+            preview: {
+                previewPanelWidth,
+                setPreviewPanelWidth
+            }
+        }), [
+        previewPanelWidth,
+        setPreviewPanelWidth
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelEditorContext.Provider, {
+        value: ctx,
+        children: children
+    });
+};

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

@@ -0,0 +1,23 @@
+// Copyright 2025 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, "PanelEditorContext", {
+    enumerable: true,
+    get: function() {
+        return _PanelEditorProvider.PanelEditorContext;
+    }
+});
+const _PanelEditorProvider = require("./PanelEditorProvider");

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

@@ -362,7 +362,7 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                 return (0, _utils.checkSavedDefaultVariableStatus)(get().variableDefinitions, get().variableState);
             }
         }))));
-    return store; // TODO: @Gladorme check if we can avoid this cast
+    return store;
 }
 function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
     const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({

package/dist/cjs/context/index.js

@@ -18,6 +18,7 @@ _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
 _export_star(require("./VariableProvider"), exports);
 _export_star(require("./useDashboard"), exports);
+_export_star(require("./PanelEditorProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/context/useDashboard.js

@@ -82,11 +82,11 @@ function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
         if (group === undefined) {
             throw new Error('panel group not found');
         }
-        const { title, isCollapsed, itemLayouts, itemPanelKeys } = group;
+        const { title, isCollapsed, repeatVariable, itemLayouts, itemPanelKeys } = group;
         let display = undefined;
-        if (title) {
+        if (title || isCollapsed !== undefined) {
             display = {
-                title,
+                title: title ?? '',
                 collapse: {
                     open: !isCollapsed
                 }
@@ -108,7 +108,8 @@ function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
                         height: layout.h,
                         content: (0, _core.createPanelRef)(panelKey)
                     };
-                })
+                }),
+                repeatVariable: repeatVariable
             }
         };
         layouts.push(layout);

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -28,7 +28,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isCreating } = props;
+    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { isEditMode, setEditMode } = (0, _context.useEditMode)();
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
@@ -78,7 +78,7 @@ const DashboardApp = (props)=>{
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
                 dashboardTitleComponent: dashboardTitleComponent,
-                initialVariableIsSticky: initialVariableIsSticky,
+                initialVariableIsSticky: isInitialVariableSticky,
                 onSave: onSave,
                 isReadonly: isReadonly,
                 isVariableEnabled: isVariableEnabled,
@@ -116,7 +116,11 @@ const DashboardApp = (props)=>{
                         isReadonly: !isEditMode,
                         disableMetadataEdition: !isCreating
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.SaveChangesConfirmationDialog, {}),
+                    isLeavingConfirmDialogEnabled && isEditMode && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.LeaveDialog, {
+                        original: originalDashboard,
+                        current: dashboard
+                    })
                 ]
             })
         ]

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -30,7 +30,7 @@ const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isEditing, isCreating, sx, ...others } = props;
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, ...others } = props;
     const { spec } = dashboardResource;
     const dashboardDuration = spec.duration ?? _core.DEFAULT_DASHBOARD_DURATION;
     const dashboardRefreshInterval = spec.refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
@@ -80,8 +80,8 @@ function ViewDashboard(props) {
         datasourceApi: datasourceApi,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProviderWithQueryParams.DashboardProviderWithQueryParams, {
             initialState: {
-                dashboardResource,
-                isEditMode: !!isEditing
+                isEditMode: !!isEditing,
+                dashboardResource
             },
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
                 initialTimeRange: initialTimeRange,
@@ -103,15 +103,16 @@ function ViewDashboard(props) {
                             FallbackComponent: _components.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
-                                dashboardTitleComponent: dashboardTitleComponent,
                                 emptyDashboardProps: emptyDashboardProps,
-                                onSave: onSave,
-                                onDiscard: onDiscard,
-                                initialVariableIsSticky: initialVariableIsSticky,
                                 isReadonly: isReadonly,
                                 isVariableEnabled: isVariableEnabled,
                                 isDatasourceEnabled: isDatasourceEnabled,
-                                isCreating: isCreating
+                                isCreating: isCreating,
+                                isInitialVariableSticky: isInitialVariableSticky,
+                                isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
+                                dashboardTitleComponent: dashboardTitleComponent,
+                                onSave: onSave,
+                                onDiscard: onDiscard
                             })
                         })
                     })

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAuEvF"}
+{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAsEvF"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -48,8 +48,6 @@ export function DashboardStickyToolbar(props) {
                         display: "flex",
                         flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
                         maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
-                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
-                        ,
                         pt: 1,
                         pl: isSticky ? 1 : 0,
                         mt: isSticky && isBiggerThanMd ? 0.5 : 0,

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useState } from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { VariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps): ReactElement {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            maxHeight=\"150px\" // Limit the vertical space used to ~3 rows of variables\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <VariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls />\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","VariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","maxHeight","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,YAAY,QAAQ,eAAe;AAO5C,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,WAAU,QAAQ,wDAAwD;;wBAC1EC,IAAI;wBACJC,IAAIlB,WAAW,IAAI;wBACnBmB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCmB,IAAIpB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFY,WAAW,CAACrB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXqB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRb,iBAAiB,CAACc,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACpC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW6C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMnC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC+C,GAAG/B,iBAAiB,MAAM;wBAC1BkB,IAAIlB,iBAAiB,MAAM;wBAC3BmB,IAAInB,iBAAiB,MAAM;wBAC3BgC,WAAU;wBACVrB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useState } from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { VariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps): ReactElement {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <VariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls />\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","VariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,YAAY,QAAQ,eAAe;AAO5C,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,IAAI;wBACJC,IAAIjB,WAAW,IAAI;wBACnBkB,IAAIlB,YAAYC,iBAAiB,MAAM;wBACvCkB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFW,WAAW,CAACpB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXoB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRZ,iBAAiB,CAACa,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACnC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW4C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMlC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC8C,GAAG9B,iBAAiB,MAAM;wBAC1BiB,IAAIjB,iBAAiB,MAAM;wBAC3BkB,IAAIlB,iBAAiB,MAAM;wBAC3B+B,WAAU;wBACVpB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}

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

@@ -1,8 +1,8 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { OnSaveDashboard } from '../../context';
 export interface DashboardToolbarProps {
     dashboardName: string;
-    dashboardTitleComponent?: JSX.Element;
+    dashboardTitleComponent?: ReactNode;
     initialVariableIsSticky?: boolean;
     isReadonly: boolean;
     isVariableEnabled: boolean;

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,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,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,YAgG/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,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,YAgG/D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { ReactElement } 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?: JSX.Element;\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\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 />\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","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","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"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls } 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\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 />\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","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,sBAAsB,QAAO,YA6CzC,CAAC"}
+{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,sBAAsB,QAAO,YAmCzC,CAAC"}

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
+import { Dialog } from '@perses-dev/components';
+import { Button } from '@mui/material';
 import { useDeletePanelGroupDialog, useViewPanel } from '../../context';
 export const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();
@@ -30,23 +30,13 @@ export const DeletePanelGroupDialog = ()=>{
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
-            /*#__PURE__*/ _jsx(DialogTitle, {
+            /*#__PURE__*/ _jsx(Dialog.Header, {
                 children: "Delete Panel Group"
             }),
-            /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closeDeletePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ _jsx(CloseIcon, {})
-            }),
             /*#__PURE__*/ _jsxs("form", {
                 onSubmit: handleDelete,
                 children: [
-                    /*#__PURE__*/ _jsxs(DialogContent, {
+                    /*#__PURE__*/ _jsxs(Dialog.Content, {
                         dividers: true,
                         sx: {
                             width: '500px'
@@ -57,7 +47,7 @@ export const DeletePanelGroupDialog = ()=>{
                             "? This will delete all the panels within the group."
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
+                    /*#__PURE__*/ _jsxs(Dialog.Actions, {
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 variant: "contained",

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, ReactElement } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelGroupDialog, useViewPanel } from '../../context';\n\nexport const DeletePanelGroupDialog = (): ReactElement => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n  const { setViewPanel } = useViewPanel();\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent): void => {\n    e.preventDefault();\n    if (panelGroupId === undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n    setViewPanel(undefined);\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      <form onSubmit={handleDelete}>\n        <DialogContent dividers sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => closeDeletePanelGroupDialog()}>\n            Cancel\n          </Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelGroupDialog","useViewPanel","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","setViewPanel","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","dividers","width","panelGroupName","variant","type","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,YAAY,QAAQ,gBAAgB;AAExE,OAAO,MAAMC,yBAAyB;IACpC,MAAM,EAAEC,sBAAsB,EAAEC,2BAA2B,EAAEC,gBAAgB,EAAE,GAAGL;IAClF,MAAM,EAAEM,YAAY,EAAE,GAAGL;IACzB,MAAMM,eAAeJ,wBAAwBI;IAE7C,MAAMC,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,IAAIH,iBAAiBI,WAAW;YAC9B,MAAM,IAAIC,MAAM;QAClB;QACAP,iBAAiBE;QACjBH;QACAE,aAAaK;IACf;IAEA,qBACE,MAACjB;QAAOmB,MAAMV,2BAA2BQ;;0BACvC,KAAChB;0BAAY;;0BACb,KAACF;gBACCqB,cAAW;gBACXC,SAAS,IAAMX;gBACfY,IAAI,CAACC,QAAW,CAAA;wBACdC,UAAU;wBACVC,KAAKF,MAAMG,OAAO,CAAC;wBACnBC,OAAOJ,MAAMG,OAAO,CAAC;oBACvB,CAAA;0BAEA,cAAA,KAACrB;;0BAEH,MAACuB;gBAAKC,UAAUf;;kCACd,MAACZ;wBAAc4B,QAAQ;wBAACR,IAAI;4BAAES,OAAO;wBAAQ;;4BAAG;4BACbtB,wBAAwBuB,kBAAkB;4BAAc;;;kCAG3F,MAAC7B;;0CACC,KAACC;gCAAO6B,SAAQ;gCAAYC,MAAK;0CAAS;;0CAG1C,KAAC9B;gCAAO6B,SAAQ;gCAAWE,OAAM;gCAAYd,SAAS,IAAMX;0CAA+B;;;;;;;;AAOrG,EAAE"}
+{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, ReactElement } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { Button } from '@mui/material';\nimport { useDeletePanelGroupDialog, useViewPanel } from '../../context';\n\nexport const DeletePanelGroupDialog = (): ReactElement => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n  const { setViewPanel } = useViewPanel();\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent): void => {\n    e.preventDefault();\n    if (panelGroupId === undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n    setViewPanel(undefined);\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <Dialog.Header>Delete Panel Group</Dialog.Header>\n\n      <form onSubmit={handleDelete}>\n        <Dialog.Content dividers sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </Dialog.Content>\n        <Dialog.Actions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => closeDeletePanelGroupDialog()}>\n            Cancel\n          </Button>\n        </Dialog.Actions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["Dialog","Button","useDeletePanelGroupDialog","useViewPanel","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","setViewPanel","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","Header","form","onSubmit","Content","dividers","sx","width","panelGroupName","Actions","variant","type","color","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,EAAEC,YAAY,QAAQ,gBAAgB;AAExE,OAAO,MAAMC,yBAAyB;IACpC,MAAM,EAAEC,sBAAsB,EAAEC,2BAA2B,EAAEC,gBAAgB,EAAE,GAAGL;IAClF,MAAM,EAAEM,YAAY,EAAE,GAAGL;IACzB,MAAMM,eAAeJ,wBAAwBI;IAE7C,MAAMC,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,IAAIH,iBAAiBI,WAAW;YAC9B,MAAM,IAAIC,MAAM;QAClB;QACAP,iBAAiBE;QACjBH;QACAE,aAAaK;IACf;IAEA,qBACE,MAACb;QAAOe,MAAMV,2BAA2BQ;;0BACvC,KAACb,OAAOgB,MAAM;0BAAC;;0BAEf,MAACC;gBAAKC,UAAUR;;kCACd,MAACV,OAAOmB,OAAO;wBAACC,QAAQ;wBAACC,IAAI;4BAAEC,OAAO;wBAAQ;;4BAAG;4BACdjB,wBAAwBkB,kBAAkB;4BAAc;;;kCAG3F,MAACvB,OAAOwB,OAAO;;0CACb,KAACvB;gCAAOwB,SAAQ;gCAAYC,MAAK;0CAAS;;0CAG1C,KAACzB;gCAAOwB,SAAQ;gCAAWE,OAAM;gCAAYC,SAAS,IAAMtB;0CAA+B;;;;;;;;AAOrG,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8EzE"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAmGzE"}