@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc → 0.0.0-snapshot-embed-import-errors-8906900

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

@@ -24,6 +24,7 @@ const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-materia
 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");
@@ -34,16 +35,28 @@ function _interopRequireDefault(obj) {
     };
 }
 const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick ,  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
+    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
     });
-    const onSave = ()=>{
-        setEditMode(false);
+    const onSaveButtonClick = ()=>{
+        if (onSave !== undefined) {
+            setSavingDashboard(true);
+            onSave(dashboard.dashboard).then(()=>{
+                setSavingDashboard(false);
+                setEditMode(false);
+            }).catch(()=>{
+                setSavingDashboard(false);
+            });
+        } else {
+            setEditMode(false);
+        }
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -72,8 +85,8 @@ const DashboardToolbar = (props)=>{
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "contained",
-                                    onClick: onSave,
-                                    disabled: isReadonly,
+                                    onClick: onSaveButtonClick,
+                                    disabled: isReadonly || isSavingDashboard,
                                     children: "Save"
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
@@ -147,6 +160,7 @@ const DashboardToolbar = (props)=>{
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
                                 isLaptopSize && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
+                                    color: "secondary",
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
                                     onClick: onEditButtonClick,
                                     sx: {

package/dist/cjs/components/DeletePanelDialog/DeletePanelDialog.js

@@ -63,6 +63,7 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
         onSubmit: handleDelete,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogContent, {
+                dividers: true,
                 sx: {
                     width: '500px'
                 },
@@ -82,6 +83,7 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
                         children: "Delete"
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "outlined",
                         onClick: ()=>closeDeletePanelDialog(),
                         children: "Cancel"
                     })

package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -59,6 +59,7 @@ const DeletePanelGroupDialog = ()=>{
                 onSubmit: handleDelete,
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogContent, {
+                        dividers: true,
                         sx: {
                             width: '500px'
                         },
@@ -76,6 +77,7 @@ const DeletePanelGroupDialog = ()=>{
                                 children: "Delete"
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "outlined",
                                 onClick: ()=>closeDeletePanelGroupDialog(),
                                 children: "Cancel"
                             })

package/dist/cjs/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js

@@ -0,0 +1,74 @@
+// Copyright 2022 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, "DiscardChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>DiscardChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DiscardChangesConfirmationDialog = ()=>{
+    const { discardChangesConfirmationDialog: dialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const isOpen = dialog !== undefined;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Dialog, {
+        open: isOpen,
+        children: dialog !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                    children: "Discard Changes"
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                    "aria-label": "Close",
+                    onClick: dialog.onCancel,
+                    sx: (theme)=>({
+                            position: 'absolute',
+                            top: theme.spacing(0.5),
+                            right: theme.spacing(0.5)
+                        }),
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                    dividers: true,
+                    sx: {
+                        width: '500px'
+                    },
+                    children: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            variant: "contained",
+                            onClick: dialog.onDiscardChanges,
+                            children: "Discard Changes"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            variant: "outlined",
+                            onClick: dialog.onCancel,
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/cjs/components/{UnsavedChangesConfirmationDialog → DiscardChangesConfirmationDialog}/index.js

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./UnsavedChangesConfirmationDialog"), exports);
+_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

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

@@ -21,8 +21,8 @@ Object.defineProperty(exports, "DownloadButton", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _downloadOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DownloadOutline"));
-const _material = require("@mui/material");
 const _context = require("../../context");
+const _toolbarIconButton = require("../ToolbarIconButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -86,7 +86,7 @@ function DownloadButton() {
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DownloadIconButton, {
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
                 title: "Download JSON",
                 onClick: onDownloadButtonClick,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
@@ -101,9 +101,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/GridLayout/GridTitle.js

@@ -27,6 +27,7 @@ const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-materia
 const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
 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 _context = require("../../context");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -64,32 +65,47 @@ function GridTitle(props) {
                     direction: "row",
                     marginLeft: "auto",
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": `add panel to group ${title}`,
-                            onClick: openAddPanel,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                            description: `Add a new panel to ${title}`,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                "aria-label": `add panel to group ${title}`,
+                                onClick: openAddPanel,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": `edit group ${title}`,
-                            onClick: openEditPanelGroup,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                            description: "Edit",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                "aria-label": `edit group ${title}`,
+                                onClick: openEditPanelGroup,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": `delete group ${title}`,
-                            onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                            description: "Delete",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                "aria-label": `delete group ${title}`,
+                                onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": `move group ${title} down`,
-                            disabled: moveDown === undefined,
-                            onClick: moveDown,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                            description: "Move panel group down",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                "aria-label": `move group ${title} down`,
+                                disabled: moveDown === undefined,
+                                onClick: moveDown,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": `move group ${title} up`,
-                            disabled: moveUp === undefined,
-                            onClick: moveUp,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                            description: "Move panel group up",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                "aria-label": `move group ${title} up`,
+                                disabled: moveUp === undefined,
+                                onClick: moveUp,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                            })
                         })
                     ]
                 })

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

@@ -33,49 +33,62 @@ function _interopRequireDefault(obj) {
 function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    let action = undefined;
+    let actions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons
-        action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            direction: "row",
-            spacing: 0.5,
-            alignItems: "center",
+        actions = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                    "aria-label": `edit panel ${title}`,
-                    size: "small",
-                    onClick: editHandlers.onEditPanelClick,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                    description: "Edit",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": `edit panel ${title}`,
+                        size: "small",
+                        onClick: editHandlers.onEditPanelClick,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {
+                            fontSize: "inherit"
+                        })
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                    "aria-label": `delete panel ${title}`,
-                    size: "small",
-                    onClick: editHandlers.onDeletePanelClick,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                    description: "Delete",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": `delete panel ${title}`,
+                        size: "small",
+                        onClick: editHandlers.onDeletePanelClick,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {
+                            fontSize: "inherit"
+                        })
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                    "aria-label": `move panel ${title}`,
-                    size: "small",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
-                        className: "drag-handle",
-                        sx: {
-                            cursor: 'grab'
-                        }
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                    description: "Drag and drop panel to reorganize",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": `move panel ${title}`,
+                        size: "small",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                            className: "drag-handle",
+                            sx: {
+                                cursor: 'grab'
+                            },
+                            fontSize: "inherit"
+                        })
                     })
                 })
             ]
         });
     } else if (description !== undefined && isHovered) {
         // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-        action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+        actions = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
             id: descriptionTooltipId,
             description: description,
-            placement: _components.TooltipPlacement.Bottom,
+            enterDelay: 100,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
                 "aria-label": "Panel Description",
+                size: "small",
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
                     "aria-describedby": "info-tooltip",
                     "aria-hidden": false,
+                    fontSize: "inherit",
                     sx: {
                         color: (theme)=>theme.palette.grey[700]
                     }
@@ -103,12 +116,24 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
             },
             children: title
         }),
