@perses-dev/plugin-system 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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

@@ -14,19 +14,25 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "VariableEditForm", {
+Object.defineProperty(exports, "VariableEditorForm", {
     enumerable: true,
-    get: ()=>VariableEditForm
+    get: function() {
+        return VariableEditorForm;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
-const _useImmer = require("use-immer");
 const _components = require("@perses-dev/components");
-const _variableModel = require("../variable-model");
-const _pluginEditor = require("../../PluginEditor");
-const _variablePreview = require("./VariablePreview");
-const _variableEditorFormModel = require("./variable-editor-form-model");
+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 _VariablePreview = require("./VariablePreview");
+const _variableeditorformmodel = require("./variable-editor-form-model");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -35,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -48,7 +54,9 @@ function _interopRequireWildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -66,35 +74,18 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-// TODO: Replace with proper validation library
-function getValidation(state) {
-    /** Name validation */ let name = null;
-    if (!state.name) {
-        name = 'Name is required';
-    }
-    // name can only contain alphanumeric characters and underscores and no spaces
-    if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {
-        name = 'Name can only contain alphanumeric characters, underscores, and dashes';
-    }
-    return {
-        name,
-        isValid: !name
-    };
-}
 function FallbackPreview() {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         children: "Error previewing values"
     });
 }
-function VariableEditForm(props) {
-    const { initialVariableDefinition , onChange , onCancel , action ='update'  } = props;
-    const initialState = (0, _variableEditorFormModel.getInitialState)(initialVariableDefinition);
-    const [state, setState] = (0, _useImmer.useImmer)(initialState);
-    const validation = (0, _react.useMemo)(()=>getValidation(state), [
-        state
-    ]);
-    const [isDiscardDialogStateOpened, setDiscardDialogStateOpened] = (0, _react.useState)(false);
+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);
     };
@@ -102,39 +93,45 @@ function VariableEditForm(props) {
    * 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);
+        return (0, _variableeditorformmodel.getVariableDefinitionFromState)(state);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         previewKey
     ]);
-    const title = (0, _react.useMemo)(()=>{
-        if (action === 'read') return 'View Variable';
-        if (action === 'create') return 'Create Variable';
-        if (action === 'update') return 'Edit Variable';
-        return '';
-    }, [
-        action
-    ]);
+    const titleAction = (0, _utils.getTitleAction)(action, isDraft);
+    const submitText = (0, _utils.getSubmitText)(action, isDraft);
+    const form = (0, _reacthookform.useForm)({
+        resolver: (0, _zod.zodResolver)(_validation.variableEditorValidationSchema),
+        mode: 'onBlur',
+        defaultValues: initialState
+    });
+    const processForm = ()=>{
+        // 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
+        }));
+    };
     // 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 (action === 'create' || action === 'update' && JSON.stringify(initialState) !== JSON.stringify(state)) {
