npm - @perses-dev/dashboards - Versions diffs - 0.52.0 → 0.53.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/components/PanelDrawer/PanelEditorForm.js CHANGED Viewed

@@ -19,6 +19,7 @@ import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, get
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useDashboard, useListPanelGroups } from '../../context';
+import { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';
 import { PanelPreview } from './PanelPreview';
 import { usePanelEditor } from './usePanelEditor';
 export function PanelEditorForm(props) {
@@ -122,200 +123,202 @@ export function PanelEditorForm(props) {
     ]);
     return /*#__PURE__*/ _jsx(TimeRangeProvider, {
         timeRange: timeRange,
-        children: /*#__PURE__*/ _jsxs(FormProvider, {
+        children: /*#__PURE__*/ _jsx(FormProvider, {
             ...form,
-            children: [
-                /*#__PURE__*/ _jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: (theme)=>theme.spacing(1, 2),
-                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsxs(Typography, {
-                            variant: "h2",
-                            children: [
-                                titleAction,
-                                " Panel"
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "contained",
-                                    disabled: !form.formState.isValid,
-                                    onClick: handleSubmit,
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(Box, {
-                    id: panelEditorFormId,
-                    sx: {
-                        flex: 1,
-                        overflowY: 'scroll',
-                        padding: (theme)=>theme.spacing(2)
-                    },
-                    children: /*#__PURE__*/ _jsxs(Grid, {
-                        container: true,
-                        spacing: 2,
+            children: /*#__PURE__*/ _jsxs(PanelEditorProvider, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: (theme)=>theme.spacing(1, 2),
+                            borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                        },
                         children: [
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    control: form.control,
-                                    name: "panelDefinition.spec.display.name",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    control: form.control,
-                                    name: "groupId",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(MenuItem, {
-                                                    value: panelGroup.id,
-                                                    children: panelGroup.title ?? `Group ${index + 1}`
-                                                }, panelGroup.id))
-                                        })
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    control: form.control,
-                                    name: "panelDefinition.spec.display.description",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    control: form.control,
-                                    name: "panelDefinition.spec.plugin.kind",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsxs(Typography, {
+                                variant: "h2",
+                                children: [
+                                    titleAction,
+                                    " Panel"
+                                ]
                             }),
-                            /*#__PURE__*/ _jsxs(Grid, {
-                                item: true,
-                                xs: 12,
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                marginLeft: "auto",
                                 children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "h4",
-                                        marginBottom: 1,
-                                        children: "Preview"
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        disabled: !form.formState.isValid,
+                                        onClick: handleSubmit,
+                                        children: submitText
                                     }),
-                                    /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                        FallbackComponent: ErrorAlert,
-                                        children: /*#__PURE__*/ _jsx(PanelPreview, {
-                                            panelDefinition: panelDefinition
-                                        })
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        color: "secondary",
+                                        variant: "outlined",
+                                        onClick: handleCancel,
+                                        children: "Cancel"
                                     })
                                 ]
-                            }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 12,
-                                children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                    FallbackComponent: ErrorAlert,
-                                    children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
-                                        ref: pluginEditorRef,
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        id: panelEditorFormId,
+                        sx: {
+                            flex: 1,
+                            overflowY: 'scroll',
+                            padding: (theme)=>theme.spacing(2)
+                        },
+                        children: /*#__PURE__*/ _jsxs(Grid, {
+                            container: true,
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ _jsx(Controller, {
+                                        control: form.control,
+                                        name: "panelDefinition.spec.display.name",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 4,
+                                    children: /*#__PURE__*/ _jsx(Controller, {
+                                        control: form.control,
+                                        name: "groupId",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(MenuItem, {
+                                                        value: panelGroup.id,
+                                                        children: panelGroup.title ?? `Group ${index + 1}`
+                                                    }, panelGroup.id))
+                                            })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ _jsx(Controller, {
+                                        control: form.control,
+                                        name: "panelDefinition.spec.display.description",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 4,
+                                    children: /*#__PURE__*/ _jsx(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__*/ _jsx(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__*/ _jsxs(Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "h4",
+                                            marginBottom: 1,
+                                            children: "Preview"
+                                        }),
+                                        /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                            FallbackComponent: ErrorAlert,
+                                            children: /*#__PURE__*/ _jsx(PanelPreview, {
+                                                panelDefinition: panelDefinition
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                        FallbackComponent: ErrorAlert,
+                                        children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
+                                            ref: pluginEditorRef,
+                                            control: form.control,
+                                            panelDefinition: panelDefinition,
+                                            onJSONChange: handlePanelDefinitionChange,
+                                            onQueriesChange: (queries)=>{
+                                                setQueries(queries);
+                                            },
+                                            onPluginSpecChange: (spec)=>{
+                                                pluginEditor.onSpecChange(spec);
+                                            }
+                                        })
                                     })
                                 })
-                            })
-                        ]
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(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__*/ _jsx(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();
-                    }
-                })
-            ]
+                ]
+            })
         })
     });
 }

