@perses-dev/plugin-system 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/components/CalculationSelector/CalculationSelector.js

@@ -29,7 +29,7 @@ const CALC_OPTIONS = Object.entries(_core.CALCULATIONS_CONFIG).map(([id, config]
         ...config
     };
 });
-function CalculationSelector({ value , onChange  }) {
+function CalculationSelector({ value, onChange }) {
     const handleCalculationChange = (_, newValue)=>{
         onChange(newValue.id);
     };

package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -21,79 +21,50 @@ Object.defineProperty(exports, "DatasourceEditorForm", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _useimmer = require("use-immer");
+const _zod = require("@hookform/resolvers/zod");
 const _material = require("@mui/material");
-const _react = require("react");
 const _components = require("@perses-dev/components");
+const _react = require("react");
 const _reacthookform = require("react-hook-form");
-const _zod = require("@hookform/resolvers/zod");
-const _PluginEditor = require("../PluginEditor");
+const _context = require("../../context");
 const _utils = require("../../utils");
-const _validation = require("../../validation");
-/**
- * This preprocessing ensures that we always have a defined object for the `display` property
- * @param datasource
- */ function getInitialState(name, spec) {
-    var _spec_display, _spec_display1;
-    var _spec_display_name, _spec_display_description;
-    const patchedDisplay = {
-        name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : '',
-        description: (_spec_display_description = (_spec_display1 = spec.display) === null || _spec_display1 === void 0 ? void 0 : _spec_display1.description) !== null && _spec_display_description !== void 0 ? _spec_display_description : ''
-    };
-    return {
-        name: name,
-        spec: {
-            ...spec,
-            display: patchedDisplay
-        }
-    };
-}
+const _PluginEditor = require("../PluginEditor");
 function DatasourceEditorForm(props) {
-    var _state_spec_display, _state_spec_display1;
-    const { initialName , initialSpec , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
-    const initialState = getInitialState(initialName, initialSpec);
-    const [state, setState] = (0, _useimmer.useImmer)(initialState);
+    const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
-    const [action, setAction] = (0, _react.useState)(initialAction);
     const titleAction = (0, _utils.getTitleAction)(action, isDraft);
     const submitText = (0, _utils.getSubmitText)(action, isDraft);
+    const { datasourceEditorSchema } = (0, _context.useValidationSchemas)();
     const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(_validation.datasourceEditValidationSchema),
+        resolver: (0, _zod.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) {
+        const result = {
+            ...data
+        };
+        if (result.spec.display?.name === undefined && result.spec.display?.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 = (0, _react.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__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -112,61 +83,15 @@ function DatasourceEditorForm(props) {
                             " Datasource"
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: action === 'read' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    disabled: isReadonly,
-                                    variant: "contained",
-                                    onClick: ()=>setAction('update'),
-                                    children: "Edit"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "error",
-                                    disabled: isReadonly,
-                                    variant: "outlined",
-                                    onClick: onDelete,
-                                    children: "Delete"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                                    orientation: "vertical",
-                                    flexItem: true,
-                                    sx: (theme)=>({
-                                            borderColor: theme.palette.grey['500'],
-                                            '&.MuiDivider-root': {
-                                                marginLeft: 2,
-                                                marginRight: 1
-                                            }
-                                        })
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: onClose,
-                                    children: "Close"
-                                })
-                            ]
-                        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    variant: "contained",
-                                    disabled: !form.formState.isValid,
-                                    onClick: form.handleSubmit(processForm),
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
                     })
                 ]
             }),
@@ -185,10 +110,9 @@ function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
                                     name: "name",
-                                    render: ({ field , fieldState  })=>{
-                                        var _fieldState_error;
-                                        /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -202,25 +126,21 @@ function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.name = event.target.value;
-                                                });
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                 item: true,
                                 xs: 8,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    name: "title",
-                                    render: ({ field , fieldState  })=>{
-                                        var _fieldState_error;
-                                        /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    control: form.control,
+                                    name: "spec.display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "title",
@@ -232,27 +152,21 @@ function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
-                                                setState((draft)=>{
-                                                    field.onChange(event);
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.name = event.target.value;
-                                                    }
-                                                });
+                                                field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                 item: true,
                                 xs: 12,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    name: "description",
-                                    render: ({ field , fieldState  })=>{
-                                        var _fieldState_error;
-                                        /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    control: form.control,
+                                    name: "spec.display.description",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "description",
@@ -264,17 +178,12 @@ function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.description = event.target.value;
-                                                    }
-                                                });
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -286,28 +195,26 @@ function DatasourceEditorForm(props) {
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                            name: "default",
-                                            render: ({ field  })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                                    ...field,
+                                            control: form.control,
+                                            name: "spec.default",
+                                            render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                                    label: "Set as default",
                                                     control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
                                             variant: "caption",
                                             children: [
                                                 "Whether this datasource should be the default ",
-                                                state.spec.plugin.kind,
+                                                form.getValues().spec.plugin.kind,
                                                 " to be used"
                                             ]
                                         })
@@ -322,17 +229,30 @@ function DatasourceEditorForm(props) {
                         variant: "h3",
                         children: "Plugin Options"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
-                        width: "100%",
-                        pluginType: "Datasource",
-                        pluginKindLabel: "Source",
-                        value: state.spec.plugin,
-                        isReadonly: action === 'read',
-                        onChange: (v)=>{
-                            setState((draft)=>{
-                                draft.spec.plugin = v;
-                            });
-                        }
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: form.control,
+                        name: "spec.plugin",
+                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.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
+                                    });
+                                }
+                            })
                     })
                 ]
             }),

package/dist/cjs/components/DatasourceSelect.js

@@ -21,11 +21,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DatasourceSelect: function() {
-        return DatasourceSelect;
-    },
     DatasourceName: function() {
         return DatasourceName;
+    },
+    DatasourceSelect: function() {
+        return DatasourceSelect;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -39,14 +39,13 @@ function _interop_require_default(obj) {
     };
 }
 function DatasourceSelect(props) {
-    const { datasourcePluginKind , value , project , onChange , ...others } = props;
-    const { data , isLoading  } = (0, _runtime.useListDatasourceSelectItems)(datasourcePluginKind, project);
+    const { datasourcePluginKind, value, project, onChange, ...others } = props;
+    const { data, isLoading } = (0, _runtime.useListDatasourceSelectItems)(datasourcePluginKind, project);
     // Rebuild the group of the value if not provided
     const defaultValue = (0, _react.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
@@ -57,15 +56,14 @@ function DatasourceSelect(props) {
     ]);
     // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
     const menuItems = (0, _react.useMemo)(()=>{
-        var _item_saved;
-        return (data !== null && data !== void 0 ? data : []).map((itemGroup)=>({
+        return (data ?? []).map((itemGroup)=>({
                 group: itemGroup.group,
                 editLink: itemGroup.editLink,
                 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)
                     }))
@@ -140,7 +138,7 @@ function DatasourceSelect(props) {
     });
 }
 function DatasourceName(props) {
-    const { name , overridden , overriding  } = props;
+    const { name, overridden, overriding } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             `${name} `,
@@ -161,11 +159,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);
 }
 /**