@perses-dev/plugin-system 0.46.0 → 0.47.0-rc0

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

@@ -26,13 +26,11 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
-const _useimmer = require("use-immer");
 const _utils = require("../../../utils");
 const _variablemodel = require("../variable-model");
 const _PluginEditor = require("../../PluginEditor");
-const _validation = require("../../../validation");
+const _context = require("../../../context");
 const _VariablePreview = require("./VariablePreview");
-const _variableeditorformmodel = require("./variable-editor-form-model");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -79,55 +77,401 @@ function FallbackPreview() {
         children: "Error previewing values"
     });
 }
+function TextVariableEditorForm({ action, control }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                py: 1,
+                variant: "subtitle1",
+                children: "Text Options"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: "spec.value",
+                        render: ({ field, fieldState })=>/*#__PURE__*/ {
+                            var _fieldState_error;
+                            var _field_value;
+                            return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
+                                            values: [
+                                                field.value
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        ...field,
+                                        label: "Value",
+                                        InputLabelProps: {
+                                            shrink: action === 'read' ? true : undefined
+                                        },
+                                        InputProps: {
+                                            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 : '',
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                        }
+                                    })
+                                ]
+                            });
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: "spec.constant",
+                        render: ({ field })=>/*#__PURE__*/ {
+                            var _field_value;
+                            return (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                label: "Constant",
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                    ...field,
+                                    checked: !!field.value,
+                                    readOnly: action === 'read',
+                                    value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : false,
+                                    onChange: (event)=>{
+                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                        field.onChange(event);
+                                    }
+                                })
+                            });
+                        }
+                    })
+                ]
+            })
+        ]
+    });
+}
+function ListVariableEditorForm({ action, control }) {
+    const form = (0, _reacthookform.useFormContext)();
+    /** We use `previewSpec` to know when to explicitly update the
+   * spec that will be used for preview. The reason why we do this is to avoid
+   * having to re-fetch the values when the user is still editing the spec.
+   */ const [previewSpec, setPreviewSpec] = (0, _react.useState)(form.getValues());
+    const refreshPreview = ()=>{
+        setPreviewSpec(form.getValues());
+    };
+    const kind = (0, _reacthookform.useWatch)({
+        control: control,
+        name: 'spec.plugin.kind'
+    });
+    const _allowAllValue = (0, _reacthookform.useWatch)({
+        control: control,
+        name: 'spec.allowAllValue'
+    });
+    // When variable kind is selected we need to provide default values
+    // TODO: check if react-hook-form has a better way to do this
+    const values = form.getValues();
+    if (values.spec.allowAllValue === undefined) {
+        form.setValue('spec.allowAllValue', false);
+    }
+    if (values.spec.allowMultiple === undefined) {
+        form.setValue('spec.allowMultiple', false);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                py: 1,
+                variant: "subtitle1",
+                children: "List Options"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                spacing: 2,
+                mb: 2,
+                children: [
+                    kind ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                            FallbackComponent: FallbackPreview,
+                            resetKeys: [
+                                previewSpec
+                            ],
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
+                                definition: previewSpec,
+                                onRefresh: refreshPreview
+                            })
+                        })
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
+                        isLoading: true
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
+                                onClickAway: ()=>refreshPreview(),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: control,
+                                    name: "spec.plugin",
+                                    render: ({ field })=>/*#__PURE__*/ {
+                                        var _field_value, _field_value1;
+                                        var _field_value_kind, _field_value_spec;
+                                        return (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                            width: "100%",
+                                            pluginTypes: [
+                                                'Variable'
+                                            ],
+                                            pluginKindLabel: "Source",
+                                            value: {
+                                                selection: {
+                                                    type: 'Variable',
+                                                    kind: (_field_value_kind = (_field_value = field.value) === null || _field_value === void 0 ? void 0 : _field_value.kind) !== null && _field_value_kind !== void 0 ? _field_value_kind : 'StaticListVariable'
+                                                },
+                                                spec: (_field_value_spec = (_field_value1 = field.value) === null || _field_value1 === void 0 ? void 0 : _field_value1.spec) !== null && _field_value_spec !== void 0 ? _field_value_spec : {
+                                                    values: []
+                                                }
+                                            },
+                                            isReadonly: action === 'read',
+                                            onChange: (v)=>{
+                                                field.onChange({
+                                                    kind: v.selection.kind,
+                                                    spec: v.spec
+                                                });
+                                            }
+                                        });
+                                    }
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                            control: control,
+                            name: "spec.capturingRegexp",
+                            render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                var _fieldState_error;
+                                var _field_value;
+                                return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    ...field,
+                                    label: "Capturing Regexp Filter",
+                                    InputLabelProps: {
+                                        shrink: action === 'read' ? true : undefined
+                                    },
+                                    InputProps: {
+                                        readOnly: action === 'read'
+                                    },
+                                    error: !!fieldState.error,
+                                    value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                    onChange: (event)=>{
+                                        if (event.target.value === '') {
+                                            field.onChange(undefined);
+                                        } else {
+                                            field.onChange(event);
+                                        }
+                                    },
+                                    helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
+                                });
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                            control: control,
+                            name: "spec.sort",
+                            render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                var _fieldState_error;
+                                var _field_value;
+                                return (0, _jsxruntime.jsxs)(_material.TextField, {
+                                    select: true,
+                                    ...field,
+                                    fullWidth: true,
+                                    label: "Sort",
+                                    InputLabelProps: {
+                                        shrink: action === 'read' ? true : undefined
+                                    },
+                                    InputProps: {
+                                        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 : 'none',
+                                    onChange: (event)=>{
+                                        field.onChange(event);
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: "none",
+                                            children: "None"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: "alphabetical-asc",
+                                            children: "Alphabetical, asc"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: "alphabetical-desc",
+                                            children: "Alphabetical, desc"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: "numerical-asc",
+                                            children: "Numerical, asc"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: "numerical-desc",
+                                            children: "Numerical, desc"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: "alphabetical-ci-asc",
+                                            children: "Alphabetical, case-insensitive, asc"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: "alphabetical-ci-desc",
+                                            children: "Alphabetical, case-insensitive, desc"
+                                        })
+                                    ]
+                                });
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                py: 1,
+                variant: "subtitle1",
+                children: "Dropdown Options"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                spacing: "2",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                control: control,
+                                name: "spec.allowMultiple",
+                                render: ({ field })=>/*#__PURE__*/ {
+                                    var _field_value;
+                                    return (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                        label: "Allow Multiple Values",
+                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                            ...field,
+                                            checked: !!field.value,
+                                            readOnly: action === 'read',
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : false,
+                                            onChange: (event)=>{
+                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                field.onChange(event);
+                                            }
+                                        })
+                                    });
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                variant: "caption",
+                                children: "Enables multiple values to be selected at the same time"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                control: control,
+                                name: "spec.allowAllValue",
+                                render: ({ field })=>/*#__PURE__*/ {
+                                    var _field_value;
+                                    return (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                        label: "Allow All option",
+                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                            ...field,
+                                            checked: !!field.value,
+                                            readOnly: action === 'read',
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : false,
+                                            onChange: (event)=>{
+                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                field.onChange(event);
+                                            }
+                                        })
+                                    });
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                mb: 1,
+                                variant: "caption",
+                                children: "Enables an option to include all variable values"
+                            }),
+                            _allowAllValue && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                control: control,
+                                name: "spec.customAllValue",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                    var _fieldState_error;
+                                    var _field_value;
+                                    return (0, _jsxruntime.jsx)(_material.TextField, {
+                                        ...field,
+                                        fullWidth: true,
+                                        label: "Custom All Value",
+                                        InputLabelProps: {
+                                            shrink: action === 'read' ? true : undefined
+                                        },
+                                        InputProps: {
+                                            readOnly: action === 'read'
+                                        },
+                                        error: !!fieldState.error,
+                                        helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'When All is selected, this value will be used',
+                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        onChange: (event)=>{
+                                            if (event.target.value === '') {
+                                                field.onChange(undefined);
+                                            } else {
+                                                field.onChange(event);
+                                            }
+                                        }
+                                    });
+                                }
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
 function VariableEditorForm(props) {
     const { initialVariableDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;
-    const initialState = (0, _variableeditorformmodel.getInitialState)(initialVariableDefinition);
-    const [state, setState] = (0, _useimmer.useImmer)(initialState);
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
-    const [previewKey, setPreviewKey] = (0, _react.useState)(0);
     const [action, setAction] = (0, _react.useState)(initialAction);
-    const refreshPreview = ()=>{
-        setPreviewKey((prev)=>prev + 1);
-    };
-    /** We use the `previewKey` that we increment to know when to explicitly update the
-   * spec that will be used for preview. The reason why we do this is to avoid
-   * having to re-fetch the values when the user is still editing the spec.
-   */ const previewSpec = (0, _react.useMemo)(()=>{
-        return (0, _variableeditorformmodel.getVariableDefinitionFromState)(state);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        previewKey
-    ]);
     const titleAction = (0, _utils.getTitleAction)(action, isDraft);
     const submitText = (0, _utils.getSubmitText)(action, isDraft);
+    const { variableEditorSchema } = (0, _context.useValidationSchemas)();
     const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(_validation.variableEditorValidationSchema),
+        resolver: (0, _zod.zodResolver)(variableEditorSchema),
         mode: 'onBlur',
-        defaultValues: initialState
+        defaultValues: initialVariableDefinition
     });
