@perses-dev/dashboards 0.38.0 → 0.40.0

package/dist/cjs/components/Panel/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./Panel"), exports);
-function _exportStar(from, to) {
+_export_star(require("./Panel"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/components/PanelDrawer/PanelDrawer.js

@@ -16,105 +16,53 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PanelDrawer", {
     enumerable: true,
-    get: ()=>PanelDrawer
+    get: function() {
+        return PanelDrawer;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
-const _panelEditorForm = require("./PanelEditorForm");
+const _PanelEditorForm = require("./PanelEditorForm");
 const PanelDrawer = ()=>{
     const panelEditor = (0, _context.usePanelEditor)();
-    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
-    const [values, setValues] = (0, _react.useState)(undefined);
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = (0, _react.useState)(false);
-    const handleClose = ()=>{
-        const isModified = JSON.stringify(panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.initialValues) !== JSON.stringify(values);
-        if (isModified) {
-            openDiscardChangesConfirmationDialog({
-                onDiscardChanges: ()=>{
-                    closeDiscardChangesConfirmationDialog();
-                    setIsClosing(true);
-                },
-                onCancel: ()=>{
-                    closeDiscardChangesConfirmationDialog();
-                },
-                description: 'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.'
-            });
-        } else {
-            setIsClosing(true);
-        }
-    };
-    // Don't call closeDrawer on the store until the Drawer has completely transitioned out
-    const handleExited = ()=>{
-        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
-        setIsClosing(false);
-    };
     // Drawer is open if we have a model and we're not transitioning out
     const isOpen = panelEditor !== undefined && isClosing === false;
-    const handleSubmit = ()=>{
+    function handleSave(values) {
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
         if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
         setIsClosing(true);
+    }
+    const handleClose = ()=>{
+        setIsClosing(true);
+    };
+    // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
+    const handleExited = ()=>{
+        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        setIsClosing(false);
     };
-    const handleChange = (0, _react.useCallback)((values)=>{
-        setValues(values);
-    }, []);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
+    // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
+    // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
+    const handleClickOut = ()=>{
+    /* do nothing */ };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
         isOpen: isOpen,
-        onClose: handleClose,
+        onClose: handleClickOut,
         SlideProps: {
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                    sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: (theme)=>theme.spacing(1, 2),
-                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
-                            variant: "h2",
-                            children: [
-                                panelEditor.mode,
-                                " Panel"
-                            ]
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    type: "submit",
-                                    variant: "contained",
-                                    onClick: handleSubmit,
-                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
-                                }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleClose,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelEditorForm.PanelEditorForm, {
-                    initialValues: panelEditor.initialValues,
-                    onChange: handleChange
-                })
-            ]
+        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
+            initialAction: panelEditor.mode,
+            initialValues: panelEditor.initialValues,
+            onSave: handleSave,
+            onClose: handleClose
         })
     });
 };

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -21,26 +21,72 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    PanelEditorForm: ()=>PanelEditorForm,
-    panelEditorFormId: ()=>panelEditorFormId
+    PanelEditorForm: function() {
+        return PanelEditorForm;
+    },
+    panelEditorFormId: function() {
+        return panelEditorFormId;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _reacthookform = require("react-hook-form");
+const _zod = require("@hookform/resolvers/zod");
 const _context = require("../../context");
-const _panelPreview = require("./PanelPreview");
+const _validation = require("../../validation");
+const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function PanelEditorForm(props) {
-    var ref;
-    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , onChange ,  } = props;
+    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , initialAction , onSave , onClose  } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
     const [groupId, setGroupId] = (0, _react.useState)(initialGroupId);
     const { panelDefinition , setName , setDescription , setQueries , setPlugin , setPanelDefinition  } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
     const { plugin  } = panelDefinition.spec;
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
-    const pluginEditor = (0, _pluginSystem.usePluginEditor)({
+    const pluginEditor = (0, _pluginsystem.usePluginEditor)({
         pluginType: 'Panel',
         value: {
             kind: plugin.kind,
@@ -53,14 +99,42 @@ function PanelEditorForm(props) {
             setQueries(undefined, isHidden);
         }
     });
-    // Ignore string values (which would be an "empty" value from the Select) since we don't allow them to unset it
-    const handleGroupChange = (e)=>{
-        const { value  } = e.target;
-        if (typeof value === 'string') {
-            return;
+    const titleAction = (0, _pluginsystem.getTitleAction)(initialAction, true);
+    const submitText = (0, _pluginsystem.getSubmitText)(initialAction, true);
+    const form = (0, _reacthookform.useForm)({
+        resolver: (0, _zod.zodResolver)(_validation.panelEditorValidationSchema),
+        mode: 'onBlur',
+        defaultValues: {
+            name: initialPanelDef.spec.display.name,
+            groupId: initialGroupId,
+            description: initialPanelDef.spec.display.description,
+            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
         }
-        setGroupId(value);
+    });
+    const processForm = ()=>{
+        const values = {
+            groupId,
+            panelDefinition
+        };
+        onSave(values);
     };
+    // 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
+    function handleCancel() {
+        if (JSON.stringify({
+            groupId: initialGroupId,
+            panelDefinition: initialPanelDef
+        }) !== JSON.stringify({
+            groupId,
+            panelDefinition
+        })) {
+            setDiscardDialogOpened(true);
+        } else {
+            onClose();
+        }
+    }
     const handlePanelDefinitionChange = (nextPanelDef)=>{
         const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
@@ -69,146 +143,200 @@ function PanelEditorForm(props) {
         }
         setPanelDefinition(nextPanelDef);
     };
-    (0, _react.useEffect)(()=>{
-        const values = {
-            groupId,
-            panelDefinition
-        };
-        onChange(values);
-    }, [
-        groupId,
-        panelDefinition,
-        onChange
-    ]);
-    var _name, _title, _description, ref1;
-    return(// Grid maxHeight allows user to scroll inside Drawer to see all content
-    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-        component: "form",
-        id: panelEditorFormId,
-        sx: {
-            flex: 1,
-            overflowY: 'scroll',
-            padding: (theme)=>theme.spacing(2)
-        },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-            container: true,
-            spacing: 2,
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                    item: true,
-                    xs: 8,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                        required: true,
-                        fullWidth: true,
-                        label: "Name",
-                        value: (_name = panelDefinition.spec.display.name) !== null && _name !== void 0 ? _name : '',
-                        variant: "outlined",
-                        onChange: (e)=>{
-                            setName(e.target.value);
-                        }
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                    item: true,
-                    xs: 4,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                        fullWidth: true,
+    var _panelGroup_title, _pluginEditor_error_message;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
+        ...form,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                        variant: "h2",
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                id: "select-group",
-                                children: "Group"
+                            titleAction,
+                            " Panel"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        marginLeft: "auto",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                disabled: !form.formState.isValid,
+                                onClick: form.handleSubmit(processForm),
+                                children: submitText
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
-                                required: true,
-                                labelId: "select-group",
-                                label: "Group",
-                                value: groupId,
-                                onChange: handleGroupChange,
-                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                        value: panelGroup.id,
-                                        children: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
-                                    }, panelGroup.id))
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                color: "secondary",
+                                variant: "outlined",
+                                onClick: handleCancel,
+                                children: "Cancel"
                             })
                         ]
                     })
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                    item: true,
-                    xs: 8,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                        fullWidth: true,
-                        label: "Description",
-                        value: (_description = panelDefinition.spec.display.description) !== null && _description !== void 0 ? _description : '',
-                        variant: "outlined",
-                        onChange: (e)=>{
-                            setDescription(e.target.value);
-                        }
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                    item: true,
-                    xs: 4,
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                id: panelEditorFormId,
+                sx: {
+                    flex: 1,
+                    overflowY: 'scroll',
+                    padding: (theme)=>theme.spacing(2)
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                    container: true,
+                    spacing: 2,
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                            fullWidth: true,
-                            disabled: pluginEditor.isLoading,
-                            error: pluginEditor.error !== null,
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 8,
+                            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",
+                                        error: !!fieldState.error,
+                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            setName(event.target.value);
+                                        }
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 4,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                name: "groupId",
+                                render: ({ field , fieldState  })=>{
+                                    var _fieldState_error;
+                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                        select: true,
+                                        ...field,
+                                        required: true,
+                                        fullWidth: true,
+                                        label: "Group",
+                                        error: !!fieldState.error,
+                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            setGroupId(+event.target.value);
+                                        },
+                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                value: panelGroup.id,
+                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
+                                            }, panelGroup.id))
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 8,
+                            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",
+                                        error: !!fieldState.error,
+                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            setDescription(event.target.value);
+                                        }
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 4,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                name: "type",
+                                render: ({ field , fieldState  })=>{
+                                    var _pluginEditor_error, _fieldState_error;
+                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                        ...field,
+                                        pluginType: "Panel",
+                                        required: true,
+                                        fullWidth: true,
+                                        label: "Type",
+                                        disabled: pluginEditor.isLoading,
+                                        error: !!pluginEditor.error || !!fieldState.error,
+                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            pluginEditor.onKindChange(event);
+                                        }
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                            item: true,
+                            xs: 12,
                             children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                    id: "panel-type-label",
