@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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

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

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./AddGroupButton"), exports);
-function _exportStar(from, to) {
+_export_star(require("./AddGroupButton"), exports);
+function _export_star(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];
-            }
-        });
+        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

@@ -16,34 +16,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "AddPanelButton", {
     enumerable: true,
-    get: ()=>AddPanelButton
+    get: function() {
+        return AddPanelButton;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
+const _ChartBoxPlusOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChartBoxPlusOutline"));
 const _components = require("@perses-dev/components");
 const _constants = require("../../constants");
 const _context = require("../../context");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' , fullWidth  })=>{
-    const { openAddPanel  } = (0, _context.useDashboardActions)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+const AddPanelButton = ({ variant = 'text', color = 'primary', label = 'Panel', fullWidth })=>{
+    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, {}),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+            startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChartBoxPlusOutline.default, {}),
             onClick: openAddPanel,
             "aria-label": _constants.TOOLTIP_TEXT.addPanel,
             variant: variant,
             color: color,
             fullWidth: fullWidth,
-            sx: {
-                whiteSpace: 'nowrap',
-                minWidth: 'auto'
-            },
+            sx: _constants.editButtonStyle,
             children: label
         })
     });

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./AddPanelButton"), exports);
-function _exportStar(from, to) {
+_export_star(require("./AddPanelButton"), exports);
+function _export_star(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];
-            }
-        });
+        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

@@ -16,36 +16,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Dashboard", {
     enumerable: true,
-    get: ()=>Dashboard
+    get: function() {
+        return Dashboard;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
-const _gridLayout = require("../GridLayout");
-const _emptyDashboard = require("../EmptyDashboard");
-function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
+const _GridLayout = require("../GridLayout");
+const _EmptyDashboard = require("../EmptyDashboard");
+function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
     const panelGroupIds = (0, _context.usePanelGroupIds)();
     const isEmpty = !panelGroupIds.length;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...boxProps,
         sx: {
             height: '100%'
         },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.ErrorBoundary, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.ErrorBoundary, {
             FallbackComponent: _components.ErrorAlert,
             children: [
-                isEmpty && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                isEmpty && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                     sx: {
                         height: '100%',
                         display: 'flex',
                         alignItems: 'center'
                     },
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_emptyDashboard.EmptyDashboard, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmptyDashboard.EmptyDashboard, {
                         ...emptyDashboardProps
                     })
                 }),
-                !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridLayout.GridLayout, {
+                !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_GridLayout.GridLayout, {
                         panelGroupId: panelGroupId,
                         panelOptions: panelOptions
                     }, panelGroupId))

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./Dashboard"), exports);
-function _exportStar(from, to) {
+_export_star(require("./Dashboard"), exports);
+function _export_star(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];
-            }
-        });
+        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/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -16,16 +16,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DashboardStickyToolbar", {
     enumerable: true,
-    get: ()=>DashboardStickyToolbar
+    get: function() {
+        return DashboardStickyToolbar;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
-const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
-const _variables = require("../Variables");
-const _timeRangeControls = require("../TimeRangeControls");
-function _interopRequireDefault(obj) {
+const _PinOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOutline"));
+const _PinOffOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOffOutline"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _Variables = require("../Variables");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -36,12 +38,13 @@ function DashboardStickyToolbar(props) {
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
     // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
-    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         marginBottom: -1,
         "data-testid": "variable-list",
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.AppBar, {
             color: "inherit",
             position: isSticky ? 'fixed' : 'static',
             elevation: isSticky ? 4 : 0,
@@ -49,28 +52,56 @@ function DashboardStickyToolbar(props) {
                 backgroundColor: 'inherit',
                 ...props.sx
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 display: "flex",
                 justifyContent: "space-between",
+                sx: {
+                    flexDirection: isBiggerThanMd ? 'row' : 'column'
+                },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                         display: "flex",
-                        flexWrap: "wrap",
-                        alignItems: "start",
-                        my: isSticky ? 2 : 0,
-                        ml: isSticky ? 2 : 0,
+                        flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
+                        maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
+                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
+                        ,
+                        pt: 1,
+                        pl: isSticky ? 1 : 0,
+                        mt: isSticky && isBiggerThanMd ? 0.5 : 0,
+                        ml: isSticky && isBiggerThanMd ? 0.5 : 0,
+                        sx: {
+                            overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',
+                            // Firefox:
+                            scrollbarWidth: 'thin',
+                            // Safari and Chrome:
+                            '&::-webkit-scrollbar': {
+                                height: '8px',
+                                backgroundColor: (theme)=>theme.palette.grey['300']
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                                background: (theme)=>theme.palette.grey['600']
+                            }
+                        },
+                        gap: 1,
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {}),
-                            props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.TemplateVariableList, {}),
+                            props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                style: {
+                                    width: 'fit-content',
+                                    height: 'fit-content'
+                                },
                                 onClick: ()=>setIsPin(!isPin),
-                                children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
+                                children: isPin ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_PinOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_PinOffOutline.default, {})
                             })
                         ]
                     }),