-    const processForm = ()=>{
+    const kind = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'kind'
+    });
+    function clearFormData(data) {
+        var _result_spec_display, _result_spec_display1, _result_spec_display2;
+        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 && ((_result_spec_display2 = result.spec.display) === null || _result_spec_display2 === void 0 ? void 0 : _result_spec_display2.hidden) === undefined) {
+            delete result.spec.display;
+        }
+        return result;
+    }
+    const processForm = (data)=>{
         // reset display attributes to undefined when empty, because we don't want to save empty strings
-        onSave((0, _variableeditorformmodel.getVariableDefinitionFromState)({
-            ...state,
-            title: state.title === '' ? undefined : state.title,
-            description: state.description === '' ? undefined : state.description
-        }));
+        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(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
         }
-    }, [
-        initialState,
-        state,
-        onClose
-    ]);
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -220,10 +564,12 @@ function VariableEditorForm(props) {
                                 item: true,
                                 xs: 8,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    name: "name",
-                                    render: ({ field, fieldState })=>{
+                                    control: form.control,
+                                    name: "spec.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        var _field_value;
+                                        return (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -237,12 +583,9 @@ function VariableEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: state.name,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.name = event.target.value;
-                                                });
                                             }
                                         });
                                     }
@@ -252,10 +595,11 @@ function VariableEditorForm(props) {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    name: "title",
+                                    control: form.control,
+                                    name: "spec.display.name",
                                     render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        var _state_title;
+                                        var _field_value;
                                         return (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
@@ -268,12 +612,9 @@ function VariableEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: (_state_title = state.title) !== null && _state_title !== void 0 ? _state_title : '',
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.title = event.target.value;
-                                                });
                                             }
                                         });
                                     }
