@perses-dev/dashboards 0.21.1 → 0.23.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
@@ -58,9 +58,11 @@ const DashboardToolbar = (props)=>{
             setEditMode(false);
         }
     };
+    const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
             spacing: 1,
+            "data-testid": testId,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     p: 2,
@@ -102,8 +104,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 +117,7 @@ const DashboardToolbar = (props)=>{
                                 }
                             })
                         }),
+                        isBiggerThanMd ? // On bigger screens, make it one row
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 1,
@@ -123,19 +126,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, {})
+                                    ]
+                                })
+                            ]
                         })
                     ]
                 })
@@ -143,6 +169,7 @@ const DashboardToolbar = (props)=>{
         }) : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
             spacing: 1,
             padding: 2,
+            "data-testid": testId,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {
@@ -158,8 +185,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
@@ -19,32 +19,17 @@ Object.defineProperty(exports, "DeletePanelDialog", {
     get: ()=>DeletePanelDialog
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _components = require("@perses-dev/components");
 const _context = require("../../context");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const DeletePanelDialog = ()=>{
     const { deletePanelDialog , closeDeletePanelDialog  } = (0, _context.useDeletePanelDialog)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog, {
         open: deletePanelDialog !== undefined,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Header, {
+                onClose: ()=>closeDeletePanelDialog(),
                 children: "Delete Panel"
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closeDeletePanelDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
-            }),
             deletePanelDialog && /*#__PURE__*/ (0, _jsxRuntime.jsx)(DeletePanelForm, {
                 deletePanelDialog: deletePanelDialog
             })
@@ -62,11 +47,7 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
         onSubmit: handleDelete,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogContent, {
-                dividers: true,
-                sx: {
-                    width: '500px'
-                },
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Content, {
                 children: [
                     "Are you sure you want to delete ",
                     deletePanelDialog.panelName,
@@ -75,15 +56,12 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
                     "? This action cannot be undone."
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Actions, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        variant: "contained",
-                        type: "submit",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.PrimaryButton, {
                         children: "Delete"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        variant: "outlined",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.SecondaryButton, {
                         onClick: ()=>closeDeletePanelDialog(),
                         children: "Cancel"
                     })

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
@@ -78,6 +78,7 @@ const DeletePanelGroupDialog = ()=>{
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                 variant: "outlined",
+                                color: "secondary",
                                 onClick: ()=>closeDeletePanelGroupDialog(),
                                 children: "Cancel"
                             })

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
@@ -63,6 +63,7 @@ const DiscardChangesConfirmationDialog = ()=>{
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                             variant: "outlined",
+                            color: "secondary",
                             onClick: dialog.onCancel,
                             children: "Cancel"
                         })

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
@@ -25,12 +25,13 @@ function GridItemContent(props) {
     const { panelGroupItemId  } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
     const { isEditMode  } = (0, _context.useEditMode)();
-    const { openEditPanel , openDeletePanelDialog  } = (0, _context.usePanelActions)(panelGroupItemId);
+    const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _context.usePanelActions)(panelGroupItemId);
     // Provide actions to the panel when in edit mode
     let editHandlers = undefined;
     if (isEditMode) {
         editHandlers = {
             onEditPanelClick: openEditPanel,
+            onDuplicatePanelClick: duplicatePanel,
             onDeletePanelClick: openDeletePanelDialog
         };
     }

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
@@ -24,11 +24,11 @@ const _reactGridLayout = require("react-grid-layout");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
+const _constants = require("../../constants");
 const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
 const _gridContainer = require("./GridContainer");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
-const SMALL_LAYOUT_BREAKPOINT = 'sm';
 function GridLayout(props) {
     const { panelGroupId /*...others */  } = props;
     const theme = (0, _material.useTheme)();
@@ -42,7 +42,7 @@ function GridLayout(props) {
         // a bug in react-layout-grid where `currentLayout` does not adjust properly
         // when going to a smaller breakpoint and then back to a larger breakpoint.
         // https://github.com/react-grid-layout/react-grid-layout/issues/1663
-        const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];
+        const smallLayout = allLayouts[_constants.GRID_LAYOUT_SMALL_BREAKPOINT];
         if (smallLayout) {
             updatePanelGroupLayouts(smallLayout);
         }
@@ -61,16 +61,14 @@ function GridLayout(props) {
                 in: isOpen,
                 unmountOnExit: true,
                 appear: false,
+                "data-testid": "panel-group-content",
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
                     className: "layout",
                     breakpoints: {
                         sm: theme.breakpoints.values.sm,
                         xxs: 0
                     },
-                    cols: {
-                        sm: 24,
-                        xxs: 2
-                    },
+                    cols: _constants.GRID_LAYOUT_COLS,
                     rowHeight: 30,
                     draggableHandle: '.drag-handle',
                     resizeHandles: [
@@ -83,7 +81,7 @@ function GridLayout(props) {
                         10
                     ],
                     layouts: {
-                        [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
+                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts
                     },
                     onLayoutChange: handleLayoutChange,
                     children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {