@perses-dev/plugin-system 0.50.1 → 0.51.0-beta.0

package/dist/cjs/runtime/variables.js

@@ -41,22 +41,14 @@ const _react = require("react");
 const _immer = require("immer");
 const _utils = require("../utils");
 const _builtinvariables = require("./builtin-variables");
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-let _immerable = _immer.immerable;
 class VariableStoreStateMap {
     /**
+   * "Immerable" is mandatory to be able to use this class in an immer context.
+   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
+   */ [_immer.immerable] = true;
+    DEFAULT_LOCAL_SOURCE_NAME = '';
+    _state = {};
+    /**
    * Get variable state by key.
    * @param key
    */ get(key) {
@@ -84,7 +76,6 @@ class VariableStoreStateMap {
    * Delete variable state by key.
    * @param key
    */ delete(key) {
-        var _Object_keys;
         const result = this.has(key);
         const sourceName = this._sourceName(key.source);
         const sourceStates = this._state[sourceName];
@@ -93,25 +84,16 @@ class VariableStoreStateMap {
             delete sourceStates[key.name];
         }
         // Delete source state from state if empty
-        if (((_Object_keys = Object.keys(sourceStates !== null && sourceStates !== void 0 ? sourceStates : {})) === null || _Object_keys === void 0 ? void 0 : _Object_keys.length) === 0) {
+        if (Object.keys(sourceStates ?? {})?.length === 0) {
             delete this._state[sourceName];
         }
         return result;
     }
     _sourceName(source) {
-        return source !== null && source !== void 0 ? source : this.DEFAULT_LOCAL_SOURCE_NAME;
+        return source ?? this.DEFAULT_LOCAL_SOURCE_NAME;
     }
     _sourceStatesOrEmpty(source) {
-        var _this__state_this__sourceName;
-        return (_this__state_this__sourceName = this._state[this._sourceName(source)]) !== null && _this__state_this__sourceName !== void 0 ? _this__state_this__sourceName : {};
-    }
-    constructor(){
-        /**
-   * "Immerable" is mandatory to be able to use this class in an immer context.
-   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
-   */ _define_property(this, _immerable, true);
-        _define_property(this, "DEFAULT_LOCAL_SOURCE_NAME", '');
-        _define_property(this, "_state", {});
+        return this._state[this._sourceName(source)] ?? {};
     }
 }
 const VariableContext = (0, _react.createContext)(undefined);
@@ -126,7 +108,7 @@ function useVariableValues(names) {
     const { state } = useVariableContext();
     const values = (0, _react.useMemo)(()=>{
         const values = {};
-        names === null || names === void 0 ? void 0 : names.forEach((name)=>{
+        names?.forEach((name)=>{
             const s = state[name];
             if (s) {
                 values[name] = s;

package/dist/cjs/stories/shared-utils/decorators/WithDataQueries.js

@@ -33,7 +33,7 @@ const WithDataQueries = (Story, context)=>{
             definitions: []
         }
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
         ...props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})

package/dist/cjs/stories/shared-utils/decorators/WithPluginRegistry.js

@@ -22,75 +22,9 @@ Object.defineProperty(exports, "WithPluginRegistry", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _pluginjson = /*#__PURE__*/ _interop_require_default(require("@perses-dev/prometheus-plugin/plugin.json"));
-const _pluginjson1 = /*#__PURE__*/ _interop_require_default(require("@perses-dev/panels-plugin/plugin.json"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const bundledPluginLoader = (0, _pluginsystem.dynamicImportPluginLoader)([
-    {
-        resource: _pluginjson.default,
-        // This throws an error in CI (but not locally for some reason), likely because
-        // this package isn't a dependency for dashboards. We probably do not want to
-        // make it one solely for type-checking in storybook.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@perses-dev/prometheus-plugin")))
-    },
-    {
-        resource: _pluginjson1.default,
-        // Same comment as above.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@perses-dev/panels-plugin")))
-    }
-]);
 const WithPluginRegistry = (Story)=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
-        pluginLoader: bundledPluginLoader,
+        pluginLoader: (0, _pluginsystem.remotePluginLoader)(),
         defaultPluginKinds: {
             TimeSeriesQuery: 'PrometheusTimeSeriesQuery',
             TraceQuery: 'TempoTraceQuery'

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.js

@@ -34,7 +34,7 @@ const WithPluginSystemBuiltinVariables = (Story, context)=>{
     const parameter = isWithBuiltinVariableParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.BuiltinVariableContext.Provider, {
         value: props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.js

@@ -60,8 +60,8 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
             }
             throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);
         },
-        listDatasourceSelectItems: async (datasourcePluginKind)=>{
-            if (datasourcePluginKind === 'PrometheusDatasource') {
+        listDatasourceSelectItems: async (datasourcePluginName)=>{
+            if (datasourcePluginName === 'PrometheusDatasource') {
                 return Promise.resolve([
                     {
                         items: [
@@ -75,7 +75,7 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
                     }
                 ]);
             }
-            throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginKind}`);
+            throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginName}`);
         },
         getSavedDatasources: ()=>{
             return {};
@@ -93,7 +93,7 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
     const parameter = isWithDatastoreStoreParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceStoreContext.Provider, {
         value: props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemVariables.js

@@ -34,7 +34,7 @@ const WithPluginSystemVariables = (Story, context)=>{
     const parameter = isWithVariableParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.VariableContext.Provider, {
         value: props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})

package/dist/cjs/stories/shared-utils/decorators/WithTimeRange.js

@@ -29,7 +29,7 @@ function isWithTimeRangeParameter(parameter) {
 const WithTimeRange = (Story, context)=>{
     const initParameter = context.parameters.withTimeRange;
     const parameter = isWithTimeRangeParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
         refreshInterval: "0s",
         timeRange: {

package/dist/cjs/test/render.js

@@ -35,12 +35,11 @@ function renderWithContext(ui, renderOptions, contextOptions) {
             }
         }
     });
-    var _contextOptions_defaultPluginKinds;
     return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
         client: queryClient,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginRegistry.PluginRegistry, {
             pluginLoader: _testplugins.testPluginLoader,
-            defaultPluginKinds: (_contextOptions_defaultPluginKinds = contextOptions === null || contextOptions === void 0 ? void 0 : contextOptions.defaultPluginKinds) !== null && _contextOptions_defaultPluginKinds !== void 0 ? _contextOptions_defaultPluginKinds : {
+            defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
                 TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
             },
             children: ui

package/dist/cjs/test-utils/mock-plugin-registry.js

@@ -33,17 +33,17 @@ function mockPluginRegistry(...mockPlugins) {
         kind: 'PluginModule',
         metadata: {
             name: 'Fake Plugin Module for Tests',
-            createdAt: '',
-            updatedAt: '',
-            version: 0
+            version: '0'
         },
         spec: {
             // Add metadata for all mock plugins
-            plugins: mockPlugins.map(({ pluginType, kind })=>({
-                    pluginType,
+            plugins: mockPlugins.map(({ kind, spec: { name } })=>({
                     kind,
-                    display: {
-                        name: getMockPluginName(pluginType, kind)
+                    spec: {
+                        name,
+                        display: {
+                            name: getMockPluginName(kind, name)
+                        }
                     }
                 }))
         }
@@ -51,7 +51,7 @@ function mockPluginRegistry(...mockPlugins) {
     const mockPluginModule = {};
     for (const mockPlugin of mockPlugins){
         // "Export" on the module under the same name as the kind the plugin handles
-        mockPluginModule[mockPlugin.kind] = mockPlugin.plugin;
+        mockPluginModule[mockPlugin.spec.name] = mockPlugin.plugin;
     }
     const pluginLoader = {
         getInstalledPlugins () {
@@ -70,6 +70,6 @@ function mockPluginRegistry(...mockPlugins) {
         }
     };
 }
-function getMockPluginName(pluginType, kind) {
-    return `${pluginType} Plugin for ${kind}`;
+function getMockPluginName(kind, name) {
+    return `${kind} Plugin for ${name}`;
 }

package/dist/cjs/utils/variables.js

@@ -40,7 +40,7 @@ function replaceVariables(text, variableState) {
     .sort((a, b)=>b.length - a.length).forEach((v)=>{
         const variable = variableState[v];
         if (variable && variable.value !== undefined) {
-            finalText = replaceVariable(finalText, v, variable === null || variable === void 0 ? void 0 : variable.value);
+            finalText = replaceVariable(finalText, v, variable?.value);
         }
     });
     return finalText;

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAc,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAQ7E,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CA6MnF"}
+{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAMtE,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CA6MnF"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -11,14 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
-import React, { useState } from 'react';
 import { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';
+import { useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { PluginEditor } from '../PluginEditor';
-import { getSubmitText, getTitleAction } from '../../utils';
 import { useValidationSchemas } from '../../context';
+import { getSubmitText, getTitleAction } from '../../utils';
+import { PluginEditor } from '../PluginEditor';
 export function DatasourceEditorForm(props) {
     const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
@@ -33,11 +33,10 @@ export function DatasourceEditorForm(props) {
     /*
    * Remove empty fields that are optional
    */ function clearFormData(data) {
-        var _result_spec_display, _result_spec_display1;
         const result = {
             ...data
         };
-        if (((_result_spec_display = result.spec.display) === null || _result_spec_display === void 0 ? void 0 : _result_spec_display.name) === undefined && ((_result_spec_display1 = result.spec.display) === null || _result_spec_display1 === void 0 ? void 0 : _result_spec_display1.description) === undefined) {
+        if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {
             delete result.spec.display;
         }
         return result;
@@ -103,10 +102,7 @@ export function DatasourceEditorForm(props) {
                                 children: /*#__PURE__*/ _jsx(Controller, {
                                     control: form.control,
                                     name: "name",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        var _field_value;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -120,13 +116,12 @@ export function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             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 : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
@@ -135,10 +130,7 @@ export function DatasourceEditorForm(props) {
                                 children: /*#__PURE__*/ _jsx(Controller, {
                                     control: form.control,
                                     name: "spec.display.name",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        var _field_value;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "title",
@@ -150,13 +142,12 @@ export function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             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 : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
@@ -165,10 +156,7 @@ export function DatasourceEditorForm(props) {
                                 children: /*#__PURE__*/ _jsx(Controller, {
                                     control: form.control,
                                     name: "spec.display.description",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        var _field_value;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "description",
@@ -180,13 +168,12 @@ export function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             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 : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport React, { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { useValidationSchemas } from '../../context';\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: DatasourceDefinition) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n  const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { datasourceEditorSchema } = useValidationSchemas();\n  const form = useForm<DatasourceDefinition>({\n    resolver: zodResolver(datasourceEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialDatasourceDefinition,\n  });\n\n  /*\n   * Remove empty fields that are optional\n   */\n  function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n    const result = { ...data };\n    if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                control={form.control}\n                name=\"spec.default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Set as default\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                        }}\n                      />\n                    }\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <Controller\n          control={form.control}\n          name=\"spec.plugin\"\n          render={({ field }) => (\n            <PluginEditor\n              width=\"100%\"\n              pluginTypes={['Datasource']}\n              pluginKindLabel=\"Source\"\n              value={{\n                selection: {\n                  type: 'Datasource',\n                  kind: field.value.kind,\n                },\n                spec: field.value.spec,\n              }}\n              isReadonly={action === 'read'}\n              onChange={(v) => {\n                field.onChange({ kind: v.selection.kind, spec: v.spec });\n              }}\n            />\n          )}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","React","useState","DiscardChangesConfirmationDialog","FormActions","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","useValidationSchemas","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';\nimport { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { useValidationSchemas } from '../../context';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { PluginEditor } from '../PluginEditor';\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: DatasourceDefinition) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n  const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { datasourceEditorSchema } = useValidationSchemas();\n  const form = useForm<DatasourceDefinition>({\n    resolver: zodResolver(datasourceEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialDatasourceDefinition,\n  });\n\n  /*\n   * Remove empty fields that are optional\n   */\n  function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n    const result = { ...data };\n    if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                control={form.control}\n                name=\"spec.default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Set as default\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                        }}\n                      />\n                    }\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <Controller\n          control={form.control}\n          name=\"spec.plugin\"\n          render={({ field }) => (\n            <PluginEditor\n              width=\"100%\"\n              pluginTypes={['Datasource']}\n              pluginKindLabel=\"Source\"\n              value={{\n                selection: {\n                  type: 'Datasource',\n                  kind: field.value.kind,\n                },\n                spec: field.value.spec,\n              }}\n              isReadonly={action === 'read'}\n              onChange={(v) => {\n                field.onChange({ kind: v.selection.kind, spec: v.spec });\n              }}\n            />\n          )}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["zodResolver","Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","DiscardChangesConfirmationDialog","FormActions","useState","Controller","FormProvider","useForm","useValidationSchemas","getSubmitText","getTitleAction","PluginEditor","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}

package/dist/components/DatasourceSelect.d.ts

@@ -1,8 +1,8 @@
-import { SelectProps } from '@mui/material';
+import { OutlinedSelectProps, BaseSelectProps } from '@mui/material';
 import { DatasourceSelector } from '@perses-dev/core';
 import { ReactElement } from 'react';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
-export interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {
+export interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {
     value: DatasourceSelector;
     onChange: (next: DatasourceSelector) => void;
     datasourcePluginKind: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAU,WAAW,EAAiE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAK9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACvF,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuF3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAUL,mBAAmB,EACnB,eAAe,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAK9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuF3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH"}

package/dist/components/DatasourceSelect.js

@@ -23,10 +23,9 @@ import { useListDatasourceSelectItems } from '../runtime';
     const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);
     // Rebuild the group of the value if not provided
     const defaultValue = useMemo(()=>{
-        var _flatMap_find;
-        const group = (_flatMap_find = (data !== null && data !== void 0 ? data : []).flatMap((itemGroup)=>itemGroup.items).find((item)=>{
+        const group = (data ?? []).flatMap((itemGroup)=>itemGroup.items).find((item)=>{
             return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;
-        })) === null || _flatMap_find === void 0 ? void 0 : _flatMap_find.selector.group;
+        })?.selector.group;
         return {
             ...value,
             group
@@ -37,20 +36,17 @@ import { useListDatasourceSelectItems } from '../runtime';
     ]);
     // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
     const menuItems = useMemo(()=>{
-        return (data !== null && data !== void 0 ? data : []).map((itemGroup)=>({
+        return (data ?? []).map((itemGroup)=>({
                 group: itemGroup.group,
                 editLink: itemGroup.editLink,
-                items: itemGroup.items.map((item)=>{
-                    var _item_saved;
-                    return {
+                items: itemGroup.items.map((item)=>({
                         name: item.name,
                         overriding: item.overriding,
                         overridden: item.overridden,
-                        saved: (_item_saved = item.saved) !== null && _item_saved !== void 0 ? _item_saved : true,
+                        saved: item.saved ?? true,
                         group: item.selector.group,
                         value: selectorToOptionValue(item.selector)
-                    };
-                })
+                    }))
             }));
     }, [
         data
@@ -143,11 +139,10 @@ const OPTION_VALUE_DELIMITER = '_____';
  * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
  * @param selector
  */ function selectorToOptionValue(selector) {
-    var _selector_group, _selector_name;
     return [
         selector.kind,
-        (_selector_group = selector.group) !== null && _selector_group !== void 0 ? _selector_group : '',
-        (_selector_name = selector.name) !== null && _selector_name !== void 0 ? _selector_name : ''
+        selector.group ?? '',
+        selector.name ?? ''
     ].join(OPTION_VALUE_DELIMITER);
 }
 /**