@perses-dev/dashboards 0.52.0 → 0.53.0-beta.1

package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -63,8 +63,6 @@ function DashboardStickyToolbar(props) {
                         display: "flex",
                         flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
                         maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
-                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
-                        ,
                         pt: 1,
                         pl: isSticky ? 1 : 0,
                         mt: isSticky && isBiggerThanMd ? 0.5 : 0,

package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -21,14 +21,9 @@ Object.defineProperty(exports, "DeletePanelGroupDialog", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
-const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _context = require("../../context");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _context.useDeletePanelGroupDialog)();
     const { setViewPanel } = (0, _context.useViewPanel)();
@@ -42,26 +37,16 @@ const DeletePanelGroupDialog = ()=>{
         closeDeletePanelGroupDialog();
         setViewPanel(undefined);
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
                 children: "Delete Panel Group"
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closeDeletePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
-            }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("form", {
                 onSubmit: handleDelete,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogContent, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Content, {
                         dividers: true,
                         sx: {
                             width: '500px'
@@ -72,7 +57,7 @@ const DeletePanelGroupDialog = ()=>{
                             "? This will delete all the panels within the group."
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogActions, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Actions, {
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                                 variant: "contained",

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -25,9 +25,10 @@ const _material = require("@mui/material");
 const _reactintersectionobserver = require("react-intersection-observer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _core = require("@perses-dev/core");
 const _context = require("../../context");
 const _Panel = require("../Panel");
-const _panelgroupslice = require("../../context/DashboardProvider/panel-group-slice");
+const _QueryViewerDialog = require("../QueryViewerDialog");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -93,7 +94,7 @@ function GridItemContent(props) {
         queries
     ]);
     const readHandlers = {
-        isPanelViewed: (0, _panelgroupslice.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
+        isPanelViewed: (0, _core.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
             if (viewPanelGroupItemId === undefined) {
                 viewPanel(panelGroupItemId);
@@ -122,38 +123,6 @@ function GridItemContent(props) {
         };
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
-    const queryRows = (0, _react.useMemo)(()=>{
-        if (!queries?.length) return null;
-        const queryItems = [];
-        queries.forEach((query, index)=>{
-            if (query?.spec?.plugin?.kind && query?.kind) {
-                queryItems.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.default.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginSpecEditor, {
-                            value: query.spec.plugin.spec,
-                            pluginSelection: {
-                                kind: query.spec.plugin.kind,
-                                type: query.kind
-                            },
-                            onChange: ()=>{},
-                            isReadonly: true
-                        }),
-                        index < queries.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                            sx: {
-                                my: 2
-                            }
-                        })
-                    ]
-                }, `query-${index}`));
-            }
-        });
-        return queryItems;
-    }, [
-        queries
-    ]);
-    const onCloseHandler = ()=>{
-        setOpenQueryViewer(false);
-    };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ref: ref,
         sx: {
@@ -161,38 +130,6 @@ function GridItemContent(props) {
             height: '100%'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
-                fullWidth: true,
-                PaperProps: {
-                    sx: {
-                        margin: '10px',
-                        width: 'calc(100% - 20px)'
-                    }
-                },
-                maxWidth: "lg",
-                open: openQueryViewer,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
-                        children: "Query Viewer"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                            sx: {
-                                padding: '5px'
-                            },
-                            children: queryRows
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogActions, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                            variant: "outlined",
-                            onClick: onCloseHandler,
-                            color: "primary",
-                            children: "Close"
-                        })
-                    })
-                ]
-            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
                 definitions: definitions,
                 options: {
@@ -210,6 +147,11 @@ function GridItemContent(props) {
                     panelOptions: props.panelOptions,
                     panelGroupItemId: panelGroupItemId
                 })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryViewerDialog.QueryViewerDialog, {
+                open: openQueryViewer,
+                queryDefinitions: queryDefinitions,
+                onClose: ()=>setOpenQueryViewer(false)
             })
         ]
     });

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/components/LeaveDialog/LeaveDialog.js

@@ -65,8 +65,17 @@ function Prompt({ isBlocked, message }) {
     });
 }
 function LeaveDialog({ original, current }) {
+    const handleIsBlocked = (ctx)=>{
+        if (JSON.stringify(original) !== JSON.stringify(current)) {
+            // Only block navigation if the pathname is changing (=> ignore search params changes)
+            if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {
+                return true;
+            }
+        }
+        return false;
+    };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Prompt, {
-        isBlocked: JSON.stringify(original) !== JSON.stringify(current),
+        isBlocked: handleIsBlocked,
         message: "You have unsaved changes, are you sure you want to leave?"
     });
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -52,7 +52,6 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         width,
         height
     ]);
-    const chartsTheme = (0, _components.useChartsTheme)();
     const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
     const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
     const panelPropsForActions = (0, _react.useMemo)(()=>{
@@ -179,7 +178,9 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 pluginActions: pluginActions,
                 showIcons: showIcons,
                 sx: {
-                    paddingX: `${chartsTheme.container.padding.default}px`
+                    py: '2px',
+                    pl: '8px',
+                    pr: '2px'
                 },
                 dimension: contentDimensions
             }),

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

@@ -33,15 +33,7 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
     const textRef = (0, _react.useRef)(null);
-    const [isEllipsisActive, setIsEllipsisActive] = (0, _react.useState)(false);
-    (0, _react.useEffect)(()=>{
-        if (textRef.current && dimension?.width) {
-            setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);
-        }
-    }, [
-        title,
-        dimension?.width
-    ]);
+    const isEllipsisActive = textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",

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