@@ -283,10 +624,11 @@ function VariableEditorForm(props) {
                                 item: true,
                                 xs: 8,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    name: "description",
+                                    control: form.control,
+                                    name: "spec.display.description",
                                     render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        var _state_description;
+                                        var _field_value;
                                         return (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
@@ -299,12 +641,9 @@ function VariableEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: (_state_description = state.description) !== null && _state_description !== void 0 ? _state_description : '',
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.description = event.target.value;
-                                                });
                                             }
                                         });
                                     }
@@ -314,10 +653,12 @@ function VariableEditorForm(props) {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
                                     name: "kind",
-                                    render: ({ field, fieldState })=>{
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        var _field_value;
+                                        return (0, _jsxruntime.jsx)(_material.TextField, {
                                             select: true,
                                             ...field,
                                             fullWidth: true,
@@ -330,12 +671,9 @@ function VariableEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: state.kind,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : 'TextVariable',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.kind = event.target.value;
-                                                });
                                             },
                                             children: _variablemodel.VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                                     value: v.kind,
@@ -348,325 +686,19 @@ function VariableEditorForm(props) {
                         ]
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
-                    state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "Text Options"
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                spacing: 2,
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
-                                            values: [
-                                                state.textVariableFields.value
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                        name: "textVariableFields.value",
-                                        render: ({ field, fieldState })=>{
-                                            var _fieldState_error;
-                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                ...field,
-                                                label: "Value",
-                                                InputLabelProps: {
-                                                    shrink: action === 'read' ? true : undefined
-                                                },
-                                                InputProps: {
-                                                    readOnly: action === 'read'
-                                                },
-                                                error: !!fieldState.error,
-                                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                                value: state.textVariableFields.value,
-                                                onChange: (event)=>{
-                                                    field.onChange(event);
-                                                    setState((draft)=>{
-                                                        draft.textVariableFields.value = event.target.value;
-                                                    });
-                                                }
-                                            });
-                                        }
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                        name: "textVariableFields.constant",
-                                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                                label: "Constant",
-                                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                                    ...field,
-                                                    checked: !!field.value,
-                                                    readOnly: action === 'read',
-                                                    value: state.textVariableFields.constant,
-                                                    onChange: (event)=>{
-                                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                                        field.onChange(event);
-                                                        setState((draft)=>{
-                                                            draft.textVariableFields.constant = event.target.checked;
-                                                        });
-                                                    }
-                                                })
-                                            })
-                                    })
-                                ]
-                            })
-                        ]
+                    kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(TextVariableEditorForm, {
+                            action: action,
+                            control: form.control
+                        })
                     }),
