@perses-dev/dashboards 0.42.0 → 0.43.0-rc0

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

@@ -39,6 +39,7 @@ const AddGroupButton = ()=>{
             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/AddPanelButton/AddPanelButton.js

@@ -42,10 +42,7 @@ const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' ,
             variant: variant,
             color: color,
             fullWidth: fullWidth,
-            sx: {
-                whiteSpace: 'nowrap',
-                minWidth: 'auto'
-            },
+            sx: _constants.editButtonStyle,
             children: label
         })
     });

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

@@ -38,6 +38,7 @@ 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, {
@@ -54,24 +55,52 @@ function DashboardStickyToolbar(props) {
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 display: "flex",
                 justifyContent: "space-between",
+                sx: {
+                    flexDirection: isBiggerThanMd ? 'row' : 'column'
+                },
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                         display: "flex",
-                        flexWrap: "wrap",
-                        alignItems: "start",
-                        mt: isSticky ? 1.5 : 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, {
+                                style: {
+                                    width: 'fit-content',
+                                    height: 'fit-content'
+                                },
                                 onClick: ()=>setIsPin(!isPin),
                                 children: isPin ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_PinOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_PinOffOutline.default, {})
                             })
                         ]
                     }),
-                    isSticky && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        mt: 1.5,
-                        mr: 2,
+                    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)(_TimeRangeControls.TimeRangeControls, {})
                     })
                 ]

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