-                    isSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                        my: 2,
-                        mr: 2,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
+                    isSticky && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        m: isBiggerThanMd ? 1.5 : 1,
+                        mt: isBiggerThanMd ? 1.5 : 0,
+                        ml: isBiggerThanMd ? 1.5 : 'auto',
+                        direction: "row",
+                        justifyContent: "end",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {})
                     })
                 ]
             })

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./DashboardStickyToolbar"), exports);
-function _exportStar(from, to) {
+_export_star(require("./DashboardStickyToolbar"), exports);
+function _export_star(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];
-            }
-        });
+        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/DashboardToolbar/DashboardToolbar.js

@@ -16,50 +16,53 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DashboardToolbar", {
     enumerable: true,
-    get: ()=>DashboardToolbar
+    get: function() {
+        return DashboardToolbar;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _addPanelButton = require("../AddPanelButton");
-const _addGroupButton = require("../AddGroupButton");
-const _downloadButton = require("../DownloadButton");
-const _timeRangeControls = require("../TimeRangeControls");
-const _variables = require("../Variables");
-const _editButton = require("../EditButton");
-const _editJsonButton = require("../EditJsonButton");
-const _saveDashboardButton = require("../SaveDashboardButton");
-const _dashboardStickyToolbar = require("../DashboardStickyToolbar");
+const _AddPanelButton = require("../AddPanelButton");
+const _AddGroupButton = require("../AddGroupButton");
+const _DownloadButton = require("../DownloadButton");
+const _Variables = require("../Variables");
+const _Datasources = require("../Datasources");
+const _EditButton = require("../EditButton");
+const _EditJsonButton = require("../EditJsonButton");
+const _SaveDashboardButton = require("../SaveDashboardButton");
+const _DashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
-    const { isEditMode  } = (0, _context.useEditMode)();
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { isEditMode } = (0, _context.useEditMode)();
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
-    const isBiggerThanLg = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('lg'));
-    const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+    const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
+    const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
     });
     const testId = 'dashboard-toolbar';
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            spacing: 1,
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             "data-testid": testId,
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                    p: 2,
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    px: 2,
+                    py: 1.5,
                     display: "flex",
                     sx: {
-                        backgroundColor: (theme)=>theme.palette.primary.main + '30'
+                        backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
                     },
                     children: [
                         dashboardTitle,
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        isEditMode ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                             direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
+                            gap: 1,
+                            ml: "auto",
                             children: [
-                                isReadonly && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                                isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
                                     severity: 'warning',
                                     sx: {
                                         backgroundColor: 'transparent',
@@ -67,107 +70,83 @@ const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_saveDashboardButton.SaveDashboardButton, {
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    spacing: 0.5,
+                                    ml: 1,
+                                    whiteSpace: "nowrap",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_SaveDashboardButton.SaveDashboardButton, {
                                     onSave: onSave,
                                     isDisabled: isReadonly
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                                     variant: "outlined",
                                     onClick: onCancelButtonClick,
                                     children: "Cancel"
                                 })
                             ]
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                            children: isBiggerThanSm && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                direction: "row",
+                                gap: 1,
+                                ml: "auto",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
+                                    onClick: onEditButtonClick
+                                })
+                            })
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                     sx: {
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2)
+                        padding: (theme)=>theme.spacing(1, 2, 0, 2),
+                        flexDirection: isBiggerThanMd ? 'row' : 'column',
+                        flexWrap: 'nowrap',
+                        gap: 1
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
-                                initialVariableIsSticky: initialVariableIsSticky,
-                                sx: {
-                                    backgroundColor: ({ palette  })=>palette.background.default
-                                }
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            width: "100%",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {
+                                    initialVariableIsSticky: initialVariableIsSticky,
+                                    sx: {
+                                        backgroundColor: ({ palette })=>palette.background.default
+                                    }
+                                })
                             })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                            ml: "auto",
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                             direction: "row",
-                            flexWrap: isBiggerThanLg ? 'nowrap' : 'wrap-reverse',
+                            ml: "auto",
+                            flexWrap: "wrap",
                             justifyContent: "end",
-                            children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                    direction: "row",
-                                    spacing: 1,
-                                    ml: 1,
-                                    mb: 1,
-                                    whiteSpace: "nowrap",
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {})
-                                    ]
-                                }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                    direction: "row",
-                                    spacing: 1,
-                                    ml: 1,
-                                    mb: 1,
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        }) : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            spacing: 1,
-            padding: 2,
-            "data-testid": testId,
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                    sx: {
-                        display: 'flex',
-                        width: '100%'
-                    },
-                    children: [
-                        dashboardTitle,
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                isBiggerThanSm && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editButton.EditButton, {
-                                    onClick: onEditButtonClick
-                                })
-                            ]
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                mt: 1,
+                                ml: 1,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
+                                        isReadonly: !isEditMode
+                                    })
+                                ]
+                            })
                         })
                     ]
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                    paddingY: 2,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                        FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
-                            initialVariableIsSticky: initialVariableIsSticky,
-                            sx: {
-                                backgroundColor: ({ palette  })=>palette.background.default
-                            }
-                        })
-                    })
                 })
             ]
         })

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./DashboardToolbar"), exports);
-function _exportStar(from, to) {
+_export_star(require("./DashboardToolbar"), exports);
+function _export_star(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];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }