@perses-dev/dashboards 0.21.0 → 0.22.0

package/dist/cjs/components/AddGroupButton/AddGroupButton.js

@@ -0,0 +1,43 @@
+// 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, "AddGroupButton", {
+    enumerable: true,
+    get: ()=>AddGroupButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _plusBoxOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PlusBoxOutline"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const AddGroupButton = ()=>{
+    const { openAddPanelGroup  } = (0, _context.useDashboardActions)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+        description: _constants.TOOLTIP_TEXT.addGroup,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+            startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plusBoxOutline.default, {}),
+            onClick: openAddPanelGroup,
+            "aria-label": _constants.TOOLTIP_TEXT.addGroup,
+            children: "Panel Group"
+        })
+    });
+};

package/dist/cjs/components/AddGroupButton/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("./AddGroupButton"), 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/AddPanelButton/AddPanelButton.js

@@ -0,0 +1,43 @@
+// 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, "AddPanelButton", {
+    enumerable: true,
+    get: ()=>AddPanelButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const AddPanelButton = ()=>{
+    const { openAddPanel  } = (0, _context.useDashboardActions)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+        description: _constants.TOOLTIP_TEXT.addPanel,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+            startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {}),
+            onClick: openAddPanel,
+            "aria-label": _constants.TOOLTIP_TEXT.addPanel,
+            children: "Panel"
+        })
+    });
+};

package/dist/cjs/components/AddPanelButton/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("./AddPanelButton"), 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/Dashboard/Dashboard.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/Dashboard/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/DashboardToolbar/DashboardToolbar.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
@@ -19,16 +19,16 @@ Object.defineProperty(exports, "DashboardToolbar", {
     get: ()=>DashboardToolbar
 });
 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 _plusBoxOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PlusBoxOutline"));
-const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
 const _components = require("@perses-dev/components");
-const _react = require("react");
 const _context = require("../../context");
-const _variables = require("../Variables");
-const _timeRangeControls = require("../TimeRangeControls");
+const _addPanelButton = require("../AddPanelButton");
+const _addGroupButton = require("../AddGroupButton");
 const _downloadButton = require("../DownloadButton");
+const _timeRangeControls = require("../TimeRangeControls");
+const _variables = require("../Variables");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -36,11 +36,11 @@ function _interopRequireDefault(obj) {
 }
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
+    const dashboard = (0, _context.useDashboard)();
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
+    const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
+    const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
-    const dashboard = (0, _context.useDashboard)();
-    const { openAddPanelGroup , openAddPanel  } = (0, _context.useDashboardActions)();
-    const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
@@ -102,8 +102,8 @@ const DashboardToolbar = (props)=>{
                     sx: {
                         display: 'flex',
                         width: '100%',
-                        alignItems: 'flex-start',
-                        padding: (theme)=>theme.spacing(0, 2, 2, 2)
+                        alignItems: 'start',
+                        padding: (theme)=>theme.spacing(1, 2, 2, 2)
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
@@ -115,6 +115,7 @@ const DashboardToolbar = (props)=>{
                                 }
                             })
                         }),
+                        isBiggerThanMd ? // On bigger screens, make it one row
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 1,
@@ -123,19 +124,42 @@ const DashboardToolbar = (props)=>{
                                 whiteSpace: 'nowrap'
                             },
                             children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plusBoxOutline.default, {}),
-                                    onClick: openAddPanelGroup,
-                                    children: "Add Panel Group"
-                                }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {}),
-                                    onClick: openAddPanel,
-                                    children: "Add Panel"
-                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {}),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {})
                             ]
+                        }) : // On smaller screens, make it two rows
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    marginLeft: "auto",
+                                    sx: {
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {})
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    marginLeft: "auto",
+                                    sx: {
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {})
+                                    ]
+                                })
+                            ]
                         })
                     ]
                 })
@@ -158,8 +182,9 @@ const DashboardToolbar = (props)=>{
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                isLaptopSize && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                isBiggerThanSm && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
+                                    color: "secondary",
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
                                     onClick: onEditButtonClick,
                                     sx: {

package/dist/cjs/components/DashboardToolbar/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/DeletePanelDialog/DeletePanelDialog.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/DeletePanelDialog/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/DeletePanelGroupDialog/DeletePanelGroupDialog.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/DeletePanelGroupDialog/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/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.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/DiscardChangesConfirmationDialog/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/DownloadButton/DownloadButton.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
@@ -19,57 +19,21 @@ Object.defineProperty(exports, "DownloadButton", {
     get: ()=>DownloadButton
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _downloadOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DownloadOutline"));
-const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
 const _context = require("../../context");
+const _toolbarIconButton = require("../ToolbarIconButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-function DownloadButton() {
+function DownloadButton({ heightPx  }) {
     const { dashboard  } = (0, _context.useDashboard)();
     const hiddenLinkRef = (0, _react.useRef)(null);
+    const height = heightPx === undefined ? undefined : `${heightPx}px`;
     const onDownloadButtonClick = ()=>{
         if (!hiddenLinkRef || !hiddenLinkRef.current) return;
         // Create blob URL
@@ -86,10 +50,16 @@ function DownloadButton() {
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DownloadIconButton, {
-                title: "Download JSON",
-                onClick: onDownloadButtonClick,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.downloadDashboard,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
+                    "aria-label": _constants.TOOLTIP_TEXT.downloadDashboard,
+                    onClick: onDownloadButtonClick,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
+                })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)("a", {
                 ref: hiddenLinkRef,
@@ -101,9 +71,3 @@ function DownloadButton() {
         ]
     });
 }
-const DownloadIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
-        border: `1px solid ${theme.palette.grey[300]}`,
-        borderRadius: theme.shape.borderRadius,
-        padding: '4px',
-        color: theme.palette.grey[900]
-    }));

package/dist/cjs/components/DownloadButton/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/GridLayout/GridContainer.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
@@ -42,6 +42,7 @@ function GridContainer(props) {
                 transitionProperty: isFirstRender ? 'none' : 'transform'
             }
         },
+        "data-testid": "panel-group",
         children: props.children
     });
 }

package/dist/cjs/components/GridLayout/GridItemContent.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/GridLayout/GridLayout.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,6 +61,7 @@ function GridLayout(props) {
                 in: isOpen,
                 unmountOnExit: true,
                 appear: false,
+                "data-testid": "panel-group-content",
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
                     className: "layout",
                     breakpoints: {

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
@@ -80,6 +80,7 @@ function Panel(props) {
         onMouseLeave: handleMouseLeave,
         "aria-labelledby": headerId,
         "aria-describedby": headerId,
+        "data-testid": "panel",
         ...others,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {

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

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