@@ -37,6 +37,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _context = require("../../context");
+const _PanelEditorProvider = require("../../context/PanelEditorProvider/PanelEditorProvider");
 const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
 function PanelEditorForm(props) {
@@ -140,200 +141,202 @@ function PanelEditorForm(props) {
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
         timeRange: timeRange,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_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: [
-                                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: handleSubmit,
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__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)(_PanelEditorProvider.PanelEditorProvider, {
+                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.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    control: form.control,
-                                    name: "panelDefinition.spec.display.name",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                            ...field,
-                                            required: true,
-                                            fullWidth: true,
-                                            label: "Name",
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            value: watchedName ?? '',
-                                            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, {
-                                    control: form.control,
-                                    name: "groupId",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                            select: true,
-                                            ...field,
-                                            required: true,
-                                            fullWidth: true,
-                                            label: "Group",
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            onChange: (event)=>{
-                                                field.onChange(event);
-                                            },
-                                            children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                    value: panelGroup.id,
-                                                    children: panelGroup.title ?? `Group ${index + 1}`
-                                                }, panelGroup.id))
-                                        })
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    control: form.control,
-                                    name: "panelDefinition.spec.display.description",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                            ...field,
-                                            fullWidth: true,
-                                            label: "Description",
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            value: watchedDescription ?? '',
-                                            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, {
-                                    control: form.control,
-                                    name: "panelDefinition.spec.plugin.kind",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
-                                            ...field,
-                                            pluginTypes: [
-                                                'Panel'
-                                            ],
-                                            required: true,
-                                            fullWidth: true,
-                                            label: "Type",
-                                            disabled: pluginEditor.isLoading,
-                                            error: !!pluginEditor.error || !!fieldState.error,
-                                            helperText: pluginEditor.error?.message ?? fieldState.error?.message,
-                                            value: {
-                                                type: 'Panel',
-                                                kind: watchedPluginKind
-                                            },
-                                            onChange: (event)=>{
-                                                field.onChange(event.kind);
-                                                pluginEditor.onSelectionChange(event);
-                                            }
-                                        })
-                                })
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                variant: "h2",
+                                children: [
+                                    titleAction,
+                                    " Panel"
+                                ]
                             }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                                item: true,
-                                xs: 12,
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                marginLeft: "auto",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                        variant: "h4",
-                                        marginBottom: 1,
-                                        children: "Preview"
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                        variant: "contained",
+                                        disabled: !form.formState.isValid,
+                                        onClick: handleSubmit,
+                                        children: submitText
                                     }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                        FallbackComponent: _components.ErrorAlert,
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
-                                            panelDefinition: panelDefinition
-                                        })
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                        color: "secondary",
+                                        variant: "outlined",
+                                        onClick: handleCancel,
+                                        children: "Cancel"
                                     })
                                 ]
-                            }),
-                            /*#__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, {
-                                        ref: pluginEditorRef,
+                            })
+                        ]
+                    }),
+                    /*#__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.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                        control: form.control,
+                                        name: "panelDefinition.spec.display.name",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                ...field,
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Name",
+                                                error: !!fieldState.error,
+                                                helperText: fieldState.error?.message,
+                                                value: watchedName ?? '',
+                                                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, {
+                                        control: form.control,
+                                        name: "groupId",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                select: true,
+                                                ...field,
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Group",
+                                                error: !!fieldState.error,
+                                                helperText: fieldState.error?.message,
+                                                onChange: (event)=>{
+                                                    field.onChange(event);
+                                                },
+                                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                        value: panelGroup.id,
+                                                        children: panelGroup.title ?? `Group ${index + 1}`
+                                                    }, panelGroup.id))
+                                            })
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                        control: form.control,
+                                        name: "panelDefinition.spec.display.description",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                ...field,
+                                                fullWidth: true,
+                                                label: "Description",
+                                                error: !!fieldState.error,
+                                                helperText: fieldState.error?.message,
+                                                value: watchedDescription ?? '',
+                                                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, {
                                         control: form.control,
-                                        panelDefinition: panelDefinition,
-                                        onJSONChange: handlePanelDefinitionChange,
-                                        onQueriesChange: (queries)=>{
-                                            setQueries(queries);
-                                        },
-                                        onPluginSpecChange: (spec)=>{
-                                            pluginEditor.onSpecChange(spec);
-                                        }
+                                        name: "panelDefinition.spec.plugin.kind",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                                ...field,
+                                                pluginTypes: [
+                                                    'Panel'
+                                                ],
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Type",
+                                                disabled: pluginEditor.isLoading,
+                                                error: !!pluginEditor.error || !!fieldState.error,
+                                                helperText: pluginEditor.error?.message ?? fieldState.error?.message,
+                                                value: {
+                                                    type: 'Panel',
+                                                    kind: watchedPluginKind
+                                                },
+                                                onChange: (event)=>{
+                                                    field.onChange(event.kind);
+                                                    pluginEditor.onSelectionChange(event);
+                                                }
+                                            })
+                                    })
+                                }),
+                                /*#__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, {
+                                            ref: pluginEditorRef,
+                                            control: form.control,
+                                            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();
+                        }
                     })
-                }),
-                /*#__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();
-                    }
-                })
-            ]
+                ]
+            })
         })
     });
 }