@perses-dev/plugin-system 0.38.0 → 0.40.0

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 _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 _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;
     }
@@ -66,35 +72,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 +91,42 @@ 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.variableEditValidationSchema),
+        mode: 'onBlur',
+        defaultValues: state
+    });
+    const processForm = ()=>{
+        onSave((0, _variableeditorformmodel.getVariableDefinitionFromState)(state));
+    };
     // 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
+        setDiscardDialogOpened,
+        onClose
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    var _state_textVariableFields_constant;
+    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,152 +134,231 @@ 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",
+                                    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;
+                                        /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            label: "Name",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                disabled: action === 'update',
+                                                readOnly: action === 'read'
+                                            },
+                                            error: !!fieldState.error,
+                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            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  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ 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,
+                                            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  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ 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,
+                                            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;
+                                        /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                            select: true,
+                                            ...field,
+                                            fullWidth: true,
                                             label: "Type",
-                                            value: state.kind,
-                                            readOnly: action === 'read',
-                                            onChange: (v)=>{
+                                            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,
+                                            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, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         label: "Value",
                                         value: state.textVariableFields.value,
+                                        InputLabelProps: {
+                                            shrink: action === 'read' ? true : undefined
+                                        },
                                         InputProps: {
                                             readOnly: action === 'read'
                                         },
@@ -296,43 +367,56 @@ function VariableEditForm(props) {
                                                 draft.textVariableFields.value = v.target.value;
                                             });
                                         }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                            checked: (_state_textVariableFields_constant = state.textVariableFields.constant) !== null && _state_textVariableFields_constant !== void 0 ? _state_textVariableFields_constant : false,
+                                            readOnly: action === 'read',
+                                            onChange: (e)=>{
+                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                setState((draft)=>{
+                                                    draft.textVariableFields.constant = e.target.checked;
+                                                });
+                                            }
+                                        }),
+                                        label: "Constant"
                                     })
                                 ]
                             })
                         ]
                     }),
-                    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, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
                                                 width: "100%",
                                                 pluginType: "Variable",
                                                 pluginKindLabel: "Source",
@@ -346,10 +430,13 @@ function VariableEditForm(props) {
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             label: "Capturing Regexp Filter",
-                                            value: state.listVariableFields.capturing_regexp || '',
+                                            value: state.listVariableFields.capturingRegexp || '',
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
                                             InputProps: {
                                                 readOnly: action === 'read'
                                             },
@@ -357,9 +444,9 @@ function VariableEditForm(props) {
                                                 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;
+                                                        draft.listVariableFields.capturingRegexp = e.target.value;
                                                     } else {
-                                                        draft.listVariableFields.capturing_regexp = undefined;
+                                                        draft.listVariableFields.capturingRegexp = undefined;
                                                     }
                                                 });
                                             },
@@ -368,19 +455,19 @@ function VariableEditForm(props) {
                                     })
                                 ]
                             }),
-                            /*#__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, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
                                                     checked: state.listVariableFields.allowMultiple,
                                                     readOnly: action === 'read',
                                                     onChange: (e)=>{
@@ -392,16 +479,16 @@ function VariableEditForm(props) {
                                                 }),
                                                 label: "Allow Multiple Values"
                                             }),
-                                            /*#__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, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
                                                     checked: state.listVariableFields.allowAll,
                                                     readOnly: action === 'read',
                                                     onChange: (e)=>{
@@ -413,14 +500,17 @@ function VariableEditForm(props) {
                                                 }),
                                                 label: "Allow All option"
                                             }),
-                                            /*#__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, {
+                                            state.listVariableFields.allowAll && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                                 label: "Custom All Value",
                                                 value: state.listVariableFields.customAllValue,
+                                                InputLabelProps: {
+                                                    shrink: action === 'read' ? true : undefined
+                                                },
                                                 InputProps: {
                                                     readOnly: action === 'read'
                                                 },
@@ -443,15 +533,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();
                 }
             })
         ]