@perses-dev/plugin-system 0.53.0-beta.2 → 0.53.0-beta.4

package/dist/cjs/components/DatasourceSelect/DatasourceSelect.js

@@ -17,29 +17,29 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DatasourceName: function() {
+    get DatasourceName () {
         return DatasourceName;
     },
-    DatasourceSelect: function() {
+    get DatasourceSelect () {
         return DatasourceSelect;
     },
-    datasourceSelectValueToSelector: function() {
+    get datasourceSelectValueToSelector () {
         return datasourceSelectValueToSelector;
     },
-    isVariableDatasource: function() {
+    get isVariableDatasource () {
         return isVariableDatasource;
     },
-    optionValueToSelector: function() {
+    get optionValueToSelector () {
         return optionValueToSelector;
     },
-    selectorToOptionValue: function() {
+    get selectorToOptionValue () {
         return selectorToOptionValue;
     },
-    useDatasourceSelectValueToSelector: function() {
+    get useDatasourceSelectValueToSelector () {
         return useDatasourceSelectValueToSelector;
     }
 });

package/dist/cjs/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -82,22 +82,50 @@ function HTTPSettingsEditor(props) {
     if (value.directUrl === undefined && value.proxy === undefined) {
         Object.assign(value, initialSpecProxy);
     }
-    // utilitary function used for headers when renaming a property
-    // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.
-    const buildNewHeaders = (oldHeaders, oldName, newName)=>{
-        if (oldHeaders === undefined) return oldHeaders;
-        const keys = Object.keys(oldHeaders);
-        const newHeaders = keys.reduce((acc, val)=>{
-            if (val === oldName) {
-                acc[newName] = oldHeaders[oldName] || '';
-            } else {
-                acc[val] = oldHeaders[val] || '';
+    // Use local state to maintain an array of header entries during editing, instead of
+    // manipulating a map directly which causes weird UX.
+    const headersForm = (0, _reacthookform.useForm)({
+        defaultValues: {
+            headers: Object.entries(value.proxy?.spec.headers ?? {}).map(([name, headerValue])=>({
+                    name,
+                    value: headerValue
+                }))
+        }
+    });
+    const { fields, append, remove } = (0, _reacthookform.useFieldArray)({
+        control: headersForm.control,
+        name: 'headers'
+    });
+    // Watch the headers array for changes to detect duplicates
+    const watchedHeaders = headersForm.watch('headers');
+    // Check for duplicate header names
+    // TODO: duplication detection logic to be replaced by proper zod schema validation in the future
+    // ref https://github.com/perses/perses/issues/3014
+    const nameMap = new Map();
+    const duplicateNames = new Set();
+    watchedHeaders.forEach(({ name })=>{
+        if (name !== '') {
+            const count = (nameMap.get(name) || 0) + 1;
+            nameMap.set(name, count);
+            if (count > 1) {
+                duplicateNames.add(name);
             }
-            return acc;
-        }, {});
-        return {
-            ...newHeaders
-        };
+        }
+    });
+    const hasDuplicates = duplicateNames.size > 0;
+    // Sync headers to parent
+    const syncHeadersToParent = (headers)=>{
+        const headersObject = {};
+        headers.forEach(({ name, value: headerValue })=>{
+            if (name !== '') {
+                headersObject[name] = headerValue;
+            }
+        });
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (draft.proxy !== undefined) {
+                draft.proxy.spec.headers = Object.keys(headersObject).length > 0 ? headersObject : undefined;
+            }
+        }));
     };
     const tabs = [
         {
@@ -133,7 +161,7 @@ function HTTPSettingsEditor(props) {
                             })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                        variant: "h4",
+                        variant: "h5",
                         mb: 2,
                         children: "Allowed endpoints"
                     }),
@@ -308,7 +336,7 @@ function HTTPSettingsEditor(props) {
                         ]
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                        variant: "h4",
+                        variant: "h5",
                         mb: 2,
                         children: "Request Headers"
                     }),
@@ -317,20 +345,19 @@ function HTTPSettingsEditor(props) {
                         spacing: 2,
                         mb: 2,
                         children: [
-                            value.proxy?.spec.headers && Object.keys(value.proxy.spec.headers).map((headerName, i)=>{
-                                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                            fields.length > 0 ? fields.map((field, index)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                             item: true,
                                             xs: 4,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Header name ${i}`,
-                                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                        ...field,
+                                                control: headersForm.control,
+                                                name: `headers.${index}.name`,
+                                                render: ({ field: controllerField, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                        ...controllerField,
                                                         fullWidth: true,
                                                         label: "Header name",
-                                                        value: headerName,
-                                                        error: !!fieldState.error,
+                                                        error: !!fieldState.error || duplicateNames.has(controllerField.value),
                                                         helperText: fieldState.error?.message,
                                                         InputProps: {
                                                             readOnly: isReadonly
@@ -339,12 +366,15 @@ function HTTPSettingsEditor(props) {
                                                             shrink: isReadonly ? true : undefined
                                                         },
                                                         onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = buildNewHeaders(draft.proxy.spec.headers, headerName, e.target.value);
-                                                                }
-                                                            }));
+                                                            controllerField.onChange(e);
+                                                            const updatedHeaders = [
+                                                                ...watchedHeaders
+                                                            ];
+                                                            updatedHeaders[index] = {
+                                                                name: e.target.value,
+                                                                value: updatedHeaders[index]?.value ?? ''
+                                                            };
+                                                            syncHeadersToParent(updatedHeaders);
                                                         }
                                                     })
                                             })
@@ -353,12 +383,12 @@ function HTTPSettingsEditor(props) {
                                             item: true,
                                             xs: 7,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Header value ${i}`,
-                                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                        ...field,
+                                                control: headersForm.control,
+                                                name: `headers.${index}.value`,
+                                                render: ({ field: controllerField, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                        ...controllerField,
                                                         fullWidth: true,
                                                         label: "Header value",
-                                                        value: value.proxy?.spec.headers?.[headerName],
                                                         error: !!fieldState.error,
                                                         helperText: fieldState.error?.message,
                                                         InputProps: {
@@ -368,15 +398,15 @@ function HTTPSettingsEditor(props) {
                                                             shrink: isReadonly ? true : undefined
                                                         },
                                                         onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = {
-                                                                        ...draft.proxy.spec.headers,
-                                                                        [headerName]: e.target.value
-                                                                    };
-                                                                }
-                                                            }));
+                                                            controllerField.onChange(e);
+                                                            const updatedHeaders = [
+                                                                ...watchedHeaders
+                                                            ];
+                                                            updatedHeaders[index] = {
+                                                                name: updatedHeaders[index]?.name ?? '',
+                                                                value: e.target.value
+                                                            };
+                                                            syncHeadersToParent(updatedHeaders);
                                                         }
                                                     })
                                             })
@@ -384,30 +414,36 @@ function HTTPSettingsEditor(props) {
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                             item: true,
                                             xs: 1,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Remove Header ${i}`,
-                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                                        ...field,
-                                                        disabled: isReadonly,
-                                                        // Remove the given header from the list
-                                                        onClick: (e)=>{
-                                                            field.onChange(e);
-                                                            const newHeaders = {
-                                                                ...value.proxy?.spec.headers
-                                                            };
-                                                            delete newHeaders[headerName];
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = newHeaders;
-                                                                }
-                                                            }));
-                                                        },
-                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
-                                                    })
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                disabled: isReadonly,
+                                                "aria-label": `Remove header ${watchedHeaders[index]?.name || index}`,
+                                                onClick: ()=>{
+                                                    remove(index);
+                                                    const updatedHeaders = watchedHeaders.filter((_, i)=>i !== index);
+                                                    syncHeadersToParent(updatedHeaders);
+                                                },
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
                                             })
                                         })
                                     ]
-                                }, i);
+                                }, field.id)) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    sx: {
+                                        fontStyle: 'italic'
+                                    },
+                                    children: "None"
+                                })
+                            }),
+                            hasDuplicates && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "body2",
+                                    color: "error",
+                                    children: "Duplicate header names detected. Each header name must be unique."
+                                })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                 item: true,
@@ -418,15 +454,10 @@ function HTTPSettingsEditor(props) {
                                 },
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                     disabled: isReadonly,
-                                    // Add a new (empty) header to the list
-                                    onClick: ()=>onChange((0, _immer.produce)(value, (draft)=>{
-                                            if (draft.proxy !== undefined) {
-                                                draft.proxy.spec.headers = {
-                                                    ...draft.proxy.spec.headers,
-                                                    '': ''
-                                                };
-                                            }
-                                        })),
+                                    onClick: ()=>append({
+                                            name: '',
+                                            value: ''
+                                        }),
                                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
                                 })
                             })

package/dist/cjs/components/MultiQueryEditor/MultiQueryEditor.js

@@ -66,7 +66,7 @@ function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
     };
 }
 const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange } = props;
+    const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
@@ -82,6 +82,9 @@ const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             }
         }));
     };
+    const handleQueryRun = (index, queryDef)=>{
+        onQueryRun(index, queryDef);
+    };
     const handleQueryAdd = ()=>{
         onChange((0, _immer.produce)(queries, (draft)=>{
             if (draft) {
@@ -136,6 +139,7 @@ const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         filteredQueryPlugins: filteredQueryPlugins,
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
+                        onQueryRun: handleQueryRun,
                         onDelete: queries.length > 1 ? handleQueryDelete : undefined,
                         onCollapseExpand: handleQueryCollapseExpand
                     }, i))

package/dist/cjs/components/MultiQueryEditor/QueryEditorContainer.js

@@ -36,7 +36,7 @@ function _interop_require_default(obj) {
     };
 }
 const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
+    const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, onQueryRun, onCollapseExpand } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
@@ -119,9 +119,9 @@ const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
                 ref: ref,
                 queryTypes: queryTypes,
                 value: query,
-                queryResult: queryResult,
                 filteredQueryPlugins: filteredQueryPlugins,
-                onChange: (next)=>onChange(index, next)
+                onChange: (next)=>onChange(index, next),
+                onQueryRun: ()=>onQueryRun(index, query)
             })
         ]
     }, index);
@@ -134,7 +134,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
  * @param props
  * @constructor
  */ const QueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, onChange, queryTypes, queryResult, filteredQueryPlugins, ...others } = props;
+    const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -146,7 +146,6 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
         ...others,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
             ref: ref,
-            withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
             value: {
@@ -157,7 +156,8 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
                 spec: value.spec.plugin.spec
             },
             filteredQueryPlugins: filteredQueryPlugins,
-            onQueryRefresh: queryResult?.refetch,
+            withRunQueryButton: true,
+            onRunQuery: onQueryRun,
             onChange: handlePluginChange
         })
     });

package/dist/cjs/components/PanelSpecEditor/PanelSpecEditor.js

@@ -28,7 +28,7 @@ const _runtime = require("../../runtime");
 const _OptionsEditorTabs = require("../OptionsEditorTabs");
 const _MultiQueryEditor = require("../MultiQueryEditor");
 const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
+    const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
     const { queryResults } = (0, _runtime.useDataQueriesContext)();
@@ -59,6 +59,13 @@ const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         onChange: (queries)=>{
                             field.onChange(queries);
                             onQueriesChange(queries);
+                        },
+                        onQueryRun: (index, query)=>{
+                            onQueryRun(index, query);
+                            // If spec has not changed, refetch to update the data
+                            if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {
+                                queryResults[index]?.refetch?.();
+                            }
                         }
                     })
             })

package/dist/cjs/components/PluginEditor/PluginEditor.js

@@ -33,47 +33,14 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, onQueryRefresh, filteredQueryPlugins, ...others } = props;
+function PluginEditor(props) {
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, onRunQuery, filteredQueryPlugins, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = (0, _plugineditorapi.usePluginEditor)(props);
-    /*
-     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
-     because at the end of the day, they are all specs.
-     However, let's have them separated to keep the code simple and readable.
-     Reason: Only Query string field is common between all of them. Other specs may be different
-     Example: Legend, and MinSteps
-    */ const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
-    const [watchedOtherSpecs, setWatchOtherSpecs] = (0, _react.useState)(value.spec);
-    const runQueryHandler = (0, _react.useCallback)(()=>{
-        onSpecChange({
-            ...value.spec,
-            ...watchedOtherSpecs,
-            query: watchedQuery
-        });
-        onQueryRefresh?.();
+    const handleSpecChange = (0, _react.useCallback)((nextSpec)=>{
+        onSpecChange(nextSpec);
     }, [
-        onQueryRefresh,
-        onSpecChange,
-        value.spec,
-        watchedOtherSpecs,
-        watchedQuery
+        onSpecChange
     ]);
-    const queryHandlerSettings = (0, _react.useMemo)(()=>{
-        return withRunQueryButton ? {
-            runWithOnBlur: false,
-            watchQueryChanges: (query)=>{
-                setWatchQuery(query);
-            },
-            setWatchOtherSpecs: (otherSpecs)=>{
-                setWatchOtherSpecs(otherSpecs);
-            }
-        } : undefined;
-    }, [
-        withRunQueryButton
-    ]);
-    (0, _react.useImperativeHandle)(ref, ()=>({
-            flushChanges: runQueryHandler
-        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
@@ -107,11 +74,12 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         onChange: onSelectionChange,
                         filteredQueryPlugins: filteredQueryPlugins
                     }),
-                    withRunQueryButton && !isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    withRunQueryButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                         "data-testid": "run_query_button",
                         variant: "contained",
                         startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Reload.default, {}),
-                        onClick: runQueryHandler,
+                        onClick: onRunQuery,
+                        disabled: isLoading,
                         children: "Run Query"
                     })
                 ]
@@ -121,12 +89,10 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginSpecEditor.PluginSpecEditor, {
                     pluginSelection: value.selection,
                     value: value.spec,
-                    onChange: onSpecChange,
-                    isReadonly: isReadonly,
-                    queryHandlerSettings: queryHandlerSettings
+                    onChange: handleSpecChange,
+                    isReadonly: isReadonly
                 })
             })
         ]
     });
-});
-PluginEditor.displayName = 'PluginEditor';
+}

package/dist/cjs/components/PluginEditor/plugin-editor-api.js

@@ -73,7 +73,7 @@ function usePluginEditor(props) {
         // Nothing to do if no new plugin kind is pending
         if (!pendingSelection) return;
         // Can't get spec value until we have a plugin
-        if (plugin === undefined) return;
+        if (plugin === undefined || isFetching) return;
         // Fire an onChange to change to the pending kind with initial values from the plugin
         rememberCurrentSpecState();
         onChange({
@@ -91,6 +91,7 @@ function usePluginEditor(props) {
     }, [
         pendingSelection,
         plugin,
+        isFetching,
         rememberCurrentSpecState,
         onChange,
         onHideQuery,

package/dist/cjs/components/PluginRegistry/plugin-indexes.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getTypeAndKindKey: function() {
+    get getTypeAndKindKey () {
         return getTypeAndKindKey;
     },
-    usePluginIndexes: function() {
+    get usePluginIndexes () {
         return usePluginIndexes;
     }
 });

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

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DEFAULT_REFRESH_INTERVAL_OPTIONS: function() {
+    get DEFAULT_REFRESH_INTERVAL_OPTIONS () {
         return DEFAULT_REFRESH_INTERVAL_OPTIONS;
     },
-    TimeRangeControls: function() {
+    get TimeRangeControls () {
         return TimeRangeControls;
     }
 });

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

@@ -105,10 +105,28 @@ function TextVariableEditorForm({ action, control }) {
 function ListVariableEditorForm({ action, control }) {
     const form = (0, _reacthookform.useFormContext)();
     const queryClient = (0, _reactquery.useQueryClient)();
-    /** We use `previewSpec` to know when to explicitly update the
-   * spec that will be used for preview. The reason why we do this is to avoid
+    const values = form.getValues();
+    /* We use `previewDefinition` to explicitly update the spec
+   * that will be used for preview when running query. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
-   */ const previewSpec = form.getValues();
+   * Using structuredClone to not have reference issues with nested objects.
+   */ const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(structuredClone(values));
+    const handleRunQuery = (0, _react.useCallback)(async ()=>{
+        if (JSON.stringify(previewDefinition) === JSON.stringify(values)) {
+            await queryClient.invalidateQueries({
+                queryKey: [
+                    'variable',
+                    previewDefinition
+                ]
+            });
+        } else {
+            setPreviewDefinition(structuredClone(values));
+        }
+    }, [
+        previewDefinition,
+        queryClient,
+        values
+    ]);
     const plugin = (0, _reacthookform.useWatch)({
         control,
         name: 'spec.plugin'
@@ -123,20 +141,8 @@ function ListVariableEditorForm({ action, control }) {
         control: control,
         name: 'spec.sort'
     });
-    const handleRefresh = (0, _react.useCallback)(async ()=>{
-        await queryClient.invalidateQueries({
-            queryKey: [
-                'variable',
-                previewSpec
-            ]
-        });
-    }, [
-        previewSpec,
-        queryClient
-    ]);
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
-    const values = form.getValues();
     if (values.spec.allowAllValue === undefined) {
         form.setValue('spec.allowAllValue', false);
     }
@@ -167,11 +173,11 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: FallbackPreview,
                             resetKeys: [
-                                previewSpec
+                                previewDefinition
                             ],
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
                                 sortMethod: sortMethod,
-                                definition: previewSpec
+                                definition: previewDefinition
                             })
                         })
                     }),
@@ -203,7 +209,7 @@ function ListVariableEditorForm({ action, control }) {
                                                 spec: v.spec
                                             });
                                         },
-                                        onQueryRefresh: handleRefresh
+                                        onRunQuery: handleRunQuery
                                     });
                                 }
                             })

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

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    VariableListPreview: function() {
+    get VariableListPreview () {
         return VariableListPreview;
     },
-    VariablePreview: function() {
+    get VariablePreview () {
         return VariablePreview;
     }
 });

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -17,17 +17,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    SORT_METHODS: function() {
+    get SORT_METHODS () {
         return SORT_METHODS;
     },
-    getInitialState: function() {
+    get getInitialState () {
         return getInitialState;
     },
-    getVariableDefinitionFromState: function() {
+    get getVariableDefinitionFromState () {
         return getVariableDefinitionFromState;
     }
 });