@perses-dev/dashboards 0.21.1 → 0.23.0

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -28,6 +28,7 @@ const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/A
 const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
 const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
 const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
 const _context = require("../../context");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -54,10 +55,12 @@ function GridTitle(props) {
             padding: (theme)=>theme.spacing(1),
             backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
+        "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                     onClick: collapse.onToggleOpen,
+                    "aria-label": `${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`,
                     children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
                 }),
                 text,
@@ -66,42 +69,42 @@ function GridTitle(props) {
                     marginLeft: "auto",
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                            description: `Add a new panel to ${title}`,
+                            description: _constants.TOOLTIP_TEXT.addPanelToGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                "aria-label": `add panel to group ${title}`,
+                                "aria-label": _constants.ARIA_LABEL_TEXT.addPanelToGroup(title),
                                 onClick: openAddPanel,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                            description: "Edit",
+                            description: _constants.TOOLTIP_TEXT.editGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                "aria-label": `edit group ${title}`,
+                                "aria-label": _constants.ARIA_LABEL_TEXT.editGroup(title),
                                 onClick: openEditPanelGroup,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                            description: "Delete",
+                            description: _constants.TOOLTIP_TEXT.deleteGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                "aria-label": `delete group ${title}`,
+                                "aria-label": _constants.ARIA_LABEL_TEXT.deleteGroup(title),
                                 onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                            description: "Move panel group down",
+                            description: _constants.TOOLTIP_TEXT.moveGroupDown,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                "aria-label": `move group ${title} down`,
+                                "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupDown(title),
                                 disabled: moveDown === undefined,
                                 onClick: moveDown,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                            description: "Move panel group up",
+                            description: _constants.TOOLTIP_TEXT.moveGroupUp,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                "aria-label": `move group ${title} up`,
+                                "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupUp(title),
                                 disabled: moveUp === undefined,
                                 onClick: moveUp,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -56,8 +56,7 @@ function Panel(props) {
         initialInView: false,
         triggerOnce: true
     });
