@perses-dev/dashboards 0.44.0 → 0.45.0-rc1

package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -25,8 +25,8 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _PinOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOutline"));
 const _PinOffOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOffOutline"));
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _Variables = require("../Variables");
-const _TimeRangeControls = require("../TimeRangeControls");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -101,7 +101,7 @@ function DashboardStickyToolbar(props) {
                         ml: isBiggerThanMd ? 1.5 : 'auto',
                         direction: "row",
                         justifyContent: "end",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeControls.TimeRangeControls, {})
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {})
                     })
                 ]
             })

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

@@ -23,11 +23,11 @@ Object.defineProperty(exports, "DashboardToolbar", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _AddPanelButton = require("../AddPanelButton");
 const _AddGroupButton = require("../AddGroupButton");
 const _DownloadButton = require("../DownloadButton");
-const _TimeRangeControls = require("../TimeRangeControls");
 const _Variables = require("../Variables");
 const _Datasources = require("../Datasources");
 const _EditButton = require("../EditButton");
@@ -63,7 +63,7 @@ const DashboardToolbar = (props)=>{
                             ml: "auto",
                             children: [
                                 isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                                    severity: 'warning',
+                                    severity: "warning",
                                     sx: {
                                         backgroundColor: 'transparent',
                                         padding: 0
@@ -138,7 +138,7 @@ const DashboardToolbar = (props)=>{
                                 mt: 1,
                                 ml: 1,
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeControls.TimeRangeControls, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
                                         isReadonly: !isEditMode

package/dist/cjs/components/DownloadButton/DownloadButton.js

@@ -26,7 +26,6 @@ const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-mat
 const _components = require("@perses-dev/components");
 const _constants = require("../../constants");
 const _context = require("../../context");
-const _ToolbarIconButton = require("../ToolbarIconButton");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -54,7 +53,7 @@ function DownloadButton({ heightPx }) {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.downloadDashboard,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToolbarIconButton.ToolbarIconButton, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
                     "aria-label": _constants.TOOLTIP_TEXT.downloadDashboard,
                     onClick: onDownloadButtonClick,
                     sx: {

package/dist/cjs/components/EditJsonButton/EditJsonButton.js

@@ -24,7 +24,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _CodeBraces = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/CodeBraces"));
 const _components = require("@perses-dev/components");
 const _constants = require("../../constants");
-const _ToolbarIconButton = require("../ToolbarIconButton");
 const _context = require("../../context");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -37,7 +36,7 @@ const EditJsonButton = (props)=>{
     const info = isReadonly ? _constants.TOOLTIP_TEXT.viewJson : _constants.TOOLTIP_TEXT.editJson;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
         description: info,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToolbarIconButton.ToolbarIconButton, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
             "aria-label": info,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),

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

@@ -25,7 +25,6 @@ const _material = require("@mui/material");
 const _reactintersectionobserver = require("react-intersection-observer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _utils = require("../../utils");
 const _Panel = require("../Panel/Panel");
 function GridItemContent(props) {
     const { panelGroupItemId, width } = props;
@@ -48,7 +47,7 @@ function GridItemContent(props) {
         };
     }
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const suggestedStepMs = (0, _utils.useSuggestedStepMs)(width);
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
     const definitions = queryDefinitions.map((query)=>{
         return {

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

@@ -84,7 +84,7 @@ function GridLayout(props) {
                     },
                     cols: _constants.GRID_LAYOUT_COLS,
                     rowHeight: 30,
-                    draggableHandle: '.drag-handle',
+                    draggableHandle: ".drag-handle",
                     resizeHandles: [
                         'se'
                     ],

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

@@ -54,7 +54,6 @@ function GridTitle(props) {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
-            padding: (theme)=>theme.spacing(1),
             cursor: collapse ? 'pointer' : 'auto',
             backgroundColor: ({ palette })=>palette.background.paper
         },

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

@@ -84,6 +84,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
                 editHandlers: editHandlers,
+                links: definition.spec.links,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }

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

@@ -30,12 +30,13 @@ const _DragVertical = /*#__PURE__*/ _interop_require_default(require("mdi-materi
 const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
+const _PanelLinks = require("./PanelLinks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, extra, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
@@ -139,6 +140,9 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, editHan
                             }
                         })
                     })
+                }),
+                links !== undefined && links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelLinks.PanelLinks, {
+                    links: links
                 })
             ]
         }),

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

@@ -0,0 +1,137 @@
+// Copyright 2024 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, "PanelLinks", {
+    enumerable: true,
+    get: function() {
+        return PanelLinks;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _Launch = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Launch"));
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PanelLinks({ links }) {
+    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const isMenuOpened = Boolean(anchorEl);
+    const handleOpenMenu = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    // If there is only one link, show it directly
+    if (links.length === 1 && links[0]) {
+        const link = links[0];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(LinkButton, {
+            link: link
+        });
+    }
+    // Else we show a menu with a list of all links
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: `${links.length} links`,
+                enterDelay: 100,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    "aria-label": "Panel links",
+                    size: "small",
+                    onClick: handleOpenMenu,
+                    sx: (theme)=>({
+                            borderRadius: theme.shape.borderRadius,
+                            padding: '4px'
+                        }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Launch.default, {
+                        "aria-describedby": "links-icon",
+                        fontSize: "inherit",
+                        sx: {
+                            color: (theme)=>theme.palette.text.secondary
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                anchorEl: anchorEl,
+                open: isMenuOpened,
+                onClose: handleClose,
+                MenuListProps: {
+                    'aria-labelledby': 'panel-links'
+                },
+                children: links.map((link)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(LinkMenuItem, {
+                        link: link
+                    }, link.url))
+            })
+        ]
+    });
+}
+function LinkButton({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+            "aria-label": name !== null && name !== void 0 ? name : url,
+            size: "small",
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            sx: (theme)=>({
+                    borderRadius: theme.shape.borderRadius,
+                    padding: '4px'
+                }),
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Launch.default, {
+                fontSize: "inherit",
+                sx: {
+                    color: (theme)=>theme.palette.text.secondary
+                }
+            })
+        })
+    });
+}
+function LinkMenuItem({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+            component: _material.Link,
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            children: name !== null && name !== void 0 ? name : url
+        })
+    });
+}
+function useLink(link) {
+    var _useReplaceVariablesInString;
+    const url = (_useReplaceVariablesInString = (0, _pluginsystem.useReplaceVariablesInString)(link.url)) !== null && _useReplaceVariablesInString !== void 0 ? _useReplaceVariablesInString : link.url;
+    const name = (0, _pluginsystem.useReplaceVariablesInString)(link.name);
+    const tooltip = (0, _pluginsystem.useReplaceVariablesInString)(link.tooltip);
+    if (link.renderVariables === false) {
+        return link;
+    }
+    return {
+        ...link,
+        url,
+        name,
+        tooltip
+    };
+}

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -43,18 +43,26 @@ function PanelEditorForm(props) {
     const { initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId }, initialAction, onSave, onClose } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
     const [groupId, setGroupId] = (0, _react.useState)(initialGroupId);