-                    state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "List Options"
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                spacing: 2,
-                                mb: 2,
-                                children: [
-                                    state.listVariableFields.plugin.kind ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                            FallbackComponent: FallbackPreview,
-                                            resetKeys: [
-                                                previewSpec
-                                            ],
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
-                                                definition: previewSpec,
-                                                onRefresh: refreshPreview
-                                            })
-                                        })
-                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
-                                        isLoading: true
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
-                                                onClickAway: ()=>refreshPreview(),
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {})
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: "listVariableFields.plugin",
-                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
-                                                        width: "100%",
-                                                        pluginTypes: [
-                                                            'Variable'
-                                                        ],
-                                                        pluginKindLabel: "Source",
-                                                        isReadonly: action === 'read',
-                                                        value: {
-                                                            selection: {
-                                                                kind: state.listVariableFields.plugin.kind,
-                                                                type: 'Variable'
-                                                            },
-                                                            spec: state.listVariableFields.plugin.spec
-                                                        },
-                                                        onChange: (val)=>{
-                                                            field.onChange({
-                                                                spec: val.spec,
-                                                                kind: val.selection.kind
-                                                            });
-                                                            setState((draft)=>{
-                                                                draft.listVariableFields.plugin.kind = val.selection.kind;
-                                                                draft.listVariableFields.plugin.spec = val.spec;
-                                                            });
-                                                        }
-                                                    })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                            name: "listVariableFields.capturingRegexp",
-                                            render: ({ field, fieldState })=>/*#__PURE__*/ {
-                                                var _fieldState_error;
-                                                var _state_listVariableFields_capturingRegexp;
-                                                return (0, _jsxruntime.jsx)(_material.TextField, {
-                                                    ...field,
-                                                    label: "Capturing Regexp Filter",
-                                                    InputLabelProps: {
-                                                        shrink: action === 'read' ? true : undefined
-                                                    },
-                                                    InputProps: {
-                                                        readOnly: action === 'read'
-                                                    },
-                                                    error: !!fieldState.error,
-                                                    value: (_state_listVariableFields_capturingRegexp = state.listVariableFields.capturingRegexp) !== null && _state_listVariableFields_capturingRegexp !== void 0 ? _state_listVariableFields_capturingRegexp : '',
-                                                    onChange: (event)=>{
-                                                        field.onChange(event);
-                                                        setState((draft)=>{
-                                                            if (event.target.value) {
-                                                                // TODO: do a better fix, if empty string => it should skip the filter
-                                                                draft.listVariableFields.capturingRegexp = event.target.value;
-                                                            } else {
-                                                                draft.listVariableFields.capturingRegexp = undefined;
-                                                            }
-                                                        });
-                                                    },
-                                                    helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
-                                                });
-                                            }
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                            name: "listVariableFields.sort",
-                                            render: ({ field, fieldState })=>/*#__PURE__*/ {
-                                                var _fieldState_error;
-                                                var _state_listVariableFields_sort;
-                                                return (0, _jsxruntime.jsxs)(_material.TextField, {
-                                                    select: true,
-                                                    ...field,
-                                                    fullWidth: true,
-                                                    label: "Sort",
-                                                    InputLabelProps: {
-                                                        shrink: action === 'read' ? true : undefined
-                                                    },
-                                                    InputProps: {
-                                                        readOnly: action === 'read'
-                                                    },
-                                                    error: !!fieldState.error,
-                                                    helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                                    value: (_state_listVariableFields_sort = state.listVariableFields.sort) !== null && _state_listVariableFields_sort !== void 0 ? _state_listVariableFields_sort : 'none',
-                                                    onChange: (event)=>{
-                                                        field.onChange(event);
-                                                        setState((draft)=>{
-                                                            draft.listVariableFields.sort = event.target.value;
-                                                        });
-                                                    },
-                                                    children: [
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                            value: "none",
-                                                            children: "None"
-                                                        }),
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                            value: "alphabetical-asc",
-                                                            children: "Alphabetical, asc"
-                                                        }),
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                            value: "alphabetical-desc",
-                                                            children: "Alphabetical, desc"
-                                                        }),
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                            value: "numerical-asc",
-                                                            children: "Numerical, asc"
-                                                        }),
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                            value: "numerical-desc",
-                                                            children: "Numerical, desc"
-                                                        }),
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                            value: "alphabetical-ci-asc",
-                                                            children: "Alphabetical, case-insensitive, asc"
-                                                        }),
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                            value: "alphabetical-ci-desc",
-                                                            children: "Alphabetical, case-insensitive, desc"
-                                                        })
-                                                    ]
-                                                });
-                                            }
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "Dropdown Options"
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                spacing: "2",
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: "listVariableFields.allowMultiple",
-                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                                        label: "Allow Multiple Values",
-                                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                                            ...field,
-                                                            checked: !!field.value,
-                                                            readOnly: action === 'read',
-                                                            value: state.listVariableFields.allowMultiple,
-                                                            onChange: (event)=>{
-                                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                                                field.onChange(event);
-                                                                setState((draft)=>{
-                                                                    draft.listVariableFields.allowMultiple = event.target.checked;
-                                                                });
-                                                            }
-                                                        })
-                                                    })
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                                variant: "caption",
-                                                children: "Enables multiple values to be selected at the same time"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: "listVariableFields.allowAllValue",
-                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                                        label: "Allow All option",
-                                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                                            ...field,
-                                                            checked: !!field.value,
-                                                            readOnly: action === 'read',
-                                                            value: state.listVariableFields.allowAllValue,
-                                                            onChange: (event)=>{
-                                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                                                field.onChange(event);
-                                                                setState((draft)=>{
-                                                                    draft.listVariableFields.allowAllValue = event.target.checked;
-                                                                });
-                                                            }
-                                                        })
-                                                    })
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                                mb: 1,
-                                                variant: "caption",
-                                                children: "Enables an option to include all variable values"
-                                            }),
-                                            state.listVariableFields.allowAllValue && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: "listVariableFields.customAllValue",
-                                                render: ({ field, fieldState })=>/*#__PURE__*/ {
-                                                    var _fieldState_error;
-                                                    var _state_listVariableFields_customAllValue;
-                                                    return (0, _jsxruntime.jsx)(_material.TextField, {
-                                                        ...field,
-                                                        fullWidth: true,
-                                                        label: "Custom All Value",
-                                                        InputLabelProps: {
-                                                            shrink: action === 'read' ? true : undefined
-                                                        },
-                                                        InputProps: {
-                                                            readOnly: action === 'read'
-                                                        },
-                                                        error: !!fieldState.error,
-                                                        helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'When All is selected, this value will be used',
-                                                        value: (_state_listVariableFields_customAllValue = state.listVariableFields.customAllValue) !== null && _state_listVariableFields_customAllValue !== void 0 ? _state_listVariableFields_customAllValue : '',
-                                                        onChange: (event)=>{
-                                                            field.onChange(event);
-                                                            setState((draft)=>{
-                                                                if (event.target.value) {
-                                                                    draft.listVariableFields.customAllValue = event.target.value;
-                                                                } else {
-                                                                    draft.listVariableFields.customAllValue = undefined;
-                                                                }
-                                                            });
-                                                        }
-                                                    });
-                                                }
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
+                    kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ListVariableEditorForm, {
+                            action: action,
+                            control: form.control
+                        })
                     })
                 ]
             }),