@perses-dev/dashboards 0.46.0-rc1 → 0.47.0-rc0

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -84,7 +84,7 @@ function DashboardStickyToolbar(props) {
                         },
                         gap: 1,
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.TemplateVariableList, {}),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.VariableList, {}),
                             props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 style: {
                                     width: 'fit-content',

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

@@ -84,20 +84,22 @@ function DatasourceEditor(props) {
         });
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: datasourceEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceEditorForm, {
-            initialDatasourceDefinition: datasourceEdit,
-            initialAction: datasourceFormAction,
-            isDraft: true,
-            onSave: (name, spec)=>{
-                setDatasources((draft)=>{
-                    delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
-                    draft[name] = spec;
+        children: datasourceEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceEditorForm, {
+                initialDatasourceDefinition: datasourceEdit,
+                initialAction: datasourceFormAction,
+                isDraft: true,
+                onSave: (def)=>{
+                    setDatasources((draft)=>{
+                        delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
+                        draft[def.name] = def.spec;
+                        setDatasourceEdit(null);
+                    });
+                },
+                onClose: ()=>{
                     setDatasourceEdit(null);
-                });
-            },
-            onClose: ()=>{
-                setDatasourceEdit(null);
-            }
+                }
+            })
         }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {

package/dist/cjs/components/EmptyDashboard/EmptyDashboard.js

@@ -32,7 +32,7 @@ const DEFAULT_DESCRIPTION = {
     view: 'This dashboard is currently empty. Get started by clicking the edit button.'
 };
 // Constants from specifics in designs to make the default messaging look good.
-const CONTAINER_WIDTH = '450px';
+const CONTAINER_WIDTH = '500px';
 const PRIMARY_CONTENT_WIDTH = '289px';
 const COMMON_BUTTON_PROPS = {
     variant: 'outlined',

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

@@ -36,14 +36,12 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _context = require("../../context");
-const _validation = require("../../validation");
 const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
 function PanelEditorForm(props) {
-    const { initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId }, initialAction, onSave, onClose } = props;
+    const { initialValues, initialAction, onSave, onClose } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
-    const [groupId, setGroupId] = (0, _react.useState)(initialGroupId);
-    const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
+    const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
@@ -70,23 +68,15 @@ function PanelEditorForm(props) {
     });
     const titleAction = (0, _pluginsystem.getTitleAction)(initialAction, true);
     const submitText = (0, _pluginsystem.getSubmitText)(initialAction, true);
+    const { panelEditorSchema } = (0, _pluginsystem.useValidationSchemas)();
     const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(_validation.panelEditorValidationSchema),
+        resolver: (0, _zod.zodResolver)(panelEditorSchema),
         mode: 'onBlur',
-        defaultValues: {
-            name: initialPanelDef.spec.display.name,
-            groupId: initialGroupId,
-            description: initialPanelDef.spec.display.description,
-            selection: pluginEditor.pendingSelection ? pluginEditor.pendingSelection : {
-                type: 'Panel',
-                kind: plugin.kind
-            },
-            links: initialPanelDef.spec.links
-        }
+        defaultValues: initialValues
     });
     const links = (0, _reacthookform.useWatch)({
         control: form.control,
-        name: 'links'
+        name: 'panelDefinition.spec.links'
     });
     (0, _react.useEffect)(()=>{
         setLinks(links);
@@ -94,25 +84,15 @@ function PanelEditorForm(props) {
         setLinks,
         links
     ]);
-    const processForm = ()=>{
-        const values = {
-            groupId,
-            panelDefinition
-        };
-        onSave(values);
+    const processForm = (data)=>{
+        onSave(data);
     };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
     function handleCancel() {
-        if (JSON.stringify({
-            groupId: initialGroupId,
-            panelDefinition: initialPanelDef
-        }) !== JSON.stringify({
-            groupId,
-            panelDefinition
-        })) {
+        if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
@@ -181,16 +161,19 @@ function PanelEditorForm(props) {
                             item: true,
                             xs: 8,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "name",
-                                render: ({ field, fieldState })=>{
+                                control: form.control,
+                                name: "panelDefinition.spec.display.name",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ {
                                     var _fieldState_error;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                    var _field_value;
+                                    return (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Name",
                                         error: !!fieldState.error,
                                         helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
@@ -203,6 +186,7 @@ function PanelEditorForm(props) {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                control: form.control,
                                 name: "groupId",
                                 render: ({ field, fieldState })=>{
                                     var _fieldState_error;
@@ -216,7 +200,6 @@ function PanelEditorForm(props) {
                                         helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
-                                            setGroupId(+event.target.value);
                                         },
                                         children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ {
                                             var _panelGroup_title;
@@ -233,15 +216,18 @@ function PanelEditorForm(props) {
                             item: true,
                             xs: 8,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "description",
-                                render: ({ field, fieldState })=>{
+                                control: form.control,
+                                name: "panelDefinition.spec.display.description",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ {
                                     var _fieldState_error;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                    var _field_value;
+                                    return (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
                                         error: !!fieldState.error,
                                         helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
@@ -254,7 +240,8 @@ function PanelEditorForm(props) {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "selection",
+                                control: form.control,
+                                name: "panelDefinition.spec.plugin.kind",
                                 render: ({ field, fieldState })=>/*#__PURE__*/ {
                                     var _pluginEditor_error, _fieldState_error;
                                     var _pluginEditor_error_message;
@@ -269,8 +256,12 @@ function PanelEditorForm(props) {
                                         disabled: pluginEditor.isLoading,
                                         error: !!pluginEditor.error || !!fieldState.error,
                                         helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        value: {
+                                            type: 'Panel',
+                                            kind: field.value
+                                        },
                                         onChange: (event)=>{
-                                            field.onChange(event);
+                                            field.onChange(event.kind);
                                             pluginEditor.onSelectionChange(event);
                                         }
                                     });
@@ -300,6 +291,7 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
+                                    control: form.control,
                                     panelDefinition: panelDefinition,
                                     onJSONChange: handlePanelDefinitionChange,
                                     onQueriesChange: (queries)=>{

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -35,7 +35,7 @@ const SaveChangesConfirmationDialog = ()=>{
     const isSavedVariableModified = (_dialog_isSavedVariableModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && _dialog_isSavedVariableModified !== void 0 ? _dialog_isSavedVariableModified : true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
-    const { getSavedVariablesStatus } = (0, _context.useTemplateVariableActions)();
+    const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange } = (0, _pluginsystem.useTimeRange)();

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -29,7 +29,7 @@ const _context = require("../../context");
 const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
-    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useTemplateVariableActions)();
+    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useVariableDefinitionActions)();
     const { isSavedVariableModified } = getSavedVariablesStatus();
     const { timeRange } = (0, _pluginsystem.useTimeRange)();
     const { setEditMode } = (0, _context.useEditMode)();

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -36,10 +36,10 @@ function _interop_require_default(obj) {
 }
 function EditVariablesButton({ variant = 'text', label = 'Variables', color = 'primary', fullWidth }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
-    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
+    const variableDefinitions = (0, _context.useVariableDefinitions)();
+    const externalVariableDefinitions = (0, _context.useExternalVariableDefinitions)();
     const builtinVariableDefinitions = (0, _pluginsystem.useBuiltinVariableDefinitions)();
-    const { setVariableDefinitions } = (0, _context.useTemplateVariableActions)();
+    const { setVariableDefinitions } = (0, _context.useVariableDefinitionActions)();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
     };

package/dist/cjs/components/Variables/{TemplateVariable.js → Variable.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -21,8 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TemplateVariable: function() {
-        return TemplateVariable;
+    Variable: function() {
+        return Variable;
     },
     useListVariableState: function() {
         return useListVariableState;
@@ -46,9 +46,9 @@ function variableOptionToVariableValue(options) {
     }
     return options.value;
 }
-function TemplateVariable({ name, source }) {
+function Variable({ name, source }) {
     var _ctx_definition;
-    const ctx = (0, _context.useTemplateVariable)(name, source);
+    const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
     const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
     switch(kind){
         case 'TextVariable':
@@ -193,7 +193,6 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
     };
 }
 const StyledPopper = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popper, {
-        placeholder: undefined,
         ...props,
         sx: {
             minWidth: 'fit-content'
@@ -204,23 +203,23 @@ 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;
+    if (width < _constants.MIN_VARIABLE_WIDTH) {
+        return _constants.MIN_VARIABLE_WIDTH;
+    } else if (width > _constants.MAX_VARIABLE_WIDTH) {
+        return _constants.MAX_VARIABLE_WIDTH;
     } else {
         return width;
     }
 };
 function ListVariable({ name, source }) {
     var _definition_spec_display;
-    const ctx = (0, _context.useTemplateVariable)(name, source);
+    const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = (0, _pluginsystem.useListVariablePluginValues)(definition);
-    const { setVariableValue, setVariableLoading, setVariableOptions } = (0, _context.useTemplateVariableActions)();
+    const { setVariableValue, setVariableLoading, setVariableOptions } = (0, _context.useVariableDefinitionActions)();
     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);
+    const [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_VARIABLE_WIDTH);
     var _definition_spec_display_name;
     const title = (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = 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;
@@ -283,9 +282,8 @@ function ListVariable({ name, source }) {
                     '& .MuiInputBase-root': {
                         minHeight: '38px'
                     },
-                    '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
-                        paddingY: '5px',
-                        paddingLeft: '5px'
+                    '& .MuiAutocomplete-tag': {
+                        margin: '1px 2px'
                     }
                 },
                 value: selectedOptions,
@@ -311,13 +309,13 @@ function ListVariable({ name, source }) {
 }
 function TextVariable({ name, source }) {
     var _definition_spec_display;
-    const ctx = (0, _context.useTemplateVariable)(name, source);
+    const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
     const state = ctx.state;
     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)();
+    const { setVariableValue } = (0, _context.useVariableDefinitionActions)();
     (0, _react.useEffect)(()=>{
         var _state_value;
         setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
@@ -328,7 +326,6 @@ 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);
             setInputWidth(getWidthPx(e.target.value, 'text'));

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -43,7 +43,7 @@ const _ChevronUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
-const _hydrationUtils = require("../../context/TemplateVariableProvider/hydrationUtils");
+const _hydrationUtils = require("../../context/VariableProvider/hydrationUtils");
 const _BuiltinVariableAccordions = require("./BuiltinVariableAccordions");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -77,7 +77,7 @@ function VariableEditor(props) {
     ]);
     const [variableState] = (0, _react.useMemo)(()=>{
         return [
-            (0, _hydrationUtils.hydrateTemplateVariableStates)(variableDefinitions, {}, externalVariableDefinitions)
+            (0, _hydrationUtils.hydrateVariableDefinitionStates)(variableDefinitions, {}, externalVariableDefinitions)
         ];
     }, [
         externalVariableDefinitions,
@@ -166,22 +166,24 @@ function VariableEditor(props) {
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
-                initialVariableDefinition: currentEditingVariableDefinition,
-                initialAction: variableFormAction,
-                isDraft: true,
-                onSave: (definition)=>{
-                    setVariableDefinitions((draft)=>{
-                        draft[variableEditIdx] = definition;
+            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
+                    initialVariableDefinition: currentEditingVariableDefinition,
+                    initialAction: variableFormAction,
+                    isDraft: true,
+                    onSave: (definition)=>{
+                        setVariableDefinitions((draft)=>{
+                            draft[variableEditIdx] = definition;
+                            setVariableEditIdx(null);
+                        });
+                    },
+                    onClose: ()=>{
+                        if (variableFormAction === 'create') {
+                            removeVariable(variableEditIdx);
+                        }
                         setVariableEditIdx(null);
-                    });
-                },
-                onClose: ()=>{
-                    if (variableFormAction === 'create') {
-                        removeVariable(variableEditIdx);
                     }
-                    setVariableEditIdx(null);
-                }
+                })
             }),
             !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -21,48 +21,48 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TemplateVariableList: function() {
-        return TemplateVariableList;
+    VariableList: function() {
+        return VariableList;
     },
-    TemplateVariableListItem: function() {
-        return TemplateVariableListItem;
+    VariableListItem: function() {
+        return VariableListItem;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _context = require("../../context");
 const _constants = require("../../constants");
-const _TemplateVariable = require("./TemplateVariable");
-function TemplateVariableList() {
-    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
+const _Variable = require("./Variable");
+function VariableList() {
+    const variableDefinitions = (0, _context.useVariableDefinitions)();
+    const externalVariableDefinitions = (0, _context.useExternalVariableDefinitions)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             externalVariableDefinitions.slice().reverse() // We reverse to have the most prioritized on top
-            .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableListItem, {
+            .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(VariableListItem, {
                         spec: v.spec,
                         source: def.source
                     }, v.spec.name + def.source))),
-            variableDefinitions.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableListItem, {
+            variableDefinitions.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(VariableListItem, {
                     spec: v.spec
                 }, v.spec.name))
         ]
     });
 }
-function TemplateVariableListItem({ spec, source }) {
+function VariableListItem({ spec, source }) {
     var _ctx_state, _spec_display;
-    const ctx = (0, _context.useTemplateVariable)(spec.name, source);
+    const ctx = (0, _context.useVariableDefinitionAndState)(spec.name, source);
     if ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) {
         return null;
     }
     var _ref, _ref1;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         display: ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
-        minWidth: `${_constants.MIN_TEMPLATE_VARIABLE_WIDTH}px`,
-        maxWidth: `${_constants.MAX_TEMPLATE_VARIABLE_WIDTH}px`,
+        minWidth: `${_constants.MIN_VARIABLE_WIDTH}px`,
+        maxWidth: `${_constants.MAX_VARIABLE_WIDTH}px`,
         flexShrink: 0,
-        "data-testid": 'template-variable-' + spec.name,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TemplateVariable.TemplateVariable, {
+        "data-testid": 'variable-' + spec.name,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variable.Variable, {
             name: spec.name,
             source: source
         }, (_ref = spec.name + source) !== null && _ref !== void 0 ? _ref : '')

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -16,7 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./BuiltinVariableAccordions"), exports);
 _export_star(require("./EditVariablesButton"), exports);
-_export_star(require("./TemplateVariable"), exports);
+_export_star(require("./Variable"), exports);
 _export_star(require("./VariableEditor"), exports);
 _export_star(require("./VariableList"), exports);
 function _export_star(from, to) {

package/dist/cjs/constants/styles.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -21,11 +21,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    MAX_TEMPLATE_VARIABLE_WIDTH: function() {
-        return MAX_TEMPLATE_VARIABLE_WIDTH;
+    MAX_VARIABLE_WIDTH: function() {
+        return MAX_VARIABLE_WIDTH;
     },
-    MIN_TEMPLATE_VARIABLE_WIDTH: function() {
-        return MIN_TEMPLATE_VARIABLE_WIDTH;
+    MIN_VARIABLE_WIDTH: function() {
+        return MIN_VARIABLE_WIDTH;
     },
     editButtonStyle: function() {
         return editButtonStyle;
@@ -38,5 +38,5 @@ const editButtonStyle = {
         marginRight: 0.5
     }
 };
-const MIN_TEMPLATE_VARIABLE_WIDTH = 120;
-const MAX_TEMPLATE_VARIABLE_WIDTH = 500;
+const MIN_VARIABLE_WIDTH = 120;
+const MAX_VARIABLE_WIDTH = 500;

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -20,7 +20,7 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
         return createPanelEditorSlice;
     }
 });
-const _panelUtils = require("../../utils/panelUtils");
+const _utils = require("../../utils");
 const _common = require("./common");
 const _panelgroupslice = require("./panel-group-slice");
 function createPanelEditorSlice() {
@@ -76,7 +76,7 @@ function createPanelEditorSlice() {
                             newGroup.itemLayouts.push({
                                 i: existingLayout.i,
                                 x: 0,
-                                y: (0, _panelUtils.getYForNewRow)(newGroup),
+                                y: (0, _utils.getYForNewRow)(newGroup),
                                 w: existingLayout.w,
                                 h: existingLayout.h
                             });
@@ -113,7 +113,7 @@ function createPanelEditorSlice() {
                     },
                     applyChanges: (next)=>{
                         const name = next.panelDefinition.spec.display.name;
-                        const panelKey = (0, _panelUtils.getValidPanelKey)(name, get().panels);
+                        const panelKey = (0, _utils.getValidPanelKey)(name, get().panels);
                         set((state)=>{
                             // Add a panel
                             state.panels[panelKey] = next.panelDefinition;
@@ -125,7 +125,7 @@ function createPanelEditorSlice() {
                             const layout = {
                                 i: (0, _common.generateId)().toString(),
                                 x: 0,
-                                y: (0, _panelUtils.getYForNewRow)(group),
+                                y: (0, _utils.getYForNewRow)(group),
                                 w: 12,
                                 h: 6
                             };