-    const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
+    const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
     const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
-        pluginType: 'Panel',
+        pluginTypes: [
+            'Panel'
+        ],
         value: {
-            kind: plugin.kind,
+            selection: {
+                kind: plugin.kind,
+                type: 'Panel'
+            },
             spec: plugin.spec
         },
         onChange: (plugin)=>{
-            setPlugin(plugin);
+            setPlugin({
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
         },
         onHideQueryEditorChange: (isHidden)=>{
             setQueries(undefined, isHidden);
@@ -69,9 +77,23 @@ function PanelEditorForm(props) {
             name: initialPanelDef.spec.display.name,
             groupId: initialGroupId,
             description: initialPanelDef.spec.display.description,
-            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
+            selection: pluginEditor.pendingSelection ? pluginEditor.pendingSelection : {
+                type: 'Panel',
+                kind: plugin.kind
+            },
+            links: initialPanelDef.spec.links
         }
     });
+    const links = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'links'
+    });
+    (0, _react.useEffect)(()=>{
+        setLinks(links);
+    }, [
+        setLinks,
+        links
+    ]);
     const processForm = ()=>{
         const values = {
             groupId,
@@ -232,13 +254,15 @@ function PanelEditorForm(props) {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "type",
+                                name: "selection",
                                 render: ({ field, fieldState })=>/*#__PURE__*/ {
                                     var _pluginEditor_error, _fieldState_error;
                                     var _pluginEditor_error_message;
                                     return (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
                                         ...field,
-                                        pluginType: "Panel",
+                                        pluginTypes: [
+                                            'Panel'
+                                        ],
                                         required: true,
                                         fullWidth: true,
                                         label: "Type",
@@ -247,7 +271,7 @@ function PanelEditorForm(props) {
                                         helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
-                                            pluginEditor.onKindChange(event);
+                                            pluginEditor.onSelectionChange(event);
                                         }
                                     });
                                 }

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -25,7 +25,6 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _Panel = require("../Panel");
-const _utils = require("../../utils");
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
 function PanelPreview({ panelDefinition }) {
@@ -34,7 +33,7 @@ function PanelPreview({ panelDefinition }) {
     if (boxRef.current !== null) {
         width = boxRef.current.getBoundingClientRect().width;
     }
-    const suggestedStepMs = (0, _utils.useSuggestedStepMs)(width);
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }

package/dist/cjs/components/PanelDrawer/usePanelEditor.js

@@ -22,9 +22,10 @@ Object.defineProperty(exports, "usePanelEditor", {
 });
 const _react = require("react");
 const usePanelEditor = (panelDefinition)=>{
-    const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;
+    const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;
     const [name, setName] = (0, _react.useState)(display.name);
     const [description, setDescription] = (0, _react.useState)(display.description);
+    const [links, setLinks] = (0, _react.useState)(initialLinks);
     const [plugin, setPlugin] = (0, _react.useState)(pluginDefinition);
     // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries
     const [prevQueries, setPrevQueries] = (0, _react.useState)(initialQueries);
@@ -47,14 +48,16 @@ const usePanelEditor = (panelDefinition)=>{
     ]);
     // reset panel definition
     const setPanelDefinition = (0, _react.useCallback)((panelDefinition)=>{
-        const { display, plugin, queries } = panelDefinition.spec;
+        const { display, plugin, queries, links } = panelDefinition.spec;
         setName(display.name);
         setDescription(display.description);
+        setLinks(links);
         setPlugin(plugin);
         setQueries(queries);
     }, [
         setName,
         setDescription,
+        setLinks,
         setPlugin,
         setQueries
     ]);
@@ -67,23 +70,23 @@ const usePanelEditor = (panelDefinition)=>{
                         description
                     },
                     plugin,
-                    queries: currentQueries
+                    queries: currentQueries,
+                    links
                 }
             },
             setName,
             setDescription,
+            setLinks,
             setQueries,
             setPlugin,
             setPanelDefinition
         }), [
         name,
         description,
+        links,
         plugin,
         currentQueries,
-        setName,
-        setDescription,
         setQueries,
-        setPlugin,
         setPanelDefinition
     ]);
 };