package/dist/components/PanelDrawer/PanelEditorForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, DEFAULT_DASHBOARD_DURATION, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n PluginKindSelect,\n usePluginEditor,\n PanelSpecEditor,\n getTitleAction,\n getSubmitText,\n useValidationSchemas,\n PluginEditorRef,\n TimeRangeProvider,\n useTimeRangeParams,\n useInitialTimeRange,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useDashboard, useListPanelGroups } from '../../context';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n initialValues: PanelEditorValues;\n initialAction: Action;\n onSave: (values: PanelEditorValues) => void;\n onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps): ReactElement {\n const { initialValues, initialAction, onSave, onClose } = props;\n const pluginEditorRef = useRef<PluginEditorRef>(null);\n const panelGroups = useListPanelGroups();\n const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n usePanelEditor(initialValues.panelDefinition);\n const { plugin } = panelDefinition.spec;\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n const { panelEditorSchema } = useValidationSchemas();\n const form = useForm<PanelEditorValues>({\n resolver: zodResolver(panelEditorSchema),\n mode: 'onBlur',\n defaultValues: initialValues,\n });\n\n const { dashboard } = useDashboard();\n const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : DEFAULT_DASHBOARD_DURATION;\n const initialTimeRange = useInitialTimeRange(dashboardDuration);\n\n // Use common plugin editor logic even though we've split the inputs up in this form\n const pluginEditor = usePluginEditor({\n pluginTypes: ['Panel'],\n value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n onChange: (plugin) => {\n form.setValue('panelDefinition.spec.plugin', { kind: plugin.selection.kind, spec: plugin.spec });\n setPlugin({\n kind: plugin.selection.kind,\n spec: plugin.spec,\n });\n },\n onHideQueryEditorChange: (isHidden) => {\n setQueries(undefined, isHidden);\n },\n });\n\n const titleAction = getTitleAction(initialAction, true);\n const submitText = getSubmitText(initialAction, true);\n\n const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n useEffect(() => {\n setLinks(links);\n }, [setLinks, links]);\n\n const processForm: SubmitHandler<PanelEditorValues> = useCallback(\n (data) => {\n onSave(data);\n },\n [onSave]\n );\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\n const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n // if panel plugin kind and spec are modified, then need to save current spec\n if (\n panelDefinition.spec.plugin.kind !== pluginKind &&\n JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n ) {\n pluginEditor.rememberCurrentSpecState();\n }\n setPanelDefinition(nextPanelDef);\n };\n\n const watchedName = useWatch({ control: form.control, name: 'panelDefinition.spec.display.name' });\n const watchedDescription = useWatch({ control: form.control, name: 'panelDefinition.spec.display.description' });\n const watchedPluginKind = useWatch({ control: form.control, name: 'panelDefinition.spec.plugin.kind' });\n const { timeRange } = useTimeRangeParams(initialTimeRange);\n\n const handleSubmit = useCallback(() => {\n pluginEditorRef.current?.flushChanges?.();\n form.handleSubmit(processForm)();\n }, [form, processForm]);\n\n return (\n <TimeRangeProvider timeRange={timeRange}>\n <FormProvider {...form}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Panel</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={handleSubmit}>\n {submitText}\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n <Grid container spacing={2}>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"panelDefinition.spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n label=\"Name\"\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={watchedName ?? ''}\n onChange={(event) => {\n field.onChange(event);\n setName(event.target.value);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"groupId\"\n render={({ field, fieldState }) => (\n <TextField\n select\n {...field}\n required\n fullWidth\n label=\"Group\"\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n onChange={(event) => {\n field.onChange(event);\n }}\n >\n {panelGroups.map((panelGroup, index) => (\n <MenuItem key={panelGroup.id} value={panelGroup.id}>\n {panelGroup.title ?? `Group ${index + 1}`}\n </MenuItem>\n ))}\n </TextField>\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"panelDefinition.spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Description\"\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={watchedDescription ?? ''}\n onChange={(event) => {\n field.onChange(event);\n setDescription(event.target.value);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"panelDefinition.spec.plugin.kind\"\n render={({ field, fieldState }) => (\n <PluginKindSelect\n {...field}\n pluginTypes={['Panel']}\n required\n fullWidth\n label=\"Type\"\n disabled={pluginEditor.isLoading}\n error={!!pluginEditor.error \|\| !!fieldState.error}\n helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n value={{ type: 'Panel', kind: watchedPluginKind }}\n onChange={(event) => {\n field.onChange(event.kind);\n pluginEditor.onSelectionChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={12}>\n <Typography variant=\"h4\" marginBottom={1}>\n Preview\n </Typography>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelPreview panelDefinition={panelDefinition} />\n </ErrorBoundary>\n </Grid>\n <Grid item xs={12}>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelSpecEditor\n ref={pluginEditorRef}\n control={form.control}\n panelDefinition={panelDefinition}\n onJSONChange={handlePanelDefinitionChange}\n onQueriesChange={(queries) => {\n setQueries(queries);\n }}\n onPluginSpecChange={(spec) => {\n pluginEditor.onSpecChange(spec);\n }}\n />\n </ErrorBoundary>\n </Grid>\n </Grid>\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => {\n setDiscardDialogOpened(false);\n }}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </FormProvider>\n </TimeRangeProvider>\n );\n}\n\n/*\n The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useCallback","useEffect","useRef","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DEFAULT_DASHBOARD_DURATION","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","useValidationSchemas","TimeRangeProvider","useTimeRangeParams","useInitialTimeRange","Controller","FormProvider","useForm","useWatch","zodResolver","useDashboard","useListPanelGroups","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","pluginEditorRef","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","dashboard","dashboardDuration","kind","duration","initialTimeRange","pluginEditor","pluginTypes","value","selection","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","JSON","stringify","getValues","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","timeRange","handleSubmit","current","flushChanges","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","required","fullWidth","label","error","helperText","message","event","target","select","map","panelGroup","index","title","isLoading","onSelectionChange","marginBottom","FallbackComponent","ref","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","description","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, DEFAULT_DASHBOARD_DURATION, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n PluginKindSelect,\n usePluginEditor,\n PanelSpecEditor,\n getTitleAction,\n getSubmitText,\n useValidationSchemas,\n PluginEditorRef,\n TimeRangeProvider,\n useTimeRangeParams,\n useInitialTimeRange,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useDashboard, useListPanelGroups } from '../../context';\nimport { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n initialValues: PanelEditorValues;\n initialAction: Action;\n onSave: (values: PanelEditorValues) => void;\n onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps): ReactElement {\n const { initialValues, initialAction, onSave, onClose } = props;\n const pluginEditorRef = useRef<PluginEditorRef>(null);\n const panelGroups = useListPanelGroups();\n const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n usePanelEditor(initialValues.panelDefinition);\n const { plugin } = panelDefinition.spec;\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n const { panelEditorSchema } = useValidationSchemas();\n const form = useForm<PanelEditorValues>({\n resolver: zodResolver(panelEditorSchema),\n mode: 'onBlur',\n defaultValues: initialValues,\n });\n\n const { dashboard } = useDashboard();\n const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : DEFAULT_DASHBOARD_DURATION;\n const initialTimeRange = useInitialTimeRange(dashboardDuration);\n\n // Use common plugin editor logic even though we've split the inputs up in this form\n const pluginEditor = usePluginEditor({\n pluginTypes: ['Panel'],\n value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n onChange: (plugin) => {\n form.setValue('panelDefinition.spec.plugin', { kind: plugin.selection.kind, spec: plugin.spec });\n setPlugin({\n kind: plugin.selection.kind,\n spec: plugin.spec,\n });\n },\n onHideQueryEditorChange: (isHidden) => {\n setQueries(undefined, isHidden);\n },\n });\n\n const titleAction = getTitleAction(initialAction, true);\n const submitText = getSubmitText(initialAction, true);\n\n const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n useEffect(() => {\n setLinks(links);\n }, [setLinks, links]);\n\n const processForm: SubmitHandler<PanelEditorValues> = useCallback(\n (data) => {\n onSave(data);\n },\n [onSave]\n );\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\n const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n // if panel plugin kind and spec are modified, then need to save current spec\n if (\n panelDefinition.spec.plugin.kind !== pluginKind &&\n JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n ) {\n pluginEditor.rememberCurrentSpecState();\n }\n setPanelDefinition(nextPanelDef);\n };\n\n const watchedName = useWatch({ control: form.control, name: 'panelDefinition.spec.display.name' });\n const watchedDescription = useWatch({ control: form.control, name: 'panelDefinition.spec.display.description' });\n const watchedPluginKind = useWatch({ control: form.control, name: 'panelDefinition.spec.plugin.kind' });\n const { timeRange } = useTimeRangeParams(initialTimeRange);\n\n const handleSubmit = useCallback(() => {\n pluginEditorRef.current?.flushChanges?.();\n form.handleSubmit(processForm)();\n }, [form, processForm]);\n\n return (\n <TimeRangeProvider timeRange={timeRange}>\n <FormProvider {...form}>\n <PanelEditorProvider>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Panel</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={handleSubmit}>\n {submitText}\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n <Grid container spacing={2}>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"panelDefinition.spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n label=\"Name\"\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={watchedName ?? ''}\n onChange={(event) => {\n field.onChange(event);\n setName(event.target.value);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"groupId\"\n render={({ field, fieldState }) => (\n <TextField\n select\n {...field}\n required\n fullWidth\n label=\"Group\"\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n onChange={(event) => {\n field.onChange(event);\n }}\n >\n {panelGroups.map((panelGroup, index) => (\n <MenuItem key={panelGroup.id} value={panelGroup.id}>\n {panelGroup.title ?? `Group ${index + 1}`}\n </MenuItem>\n ))}\n </TextField>\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"panelDefinition.spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Description\"\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={watchedDescription ?? ''}\n onChange={(event) => {\n field.onChange(event);\n setDescription(event.target.value);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"panelDefinition.spec.plugin.kind\"\n render={({ field, fieldState }) => (\n <PluginKindSelect\n {...field}\n pluginTypes={['Panel']}\n required\n fullWidth\n label=\"Type\"\n disabled={pluginEditor.isLoading}\n error={!!pluginEditor.error \|\| !!fieldState.error}\n helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n value={{ type: 'Panel', kind: watchedPluginKind }}\n onChange={(event) => {\n field.onChange(event.kind);\n pluginEditor.onSelectionChange(event);\n }}\n />\n )}\n />\n </Grid>\n\n <Grid item xs={12}>\n <Typography variant=\"h4\" marginBottom={1}>\n Preview\n </Typography>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelPreview panelDefinition={panelDefinition} />\n </ErrorBoundary>\n </Grid>\n <Grid item xs={12}>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelSpecEditor\n ref={pluginEditorRef}\n control={form.control}\n panelDefinition={panelDefinition}\n onJSONChange={handlePanelDefinitionChange}\n onQueriesChange={(queries) => {\n setQueries(queries);\n }}\n onPluginSpecChange={(spec) => {\n pluginEditor.onSpecChange(spec);\n }}\n />\n </ErrorBoundary>\n </Grid>\n </Grid>\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => {\n setDiscardDialogOpened(false);\n }}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </PanelEditorProvider>\n </FormProvider>\n </TimeRangeProvider>\n );\n}\n\n/*\n The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useCallback","useEffect","useRef","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DEFAULT_DASHBOARD_DURATION","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","useValidationSchemas","TimeRangeProvider","useTimeRangeParams","useInitialTimeRange","Controller","FormProvider","useForm","useWatch","zodResolver","useDashboard","useListPanelGroups","PanelEditorProvider","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","pluginEditorRef","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","dashboard","dashboardDuration","kind","duration","initialTimeRange","pluginEditor","pluginTypes","value","selection","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","JSON","stringify","getValues","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","timeRange","handleSubmit","current","flushChanges","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","required","fullWidth","label","error","helperText","message","event","target","select","map","panelGroup","index","title","isLoading","onSelectionChange","marginBottom","FallbackComponent","ref","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","description","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelPreview.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,~~EAAU~~,MAAM,OAAO,CAAC;~~AAG7C~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;~~AAMrD~~,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,YAAY,GAAG,IAAI,~~CAoCjH~~"}
1	+ {"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,YAAY,GAAG,IAAI,CAyCjH"}

package/dist/components/PanelDrawer/PanelPreview.js CHANGED Viewed

@@ -11,17 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { Box } from '@mui/material';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { Panel } from '../Panel';
+import { PanelEditorContext } from '../../context';
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
 export function PanelPreview({ panelDefinition }) {
     const boxRef = useRef(null);
     let width = PANEL_PREVIEW_DEFAULT_WIDTH;
+    const panelEditorContext = useContext(PanelEditorContext);
     if (boxRef.current !== null) {
         width = boxRef.current.getBoundingClientRect().width;
+        panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
     }
     const suggestedStepMs = useSuggestedStepMs(width);
     const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);

package/dist/components/PanelDrawer/PanelPreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement \| null {\n const boxRef = useRef<HTMLDivElement>(null);\n let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n if (boxRef.current !== null) {\n width = boxRef.current.getBoundingClientRect().width;\n }\n const suggestedStepMs = useSuggestedStepMs(width);\n\n const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n if (isLoading) {\n return null;\n }\n\n if (panelDefinition.spec.plugin.kind === '') {\n return null;\n }\n\n const queries = panelDefinition.spec.queries ?? [];\n\n // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.length\n ? queries.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n })\n : [];\n\n return (\n <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n <Panel definition={panelDefinition} />\n </DataQueriesProvider>\n </Box>\n );\n}\n"],"names":["useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","data","plugin","isLoading","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,MAAM,QAAQ,QAAQ;~~AAC7C~~,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;~~AAEjC~~,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,~~SAASV~~,OAAuB;IACtC,~~IAAIW~~,QAAQJ;~~IACZ~~,~~IAAIG~~,~~OAAOE~~,OAAO,KAAK,MAAM;~~QAC3BD~~,QAAQD,~~OAAOE~~,OAAO,CAACC,qBAAqB,~~GAAGF~~,KAAK;IACtD;~~IACA~~,~~MAAMG~~,~~kBAAkBV~~,~~mBAAmBO~~;IAE3C,MAAM,~~EAAEI~~,MAAMC,MAAM,EAAEC,SAAS,EAAE,~~GAAGd~~,UAAU,~~SAASM~~,~~gBAAgBS~~,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,~~IAAIR~~,~~gBAAgBS~~,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,MAAMC,~~UAAUX~~,~~gBAAgBS~~,IAAI,CAACE,OAAO,IAAI,EAAE;IAElD,2DAA2D;IAC3D,MAAMC,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,~~KAACjB~~;~~QAAIwB~~,~~KAAKf~~;~~QAAQgB~~,~~QAAQpB~~;kBACxB,cAAA,~~KAACJ~~;~~YAAoBmB~~,aAAaA;YAAaM,SAAS;gBAAEb;gBAAiB,GAAGE,QAAQY,YAAY;YAAC;sBACjG,cAAA,~~KAACvB~~;~~gBAAMwB~~,~~YAAYpB~~;;;;AAI3B"}
1	+ {"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useContext, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\nimport { PanelEditorContext } from '../../context';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement \| null {\n const boxRef = useRef<HTMLDivElement>(null);\n let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n\n const panelEditorContext = useContext(PanelEditorContext);\n\n if (boxRef.current !== null) {\n width = boxRef.current.getBoundingClientRect().width;\n panelEditorContext?.preview?.setPreviewPanelWidth?.(width);\n }\n\n const suggestedStepMs = useSuggestedStepMs(width);\n\n const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n if (isLoading) {\n return null;\n }\n\n if (panelDefinition.spec.plugin.kind === '') {\n return null;\n }\n\n const queries = panelDefinition.spec.queries ?? [];\n\n // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.length\n ? queries.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n })\n : [];\n\n return (\n <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n <Panel definition={panelDefinition} />\n </DataQueriesProvider>\n </Box>\n );\n}\n"],"names":["useContext","useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PanelEditorContext","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","panelEditorContext","current","getBoundingClientRect","preview","setPreviewPanelWidth","suggestedStepMs","data","plugin","isLoading","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,UAAU,EAAEC,MAAM,QAAQ,QAAQ;AACzD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASX,OAAuB;IACtC,IAAIY,QAAQJ;IAEZ,MAAMK,qBAAqBd,WAAWO;IAEtC,IAAIK,OAAOG,OAAO,KAAK,MAAM;QAC3BF,QAAQD,OAAOG,OAAO,CAACC,qBAAqB,GAAGH,KAAK;QACpDC,oBAAoBG,SAASC,uBAAuBL;IACtD;IAEA,MAAMM,kBAAkBd,mBAAmBQ;IAE3C,MAAM,EAAEO,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGlB,UAAU,SAASO,gBAAgBY,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIX,gBAAgBY,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,MAAMC,UAAUd,gBAAgBY,IAAI,CAACE,OAAO,IAAI,EAAE;IAElD,2DAA2D;IAC3D,MAAMC,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACrB;QAAI4B,KAAKlB;QAAQmB,QAAQvB;kBACxB,cAAA,KAACL;YAAoBuB,aAAaA;YAAaM,SAAS;gBAAEb;gBAAiB,GAAGE,QAAQY,YAAY;YAAC;sBACjG,cAAA,KAAC3B;gBAAM4B,YAAYvB;;;;AAI3B"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":"~~AAeA~~,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;~~AAK~~/C;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,YAAY,~~CA6D~~/C"}
1	+ {"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAO/C;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,YAAY,CAkD/C"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js CHANGED Viewed

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
 import { useState } from 'react';
 import { useVariableValues } from '@perses-dev/plugin-system';
+import { Dialog } from '@perses-dev/components';
+import { Button } from '@mui/material';
 import { usePanelGroupEditor } from '../../context';
 import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditorForm';
 /**
@@ -47,23 +47,13 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
         },
         children: panelGroupEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                /*#__PURE__*/ _jsxs(DialogTitle, {
+                /*#__PURE__*/ _jsxs(Dialog.Header, {
                     children: [
                         panelGroupEditor.mode,
                         " Panel Group"
                     ]
                 }),
-                /*#__PURE__*/ _jsx(IconButton, {
-                    "aria-label": "Close",
-                    onClick: panelGroupEditor.close,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
-                }),
-                /*#__PURE__*/ _jsx(DialogContent, {
+                /*#__PURE__*/ _jsx(Dialog.Content, {
                     dividers: true,
                     sx: {
                         width: '500px'
@@ -74,7 +64,7 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
                         onSubmit: handleSubmit
                     })
                 }),
-                /*#__PURE__*/ _jsxs(DialogActions, {
+                /*#__PURE__*/ _jsxs(Dialog.Actions, {
                     children: [
                         /*#__PURE__*/ _jsx(Button, {
                             variant: "contained",