-        action: action,
+        action: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderActionWrapper, {
+            direction: "row",
+            spacing: 0.25,
+            alignItems: "center",
+            children: actions
+        }),
         sx: (0, _components.combineSx)((theme)=>({
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
                     overflow: 'hidden'
+                },
+                '.MuiCardHeader-action': {
+                    // Overriding the negative margins from MUI's defaults, so we
+                    // can vertically center the icons. Moving these values to a wrapper
+                    // inside the action in `HeaderActionWrapper` below.
+                    // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
+                    margin: 'auto'
                 }
             }), sx),
         ...rest
@@ -118,3 +143,11 @@ const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme  }
         borderRadius: theme.shape.borderRadius,
         padding: '4px'
     }));
+const HeaderActionWrapper = (0, _material.styled)(_material.Stack)(()=>({
+        // Adding back the negative margins from MUI's defaults for actions, so we
+        // avoid increasing the header size when actions are present while also being
+        // able to vertically center the actions.
+        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
+        marginTop: -4,
+        marginBottom: -4
+    }));

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+/* eslint-disable @typescript-eslint/no-empty-function */ // Copyright 2022 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,27 @@ const _context = require("../../context");
 const _panelEditorForm = require("./PanelEditorForm");
 const PanelDrawer = ()=>{
     const panelEditor = (0, _context.usePanelEditor)();
+    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const [values, setValues] = (0, _react.useState)(undefined);
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = (0, _react.useState)(false);
-    const handleClose = ()=>setIsClosing(true);
+    const handleClose = ()=>{
+        const isModified = JSON.stringify(panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.initialValues) !== JSON.stringify(values);
+        if (isModified) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    setIsClosing(true);
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            setIsClosing(true);
+        }
+    };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out
     const handleExited = ()=>{
         panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
@@ -36,14 +54,17 @@ const PanelDrawer = ()=>{
     };
     // Drawer is open if we have a model and we're not transitioning out
     const isOpen = panelEditor !== undefined && isClosing === false;
-    const handleSubmit = (values)=>{
+    const handleSubmit = ()=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
-        if (panelEditor === undefined) {
+        if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
-        handleClose();
+        setIsClosing(true);
     };
+    const handleChange = (0, _react.useCallback)((values)=>{
+        setValues(values);
+    }, []);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
         isOpen: isOpen,
         onClose: handleClose,
@@ -75,7 +96,7 @@ const PanelDrawer = ()=>{
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     type: "submit",
                                     variant: "contained",
-                                    form: _panelEditorForm.panelEditorFormId,
+                                    onClick: handleSubmit,
                                     children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
@@ -89,8 +110,8 @@ const PanelDrawer = ()=>{
                     ]
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelEditorForm.PanelEditorForm, {
-                    onSubmit: handleSubmit,
-                    initialValues: panelEditor.initialValues
+                    initialValues: panelEditor.initialValues,
+                    onChange: handleChange
                 })
             ]
         })

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

