@perses-dev/dashboards 0.0.0-snapshot-embed-import-errors-8906900 → 0.0.0-snapshot-test-internal-dep-dd238ac

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/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/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/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,9 +26,11 @@ _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) {
@@ -93,10 +95,11 @@ const TIME_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx  }) {
+function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
+    // TODO: Remove this since it couples to the dashboard context
     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)) {
@@ -109,7 +112,9 @@ function TimeRangeControls({ heightPx  }) {
             });
         }
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
                 timeOptions: TIME_OPTIONS,
@@ -117,13 +122,16 @@ function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
-                "aria-label": "Refresh Dashboard",
-                onClick: refresh,
-                sx: {
-                    height
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+            showRefresh && /*#__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, {})
+                })
             })
         ]
     });

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

@@ -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/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/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

package/dist/cjs/components/Variables/VariableEditor.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
@@ -21,6 +21,7 @@ Object.defineProperty(exports, "VariableEditor", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
+const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
 const _useImmer = require("use-immer");
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
@@ -194,7 +195,7 @@ function VariableEditor(props) {
                                         sx: {
                                             minWidth: 650
                                         },
-                                        "aria-label": "simple table",
+                                        "aria-label": "table of variables",
                                         children: [
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
                                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
@@ -209,8 +210,7 @@ function VariableEditor(props) {
                                                             children: "Type"
                                                         }),
                                                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                            align: "right",
-                                                            children: "Action"
+                                                            align: "right"
                                                         })
                                                     ]
                                                 })
@@ -274,9 +274,13 @@ function VariableEditor(props) {
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                                     display: "flex",
                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                        onClick: addVariable,
                                         variant: "contained",
-                                        children: "Add New"
+                                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addVariable,
+                                        children: "Add Variable"
                                     })
                                 })
                             ]

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.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,6 +26,7 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
 const _clipboardOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ClipboardOutline"));
+const _constants = require("../../../constants");
 const _variableModel = require("../variable-model");
 const _variableEditorFormModel = require("./variable-editor-form-model");
 function _interopRequireDefault(obj) {
@@ -115,18 +116,16 @@ function VariableListPreview({ definition , onRefresh  }) {
                         variant: "caption",
                         children: "Preview Values"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
-                        title: "Refresh Values",
-                        placement: "right",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             onClick: onRefresh,
                             size: "small",
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
-                        title: "Copy Values to Clipboard",
-                        placement: "right",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             onClick: async ()=>{
                                 if (data === null || data === void 0 ? void 0 : data.length) {

package/dist/cjs/components/Variables/VariableEditorForm/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/Variables/VariableEditorForm/variable-editor-form-model.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