@perses-dev/plugin-system 0.46.0 → 0.47.0

package/dist/cjs/stories/shared-utils/decorators/{WithPluginSystemTemplateVariables.js → WithPluginSystemVariables.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,28 +14,28 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithPluginSystemTemplateVariables", {
+Object.defineProperty(exports, "WithPluginSystemVariables", {
     enumerable: true,
     get: function() {
-        return WithPluginSystemTemplateVariables;
+        return WithPluginSystemVariables;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _runtime = require("../../../runtime");
 // Type guard because storybook types parameters as `any`
-function isWithTemplateVariableParameter(parameter) {
+function isWithVariableParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const WithPluginSystemTemplateVariables = (Story, context)=>{
-    const initParameter = context.parameters.withPluginSystemTemplateVariables;
+const WithPluginSystemVariables = (Story, context)=>{
+    const initParameter = context.parameters.withPluginSystemVariables;
     const defaultValue = {
         state: {}
     };
-    const parameter = isWithTemplateVariableParameter(initParameter) ? initParameter : {
+    const parameter = isWithVariableParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TemplateVariableContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.VariableContext.Provider, {
         value: props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -18,7 +18,7 @@ _export_star(require("./WithDataQueries"), exports);
 _export_star(require("./WithPluginRegistry"), exports);
 _export_star(require("./WithPluginSystemBuiltinVariables"), exports);
 _export_star(require("./WithPluginSystemDatasourceStore"), exports);
-_export_star(require("./WithPluginSystemTemplateVariables"), exports);
+_export_star(require("./WithPluginSystemVariables"), exports);
 _export_star(require("./WithTimeRange"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test/mock-data.js

@@ -64,14 +64,35 @@ const MOCK_TIME_SERIES_DATA = {
     ]
 };
 const MOCK_TRACE_DATA = {
-    traces: [
+    searchResult: [
         {
             durationMs: 1120,
-            errorCount: 0,
-            spanCount: 10,
+            serviceStats: {
+                'shop-backend': {
+                    spanCount: 4,
+                    errorCount: 0
+                },
+                'cart-service': {
+                    spanCount: 2,
+                    errorCount: 0
+                },
+                'article-service': {
+                    spanCount: 2,
+                    errorCount: 0
+                },
+                'auth-service': {
+                    spanCount: 1,
+                    errorCount: 0
+                },
+                postgres: {
+                    spanCount: 1,
+                    errorCount: 0
+                }
+            },
             startTimeUnixMs: 1699916103945861,
             traceId: '95ba9202315c29c801b5aa41452aa775',
-            name: 'rootServiceName="shop-backend", rootTraceName="shop-backend"'
+            rootServiceName: 'shop-backend',
+            rootTraceName: 'article-to-cart'
         }
     ],
     metadata: {

package/dist/cjs/test/render.js

@@ -25,13 +25,6 @@ const _react = require("@testing-library/react");
 const _reactquery = require("@tanstack/react-query");
 const _PluginRegistry = require("../components/PluginRegistry");
 const _testplugins = require("./test-plugins");
-const testLogger = {
-    log: console.log,
-    warn: console.warn,
-    error: ()=>{
-    // Don't log network errors in tests to the console
-    }
-};
 function renderWithContext(ui, renderOptions, contextOptions) {
     // Create a new QueryClient for each test to avoid caching issues
     const queryClient = new _reactquery.QueryClient({
@@ -40,8 +33,7 @@ function renderWithContext(ui, renderOptions, contextOptions) {
                 refetchOnWindowFocus: false,
                 retry: false
             }
-        },
-        logger: testLogger
+        }
     });
     var _contextOptions_defaultPluginKinds;
     return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {

package/dist/cjs/test/test-plugins/bert/index.js

@@ -60,30 +60,31 @@ const BertPanel1 = {
             option1: ''
         })
 };
+function BertPanel2Editor({ value, onChange }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
+                htmlFor: "editor-input",
+                children: "BertPanel2 editor"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                type: "text",
+                id: "editor-input",
+                value: value.option2,
+                onChange: (e)=>onChange({
+                        ...value,
+                        option2: e.target.value
+                    })
+            })
+        ]
+    });
+}
 const BertPanel2 = {
     PanelComponent: ()=>null,
     panelOptionsEditorComponents: [
         {
             label: 'Settings',
-            content: function BertPanel2Editor({ value, onChange }) {
-                return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
-                            htmlFor: "editor-input",
-                            children: "BertPanel2 editor"
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                            type: "text",
-                            id: "editor-input",
-                            value: value.option2,
-                            onChange: (e)=>onChange({
-                                    ...value,
-                                    option2: e.target.value
-                                })
-                        })
-                    ]
-                });
-            }
+            content: BertPanel2Editor
         },
         {
             label: 'Custom Tab',

package/dist/cjs/utils/variables.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -21,18 +21,18 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    parseTemplateVariables: function() {
-        return parseTemplateVariables;
+    parseVariables: function() {
+        return parseVariables;
     },
-    replaceTemplateVariable: function() {
-        return replaceTemplateVariable;
+    replaceVariable: function() {
+        return replaceVariable;
     },
-    replaceTemplateVariables: function() {
-        return replaceTemplateVariables;
+    replaceVariables: function() {
+        return replaceVariables;
     }
 });
-function replaceTemplateVariables(text, variableState) {
-    const variables = parseTemplateVariables(text);
+function replaceVariables(text, variableState) {
+    const variables = parseVariables(text);
     let finalText = text;
     variables// Sorting variables by their length.
     // In order to not have a variable name have contained in another variable name.
@@ -40,34 +40,34 @@ function replaceTemplateVariables(text, variableState) {
     .sort((a, b)=>b.length - a.length).forEach((v)=>{
         const variable = variableState[v];
         if (variable && (variable === null || variable === void 0 ? void 0 : variable.value)) {
-            finalText = replaceTemplateVariable(finalText, v, variable === null || variable === void 0 ? void 0 : variable.value);
+            finalText = replaceVariable(finalText, v, variable === null || variable === void 0 ? void 0 : variable.value);
         }
     });
     return finalText;
 }
-function replaceTemplateVariable(text, varName, templateVariableValue) {
-    const variableTemplate = '$' + varName;
-    const bracketsVariableTemplate = '${' + varName + '}';
+function replaceVariable(text, varName, variableValue) {
+    const variableSyntax = '$' + varName;
+    const alternativeVariableSyntax = '${' + varName + '}';
     let replaceString = '';
-    if (Array.isArray(templateVariableValue)) {
-        replaceString = `(${templateVariableValue.join('|')})`; // regex style
+    if (Array.isArray(variableValue)) {
+        replaceString = `(${variableValue.join('|')})`; // regex style
     }
-    if (typeof templateVariableValue === 'string') {
-        replaceString = templateVariableValue;
+    if (typeof variableValue === 'string') {
+        replaceString = variableValue;
     }
-    text = text.replaceAll(variableTemplate, replaceString);
-    return text.replaceAll(bracketsVariableTemplate, replaceString);
+    text = text.replaceAll(variableSyntax, replaceString);
+    return text.replaceAll(alternativeVariableSyntax, replaceString);
 }
-// This regular expression is designed to identify variable references in a template string.
+// This regular expression is designed to identify variable references in a string.
 // It supports two formats for referencing variables:
 // 1. $variableName - This is a simpler format, and the regular expression captures the variable name (\w+ matches one or more word characters).
 // 2. ${variableName} - This is a more complex format and the regular expression captures the variable name (\w+ matches one or more word characters) in the curly braces.
 // 3. [COMING SOON] ${variableName:value} - This is a more complex format that allows specifying a format function as well.
 // TODO: Fix this lint error
 // eslint-disable-next-line no-useless-escape
-const TEMPLATE_VARIABLE_REGEX = /\$(\w+)|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/gm;
-const parseTemplateVariables = (text)=>{
-    const regex = TEMPLATE_VARIABLE_REGEX;
+const VARIABLE_REGEX = /\$(\w+)|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/gm;
+const parseVariables = (text)=>{
+    const regex = VARIABLE_REGEX;
     const matches = new Set();
     let match;
     while((match = regex.exec(text)) !== null){

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

@@ -1,11 +1,11 @@
-import { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';
+import { Action, DatasourceDefinition } from '@perses-dev/core';
 import { DispatchWithoutAction } from 'react';
 interface DatasourceEditorFormProps {
     initialDatasourceDefinition: DatasourceDefinition;
     initialAction: Action;
     isDraft: boolean;
     isReadonly?: boolean;
-    onSave: (name: string, spec: DatasourceSpec) => void;
+    onSave: (def: DatasourceDefinition) => void;
     onClose: DispatchWithoutAction;
     onDelete?: DispatchWithoutAction;
 }

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":"AAcA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,qBAAqB,EAAyB,MAAM,OAAO,CAAC;AA2BrE,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CA+OpE"}
+{"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,OAAO,EAAE,qBAAqB,EAAY,MAAM,OAAO,CAAC;AAQxD,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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,2CAuOpE"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -11,79 +11,52 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useImmer } from 'use-immer';
 import { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { DiscardChangesConfirmationDialog } from '@perses-dev/components';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { PluginEditor } from '../PluginEditor';
 import { getSubmitText, getTitleAction } from '../../utils';
-import { datasourceEditValidationSchema } from '../../validation';
-/**
- * This preprocessing ensures that we always have a defined object for the `display` property
- * @param datasource
- */ function getInitialState(datasourceDefinition) {
-    var _datasourceDefinition_spec_display, _datasourceDefinition_spec_display1;
-    var _datasourceDefinition_spec_display_name, _datasourceDefinition_spec_display_description;
-    const patchedDisplay = {
-        name: (_datasourceDefinition_spec_display_name = (_datasourceDefinition_spec_display = datasourceDefinition.spec.display) === null || _datasourceDefinition_spec_display === void 0 ? void 0 : _datasourceDefinition_spec_display.name) !== null && _datasourceDefinition_spec_display_name !== void 0 ? _datasourceDefinition_spec_display_name : '',
-        description: (_datasourceDefinition_spec_display_description = (_datasourceDefinition_spec_display1 = datasourceDefinition.spec.display) === null || _datasourceDefinition_spec_display1 === void 0 ? void 0 : _datasourceDefinition_spec_display1.description) !== null && _datasourceDefinition_spec_display_description !== void 0 ? _datasourceDefinition_spec_display_description : ''
-    };
-    return {
-        name: datasourceDefinition.name,
-        spec: {
-            ...datasourceDefinition.spec,
-            display: patchedDisplay
-        }
-    };
-}
+import { useValidationSchemas } from '../../context';
 export function DatasourceEditorForm(props) {
-    var _state_spec_display, _state_spec_display1;
     const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;
-    const initialState = getInitialState(initialDatasourceDefinition);
-    const [state, setState] = useImmer(initialState);
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     const [action, setAction] = useState(initialAction);
     const titleAction = getTitleAction(action, isDraft);
     const submitText = getSubmitText(action, isDraft);
+    const { datasourceEditorSchema } = useValidationSchemas();
     const form = useForm({
-        resolver: zodResolver(datasourceEditValidationSchema),
+        resolver: zodResolver(datasourceEditorSchema),
         mode: 'onBlur',
-        defaultValues: {
-            name: state.name,
-            title: (_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name,
-            description: (_state_spec_display1 = state.spec.display) === null || _state_spec_display1 === void 0 ? void 0 : _state_spec_display1.description,
-            default: state.spec.default
-        }
+        defaultValues: initialDatasourceDefinition
     });
-    const processForm = ()=>{
-        var _state_spec_display, _state_spec_display1, _state_spec_display2, _state_spec_display3;
-        // reset display attributes to undefined when empty, because we don't want to save empty strings
-        onSave(state.name, {
-            ...state.spec,
-            display: {
-                name: ((_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name) === '' ? undefined : (_state_spec_display1 = state.spec.display) === null || _state_spec_display1 === void 0 ? void 0 : _state_spec_display1.name,
-                description: ((_state_spec_display2 = state.spec.display) === null || _state_spec_display2 === void 0 ? void 0 : _state_spec_display2.description) === '' ? undefined : (_state_spec_display3 = state.spec.display) === null || _state_spec_display3 === void 0 ? void 0 : _state_spec_display3.description
-            }
-        });
+    /*
+   * 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) {
+            delete result.spec.display;
+        }
+        return result;
+    }
+    const processForm = (data)=>{
+        onSave(clearFormData(data));
     };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
-    const handleCancel = useCallback(()=>{
-        if (JSON.stringify(initialState) !== JSON.stringify(state)) {
+    function handleCancel() {
+        if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
         }
-    }, [
-        state,
-        initialState,
-        setDiscardDialogOpened,
-        onClose
-    ]);
+    }
     return /*#__PURE__*/ _jsxs(FormProvider, {
         ...form,
         children: [
@@ -175,10 +148,12 @@ export function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ _jsx(Controller, {
+                                    control: form.control,
                                     name: "name",
-                                    render: ({ field, fieldState })=>{
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                        var _field_value;
+                                        return _jsx(TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -193,11 +168,9 @@ export function DatasourceEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.name = event.target.value;
-                                                });
                                             }
                                         });
                                     }
@@ -207,10 +180,12 @@ export function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 8,
                                 children: /*#__PURE__*/ _jsx(Controller, {
-                                    name: "title",
-                                    render: ({ field, fieldState })=>{
+                                    control: form.control,
+                                    name: "spec.display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                        var _field_value;
+                                        return _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "title",
@@ -223,13 +198,9 @@ export function DatasourceEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
-                                                setState((draft)=>{
-                                                    field.onChange(event);
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.name = event.target.value;
-                                                    }
-                                                });
+                                                field.onChange(event);
                                             }
                                         });
                                     }
@@ -239,10 +210,12 @@ export function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 12,
                                 children: /*#__PURE__*/ _jsx(Controller, {
-                                    name: "description",
-                                    render: ({ field, fieldState })=>{
+                                    control: form.control,
+                                    name: "spec.display.description",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                        var _field_value;
+                                        return _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "description",
@@ -255,13 +228,9 @@ export function DatasourceEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.description = event.target.value;
-                                                    }
-                                                });
                                             }
                                         });
                                     }
@@ -276,28 +245,26 @@ export function DatasourceEditorForm(props) {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     children: [
                                         /*#__PURE__*/ _jsx(Controller, {
-                                            name: "default",
+                                            control: form.control,
+                                            name: "spec.default",
                                             render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
-                                                    ...field,
+                                                    label: "Set as default",
                                                     control: /*#__PURE__*/ _jsx(Switch, {
-                                                        checked: state.spec.default,
+                                                        ...field,
+                                                        checked: !!field.value,
                                                         readOnly: action === 'read',
                                                         onChange: (event)=>{
                                                             if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
                                                             field.onChange(event);
-                                                            setState((draft)=>{
-                                                                draft.spec.default = event.target.checked;
-                                                            });
                                                         }
-                                                    }),
-                                                    label: "Set as default"
+                                                    })
                                                 })
                                         }),
                                         /*#__PURE__*/ _jsxs(Typography, {
                                             variant: "caption",
                                             children: [
                                                 "Whether this datasource should be the default ",
-                                                state.spec.plugin.kind,
+                                                form.getValues().spec.plugin.kind,
                                                 " to be used"
                                             ]
                                         })
@@ -312,26 +279,30 @@ export function DatasourceEditorForm(props) {
                         variant: "h3",
                         children: "Plugin Options"
                     }),
-                    /*#__PURE__*/ _jsx(PluginEditor, {
-                        width: "100%",
-                        pluginTypes: [
-                            'Datasource'
-                        ],
-                        pluginKindLabel: "Source",
-                        value: {
-                            selection: {
-                                kind: state.spec.plugin.kind,
-                                type: 'Datasource'
-                            },
-                            spec: state.spec.plugin.spec
-                        },
-                        isReadonly: action === 'read',
-                        onChange: (v)=>{
-                            setState((draft)=>{
-                                draft.spec.plugin.kind = v.selection.kind;
-                                draft.spec.plugin.spec = v.spec;
-                            });
-                        }
+                    /*#__PURE__*/ _jsx(Controller, {
+                        control: form.control,
+                        name: "spec.plugin",
+                        render: ({ field })=>/*#__PURE__*/ _jsx(PluginEditor, {
+                                width: "100%",
+                                pluginTypes: [
+                                    'Datasource'
+                                ],
+                                pluginKindLabel: "Source",
+                                value: {
+                                    selection: {
+                                        type: 'Datasource',
+                                        kind: field.value.kind
+                                    },
+                                    spec: field.value.spec
+                                },
+                                isReadonly: action === 'read',
+                                onChange: (v)=>{
+                                    field.onChange({
+                                        kind: v.selection.kind,
+                                        spec: v.spec
+                                    });
+                                }
+                            })
                     })
                 ]
             }),