@perses-dev/dashboards 0.15.0 → 0.16.0

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

@@ -27,6 +27,7 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _variables = require("../Variables");
 const _timeRangeControls = require("../TimeRangeControls");
+const _downloadButton = require("../DownloadButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -135,6 +136,7 @@ const DashboardToolbar = (props)=>{
                             },
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
                                 isLaptopSize && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),

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

@@ -0,0 +1,109 @@
+// 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, "DownloadButton", {
+    enumerable: true,
+    get: ()=>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");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function DownloadButton() {
+    const { dashboard  } = (0, _context.useDashboard)();
+    const hiddenLinkRef = (0, _react.useRef)(null);
+    const onDownloadButtonClick = ()=>{
+        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+        // Create blob URL
+        const hiddenLinkUrl = URL.createObjectURL(new Blob([
+            JSON.stringify(dashboard)
+        ], {
+            type: 'application/json'
+        }));
+        // Simulate click
+        hiddenLinkRef.current.href = hiddenLinkUrl;
+        hiddenLinkRef.current.click();
+        // Remove blob URL (for memory management)
+        URL.revokeObjectURL(hiddenLinkUrl);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+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/{utils/component-ids.js → components/DownloadButton/index.js}

@@ -14,18 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useId", {
-    enumerable: true,
-    get: ()=>useId
-});
-const _react = require("react");
-function useId(prefix) {
-    if (globalThis.useIdValue === undefined) {
-        globalThis.useIdValue = 0;
-    }
-    const id = (0, _react.useRef)(undefined);
-    if (id.current === undefined) {
-        id.current = `${prefix}-${globalThis.useIdValue++}`;
-    }
-    return id.current;
+_exportStar(require("./DownloadButton"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
 }

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -19,11 +19,10 @@ Object.defineProperty(exports, "GridTitle", {
     get: ()=>GridTitle
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _chevronUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronUp"));
 const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
-const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
+const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
 const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
@@ -36,7 +35,6 @@ function _interopRequireDefault(obj) {
 }
 function GridTitle(props) {
     const { panelGroupId , title , collapse  } = props;
-    const [isHovered, setIsHovered] = (0, _react.useState)(false);
     const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
     const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
     const { isEditMode  } = (0, _context.useEditMode)();
@@ -55,8 +53,6 @@ function GridTitle(props) {
             padding: (theme)=>theme.spacing(1),
             backgroundColor: (theme)=>theme.palette.background.default
         },
-        onMouseEnter: ()=>setIsHovered(true),
-        onMouseLeave: ()=>setIsHovered(false),
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
@@ -64,35 +60,35 @@ function GridTitle(props) {
                     children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronUp.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {})
                 }),
                 text,
-                isEditMode && isHovered && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                     direction: "row",
                     sx: {
                         marginLeft: 'auto'
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "add panel to group",
+                            "aria-label": `add panel to group ${title}`,
                             onClick: openAddPanel,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "edit group",
+                            "aria-label": `edit group ${title}`,
                             onClick: openEditPanelGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "delete group",
+                            "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 down",
+                            "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 up",
+                            "aria-label": `move group ${title} up`,
                             disabled: moveUp === undefined,
                             onClick: moveUp,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})

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

@@ -24,7 +24,6 @@ const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-res
 const _reactIntersectionObserver = require("react-intersection-observer");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
-const _componentIds = require("../../utils/component-ids");
 const _panelHeader = require("./PanelHeader");
 const _panelContent = require("./PanelContent");
 function _interopRequireDefault(obj) {
@@ -35,7 +34,7 @@ function _interopRequireDefault(obj) {
 function Panel(props) {
     const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
-    const generatedPanelId = (0, _componentIds.useId)('Panel');
+    const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = (0, _react.useState)(null);
     const [isHovered, setIsHovered] = (0, _react.useState)(false);
@@ -109,6 +108,9 @@ function Panel(props) {
                 ref: setContentElement,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                     FallbackComponent: _components.ErrorAlert,
+                    resetKeys: [
+                        definition.spec.plugin.spec
+                    ],
                     children: inView === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelContent.PanelContent, {
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,

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

@@ -33,58 +33,55 @@ function _interopRequireDefault(obj) {
 function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    // Don't show any actions unless panel is hovered
     let action = undefined;
-    if (isHovered) {
-        if (editHandlers !== undefined) {
-            // If there are edit handlers, always just show the edit buttons
-            action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                spacing: 0.5,
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "edit panel",
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "delete panel",
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "drag handle",
-                        size: "small",
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            }
-                        })
-                    })
-                ]
-            });
-        } else if (description !== undefined) {
-            // 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, {
-                id: descriptionTooltipId,
-                description: description,
-                placement: _components.TooltipPlacement.Bottom,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                    "aria-label": "Panel Description",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
-                        "aria-describedby": "info-tooltip",
-                        "aria-hidden": false,
+    if (editHandlers !== undefined) {
+        // If there are edit handlers, always just show the edit buttons
+        action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.5,
+            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)(HeaderIconButton, {
+                    "aria-label": `delete panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onDeletePanelClick,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `move panel ${title}`,
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                        className: "drag-handle",
                         sx: {
-                            color: (theme)=>theme.palette.grey[700]
+                            cursor: 'grab'
                         }
                     })
                 })
-            });
-        }
+            ]
+        });
+    } 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, {
+            id: descriptionTooltipId,
+            description: description,
+            placement: _components.TooltipPlacement.Bottom,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                "aria-label": "Panel Description",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                    "aria-describedby": "info-tooltip",
+                    "aria-hidden": false,
+                    sx: {
+                        color: (theme)=>theme.palette.grey[700]
+                    }
+                })
+            })
+        });
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
         id: id,
@@ -95,6 +92,15 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
             id: titleElementId,
             variant: "subtitle1",
+            sx: {
+                // `minHeight` guarantees that the header has the correct height
+                // when there is no title (i.e. in the preview)
+                lineHeight: '24px',
+                minHeight: '24px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
             children: title
         }),
         action: action,
@@ -102,9 +108,7 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
+                    overflow: 'hidden'
                 }
             }), sx),
         ...rest

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

@@ -70,6 +70,29 @@ describe('Panel Drawer', ()=>{
             }
         });
     });
+    it('should add panel with duplicate panel name', async ()=>{
+        const storeApi = renderPanelDrawer();
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'cpu');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // make sure we don't have duplicate panel key by appending "-1"
+            'cpu-1': {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel

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

@@ -80,7 +80,9 @@ describe('TimeRangeControls', ()=>{
         _userEvent.default.click(secondSelected);
         expect(history.location.search).toEqual('?start=12h');
         // back button should return to first option selected
-        history.back();
+        (0, _react.act)(()=>{
+            history.back();
+        });
         expect(history.location.search).toEqual('?start=5m');
     });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.

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

@@ -199,6 +199,11 @@ function ListVariable({ name  }) {
                             disabled: true,
                             children: "Loading"
                         }),
+                        finalOptions.length === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                            value: "empty",
+                            disabled: true,
+                            children: "No options"
+                        }),
                         finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
                                 value: option.value,
                                 children: option.label

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

@@ -32,9 +32,24 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function getValidation(variableDefinitions) {
+    const errors = [];
+    /**  Variable names must be unique */ const variableNames = variableDefinitions.map((variableDefinition)=>variableDefinition.spec.name);
+    const uniqueVariableNames = new Set(variableNames);
+    if (variableNames.length !== uniqueVariableNames.size) {
+        errors.push('Variable names must be unique');
+    }
+    return {
+        errors: errors,
+        isValid: errors.length === 0
+    };
+}
 function VariableEditor(props) {
     const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
     const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
+    const validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
+        variableDefinitions
+    ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
     const removeVariable = (index)=>{
         setVariableDefinitions((draft)=>{
@@ -118,7 +133,7 @@ function VariableEditor(props) {
                         justifyContent: "end",
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                disabled: props.variableDefinitions === variableDefinitions,
+                                disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
                                 variant: "contained",
                                 onClick: ()=>{
                                     props.onChange(variableDefinitions);
@@ -142,6 +157,10 @@ function VariableEditor(props) {
                     /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                         spacing: 2,
                         children: [
+                            !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                                    severity: "error",
+                                    children: error
+                                }, error)),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
                                 component: _material.Paper,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {

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

@@ -19,20 +19,69 @@ Object.defineProperty(exports, "VariableEditForm", {
     get: ()=>VariableEditForm
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
 const _useImmer = require("use-immer");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _variableEditorFormModel = require("./variable-editor-form-model");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 const VARIABLE_TYPES = [
     'ListVariable',
     'TextVariable'
 ];
+// TODO: Replace with proper validation library
+function getValidation(state) {
+    /** Name validation */ let name = null;
+    if (!state.name) {
+        name = 'Name is required';
+    }
+    // name can only contain alphanumeric characters and underscores and no spaces
+    if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {
+        name = 'Name can only contain alphanumeric characters, underscores, and dashes';
+    }
+    return {
+        name,
+        isValid: !name
+    };
+}
 const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         pb: 2,
         variant: "subtitle1",
@@ -40,6 +89,9 @@ const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_mater
     });
 function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
     const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
+    const validation = (0, _react.useMemo)(()=>getValidation(state), [
+        state
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
@@ -54,9 +106,12 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            required: true,
+                            error: !!validation.name,
                             fullWidth: true,
                             label: "Name",
                             value: state.name,
+                            helperText: validation.name,
                             onChange: (v)=>{
                                 setState((draft)=>{
                                     draft.name = v.target.value;
@@ -220,6 +275,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                 justifyContent: "end",
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        disabled: !validation.isValid,
                         variant: "contained",
                         onClick: ()=>{
                             onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));

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

@@ -89,6 +89,11 @@ function TemplateVariableList(props) {
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
                 anchor: 'right',
                 open: isEditing,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
                     onCancel: ()=>{
                         setIsEditing(false);

package/dist/cjs/components/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./Dashboard"), exports);
 _exportStar(require("./DashboardToolbar"), exports);
 _exportStar(require("./DeletePanelDialog"), exports);
 _exportStar(require("./DeletePanelGroupDialog"), exports);
+_exportStar(require("./DownloadButton"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);