-    // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
-    const panelPadding = 1.5;
+    const chartsTheme = (0, _components.useChartsTheme)();
     const handleMouseEnter = (e)=>{
         setIsHovered(true);
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
@@ -80,6 +79,7 @@ function Panel(props) {
         onMouseLeave: handleMouseLeave,
         "aria-labelledby": headerId,
         "aria-describedby": headerId,
+        "data-testid": "panel",
         ...others,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {
@@ -89,7 +89,7 @@ function Panel(props) {
                 editHandlers: editHandlers,
                 isHovered: isHovered,
                 sx: {
-                    paddingX: (theme)=>theme.spacing(panelPadding)
+                    paddingX: `${chartsTheme.container.padding.default}px`
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardContent, {
@@ -99,10 +99,10 @@ function Panel(props) {
                     overflow: 'hidden',
                     flexGrow: 1,
                     margin: 0,
-                    padding: (theme)=>theme.spacing(panelPadding),
+                    padding: 0,
                     // Override MUI default style for last-child
                     ':last-child': {
-                        padding: (theme)=>theme.spacing(panelPadding)
+                        padding: 0
                     }
                 },
                 ref: setContentElement,

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -97,7 +97,8 @@ describe('Panel', ()=>{
     it('does not show description in edit mode', ()=>{
         renderPanel(undefined, {
             onEditPanelClick: jest.fn(),
-            onDeletePanelClick: jest.fn()
+            onDeletePanelClick: jest.fn(),
+            onDuplicatePanelClick: jest.fn()
         });
         const panel = getPanel();
         _userEvent.default.hover(panel);
@@ -109,9 +110,11 @@ describe('Panel', ()=>{
     it('can trigger panel actions in edit mode', ()=>{
         const onEditPanelClick = jest.fn();
         const onDeletePanelClick = jest.fn();
+        const onDuplicatePanelClick = jest.fn();
         renderPanel(undefined, {
             onEditPanelClick,
-            onDeletePanelClick
+            onDeletePanelClick,
+            onDuplicatePanelClick
         });
         const panel = getPanel();
         _userEvent.default.hover(panel);
@@ -123,7 +126,12 @@ describe('Panel', ()=>{
             name: /delete/i
         });
         _userEvent.default.click(deleteButton);
+        const duplicateButton = _react.screen.getByRole('button', {
+            name: /duplicate/i
+        });
+        _userEvent.default.click(duplicateButton);
         expect(onEditPanelClick).toHaveBeenCalledTimes(1);
         expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
+        expect(onDuplicatePanelClick).toHaveBeenCalledTimes(1);
     });
 });

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -31,7 +31,8 @@ function PanelContent(props) {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Skeleton, {
             variant: "rectangular",
             width: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.width,
-            height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height
+            height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height,
+            "aria-label": "Loading..."
         });
     }
     if (PanelComponent === undefined) {

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -25,6 +25,8 @@ const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-ma
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
 const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
+const _contentCopy = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentCopy"));
+const _constants = require("../../constants");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -39,9 +41,9 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         actions = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                    description: "Edit",
+                    description: _constants.TOOLTIP_TEXT.editPanel,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": `edit panel ${title}`,
+                        "aria-label": _constants.ARIA_LABEL_TEXT.editPanel(title),
                         size: "small",
                         onClick: editHandlers.onEditPanelClick,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {
@@ -50,9 +52,25 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                    description: "Delete",
+                    description: _constants.TOOLTIP_TEXT.duplicatePanel,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": `delete panel ${title}`,
+                        "aria-label": _constants.ARIA_LABEL_TEXT.duplicatePanel(title),
+                        size: "small",
+                        onClick: editHandlers.onDuplicatePanelClick,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_contentCopy.default, {
+                            fontSize: "inherit",
+                            sx: {
+                                // Shrink this icon a little bit to look more consistent
+                                // with the other icons in the header.
+                                transform: 'scale(0.925)'
+                            }
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                    description: _constants.TOOLTIP_TEXT.deletePanel,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": _constants.ARIA_LABEL_TEXT.deletePanel(title),
                         size: "small",
                         onClick: editHandlers.onDeletePanelClick,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {
@@ -61,9 +79,9 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                    description: "Drag and drop panel to reorganize",
+                    description: _constants.TOOLTIP_TEXT.movePanel,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": `move panel ${title}`,
+                        "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
                         size: "small",
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
                             className: "drag-handle",
@@ -83,7 +101,7 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
             description: description,
             enterDelay: 100,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                "aria-label": "Panel Description",
+                "aria-label": "panel description",
                 size: "small",
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
                     "aria-describedby": "info-tooltip",

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-empty-function */ // Copyright 2022 The Perses Authors
+/* eslint-disable @typescript-eslint/no-empty-function */ // Copyright 2023 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
@@ -71,6 +71,7 @@ const PanelDrawer = ()=>{
         SlideProps: {
             onExited: handleExited
         },
+        "data-testid": "panel-editor",
         children: panelEditor !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -73,6 +73,7 @@ function PanelGroupDialog() {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                    dividers: true,
                     sx: {
                         width: '500px'
                     },
@@ -90,6 +91,8 @@ function PanelGroupDialog() {
                             children: panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            variant: "outlined",
+                            color: "secondary",
                             onClick: panelGroupEditor.close,
                             children: "Cancel"
                         })

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/components/PanelGroupDialog/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -26,11 +26,12 @@ _export(exports, {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
+const _constants = require("../../constants");
 const _context = require("../../context");
+const _toolbarIconButton = require("../ToolbarIconButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -96,7 +97,7 @@ const DEFAULT_HEIGHT = '34px';
 function TimeRangeControls({ heightPx  }) {
     const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
     const defaultTimeRange = (0, _context.useDefaultTimeRange)();
-    // Convert height as a number to height as a string, then use this value for styling
+    // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time shortcut if one does not match duration from dashboard JSON
     if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
@@ -117,20 +118,17 @@ function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(RefreshIconButton, {
-                "aria-label": "Refresh Dashboard",
-                onClick: refresh,
-                sx: {
-                    height
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.refreshDashboard,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
+                    "aria-label": _constants.TOOLTIP_TEXT.refreshDashboard,
+                    onClick: refresh,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+                })
             })
         ]
     });
 }
-const RefreshIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
-        border: `1px solid ${theme.palette.grey[300]}`,
-        borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(0.5),
-        color: theme.palette.grey[900]
-    }));

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -61,7 +61,7 @@ describe('TimeRangeControls', ()=>{
         renderTimeRangeControls(false);
         expect(_react.screen.getByText('Last 30 minutes')).toBeInTheDocument();
         const dateButton = _react.screen.getByRole('button', {
-            name: /last/i
+            name: /time range/i
         });
         _userEvent.default.click(dateButton);
         const firstSelected = _react.screen.getByRole('option', {
@@ -73,7 +73,7 @@ describe('TimeRangeControls', ()=>{
     it('should update URL params with correct time range values', ()=>{
         renderTimeRangeControls(true);
         const dateButton = _react.screen.getByRole('button', {
-            name: /last/i
+            name: /time range/i
         });
         _userEvent.default.click(dateButton);
         const firstSelected = _react.screen.getByRole('option', {

package/dist/cjs/components/TimeRangeControls/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/components/ToolbarIconButton/ToolbarIconButton.js

@@ -0,0 +1,35 @@
+// Copyright 2023 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, "ToolbarIconButton", {
+    enumerable: true,
+    get: ()=>ToolbarIconButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function ToolbarIconButton(props) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
+        variant: "outlined",
+        color: "secondary",
+        ...props
+    });
+}
+const IconButton = (0, _material.styled)(_material.Button)(({ theme  })=>({
+        // Using a button with some adjusted styles because it is easier to inherit
+        // styling and variants from themes than with an IconButton.
+        padding: theme.spacing(0.5),
+        minWidth: 'auto'
+    }));

package/dist/cjs/components/ToolbarIconButton/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 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
+});
+_exportStar(require("./ToolbarIconButton"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -0,0 +1,75 @@
+// Copyright 2023 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, "EditVariablesButton", {
+    enumerable: true,
+    get: ()=>EditVariablesButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _context = require("../../context");
+const _variableEditor = require("./VariableEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function EditVariablesButton() {
+    const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
+    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
+    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    const openVariableEditor = ()=>{
+        setIsVariableEditorOpen(true);
+    };
+    const closeVariableEditor = ()=>{
+        setIsVariableEditorOpen(false);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.editVariables,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
+                    onClick: openVariableEditor,
+                    "aria-label": _constants.TOOLTIP_TEXT.editVariables,
+                    children: "Variables"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
+                isOpen: isVariableEditorOpen,
+                onClose: closeVariableEditor,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
+                "data-testid": "variable-editor",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
+                    variableDefinitions: variableDefinitions,
+                    onCancel: closeVariableEditor,
+                    onChange: (variables)=>{
+                        setVariableDefinitions(variables);
+                        setIsVariableEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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