@perses-dev/plugin-system 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

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

@@ -12,42 +12,29 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useState } from 'react';
-import { Box, Typography, Switch, TextField, Grid, FormControl, FormControlLabel, InputLabel, MenuItem, Button, Stack, ClickAwayListener, Divider, Select, capitalize } from '@mui/material';
-import { useImmer } from 'use-immer';
+import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Button, Stack, ClickAwayListener, Divider } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useImmer } from 'use-immer';
+import { getSubmitText, getTitleAction } from '../../../utils';
 import { VARIABLE_TYPES } from '../variable-model';
 import { PluginEditor } from '../../PluginEditor';
+import { variableEditorValidationSchema } from '../../../validation';
 import { VariableListPreview, VariablePreview } from './VariablePreview';
 import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
-// 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__*/ _jsx("div", {
         children: "Error previewing values"
     });
 }
-export function VariableEditForm(props) {
-    const { initialVariableDefinition , onChange , onCancel , action ='update'  } = props;
+export function VariableEditorForm(props) {
+    const { initialVariableDefinition , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
     const initialState = getInitialState(initialVariableDefinition);
     const [state, setState] = useImmer(initialState);
-    const validation = useMemo(()=>getValidation(state), [
-        state
-    ]);
-    const [isDiscardDialogStateOpened, setDiscardDialogStateOpened] = useState(false);
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     const [previewKey, setPreviewKey] = useState(0);
+    const [action, setAction] = useState(initialAction);
     const refreshPreview = ()=>{
         setPreviewKey((prev)=>prev + 1);
     };
@@ -60,32 +47,39 @@ export function VariableEditForm(props) {
     }, [
         previewKey
     ]);
-    const title = useMemo(()=>{
-        if (action === 'read') return 'View Variable';
-        if (action === 'create') return 'Create Variable';
-        if (action === 'update') return 'Edit Variable';
-        return '';
-    }, [
-        action
-    ]);
+    const titleAction = getTitleAction(action, isDraft);
+    const submitText = getSubmitText(action, isDraft);
+    const form = useForm({
+        resolver: zodResolver(variableEditorValidationSchema),
+        mode: 'onBlur',
+        defaultValues: initialState
+    });
+    const processForm = ()=>{
+        // reset display attributes to undefined when empty, because we don't want to save empty strings
+        onSave(getVariableDefinitionFromState({
+            ...state,
+            title: state.title === '' ? undefined : state.title,
+            description: state.description === '' ? undefined : state.description
+        }));
+    };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
     const handleCancel = useCallback(()=>{
-        if (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__*/ _jsxs(_Fragment, {
+    var _state_title, _state_description, _state_listVariableFields_capturingRegexp, _state_listVariableFields_sort, _state_listVariableFields_customAllValue;
+    return /*#__PURE__*/ _jsxs(FormProvider, {
+        ...form,
         children: [
             /*#__PURE__*/ _jsxs(Box, {
                 sx: {
@@ -95,32 +89,69 @@ export function VariableEditForm(props) {
                     borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                 },
                 children: [
-                    /*#__PURE__*/ _jsx(Typography, {
+                    /*#__PURE__*/ _jsxs(Typography, {
                         variant: "h2",
-                        children: title
+                        children: [
+                            titleAction,
+                            " Variable"
+                        ]
                     }),
-                    /*#__PURE__*/ _jsxs(Stack, {
+                    /*#__PURE__*/ _jsx(Stack, {
                         direction: "row",
                         spacing: 1,
                         sx: {
                             marginLeft: 'auto'
                         },
-                        children: [
-                            action !== 'read' && /*#__PURE__*/ _jsx(Button, {
-                                disabled: !validation.isValid,
-                                variant: "contained",
-                                onClick: ()=>{
-                                    onChange(getVariableDefinitionFromState(state));
-                                },
-                                children: capitalize(action)
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                color: "secondary",
-                                variant: "outlined",
-                                onClick: handleCancel,
-                                children: action === 'read' ? 'Close' : 'Cancel'
-                            })
-                        ]
+                        children: action === 'read' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    disabled: isReadonly,
+                                    variant: "contained",
+                                    onClick: ()=>setAction('update'),
+                                    children: "Edit"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "error",
+                                    disabled: isReadonly,
+                                    variant: "outlined",
+                                    onClick: onDelete,
+                                    children: "Delete"
+                                }),
+                                /*#__PURE__*/ _jsx(Divider, {
+                                    orientation: "vertical",
+                                    flexItem: true,
+                                    sx: (theme)=>({
+                                            borderColor: theme.palette.grey['500'],
+                                            '&.MuiDivider-root': {
+                                                marginLeft: 2,
+                                                marginRight: 1
+                                            }
+                                        })
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: onClose,
+                                    children: "Close"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    disabled: !form.formState.isValid,
+                                    onClick: form.handleSubmit(processForm),
+                                    children: submitText
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
                     })
                 ]
             }),
@@ -138,19 +169,31 @@ export function VariableEditForm(props) {
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 8,
-                                children: /*#__PURE__*/ _jsx(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__*/ _jsx(Controller, {
+                                    name: "name",
+                                    render: ({ field , fieldState  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ return _jsx(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;
+                                                });
+                                            }
                                         });
                                     }
                                 })
@@ -158,16 +201,29 @@ export function VariableEditForm(props) {
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 4,
-                                children: /*#__PURE__*/ _jsx(TextField, {
-                                    fullWidth: true,
-                                    label: "Display Label",
-                                    value: state.title || '',
-                                    InputProps: {
-                                        readOnly: action === 'read'
-                                    },
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.title = v.target.value;
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    name: "title",
+                                    render: ({ field , fieldState  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ return _jsx(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;
+                                                });
+                                            }
                                         });
                                     }
                                 })
@@ -175,16 +231,29 @@ export function VariableEditForm(props) {
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 8,
-                                children: /*#__PURE__*/ _jsx(TextField, {
-                                    fullWidth: true,
-                                    label: "Description",
-                                    value: state.description,
-                                    InputProps: {
-                                        readOnly: action === 'read'
-                                    },
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.description = v.target.value;
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    name: "description",
+                                    render: ({ field , fieldState  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ return _jsx(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;
+                                                });
+                                            }
                                         });
                                     }
                                 })
@@ -192,30 +261,36 @@ export function VariableEditForm(props) {
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 4,
-                                children: /*#__PURE__*/ _jsxs(FormControl, {
-                                    fullWidth: true,
-                                    children: [
-                                        /*#__PURE__*/ _jsx(InputLabel, {
-                                            id: "variable-type-select-label",
-                                            children: "Type"
-                                        }),
-                                        /*#__PURE__*/ _jsx(Select, {
-                                            labelId: "variable-type-select-label",
-                                            id: "variable-type-select",
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    name: "kind",
+                                    render: ({ field , fieldState  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ return _jsx(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: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ _jsx(MenuItem, {
                                                     value: v.kind,
                                                     children: v.label
                                                 }, v.kind))
-                                        })
-                                    ]
+                                        });
+                                    }
                                 })
                             })
                         ]
@@ -238,17 +313,49 @@ export function VariableEditForm(props) {
                                             ]
                                         })
                                     }),
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        label: "Value",
-                                        value: state.textVariableFields.value,
-                                        InputProps: {
-                                            readOnly: action === 'read'
-                                        },
-                                        onChange: (v)=>{
-                                            setState((draft)=>{
-                                                draft.textVariableFields.value = v.target.value;
+                                    /*#__PURE__*/ _jsx(Controller, {
+                                        name: "textVariableFields.value",
+                                        render: ({ field , fieldState  })=>{
+                                            var _fieldState_error;
+                                            /*#__PURE__*/ return _jsx(TextField, {
+                                                ...field,
+                                                label: "Value",
+                                                InputLabelProps: {
+                                                    shrink: action === 'read' ? true : undefined
+                                                },
+                                                InputProps: {
+                                                    readOnly: action === 'read'
+                                                },
+                                                error: !!fieldState.error,
+                                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                                value: state.textVariableFields.value,
+                                                onChange: (event)=>{
+                                                    field.onChange(event);
+                                                    setState((draft)=>{
+                                                        draft.textVariableFields.value = event.target.value;
+                                                    });
+                                                }
                                             });
                                         }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Controller, {
+                                        name: "textVariableFields.constant",
+                                        render: ({ field  })=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                                label: "Constant",
+                                                control: /*#__PURE__*/ _jsx(Switch, {
+                                                    ...field,
+                                                    checked: !!field.value,
+                                                    readOnly: action === 'read',
+                                                    value: state.textVariableFields.constant,
+                                                    onChange: (event)=>{
+                                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                        field.onChange(event);
+                                                        setState((draft)=>{
+                                                            draft.textVariableFields.constant = event.target.checked;
+                                                        });
+                                                    }
+                                                })
+                                            })
                                     })
                                 ]
                             })
@@ -285,38 +392,113 @@ export function VariableEditForm(props) {
                                                 onClickAway: ()=>refreshPreview(),
                                                 children: /*#__PURE__*/ _jsx(Box, {})
                                             }),
-                                            /*#__PURE__*/ _jsx(PluginEditor, {
-                                                width: "100%",
-                                                pluginType: "Variable",
-                                                pluginKindLabel: "Source",
-                                                value: state.listVariableFields.plugin,
-                                                isReadonly: action === 'read',
-                                                onChange: (val)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.plugin = val;
-                                                    });
-                                                }
+                                            /*#__PURE__*/ _jsx(Controller, {
+                                                name: "listVariableFields.plugin",
+                                                render: ({ field  })=>/*#__PURE__*/ _jsx(PluginEditor, {
+                                                        width: "100%",
+                                                        pluginType: "Variable",
+                                                        pluginKindLabel: "Source",
+                                                        isReadonly: action === 'read',
+                                                        value: state.listVariableFields.plugin,
+                                                        onChange: (val)=>{
+                                                            field.onChange(val);
+                                                            setState((draft)=>{
+                                                                draft.listVariableFields.plugin = val;
+                                                            });
+                                                        }
+                                                    })
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ _jsx(Stack, {
-                                        children: /*#__PURE__*/ _jsx(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;
-                                                    }
+                                        children: /*#__PURE__*/ _jsx(Controller, {
+                                            name: "listVariableFields.capturingRegexp",
+                                            render: ({ field , fieldState  })=>{
+                                                var _fieldState_error;
+                                                /*#__PURE__*/ return _jsx(TextField, {
+                                                    ...field,
+                                                    label: "Capturing Regexp Filter",
+                                                    InputLabelProps: {
+                                                        shrink: action === 'read' ? true : undefined
+                                                    },
+                                                    InputProps: {
+                                                        readOnly: action === 'read'
+                                                    },
+                                                    error: !!fieldState.error,
+                                                    value: (_state_listVariableFields_capturingRegexp = state.listVariableFields.capturingRegexp) !== null && _state_listVariableFields_capturingRegexp !== void 0 ? _state_listVariableFields_capturingRegexp : '',
+                                                    onChange: (event)=>{
+                                                        field.onChange(event);
+                                                        setState((draft)=>{
+                                                            if (event.target.value) {
+                                                                // TODO: do a better fix, if empty string => it should skip the filter
+                                                                draft.listVariableFields.capturingRegexp = event.target.value;
+                                                            } else {
+                                                                draft.listVariableFields.capturingRegexp = undefined;
+                                                            }
+                                                        });
+                                                    },
+                                                    helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
                                                 });
-                                            },
-                                            helperText: "Optional, if you want to filter on captured result."
+                                            }
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Stack, {
+                                        children: /*#__PURE__*/ _jsx(Controller, {
+                                            name: "listVariableFields.sort",
+                                            render: ({ field , fieldState  })=>{
+                                                var _fieldState_error;
+                                                /*#__PURE__*/ return _jsxs(TextField, {
+                                                    select: true,
+                                                    ...field,
+                                                    fullWidth: true,
+                                                    label: "Sort",
+                                                    InputLabelProps: {
+                                                        shrink: action === 'read' ? true : undefined
+                                                    },
+                                                    InputProps: {
+                                                        readOnly: action === 'read'
+                                                    },
+                                                    error: !!fieldState.error,
+                                                    helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                                    value: (_state_listVariableFields_sort = state.listVariableFields.sort) !== null && _state_listVariableFields_sort !== void 0 ? _state_listVariableFields_sort : 'none',
+                                                    onChange: (event)=>{
+                                                        field.onChange(event);
+                                                        setState((draft)=>{
+                                                            draft.listVariableFields.sort = event.target.value;
+                                                        });
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "none",
+                                                            children: "None"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "alphabetical-asc",
+                                                            children: "Alphabetical, asc"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "alphabetical-desc",
+                                                            children: "Alphabetical, desc"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "numerical-asc",
+                                                            children: "Numerical, asc"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "numerical-desc",
+                                                            children: "Numerical, desc"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "alphabetical-ci-asc",
+                                                            children: "Alphabetical, case-insensitive, asc"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "alphabetical-ci-desc",
+                                                            children: "Alphabetical, case-insensitive, desc"
+                                                        })
+                                                    ]
+                                                });
+                                            }
                                         })
                                     })
                                 ]
@@ -332,18 +514,24 @@ export function VariableEditForm(props) {
                                 children: [
                                     /*#__PURE__*/ _jsxs(Stack, {
                                         children: [
-                                            /*#__PURE__*/ _jsx(FormControlLabel, {
-                                                control: /*#__PURE__*/ _jsx(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__*/ _jsx(Controller, {
+                                                name: "listVariableFields.allowMultiple",
+                                                render: ({ field  })=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                                        label: "Allow Multiple Values",
+                                                        control: /*#__PURE__*/ _jsx(Switch, {
+                                                            ...field,
+                                                            checked: !!field.value,
+                                                            readOnly: action === 'read',
+                                                            value: state.listVariableFields.allowMultiple,
+                                                            onChange: (event)=>{
+                                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                                field.onChange(event);
+                                                                setState((draft)=>{
+                                                                    draft.listVariableFields.allowMultiple = event.target.checked;
+                                                                });
+                                                            }
+                                                        })
+                                                    })
                                             }),
                                             /*#__PURE__*/ _jsx(Typography, {
                                                 variant: "caption",
@@ -353,40 +541,59 @@ export function VariableEditForm(props) {
                                     }),
                                     /*#__PURE__*/ _jsxs(Stack, {
                                         children: [
-                                            /*#__PURE__*/ _jsx(FormControlLabel, {
-                                                control: /*#__PURE__*/ _jsx(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__*/ _jsx(Controller, {
+                                                name: "listVariableFields.allowAllValue",
+                                                render: ({ field  })=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                                        label: "Allow All option",
+                                                        control: /*#__PURE__*/ _jsx(Switch, {
+                                                            ...field,
+                                                            checked: !!field.value,
+                                                            readOnly: action === 'read',
+                                                            value: state.listVariableFields.allowAllValue,
+                                                            onChange: (event)=>{
+                                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                                field.onChange(event);
+                                                                setState((draft)=>{
+                                                                    draft.listVariableFields.allowAllValue = event.target.checked;
+                                                                });
+                                                            }
+                                                        })
+                                                    })
                                             }),
                                             /*#__PURE__*/ _jsx(Typography, {
                                                 mb: 1,
                                                 variant: "caption",
                                                 children: "Enables an option to include all variable values"
                                             }),
-                                            state.listVariableFields.allowAll && /*#__PURE__*/ _jsx(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__*/ _jsx(Controller, {
+                                                name: "listVariableFields.customAllValue",
+                                                render: ({ field , fieldState  })=>{
+                                                    var _fieldState_error;
+                                                    /*#__PURE__*/ return _jsx(TextField, {
+                                                        ...field,
+                                                        fullWidth: true,
+                                                        label: "Custom All Value",
+                                                        InputLabelProps: {
+                                                            shrink: action === 'read' ? true : undefined
+                                                        },
+                                                        InputProps: {
+                                                            readOnly: action === 'read'
+                                                        },
+                                                        error: !!fieldState.error,
+                                                        helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'When All is selected, this value will be used',
+                                                        value: (_state_listVariableFields_customAllValue = state.listVariableFields.customAllValue) !== null && _state_listVariableFields_customAllValue !== void 0 ? _state_listVariableFields_customAllValue : '',
+                                                        onChange: (event)=>{
+                                                            field.onChange(event);
+                                                            setState((draft)=>{
+                                                                if (event.target.value) {
+                                                                    draft.listVariableFields.customAllValue = event.target.value;
+                                                                } else {
+                                                                    draft.listVariableFields.customAllValue = undefined;
+                                                                }
+                                                            });
                                                         }
                                                     });
-                                                },
-                                                helperText: "When All is selected, this value will be used"
+                                                }
                                             })
                                         ]
                                     })
@@ -398,13 +605,13 @@ export function VariableEditForm(props) {
             }),
             /*#__PURE__*/ _jsx(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();
                 }
             })
         ]