@perses-dev/plugin-system 0.53.0-beta.3 → 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/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/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;
     }
 });

package/dist/cjs/components/Variables/variable-model.js

@@ -17,20 +17,20 @@ 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, {
-    VARIABLE_TYPES: function() {
+    get VARIABLE_TYPES () {
         return VARIABLE_TYPES;
     },
-    filterVariableList: function() {
+    get filterVariableList () {
         return filterVariableList;
     },
-    getVariableValuesKey: function() {
+    get getVariableValuesKey () {
         return getVariableValuesKey;
     },
-    useListVariablePluginValues: function() {
+    get useListVariablePluginValues () {
         return useListVariablePluginValues;
     }
 });

package/dist/cjs/context/ValidationProvider.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, {
-    ValidationProvider: function() {
+    get ValidationProvider () {
         return ValidationProvider;
     },
-    ValidationSchemasContext: function() {
+    get ValidationSchemasContext () {
         return ValidationSchemasContext;
     },
-    useValidationSchemas: function() {
+    get useValidationSchemas () {
         return useValidationSchemas;
     }
 });

package/dist/cjs/model/legend.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, {
-    LEGEND_MODE_CONFIG: function() {
+    get LEGEND_MODE_CONFIG () {
         return LEGEND_MODE_CONFIG;
     },
-    LEGEND_POSITIONS_CONFIG: function() {
+    get LEGEND_POSITIONS_CONFIG () {
         return LEGEND_POSITIONS_CONFIG;
     },
-    LEGEND_SIZE_CONFIG: function() {
+    get LEGEND_SIZE_CONFIG () {
         return LEGEND_SIZE_CONFIG;
     },
-    LEGEND_VALUE_CONFIG: function() {
+    get LEGEND_VALUE_CONFIG () {
         return LEGEND_VALUE_CONFIG;
     },
-    comparisonLegends: function() {
+    get comparisonLegends () {
         return comparisonLegends;
     },
-    legendValues: function() {
+    get legendValues () {
         return legendValues;
     },
-    validateLegendSpec: function() {
+    get validateLegendSpec () {
         return validateLegendSpec;
     }
 });

package/dist/cjs/model/panels.js

@@ -14,9 +14,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}

package/dist/cjs/model/plugin-base.js

@@ -14,9 +14,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}

package/dist/cjs/remote/PluginRuntime.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, {
-    loadPlugin: function() {
+    get loadPlugin () {
         return loadPlugin;
     },
-    usePluginRuntime: function() {
+    get usePluginRuntime () {
         return usePluginRuntime;
     }
 });
@@ -136,43 +136,43 @@ const getPluginRuntime = ()=>{
                     }
                 },
                 '@perses-dev/core': {
-                    version: '0.51.0-rc.1',
+                    version: '0.53.0-beta.3',
                     lib: ()=>require('@perses-dev/core'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.1'
+                        requiredVersion: '^0.53.0-beta.3'
                     }
                 },
                 '@perses-dev/components': {
-                    version: '0.51.0-rc.1',
+                    version: '0.53.0-beta.3',
                     lib: ()=>require('@perses-dev/components'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.1'
+                        requiredVersion: '^0.53.0-beta.3'
                     }
                 },
                 '@perses-dev/plugin-system': {
-                    version: '0.51.0-rc.1',
+                    version: '0.53.0-beta.3',
                     lib: ()=>require('@perses-dev/plugin-system'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.1'
+                        requiredVersion: '^0.53.0-beta.3'
                     }
                 },
                 '@perses-dev/explore': {
-                    version: '0.51.0-rc.1',
+                    version: '0.53.0-beta.3',
                     lib: ()=>require('@perses-dev/explore'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.1'
+                        requiredVersion: '^^0.53.0-beta.3'
                     }
                 },
                 '@perses-dev/dashboards': {
-                    version: '0.51.0-rc.1',
+                    version: '0.53.0-beta.3',
                     lib: ()=>require('@perses-dev/dashboards'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.1'
+                        requiredVersion: '^^0.53.0-beta.3'
                     }
                 },
                 // Below are the shared modules that are used by the plugins, this can be part of the SDK

package/dist/cjs/runtime/DataQueriesProvider/DataQueriesProvider.js

@@ -17,20 +17,20 @@ 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, {
-    DataQueriesContext: function() {
+    get DataQueriesContext () {
         return DataQueriesContext;
     },
-    DataQueriesProvider: function() {
+    get DataQueriesProvider () {
         return DataQueriesProvider;
     },
-    useDataQueries: function() {
+    get useDataQueries () {
         return useDataQueries;
     },
-    useDataQueriesContext: function() {
+    get useDataQueriesContext () {
         return useDataQueriesContext;
     }
 });

package/dist/cjs/runtime/DataQueriesProvider/model.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, {
-    transformQueryResults: function() {
+    get transformQueryResults () {
         return transformQueryResults;
     },
-    useQueryType: function() {
+    get useQueryType () {
         return useQueryType;
     }
 });

package/dist/cjs/runtime/QueryCountProvider.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, {
-    QueryCountProvider: function() {
+    get QueryCountProvider () {
         return QueryCountProvider;
     },
-    useQueryCountContext: function() {
+    get useQueryCountContext () {
         return useQueryCountContext;
     }
 });