@@ -33,7 +33,7 @@ const _context = require("../../context");
 const _panelPreview = require("./PanelPreview");
 function PanelEditorForm(props) {
     var ref;
-    const { initialValues , onSubmit  } = props;
+    const { initialValues , onChange  } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
     const [name, setName] = (0, _react.useState)(initialValues.name);
     const [description, setDescription] = (0, _react.useState)(initialValues.description);
@@ -60,8 +60,7 @@ function PanelEditorForm(props) {
         }
         setGroupId(value);
     };
-    const handleSubmit = (e)=>{
-        e.preventDefault();
+    (0, _react.useEffect)(()=>{
         const values = {
             name,
             description,
@@ -69,14 +68,20 @@ function PanelEditorForm(props) {
             kind,
             spec
         };
-        onSubmit(values);
-    };
+        onChange(values);
+    }, [
+        name,
+        description,
+        groupId,
+        kind,
+        spec,
+        onChange
+    ]);
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "form",
         id: panelEditorFormId,
-        onSubmit: handleSubmit,
         sx: {
             flex: 1,
             overflowY: 'scroll',

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

@@ -26,11 +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 _context = require("../../context");
+const _toolbarIconButton = require("../ToolbarIconButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -117,7 +117,7 @@ function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(RefreshIconButton, {
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
                 "aria-label": "Refresh Dashboard",
                 onClick: refresh,
                 sx: {
@@ -128,9 +128,3 @@ function TimeRangeControls({ heightPx  }) {
         ]
     });
 }
-const RefreshIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
-        border: `1px solid ${theme.palette.grey[300]}`,
-        borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(0.5),
-        color: theme.palette.grey[900]
-    }));

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

@@ -0,0 +1,35 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolbarIconButton", {
+    enumerable: true,
+    get: ()=>ToolbarIconButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function ToolbarIconButton(props) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
+        variant: "outlined",
+        color: "secondary",
+        ...props
+    });
+}
+const IconButton = (0, _material.styled)(_material.Button)(({ theme  })=>({
+        // Using a button with some adjusted styles because it is easier to inherit
+        // styling and variants from themes than with an IconButton.
+        padding: theme.spacing(0.5),
+        minWidth: 'auto'
+    }));

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

@@ -0,0 +1,28 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./ToolbarIconButton"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}