package/dist/cjs/components/index.js

@@ -34,8 +34,6 @@ _export_star(require("./PanelGroupDialog"), exports);
 _export_star(require("./QuerySummaryTable"), exports);
 _export_star(require("./SaveChangesConfirmationDialog"), exports);
 _export_star(require("./SaveDashboardButton"), exports);
-_export_star(require("./TimeRangeControls"), exports);
-_export_star(require("./ToolbarIconButton"), exports);
 _export_star(require("./Variables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -36,8 +36,6 @@ const TOOLTIP_TEXT = {
     editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
     editVariables: 'Edit variables',
-    refreshDashboard: 'Refresh dashboard',
-    refreshDashboardInterval: 'Auto refresh interval',
     viewJson: 'View JSON',
     // Group buttons
     addPanelToGroup: 'Add panel to group',

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -101,7 +101,9 @@ function DatasourceStoreProvider(props) {
     ]);
     const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginKind)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
-            listPluginMetadata('Datasource'),
+            listPluginMetadata([
+                'Datasource'
+            ]),
             project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],
             datasourceApi.listGlobalDatasources(datasourcePluginKind)
         ]);

package/dist/cjs/utils/index.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./panelUtils"), exports);
-_export_star(require("./time"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/validation/panel.js

@@ -22,8 +22,18 @@ Object.defineProperty(exports, "panelEditorValidationSchema", {
 });
 const _zod = require("zod");
 const panelEditorValidationSchema = _zod.z.object({
-    name: _zod.z.string().nonempty('Required'),
+    name: _zod.z.string().min(1, 'Required'),
     groupId: _zod.z.number(),
     description: _zod.z.string().optional(),
-    type: _zod.z.string().nonempty('Required')
+    selection: _zod.z.object({
+        type: _zod.z.string(),
+        kind: _zod.z.string()
+    }),
+    links: _zod.z.array(_zod.z.object({
+        name: _zod.z.string().optional(),
+        url: _zod.z.string().min(1, 'Required'),
+        tooltip: _zod.z.string().optional(),
+        renderVariables: _zod.z.boolean().optional(),
+        targetBlank: _zod.z.boolean().optional()
+    })).optional()
 });

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -15,8 +15,8 @@ import { useState } from 'react';
 import { AppBar, Box, IconButton, Stack, useMediaQuery, useScrollTrigger, useTheme } from '@mui/material';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
 import { TemplateVariableList } from '../Variables';
-import { TimeRangeControls } from '../TimeRangeControls';
 export function DashboardStickyToolbar(props) {
     const [isPin, setIsPin] = useState(props.initialVariableIsSticky);
     const scrollTrigger = useScrollTrigger({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport {\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 { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\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            <TemplateVariableList />\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></TimeRangeControls>\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,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,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,uBAAuB;AAOzD,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,KAACrC;4BACAG,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,KAACpB;;;;;;AAOf"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport {\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 { TemplateVariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\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            <TemplateVariableList />\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></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","TemplateVariableList","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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,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,oBAAoB,QAAQ,eAAe;AAOpD,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAY7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,4CA8F5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,4CA8F5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -13,11 +13,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
 import { useEditMode } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
-import { TimeRangeControls } from '../TimeRangeControls';
 import { EditVariablesButton } from '../Variables';
 import { EditDatasourcesButton } from '../Datasources';
 import { EditButton } from '../EditButton';
@@ -53,7 +53,7 @@ export const DashboardToolbar = (props)=>{
                             ml: "auto",
                             children: [
                                 isReadonly && /*#__PURE__*/ _jsx(Alert, {
-                                    severity: 'warning',
+                                    severity: "warning",
                                     sx: {
                                         backgroundColor: 'transparent',
                                         padding: 0