@@ -38,15 +38,14 @@ const DashboardToolbar = (props)=>{
     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 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,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             "data-testid": testId,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
@@ -54,11 +53,11 @@ const DashboardToolbar = (props)=>{
                     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",
                             gap: 1,
                             ml: "auto",
@@ -71,6 +70,18 @@ const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
+                                /*#__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
@@ -81,6 +92,15 @@ const DashboardToolbar = (props)=>{
                                     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
+                                })
+                            })
                         })
                     ]
                 }),
@@ -89,89 +109,44 @@ const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2, 0, 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,
-                                    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.jsxs)(_material.Stack, {
-                                    direction: "row",
-                                    spacing: 1,
-                                    ml: 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, {
-            gap: 1,
-            mx: 2,
-            mt: 1.5,
-            "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)(_TimeRangeControls.TimeRangeControls, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
+                                        isReadonly: !isEditMode
+                                    })
+                                ]
+                            })
                         })
                     ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    mt: 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
-                            }
-                        })
-                    })
                 })
             ]
         })

package/dist/cjs/components/Datasources/DatasourceEditor.js

@@ -91,6 +91,7 @@ function DatasourceEditor(props) {
             isDraft: true,
             onSave: (name, spec)=>{
                 setDatasources((draft)=>{
+                    delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
                     draft[name] = spec;
                     setDatasourceEdit(null);
                 });

package/dist/cjs/components/Datasources/EditDatasourcesButton.js

@@ -82,10 +82,7 @@ function EditDatasourcesButton() {
                     "aria-label": _constants.TOOLTIP_TEXT.editDatasources,
                     variant: "text",
                     color: "primary",
-                    sx: {
-                        whiteSpace: 'nowrap',
-                        minWidth: 'auto'
-                    },
+                    sx: _constants.editButtonStyle,
                     children: "Datasources"
                 })
             }),

package/dist/cjs/components/EditJsonButton/EditJsonButton.js

@@ -31,12 +31,14 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const EditJsonButton = ()=>{
+const EditJsonButton = (props)=>{
+    const { isReadonly  } = props;
     const { openEditJsonDialog  } = (0, _context.useEditJsonDialog)();
+    const info = isReadonly ? _constants.TOOLTIP_TEXT.viewJson : _constants.TOOLTIP_TEXT.editJson;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-        description: _constants.TOOLTIP_TEXT.editJson,
+        description: info,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToolbarIconButton.ToolbarIconButton, {
-            "aria-label": _constants.TOOLTIP_TEXT.editJson,
+            "aria-label": info,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CodeBraces.default, {})

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -28,7 +28,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _DashboardProvider = require("../../context/DashboardProvider");
 const _useDashboard = require("../../context/useDashboard");
 const EditJsonDialog = (props)=>{
-    const { disableMetadataEdition  } = props;
+    const { isReadonly , disableMetadataEdition  } = props;
     const { editJsonDialog , closeEditJsonDialog  } = (0, _DashboardProvider.useEditJsonDialog)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
         open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
@@ -36,18 +36,22 @@ const EditJsonDialog = (props)=>{
         fullWidth: true,
         maxWidth: "lg",
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Header, {
                 onClose: ()=>closeEditJsonDialog(),
-                children: "Edit Dashboard JSON"
+                children: [
+                    !isReadonly && 'Edit ',
+                    " Dashboard JSON"
+                ]
             }),
             (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ (0, _jsxruntime.jsx)(EditJsonDialogForm, {
+                isReadonly: isReadonly,
                 disableMetadataEdition: disableMetadataEdition
             })
         ]
     });
 };
 const EditJsonDialogForm = (props)=>{
-    const { disableMetadataEdition  } = props;
+    const { isReadonly , disableMetadataEdition  } = props;
     const { closeEditJsonDialog  } = (0, _DashboardProvider.useEditJsonDialog)();
     const { setTimeRange , setRefreshInterval  } = (0, _pluginsystem.useTimeRange)();
     const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
@@ -81,7 +85,7 @@ const EditJsonDialogForm = (props)=>{
                     width: '100%'
                 },
                 children: [
-                    disableMetadataEdition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                    disableMetadataEdition && !isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
                         sx: {
                             marginBottom: (theme)=>theme.spacing(1)
                         },
@@ -94,12 +98,13 @@ const EditJsonDialogForm = (props)=>{
                             minHeight: "300px",
                             maxHeight: "70vh",
                             value: draftDashboard,
-                            onChange: (value)=>completeDraftDashboard(value)
+                            onChange: (value)=>completeDraftDashboard(value),
+                            readOnly: isReadonly
                         })
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Actions, {
+            !isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Actions, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                     onClick: handleApply,
                     children: "Apply"

package/dist/cjs/components/Variables/EditVariablesButton.js

@@ -57,10 +57,7 @@ function EditVariablesButton({ variant ='text' , label ='Variables' , color ='pr
                     variant: variant,
                     color: color,
                     fullWidth: fullWidth,
-                    sx: {
-                        whiteSpace: 'nowrap',
-                        minWidth: 'auto'
-                    },
+                    sx: _constants.editButtonStyle,
                     children: label
                 })
             }),

package/dist/cjs/components/Variables/TemplateVariable.js

@@ -34,6 +34,7 @@ const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
+const _constants = require("../../constants");
 function variableOptionToVariableValue(options) {
     if (options === null) {
         return null;
@@ -190,6 +191,18 @@ const StyledPopper = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Poppe
         },
         placement: "bottom-start"
     });
+const LETTER_HSIZE = 8; // approximation
+const ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)
+const getWidthPx = (inputValue, kind)=>{
+    const width = (inputValue.length + 1) * LETTER_HSIZE + (kind == 'list' ? ARROW_OFFSET : 0);
+    if (width < _constants.MIN_TEMPLATE_VARIABLE_WIDTH) {
+        return _constants.MIN_TEMPLATE_VARIABLE_WIDTH;
+    } else if (width > _constants.MAX_TEMPLATE_VARIABLE_WIDTH) {
+        return _constants.MAX_TEMPLATE_VARIABLE_WIDTH;
+    } else {
+        return width;
+    }
+};
 function ListVariable({ name , source  }) {
     var _definition_spec_display;
     const ctx = (0, _context.useTemplateVariable)(name, source);
@@ -198,6 +211,7 @@ function ListVariable({ name , source  }) {
     const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
     const { selectedOptions , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
     const [inputValue, setInputValue] = (0, _react.useState)('');
+    const [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_TEMPLATE_VARIABLE_WIDTH);
     var _definition_spec_display_name;
     const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
@@ -233,21 +247,6 @@ function ListVariable({ name , source  }) {
         options,
         source
     ]);
-    const LETTER_HSIZE = 8; // approximation
-    const ARROW_OFFSET = 40;
-    const MIN_INPUT_WIDTH = 120;
-    const MAX_INPUT_WIDTH = 500;
-    const [inputWidth, setInputWidth] = (0, _react.useState)(MIN_INPUT_WIDTH);
-    const handleInputResize = (newInputValue)=>{
-        const newInputValueSize = (newInputValue.length + 1) * LETTER_HSIZE + ARROW_OFFSET;
-        if (newInputValueSize < MIN_INPUT_WIDTH) {
-            setInputWidth(MIN_INPUT_WIDTH);
-        } else if (newInputValueSize > MAX_INPUT_WIDTH) {
-            setInputWidth(MAX_INPUT_WIDTH);
-        } else {
-            setInputWidth(newInputValueSize);
-        }
-    };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
@@ -292,7 +291,7 @@ function ListVariable({ name , source  }) {
                 onInputChange: (_, newInputValue)=>{
                     setInputValue(newInputValue);
                     if (!allowMultiple) {
-                        handleInputResize(newInputValue);
+                        setInputWidth(getWidthPx(newInputValue, 'list'));
                     }
                 },
                 options: viewOptions
@@ -308,6 +307,7 @@ function TextVariable({ name , source  }) {
     const definition = ctx.definition;
     var _state_value;
     const [tempValue, setTempValue] = (0, _react.useState)((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
+    const [inputWidth, setInputWidth] = (0, _react.useState)(getWidthPx(tempValue, 'text'));
     const { setVariableValue  } = (0, _context.useTemplateVariableActions)();
     (0, _react.useEffect)(()=>{
         var _state_value;
@@ -319,7 +319,11 @@ function TextVariable({ name , source  }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
         title: tempValue,
         value: tempValue,
-        onChange: (e)=>setTempValue(e.target.value),
+        //onChange={(e) => setTempValue(e.target.value)}
+        onChange: (e)=>{
+            setTempValue(e.target.value);
+            setInputWidth(getWidthPx(e.target.value, 'text'));
+        },
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
         label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
@@ -327,8 +331,12 @@ function TextVariable({ name , source  }) {
             readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
         },
         sx: {
+            width: `${inputWidth}px`,
             '& .MuiInputBase-root': {
                 minHeight: '38px'
+            },
+            '& .MuiInputBase-input': {
+                textOverflow: 'ellipsis'
             }
         }
     });

package/dist/cjs/components/Variables/VariableList.js

@@ -31,9 +31,8 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _context = require("../../context");
+const _constants = require("../../constants");
 const _TemplateVariable = require("./TemplateVariable");
-const VARIABLE_INPUT_MIN_WIDTH = '120px';
-const VARIABLE_INPUT_MAX_WIDTH = '500px';
 function TemplateVariableList() {
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
     const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
@@ -56,10 +55,9 @@ function TemplateVariableListItem({ spec , source  }) {
     var _ref, _ref1;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         display: ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) || ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
-        minWidth: VARIABLE_INPUT_MIN_WIDTH,
-        maxWidth: VARIABLE_INPUT_MAX_WIDTH,
-        marginBottom: 1,
-        marginRight: 1,
+        minWidth: `${_constants.MIN_TEMPLATE_VARIABLE_WIDTH}px`,
+        maxWidth: `${_constants.MAX_TEMPLATE_VARIABLE_WIDTH}px`,
+        flexShrink: 0,
         "data-testid": 'template-variable-' + spec.name,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TemplateVariable.TemplateVariable, {
             name: spec.name,

package/dist/cjs/constants/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./grid-layout-config"), exports);
+_export_star(require("./styles"), exports);
 _export_star(require("./user-interface-text"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/constants/styles.js

@@ -0,0 +1,42 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    editButtonStyle: function() {
+        return editButtonStyle;
+    },
+    MIN_TEMPLATE_VARIABLE_WIDTH: function() {
+        return MIN_TEMPLATE_VARIABLE_WIDTH;
+    },
+    MAX_TEMPLATE_VARIABLE_WIDTH: function() {
+        return MAX_TEMPLATE_VARIABLE_WIDTH;
+    }
+});
+const editButtonStyle = {
+    whiteSpace: 'nowrap',
+    minWidth: 'auto',
+    '& .MuiButton-startIcon': {
+        marginRight: 0.5
+    }
+};
+const MIN_TEMPLATE_VARIABLE_WIDTH = 120;
+const MAX_TEMPLATE_VARIABLE_WIDTH = 500;

package/dist/cjs/constants/user-interface-text.js

@@ -38,6 +38,7 @@ const TOOLTIP_TEXT = {
     editVariables: 'Edit variables',
     refreshDashboard: 'Refresh dashboard',
     refreshDashboardInterval: 'Auto refresh interval',
+    viewJson: 'View JSON',
     // Group buttons
     addPanelToGroup: 'Add panel to group',
     deleteGroup: 'Delete group',

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -30,7 +30,7 @@ const _context = require("../../context");
 const DashboardApp = (props)=>{
     const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isCreating  } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
-    const { setEditMode  } = (0, _context.useEditMode)();
+    const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
     const { setSavedDatasources  } = (0, _pluginsystem.useDatasourceStore)();
@@ -110,6 +110,7 @@ const DashboardApp = (props)=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DeletePanelDialog, {}),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EditJsonDialog, {
+                        isReadonly: !isEditMode,
                         disableMetadataEdition: !isCreating
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.SaveChangesConfirmationDialog, {})

package/dist/components/AddGroupButton/AddGroupButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAU1B,CAAC"}
+{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAe1B,CAAC"}

package/dist/components/AddGroupButton/AddGroupButton.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import { InfoTooltip } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboardActions } from '../../context';
 export const AddGroupButton = ()=>{
     const { openAddPanelGroup  } = useDashboardActions();
@@ -24,6 +24,7 @@ export const AddGroupButton = ()=>{
             startIcon: /*#__PURE__*/ _jsx(AddGroupIcon, {}),
             onClick: openAddPanelGroup,
             "aria-label": TOOLTIP_TEXT.addGroup,
+            sx: editButtonStyle,
             children: "Panel Group"
         })
     });

package/dist/components/AddGroupButton/AddGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = () => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button startIcon={<AddGroupIcon />} onClick={openAddPanelGroup} aria-label={TOOLTIP_TEXT.addGroup}>\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,kBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACF;QAAYK,aAAaJ,aAAaK;kBACrC,cAAA,KAACR;YAAOS,yBAAW,KAACR;YAAiBS,SAASJ;YAAmBK,cAAYR,aAAaK;sBAAU;;;AAK1G,EAAE"}
+{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = () => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button\n        startIcon={<AddGroupIcon />}\n        onClick={openAddPanelGroup}\n        aria-label={TOOLTIP_TEXT.addGroup}\n        sx={editButtonStyle}\n      >\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label","sx"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,kBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM;kBACrC,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM;YACzBI,IAAIT;sBACL;;;AAKP,EAAE"}