-            setDiscardDialogStateOpened(true);
+        if (JSON.stringify(initialState) !== JSON.stringify(state)) {
+            setDiscardDialogOpened(true);
         } else {
-            onCancel();
+            onClose();
         }
     }, [
-        state,
         initialState,
-        action,
-        setDiscardDialogStateOpened,
-        onCancel
+        state,
+        onClose
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
+        ...form,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     display: 'flex',
                     alignItems: 'center',
@@ -142,298 +139,516 @@ function VariableEditForm(props) {
                     borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
                         variant: "h2",
-                        children: title
+                        children: [
+                            titleAction,
+                            " Variable"
+                        ]
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                         direction: "row",
                         spacing: 1,
                         sx: {
                             marginLeft: 'auto'
                         },
-                        children: [
-                            action !== 'read' && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                disabled: !validation.isValid,
-                                variant: "contained",
-                                onClick: ()=>{
-                                    onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
-                                },
-                                children: (0, _material.capitalize)(action)
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                color: "secondary",
-                                variant: "outlined",
-                                onClick: handleCancel,
-                                children: action === 'read' ? 'Close' : 'Cancel'
-                            })
-                        ]
+                        children: action === 'read' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    disabled: isReadonly,
+                                    variant: "contained",
+                                    onClick: ()=>setAction('update'),
+                                    children: "Edit"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "error",
+                                    disabled: isReadonly,
+                                    variant: "outlined",
+                                    onClick: onDelete,
+                                    children: "Delete"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                                    orientation: "vertical",
+                                    flexItem: true,
+                                    sx: (theme)=>({
+                                            borderColor: theme.palette.grey['500'],
+                                            '&.MuiDivider-root': {
+                                                marginLeft: 2,
+                                                marginRight: 1
+                                            }
+                                        })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: onClose,
+                                    children: "Close"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    disabled: !form.formState.isValid,
+                                    onClick: form.handleSubmit(processForm),
+                                    children: submitText
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 padding: 2,
                 sx: {
                     overflowY: 'scroll'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
                         container: true,
                         spacing: 2,
                         mb: 2,
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                 item: true,
                                 xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    required: true,
-                                    error: !!validation.name,
-                                    fullWidth: true,
-                                    label: "Name",
-                                    value: state.name,
-                                    helperText: validation.name,
-                                    InputProps: {
-                                        readOnly: action === 'update' || action === 'read'
-                                    },
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.name = v.target.value;
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    name: "name",
+                                    render: ({ field, fieldState })=>{
+                                        var _fieldState_error;
+                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            label: "Name",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                disabled: action === 'update' && !isDraft,
+                                                readOnly: action === 'read'
+                                            },
+                                            error: !!fieldState.error,
+                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            value: state.name,
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                                setState((draft)=>{
+                                                    draft.name = event.target.value;
+                                                });
+                                            }
                                         });
                                     }
                                 })
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                 item: true,
                                 xs: 4,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    fullWidth: true,
-                                    label: "Display Label",
-                                    value: state.title || '',
-                                    InputProps: {
-                                        readOnly: action === 'read'
-                                    },
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.title = v.target.value;
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    name: "title",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                        var _fieldState_error;
+                                        var _state_title;
+                                        return (0, _jsxruntime.jsx)(_material.TextField, {
+                                            ...field,
+                                            fullWidth: true,
+                                            label: "Display Label",
+                                            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_title = state.title) !== null && _state_title !== void 0 ? _state_title : '',
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                                setState((draft)=>{
+                                                    draft.title = event.target.value;
+                                                });
+                                            }
                                         });
                                     }
                                 })
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                 item: true,
                                 xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    fullWidth: true,
-                                    label: "Description",
-                                    value: state.description,
-                                    InputProps: {
-                                        readOnly: action === 'read'
-                                    },
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.description = v.target.value;
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    name: "description",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                        var _fieldState_error;
+                                        var _state_description;
+                                        return (0, _jsxruntime.jsx)(_material.TextField, {
+                                            ...field,
+                                            fullWidth: true,
+                                            label: "Description",
+                                            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_description = state.description) !== null && _state_description !== void 0 ? _state_description : '',
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                                setState((draft)=>{
+                                                    draft.description = event.target.value;
+                                                });
+                                            }
                                         });
                                     }
                                 })
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                                 item: true,
                                 xs: 4,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                                    fullWidth: true,
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                            id: "variable-type-select-label",
-                                            children: "Type"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
-                                            labelId: "variable-type-select-label",
-                                            id: "variable-type-select",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    name: "kind",
+                                    render: ({ field, fieldState })=>{
+                                        var _fieldState_error;
+                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                            select: true,
+                                            ...field,
+                                            fullWidth: true,
                                             label: "Type",
+                                            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.kind,
-                                            readOnly: action === 'read',
-                                            onChange: (v)=>{
+                                            onChange: (event)=>{
+                                                field.onChange(event);
                                                 setState((draft)=>{
-                                                    draft.kind = v.target.value;
+                                                    draft.kind = event.target.value;
                                                 });
                                             },
-                                            children: _variableModel.VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                            children: _variablemodel.VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                                     value: v.kind,
                                                     children: v.label
                                                 }, v.kind))