-                                    children: "Type"
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "h4",
+                                    marginBottom: 1,
+                                    children: "Preview"
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginKindSelect, {
-                                    pluginType: "Panel",
-                                    required: true,
-                                    labelId: "panel-type-label",
-                                    label: "Type",
-                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,
-                                    onChange: pluginEditor.onKindChange
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                    FallbackComponent: _components.ErrorAlert,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
+                                        panelDefinition: panelDefinition
+                                    })
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormHelperText, {
-                            children: (ref1 = (ref = pluginEditor.error) === null || ref === void 0 ? void 0 : ref.message) !== null && ref1 !== void 0 ? ref1 : ''
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                    item: true,
-                    xs: 12,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                            variant: "h4",
-                            marginBottom: 1,
-                            children: "Preview"
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelPreview.PanelPreview, {
-                                panelDefinition: panelDefinition
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 12,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
+                                    panelDefinition: panelDefinition,
+                                    onJSONChange: handlePanelDefinitionChange,
+                                    onQueriesChange: (queries)=>{
+                                        setQueries(queries);
+                                    },
+                                    onPluginSpecChange: (spec)=>{
+                                        pluginEditor.onSpecChange(spec);
+                                    }
+                                })
                             })
                         })
                     ]
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                    item: true,
-                    xs: 12,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                        FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PanelSpecEditor, {
-                            panelDefinition: panelDefinition,
-                            onJSONChange: handlePanelDefinitionChange,
-                            onQueriesChange: (queries)=>{
-                                setQueries(queries);
-                            },
-                            onPluginSpecChange: (spec)=>{
-                                pluginEditor.onSpecChange(spec);
-                            }
-                        })
-                    })
                 })
-            ]
-        })
-    }));
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+                description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
+                isOpen: isDiscardDialogOpened,
+                onCancel: ()=>{
+                    setDiscardDialogOpened(false);
+                },
+                onDiscardChanges: ()=>{
+                    setDiscardDialogOpened(false);
+                    onClose();
+                }
+            })
+        ]
+    });
 }
 const panelEditorFormId = 'panel-editor-form';