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

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

@@ -11,73 +11,384 @@
 // 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 React, { useCallback, useMemo, useState } from 'react';
-import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Button, Stack, ClickAwayListener, Divider } from '@mui/material';
-import { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
+import React, { useState } from 'react';
+import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, ClickAwayListener, Divider } from '@mui/material';
+import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';
+import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useImmer } from 'use-immer';
 import { getSubmitText, getTitleAction } from '../../../utils';
 import { VARIABLE_TYPES } from '../variable-model';
 import { PluginEditor } from '../../PluginEditor';
-import { variableEditorValidationSchema } from '../../../validation';
+import { useValidationSchemas } from '../../../context';
 import { VariableListPreview, VariablePreview } from './VariablePreview';
-import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
 function FallbackPreview() {
     return /*#__PURE__*/ _jsx("div", {
         children: "Error previewing values"
     });
 }
-export function VariableEditorForm(props) {
-    const { initialVariableDefinition , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
-    const initialState = getInitialState(initialVariableDefinition);
-    const [state, setState] = useImmer(initialState);
-    const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
-    const [previewKey, setPreviewKey] = useState(0);
-    const [action, setAction] = useState(initialAction);
-    const refreshPreview = ()=>{
-        setPreviewKey((prev)=>prev + 1);
-    };
-    /** We use the `previewKey` that we increment to know when to explicitly update the
+function TextVariableEditorForm({ action, control }) {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                py: 1,
+                variant: "subtitle1",
+                children: "Text Options"
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Controller, {
+                        control: control,
+                        name: "spec.value",
+                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        children: /*#__PURE__*/ _jsx(VariablePreview, {
+                                            values: [
+                                                field.value
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        ...field,
+                                        label: "Value",
+                                        InputLabelProps: {
+                                            shrink: action === 'read' ? true : undefined
+                                        },
+                                        InputProps: {
+                                            readOnly: action === 'read'
+                                        },
+                                        error: !!fieldState.error,
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                        }
+                                    })
+                                ]
+                            })
+                    }),
+                    /*#__PURE__*/ _jsx(Controller, {
+                        control: control,
+                        name: "spec.constant",
+                        render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                label: "Constant",
+                                control: /*#__PURE__*/ _jsx(Switch, {
+                                    ...field,
+                                    checked: !!field.value,
+                                    readOnly: action === 'read',
+                                    value: 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 = 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 = useMemo(()=>{
-        return getVariableDefinitionFromState(state);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        previewKey
-    ]);
+   */ const [previewSpec, setPreviewSpec] = useState(form.getValues());
+    const refreshPreview = ()=>{
+        setPreviewSpec(form.getValues());
+    };
+    const kind = useWatch({
+        control: control,
+        name: 'spec.plugin.kind'
+    });
+    const _allowAllValue = 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__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                py: 1,
+                variant: "subtitle1",
+                children: "List Options"
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                mb: 2,
+                children: [
+                    kind ? /*#__PURE__*/ _jsx(Box, {
+                        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: FallbackPreview,
+                            resetKeys: [
+                                previewSpec
+                            ],
+                            children: /*#__PURE__*/ _jsx(VariableListPreview, {
+                                definition: previewSpec,
+                                onRefresh: refreshPreview
+                            })
+                        })
+                    }) : /*#__PURE__*/ _jsx(VariablePreview, {
+                        isLoading: true
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(ClickAwayListener, {
+                                onClickAway: ()=>refreshPreview(),
+                                children: /*#__PURE__*/ _jsx(Box, {})
+                            }),
+                            /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                FallbackComponent: ErrorAlert,
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    control: control,
+                                    name: "spec.plugin",
+                                    render: ({ field })=>/*#__PURE__*/ _jsx(PluginEditor, {
+                                            width: "100%",
+                                            pluginTypes: [
+                                                'Variable'
+                                            ],
+                                            pluginKindLabel: "Source",
+                                            value: {
+                                                selection: {
+                                                    type: 'Variable',
+                                                    kind: field.value?.kind ?? 'StaticListVariable'
+                                                },
+                                                spec: field.value?.spec ?? {
+                                                    values: []
+                                                }
+                                            },
+                                            isReadonly: action === 'read',
+                                            onChange: (v)=>{
+                                                field.onChange({
+                                                    kind: v.selection.kind,
+                                                    spec: v.spec
+                                                });
+                                            }
+                                        })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        children: /*#__PURE__*/ _jsx(Controller, {
+                            control: control,
+                            name: "spec.capturingRegexp",
+                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                    ...field,
+                                    label: "Capturing Regexp Filter",
+                                    InputLabelProps: {
+                                        shrink: action === 'read' ? true : undefined
+                                    },
+                                    InputProps: {
+                                        readOnly: action === 'read'
+                                    },
+                                    error: !!fieldState.error,
+                                    value: field.value ?? '',
+                                    onChange: (event)=>{
+                                        if (event.target.value === '') {
+                                            field.onChange(undefined);
+                                        } else {
+                                            field.onChange(event);
+                                        }
+                                    },
+                                    helperText: fieldState.error?.message ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        children: /*#__PURE__*/ _jsx(Controller, {
+                            control: control,
+                            name: "spec.sort",
+                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsxs(TextField, {
+                                    select: true,
+                                    ...field,
+                                    fullWidth: true,
+                                    label: "Sort",
+                                    InputLabelProps: {
+                                        shrink: action === 'read' ? true : undefined
+                                    },
+                                    InputProps: {
+                                        readOnly: action === 'read'
+                                    },
+                                    error: !!fieldState.error,
+                                    helperText: fieldState.error?.message,
+                                    value: field.value ?? 'none',
+                                    onChange: (event)=>{
+                                        field.onChange(event);
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "none",
+                                            children: "None"
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "alphabetical-asc",
+                                            children: "Alphabetical, asc"
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "alphabetical-desc",
+                                            children: "Alphabetical, desc"
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "numerical-asc",
+                                            children: "Numerical, asc"
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "numerical-desc",
+                                            children: "Numerical, desc"
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "alphabetical-ci-asc",
+                                            children: "Alphabetical, case-insensitive, asc"
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "alphabetical-ci-desc",
+                                            children: "Alphabetical, case-insensitive, desc"
+                                        })
+                                    ]
+                                })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {}),
+            /*#__PURE__*/ _jsx(Typography, {
+                py: 1,
+                variant: "subtitle1",
+                children: "Dropdown Options"
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: "2",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Controller, {
+                                control: control,
+                                name: "spec.allowMultiple",
+                                render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                        label: "Allow Multiple Values",
+                                        control: /*#__PURE__*/ _jsx(Switch, {
+                                            ...field,
+                                            checked: !!field.value,
+                                            readOnly: action === 'read',
+                                            value: field.value ?? false,
+                                            onChange: (event)=>{
+                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                field.onChange(event);
+                                            }
+                                        })
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                children: "Enables multiple values to be selected at the same time"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Controller, {
+                                control: control,
+                                name: "spec.allowAllValue",
+                                render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                        label: "Allow All option",
+                                        control: /*#__PURE__*/ _jsx(Switch, {
+                                            ...field,
+                                            checked: !!field.value,
+                                            readOnly: action === 'read',
+                                            value: field.value ?? false,
+                                            onChange: (event)=>{
+                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                field.onChange(event);
+                                            }
+                                        })
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                mb: 1,
+                                variant: "caption",
+                                children: "Enables an option to include all variable values"
+                            }),
+                            _allowAllValue && /*#__PURE__*/ _jsx(Controller, {
+                                control: control,
+                                name: "spec.customAllValue",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                        ...field,
+                                        fullWidth: true,
+                                        label: "Custom All Value",
+                                        InputLabelProps: {
+                                            shrink: action === 'read' ? true : undefined
+                                        },
+                                        InputProps: {
+                                            readOnly: action === 'read'
+                                        },
+                                        error: !!fieldState.error,
+                                        helperText: fieldState.error?.message ? fieldState.error.message : 'When All is selected, this value will be used',
+                                        value: field.value ?? '',
+                                        onChange: (event)=>{
+                                            if (event.target.value === '') {
+                                                field.onChange(undefined);
+                                            } else {
+                                                field.onChange(event);
+                                            }
+                                        }
+                                    })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function VariableEditorForm({ initialVariableDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete }) {
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     const titleAction = getTitleAction(action, isDraft);
     const submitText = getSubmitText(action, isDraft);
+    const { variableEditorSchema } = useValidationSchemas();
     const form = useForm({
-        resolver: zodResolver(variableEditorValidationSchema),
+        resolver: zodResolver(variableEditorSchema),
         mode: 'onBlur',
-        defaultValues: initialState
+        defaultValues: initialVariableDefinition
     });
-    const processForm = ()=>{
+    const kind = useWatch({
+        control: form.control,
+        name: 'kind'
+    });
+    function clearFormData(data) {
+        const result = {
+            ...data
+        };
+        if (result.spec.display?.name === undefined && result.spec.display?.description === undefined && result.spec.display?.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(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 = 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
-    ]);
-    var _state_title, _state_description, _state_listVariableFields_capturingRegexp, _state_listVariableFields_sort, _state_listVariableFields_customAllValue;
+    }
     return /*#__PURE__*/ _jsxs(FormProvider, {
         ...form,
         children: [
@@ -96,62 +407,15 @@ export function VariableEditorForm(props) {
                             " Variable"
                         ]
                     }),
-                    /*#__PURE__*/ _jsx(Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: action === 'read' ? /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    disabled: isReadonly,
-                                    variant: "contained",
-                                    onClick: ()=>setAction('update'),
-                                    children: "Edit"
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "error",
-                                    disabled: isReadonly,
-                                    variant: "outlined",
-                                    onClick: onDelete,
-                                    children: "Delete"
-                                }),
-                                /*#__PURE__*/ _jsx(Divider, {
-                                    orientation: "vertical",
-                                    flexItem: true,
-                                    sx: (theme)=>({
-                                            borderColor: theme.palette.grey['500'],
-                                            '&.MuiDivider-root': {
-                                                marginLeft: 2,
-                                                marginRight: 1
-                                            }
-                                        })
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: onClose,
-                                    children: "Close"
-                                })
-                            ]
-                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    type: "submit",
-                                    variant: "contained",
-                                    disabled: !form.formState.isValid,
-                                    onClick: form.handleSubmit(processForm),
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ _jsx(FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
                     })
                 ]
             }),
@@ -170,10 +434,9 @@ export function VariableEditorForm(props) {
                                 item: true,
                                 xs: 8,
                                 children: /*#__PURE__*/ _jsx(Controller, {
-                                    name: "name",
-                                    render: ({ field , fieldState  })=>{
-                                        var _fieldState_error;
-                                        /*#__PURE__*/ return _jsx(TextField, {
+                                    control: form.control,
+                                    name: "spec.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -186,26 +449,21 @@ export function VariableEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: state.name,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.name = event.target.value;
-                                                });
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ _jsx(Controller, {
-                                    name: "title",
-                                    render: ({ field , fieldState  })=>{
-                                        var _fieldState_error;
-                                        /*#__PURE__*/ return _jsx(TextField, {
+                                    control: form.control,
+                                    name: "spec.display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             label: "Display Label",
@@ -216,26 +474,21 @@ export function VariableEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             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 : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.title = event.target.value;
-                                                });
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 8,
                                 children: /*#__PURE__*/ _jsx(Controller, {
-                                    name: "description",
-                                    render: ({ field , fieldState  })=>{
-                                        var _fieldState_error;
-                                        /*#__PURE__*/ return _jsx(TextField, {
+                                    control: form.control,
+                                    name: "spec.display.description",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             label: "Description",
@@ -246,26 +499,21 @@ export function VariableEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             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 : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.description = event.target.value;
-                                                });
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ _jsx(Controller, {
+                                    control: form.control,
                                     name: "kind",
-                                    render: ({ field , fieldState  })=>{
-                                        var _fieldState_error;
-                                        /*#__PURE__*/ return _jsx(TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             select: true,
                                             ...field,
                                             fullWidth: true,
@@ -277,329 +525,34 @@ export function VariableEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: state.kind,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? 'TextVariable',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.kind = event.target.value;
-                                                });
                                             },
                                             children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ _jsx(MenuItem, {
                                                     value: v.kind,
                                                     children: v.label
                                                 }, v.kind))
-                                        });
-                                    }
+                                        })
                                 })
                             })
                         ]
                     }),
                     /*#__PURE__*/ _jsx(Divider, {}),
-                    state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "Text Options"
-                            }),
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 2,
-                                children: [
-                                    /*#__PURE__*/ _jsx(Box, {
-                                        children: /*#__PURE__*/ _jsx(VariablePreview, {
-                                            values: [
-                                                state.textVariableFields.value
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(Controller, {
-                                        name: "textVariableFields.value",
-                                        render: ({ field , fieldState  })=>{
-                                            var _fieldState_error;
-                                            /*#__PURE__*/ return _jsx(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__*/ _jsx(Controller, {
-                                        name: "textVariableFields.constant",
-                                        render: ({ field  })=>/*#__PURE__*/ _jsx(FormControlLabel, {
-                                                label: "Constant",
-                                                control: /*#__PURE__*/ _jsx(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__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(TextVariableEditorForm, {
+                            action: action,
+                            control: form.control
+                        })
                     }),
-                    state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "List Options"
-                            }),
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 2,
-                                mb: 2,
-                                children: [
-                                    state.listVariableFields.plugin.kind ? /*#__PURE__*/ _jsx(Box, {
-                                        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                            FallbackComponent: FallbackPreview,
-                                            resetKeys: [
-                                                previewSpec
-                                            ],
-                                            children: /*#__PURE__*/ _jsx(VariableListPreview, {
-                                                definition: previewSpec,
-                                                onRefresh: refreshPreview
-                                            })
-                                        })
-                                    }) : /*#__PURE__*/ _jsx(VariablePreview, {
-                                        isLoading: true
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(ClickAwayListener, {
-                                                onClickAway: ()=>refreshPreview(),
-                                                children: /*#__PURE__*/ _jsx(Box, {})
-                                            }),
-                                            /*#__PURE__*/ _jsx(Controller, {
-                                                name: "listVariableFields.plugin",
-                                                render: ({ field  })=>/*#__PURE__*/ _jsx(PluginEditor, {
-                                                        width: "100%",
-                                                        pluginType: "Variable",
-                                                        pluginKindLabel: "Source",
-                                                        isReadonly: action === 'read',
-                                                        value: state.listVariableFields.plugin,
-                                                        onChange: (val)=>{
-                                                            field.onChange(val);
-                                                            setState((draft)=>{
-                                                                draft.listVariableFields.plugin = val;
-                                                            });
-                                                        }
-                                                    })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsx(Stack, {
-                                        children: /*#__PURE__*/ _jsx(Controller, {
-                                            name: "listVariableFields.capturingRegexp",
-                                            render: ({ field , fieldState  })=>{
-                                                var _fieldState_error;
-                                                /*#__PURE__*/ return _jsx(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__*/ _jsx(Stack, {
-                                        children: /*#__PURE__*/ _jsx(Controller, {
-                                            name: "listVariableFields.sort",
-                                            render: ({ field , fieldState  })=>{
-                                                var _fieldState_error;
-                                                /*#__PURE__*/ return _jsxs(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__*/ _jsx(MenuItem, {
-                                                            value: "none",
-                                                            children: "None"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: "alphabetical-asc",
-                                                            children: "Alphabetical, asc"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: "alphabetical-desc",
-                                                            children: "Alphabetical, desc"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: "numerical-asc",
-                                                            children: "Numerical, asc"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: "numerical-desc",
-                                                            children: "Numerical, desc"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: "alphabetical-ci-asc",
-                                                            children: "Alphabetical, case-insensitive, asc"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                                            value: "alphabetical-ci-desc",
-                                                            children: "Alphabetical, case-insensitive, desc"
-                                                        })
-                                                    ]
-                                                });
-                                            }
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(Divider, {}),
-                            /*#__PURE__*/ _jsx(Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "Dropdown Options"
-                            }),
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: "2",
-                                children: [
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Controller, {
-                                                name: "listVariableFields.allowMultiple",
-                                                render: ({ field  })=>/*#__PURE__*/ _jsx(FormControlLabel, {
-                                                        label: "Allow Multiple Values",
-                                                        control: /*#__PURE__*/ _jsx(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__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                children: "Enables multiple values to be selected at the same time"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Controller, {
-                                                name: "listVariableFields.allowAllValue",
-                                                render: ({ field  })=>/*#__PURE__*/ _jsx(FormControlLabel, {
-                                                        label: "Allow All option",
-                                                        control: /*#__PURE__*/ _jsx(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__*/ _jsx(Typography, {
-                                                mb: 1,
-                                                variant: "caption",
-                                                children: "Enables an option to include all variable values"
-                                            }),
-                                            state.listVariableFields.allowAllValue && /*#__PURE__*/ _jsx(Controller, {
-                                                name: "listVariableFields.customAllValue",
-                                                render: ({ field , fieldState  })=>{
-                                                    var _fieldState_error;
-                                                    /*#__PURE__*/ return _jsx(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__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(ListVariableEditorForm, {
+                            action: action,
+                            control: form.control
+                        })
                     })
                 ]
             }),