-                                        })
-                                    ]
+                                        });
+                                    }
                                 })
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {}),
-                    state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+                    state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                 py: 1,
                                 variant: "subtitle1",
                                 children: "Text Options"
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                 spacing: 2,
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariablePreview, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
                                             values: [
                                                 state.textVariableFields.value
                                             ]
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                        label: "Value",
-                                        value: state.textVariableFields.value,
-                                        InputProps: {
-                                            readOnly: action === 'read'
-                                        },
-                                        onChange: (v)=>{
-                                            setState((draft)=>{
-                                                draft.textVariableFields.value = v.target.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;
+                                                        });
+                                                    }
+                                                })
+                                            })
                                     })
                                 ]
                             })
                         ]
                     }),
-                    state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                 py: 1,
                                 variant: "subtitle1",
                                 children: "List Options"
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            /*#__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, {
+                                    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, {
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
                                                 definition: previewSpec,
                                                 onRefresh: refreshPreview
                                             })
                                         })
-                                    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariablePreview, {
+                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
                                         isLoading: true
                                     }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                         children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
                                                 onClickAway: ()=>refreshPreview(),
-                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {})
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {})
                                             }),
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginEditor.PluginEditor, {
-                                                width: "100%",
-                                                pluginType: "Variable",
-                                                pluginKindLabel: "Source",
-                                                value: state.listVariableFields.plugin,
-                                                isReadonly: action === 'read',
-                                                onChange: (val)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.plugin = val;
-                                                    });
-                                                }
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                                name: "listVariableFields.plugin",
+                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.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__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                            label: "Capturing Regexp Filter",
-                                            value: state.listVariableFields.capturing_regexp || '',
-                                            InputProps: {
-                                                readOnly: action === 'read'
-                                            },
-                                            onChange: (e)=>{
-                                                setState((draft)=>{
-                                                    if (e.target.value) {
-                                                        // TODO: do a better fix, if empty string => it should skip the filter
-                                                        draft.listVariableFields.capturing_regexp = e.target.value;
-                                                    } else {
-                                                        draft.listVariableFields.capturing_regexp = undefined;
-                                                    }
+                                    /*#__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.'
                                                 });
-                                            },
-                                            helperText: "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, {
+                            /*#__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, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                 spacing: "2",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                         children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
-                                                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                    checked: state.listVariableFields.allowMultiple,
-                                                    readOnly: action === 'read',
-                                                    onChange: (e)=>{
-                                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                                        setState((draft)=>{
-                                                            draft.listVariableFields.allowMultiple = e.target.checked;
-                                                        });
-                                                    }
-                                                }),
-                                                label: "Allow Multiple Values"
+                                            /*#__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, {
+                                            /*#__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, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                         children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
-                                                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                    checked: state.listVariableFields.allowAll,
-                                                    readOnly: action === 'read',
-                                                    onChange: (e)=>{
-                                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                                        setState((draft)=>{
-                                                            draft.listVariableFields.allowAll = e.target.checked;
-                                                        });
-                                                    }
-                                                }),
-                                                label: "Allow All option"
+                                            /*#__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, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                                 mb: 1,
                                                 variant: "caption",
                                                 children: "Enables an option to include all variable values"
                                             }),
-                                            state.listVariableFields.allowAll && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                                label: "Custom All Value",
-                                                value: state.listVariableFields.customAllValue,
-                                                InputProps: {
-                                                    readOnly: action === 'read'
-                                                },
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        if (e.target.value) {
-                                                            draft.listVariableFields.customAllValue = e.target.value;
-                                                        } else {
-                                                            draft.listVariableFields.customAllValue = undefined;
+                                            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;
+                                                                }
+                                                            });
                                                         }
                                                     });
-                                                },
-                                                helperText: "When All is selected, this value will be used"
+                                                }
                                             })
                                         ]
                                     })
@@ -443,15 +658,15 @@ function VariableEditForm(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
                 description: "Are you sure you want to discard these changes? Changes cannot be recovered.",
-                isOpen: isDiscardDialogStateOpened,
+                isOpen: isDiscardDialogOpened,
                 onCancel: ()=>{
-                    setDiscardDialogStateOpened(false);
+                    setDiscardDialogOpened(false);
                 },
                 onDiscardChanges: ()=>{
-                    setDiscardDialogStateOpened(false);
-                    onCancel();
+                    setDiscardDialogOpened(false);
+                    onClose();
                 }
             })
         ]