npm - @perses-dev/dashboards - Versions diffs - 0.53.0-beta.1 → 0.53.0-beta.3 - Mend

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

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 (31) hide show

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

@@ -11,20 +11,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';
-import { DEFAULT_DASHBOARD_DURATION } from '@perses-dev/core';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, getSubmitText, useValidationSchemas, TimeRangeProvider, useTimeRangeParams, useInitialTimeRange } from '@perses-dev/plugin-system';
+import { PluginKindSelect, usePluginEditor, getTitleAction, getSubmitText, useValidationSchemas } from '@perses-dev/plugin-system';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useDashboard, useListPanelGroups } from '../../context';
+import { useListPanelGroups } from '../../context';
 import { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';
-import { PanelPreview } from './PanelPreview';
 import { usePanelEditor } from './usePanelEditor';
+import { PanelQueriesSharedControls } from './PanelQueriesSharedControls';
 export function PanelEditorForm(props) {
     const { initialValues, initialAction, onSave, onClose } = props;
-    const pluginEditorRef = useRef(null);
     const panelGroups = useListPanelGroups();
     const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = usePanelEditor(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
@@ -35,9 +33,6 @@ export function PanelEditorForm(props) {
         mode: 'onBlur',
         defaultValues: initialValues
     });
-    const { dashboard } = useDashboard();
-    const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : DEFAULT_DASHBOARD_DURATION;
-    const initialTimeRange = useInitialTimeRange(dashboardDuration);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = usePluginEditor({
         pluginTypes: [
@@ -113,212 +108,184 @@ export function PanelEditorForm(props) {
         control: form.control,
         name: 'panelDefinition.spec.plugin.kind'
     });
-    const { timeRange } = useTimeRangeParams(initialTimeRange);
     const handleSubmit = useCallback(()=>{
-        pluginEditorRef.current?.flushChanges?.();
         form.handleSubmit(processForm)();
     }, [
         form,
         processForm
     ]);
-    return /*#__PURE__*/ _jsx(TimeRangeProvider, {
-        timeRange: timeRange,
-        children: /*#__PURE__*/ _jsx(FormProvider, {
-            ...form,
-            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__*/ _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,
+    return /*#__PURE__*/ _jsx(FormProvider, {
+        ...form,
+        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__*/ _jsxs(Typography, {
+                            variant: "h2",
                             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);
-                                                }
-                                            })
-                                    })
+                                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__*/ _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(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__*/ _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: 12,
-                                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                        FallbackComponent: ErrorAlert,
-                                        children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
-                                            ref: pluginEditorRef,
-                                            control: form.control,
-                                            panelDefinition: panelDefinition,
-                                            onJSONChange: handlePanelDefinitionChange,
-                                            onQueriesChange: (queries)=>{
-                                                setQueries(queries);
+                                })
+                            }),
+                            /*#__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);
                                             },
-                                            onPluginSpecChange: (spec)=>{
-                                                pluginEditor.onSpecChange(spec);
+                                            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(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(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__*/ _jsx(ErrorBoundary, {
+                                FallbackComponent: ErrorAlert,
+                                children: /*#__PURE__*/ _jsx(PanelQueriesSharedControls, {
+                                    control: form.control,
+                                    plugin: plugin,
+                                    panelDefinition: panelDefinition,
+                                    onQueriesChange: (q)=>setQueries(q),
+                                    onPluginSpecChange: (spec)=>{
+                                        pluginEditor.onSpecChange(spec);
+                                    },
+                                    onJSONChange: handlePanelDefinitionChange
+                                })
+                            })
+                        ]
                     })
-                ]
-            })
+                }),
+                /*#__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 { 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":"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,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC/E,SAASC,GAAG,EAAEC,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,gBAAgB;AAC1F,SAAiBC,0BAA0B,QAA4C,mBAAmB;AAC1G,SAASC,gCAAgC,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACrG,SACEC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,aAAa,EACbC,oBAAoB,EAEpBC,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,QACd,4BAA4B;AACnC,SAASC,UAAU,EAAEC,YAAY,EAAiBC,OAAO,EAAEC,QAAQ,QAAQ,kBAAkB;AAC7F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,gBAAgB;AACjE,SAASC,mBAAmB,QAAQ,wDAAwD;AAC5F,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,cAAc,QAAQ,mBAAmB;AASlD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGJ;IAC1D,MAAMK,kBAAkBtC,OAAwB;IAChD,MAAMuC,cAAcX;IACpB,MAAM,EAAEY,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAEC,kBAAkB,EAAE,GACrGf,eAAeG,cAAcM,eAAe;IAC9C,MAAM,EAAEO,MAAM,EAAE,GAAGP,gBAAgBQ,IAAI;IACvC,MAAM,CAACC,uBAAuBC,uBAAuB,GAAGjD,SAAkB;IAE1E,MAAM,EAAEkD,iBAAiB,EAAE,GAAGjC;IAC9B,MAAMkC,OAAO5B,QAA2B;QACtC6B,UAAU3B,YAAYyB;QACtBG,MAAM;QACNC,eAAerB;IACjB;IAEA,MAAM,EAAEsB,SAAS,EAAE,GAAG7B;IACtB,MAAM8B,oBAAoBD,WAAWE,SAAS,cAAcF,UAAUR,IAAI,CAACW,QAAQ,GAAGlD;IACtF,MAAMmD,mBAAmBvC,oBAAoBoC;IAE7C,oFAAoF;IACpF,MAAMI,eAAe/C,gBAAgB;QACnCgD,aAAa;YAAC;SAAQ;QACtBC,OAAO;YAAEC,WAAW;gBAAEN,MAAMX,OAAOW,IAAI;gBAAEO,MAAM;YAAQ;YAAGjB,MAAMD,OAAOC,IAAI;QAAC;QAC5EkB,UAAU,CAACnB;YACTK,KAAKe,QAAQ,CAAC,+BAA+B;gBAAET,MAAMX,OAAOiB,SAAS,CAACN,IAAI;gBAAEV,MAAMD,OAAOC,IAAI;YAAC;YAC9FH,UAAU;gBACRa,MAAMX,OAAOiB,SAAS,CAACN,IAAI;gBAC3BV,MAAMD,OAAOC,IAAI;YACnB;QACF;QACAoB,yBAAyB,CAACC;YACxBzB,WAAW0B,WAAWD;QACxB;IACF;IAEA,MAAME,cAAcvD,eAAemB,eAAe;IAClD,MAAMqC,aAAavD,cAAckB,eAAe;IAEhD,MAAMsC,QAAQhD,SAAS;QAAEiD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAA6B;IACnF5E,UAAU;QACR4C,SAAS8B;IACX,GAAG;QAAC9B;QAAU8B;KAAM;IAEpB,MAAMG,cAAgD9E,YACpD,CAAC+E;QACCzC,OAAOyC;IACT,GACA;QAACzC;KAAO;IAGV,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,SAAS0C;QACP,IAAIC,KAAKC,SAAS,CAAC9C,mBAAmB6C,KAAKC,SAAS,CAAC5B,KAAK6B,SAAS,KAAK;YACtE/B,uBAAuB;QACzB,OAAO;YACLb;QACF;IACF;IAEA,MAAM6C,8BAA8B,CAACC;QACnC,MAAMC,eAAgCL,KAAKM,KAAK,CAACF;QACjD,MAAM,EAAEzB,MAAM4B,UAAU,EAAEtC,MAAMuC,UAAU,EAAE,GAAGH,aAAapC,IAAI,CAACD,MAAM;QACvE,6EAA6E;QAC7E,IACEP,gBAAgBQ,IAAI,CAACD,MAAM,CAACW,IAAI,KAAK4B,cACrCP,KAAKC,SAAS,CAACxC,gBAAgBQ,IAAI,CAACD,MAAM,CAACC,IAAI,MAAM+B,KAAKC,SAAS,CAACO,aACpE;YACA1B,aAAa2B,wBAAwB;QACvC;QACA1C,mBAAmBsC;IACrB;IAEA,MAAMK,cAAchE,SAAS;QAAEiD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAAoC;IAChG,MAAMe,qBAAqBjE,SAAS;QAAEiD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAA2C;IAC9G,MAAMgB,oBAAoBlE,SAAS;QAAEiD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAAmC;IACrG,MAAM,EAAEiB,SAAS,EAAE,GAAGxE,mBAAmBwC;IAEzC,MAAMiC,eAAe/F,YAAY;QAC/BwC,gBAAgBwD,OAAO,EAAEC;QACzB3C,KAAKyC,YAAY,CAACjB;IACpB,GAAG;QAACxB;QAAMwB;KAAY;IAEtB,qBACE,KAACzD;QAAkByE,WAAWA;kBAC5B,cAAA,KAACrE;YAAc,GAAG6B,IAAI;sBACpB,cAAA,MAACvB;;kCACC,MAAC3B;wBACC8F,IAAI;4BACFC,SAAS;4BACTC,YAAY;4BACZC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC,GAAG;4BACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACC,OAAO,EAAE;wBAC/D;;0CAEA,MAAChG;gCAAWiG,SAAQ;;oCAAMlC;oCAAY;;;0CACtC,MAACjE;gCAAMoG,WAAU;gCAAML,SAAS;gCAAGM,YAAW;;kDAC5C,KAACxG;wCAAOsG,SAAQ;wCAAYG,UAAU,CAACxD,KAAKyD,SAAS,CAACC,OAAO;wCAAEC,SAASlB;kDACrErB;;kDAEH,KAACrE;wCAAO6G,OAAM;wCAAYP,SAAQ;wCAAWM,SAASjC;kDAAc;;;;;;kCAKxE,KAAC5E;wBAAI+G,IAAIC;wBAAmBlB,IAAI;4BAAEmB,MAAM;4BAAGC,WAAW;4BAAUjB,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;kCACnG,cAAA,MAACjG;4BAAKiH,SAAS;4BAAChB,SAAS;;8CACvB,KAACjG;oCAAKkH,IAAI;oCAACC,IAAI;8CACb,cAAA,KAACjG;wCACCoD,SAAStB,KAAKsB,OAAO;wCACrBC,MAAK;wCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnH;gDACE,GAAGkH,KAAK;gDACTE,QAAQ;gDACRC,SAAS;gDACTC,OAAM;gDACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;gDACzBC,YAAYL,WAAWI,KAAK,EAAEE;gDAC9BjE,OAAO0B,eAAe;gDACtBvB,UAAU,CAAC+D;oDACTR,MAAMvD,QAAQ,CAAC+D;oDACfxF,QAAQwF,MAAMC,MAAM,CAACnE,KAAK;gDAC5B;;;;8CAKR,KAAC3D;oCAAKkH,IAAI;oCAACC,IAAI;8CACb,cAAA,KAACjG;wCACCoD,SAAStB,KAAKsB,OAAO;wCACrBC,MAAK;wCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnH;gDACC4H,MAAM;gDACL,GAAGV,KAAK;gDACTE,QAAQ;gDACRC,SAAS;gDACTC,OAAM;gDACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;gDACzBC,YAAYL,WAAWI,KAAK,EAAEE;gDAC9B9D,UAAU,CAAC+D;oDACTR,MAAMvD,QAAQ,CAAC+D;gDACjB;0DAEC1F,YAAY6F,GAAG,CAAC,CAACC,YAAYC,sBAC5B,KAACjI;wDAA6B0D,OAAOsE,WAAWpB,EAAE;kEAC/CoB,WAAWE,KAAK,IAAI,CAAC,MAAM,EAAED,QAAQ,GAAG;uDAD5BD,WAAWpB,EAAE;;;;8CAQtC,KAAC7G;oCAAKkH,IAAI;oCAACC,IAAI;8CACb,cAAA,KAACjG;wCACCoD,SAAStB,KAAKsB,OAAO;wCACrBC,MAAK;wCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnH;gDACE,GAAGkH,KAAK;gDACTG,SAAS;gDACTC,OAAM;gDACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;gDACzBC,YAAYL,WAAWI,KAAK,EAAEE;gDAC9BjE,OAAO2B,sBAAsB;gDAC7BxB,UAAU,CAAC+D;oDACTR,MAAMvD,QAAQ,CAAC+D;oDACfvF,eAAeuF,MAAMC,MAAM,CAACnE,KAAK;gDACnC;;;;8CAKR,KAAC3D;oCAAKkH,IAAI;oCAACC,IAAI;8CACb,cAAA,KAACjG;wCACCoD,SAAStB,KAAKsB,OAAO;wCACrBC,MAAK;wCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAC7G;gDACE,GAAG4G,KAAK;gDACT3D,aAAa;oDAAC;iDAAQ;gDACtB6D,QAAQ;gDACRC,SAAS;gDACTC,OAAM;gDACNjB,UAAU/C,aAAa2E,SAAS;gDAChCV,OAAO,CAAC,CAACjE,aAAaiE,KAAK,IAAI,CAAC,CAACJ,WAAWI,KAAK;gDACjDC,YAAYlE,aAAaiE,KAAK,EAAEE,WAAWN,WAAWI,KAAK,EAAEE;gDAC7DjE,OAAO;oDAAEE,MAAM;oDAASP,MAAMiC;gDAAkB;gDAChDzB,UAAU,CAAC+D;oDACTR,MAAMvD,QAAQ,CAAC+D,MAAMvE,IAAI;oDACzBG,aAAa4E,iBAAiB,CAACR;gDACjC;;;;8CAMR,MAAC7H;oCAAKkH,IAAI;oCAACC,IAAI;;sDACb,KAAC/G;4CAAWiG,SAAQ;4CAAKiC,cAAc;sDAAG;;sDAG1C,KAAC9H;4CAAc+H,mBAAmBhI;sDAChC,cAAA,KAACmB;gDAAaU,iBAAiBA;;;;;8CAGnC,KAACpC;oCAAKkH,IAAI;oCAACC,IAAI;8CACb,cAAA,KAAC3G;wCAAc+H,mBAAmBhI;kDAChC,cAAA,KAACI;4CACC6H,KAAKtG;4CACLoC,SAAStB,KAAKsB,OAAO;4CACrBlC,iBAAiBA;4CACjBqG,cAAc3D;4CACd4D,iBAAiB,CAACC;gDAChBnG,WAAWmG;4CACb;4CACAC,oBAAoB,CAAChG;gDACnBa,aAAaoF,YAAY,CAACjG;4CAC5B;;;;;;;kCAMV,KAACtC;wBACCwI,aAAY;wBACZC,QAAQlG;wBACRmG,UAAU;4BACRlG,uBAAuB;wBACzB;wBACAmG,kBAAkB;4BAChBnG,uBAAuB;4BACvBb;wBACF;;;;;;AAMZ;AAEA;;CAEC,GACD,OAAO,MAAM6E,oBAAoB,oBAAoB"}
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, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n PluginKindSelect,\n usePluginEditor,\n getTitleAction,\n getSubmitText,\n useValidationSchemas,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';\nimport { usePanelEditor } from './usePanelEditor';\nimport { PanelQueriesSharedControls } from './PanelQueriesSharedControls';\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 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 // 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\n const handleSubmit = useCallback(() => {\n form.handleSubmit(processForm)();\n }, [form, processForm]);\n\n return (\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 <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelQueriesSharedControls\n control={form.control}\n plugin={plugin}\n panelDefinition={panelDefinition}\n onQueriesChange={(q) => setQueries(q)}\n onPluginSpecChange={(spec) => {\n pluginEditor.onSpecChange(spec);\n }}\n onJSONChange={handlePanelDefinitionChange}\n />\n </ErrorBoundary>\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 );\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","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelEditorProvider","usePanelEditor","PanelQueriesSharedControls","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","pluginEditor","pluginTypes","value","selection","kind","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","handleSubmit","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","FallbackComponent","onQueriesChange","q","onPluginSpecChange","onSpecChange","onJSONChange","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,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~~"}
1	+ {"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAEzD,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,CAoBjH"}

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

@@ -13,7 +13,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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;
@@ -26,34 +25,14 @@ export function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
         panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
     }
-    const suggestedStepMs = useSuggestedStepMs(width);
-    const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
-    if (isLoading) {
-        return null;
-    }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
-    const queries = panelDefinition.spec.queries ?? [];
-    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = queries.length ? queries.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    }) : [];
     return /*#__PURE__*/ _jsx(Box, {
         ref: boxRef,
         height: PANEL_PREVIEW_HEIGHT,
-        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs,
-                ...plugin?.queryOptions
-            },
-            children: /*#__PURE__*/ _jsx(Panel, {
-                definition: panelDefinition
-            })
+        children: /*#__PURE__*/ _jsx(Panel, {
+            definition: panelDefinition
         })
     });
 }

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, 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~~"}
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 { 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 if (panelDefinition.spec.plugin.kind === '') {\n return null;\n }\n\n return (\n <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n <Panel definition={panelDefinition} />\n </Box>\n );\n}\n"],"names":["useContext","useRef","Box","Panel","PanelEditorContext","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","panelEditorContext","current","getBoundingClientRect","preview","setPreviewPanelWidth","spec","plugin","kind","ref","height","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;AAEpC,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASR,OAAuB;IACtC,IAAIS,QAAQJ;IAEZ,MAAMK,qBAAqBX,WAAWI;IAEtC,IAAIK,OAAOG,OAAO,KAAK,MAAM;QAC3BF,QAAQD,OAAOG,OAAO,CAACC,qBAAqB,GAAGH,KAAK;QACpDC,oBAAoBG,SAASC,uBAAuBL;IACtD;IAEA,IAAIF,gBAAgBQ,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,qBACE,KAAChB;QAAIiB,KAAKV;QAAQW,QAAQf;kBACxB,cAAA,KAACF;YAAMkB,YAAYb;;;AAGzB"}

package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { Control } from 'react-hook-form';
+import { ReactElement } from 'react';
+export interface PanelQueriesSharedControlsProps {
+    control: Control<PanelEditorValues>;
+    plugin: Definition<UnknownSpec>;
+    panelDefinition: PanelDefinition;
+    onQueriesChange: (queries: QueryDefinition[]) => void;
+    onPluginSpecChange: (spec: UnknownSpec) => void;
+    onJSONChange: (panelDefinitionStr: string) => void;
+}
+export declare function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQueriesChange, onPluginSpecChange, onJSONChange, }: PanelQueriesSharedControlsProps): ReactElement;
+//# sourceMappingURL=PanelQueriesSharedControls.d.ts.map

package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PanelQueriesSharedControls.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAA8C,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAID,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,EAAE,+BAA+B,GAAG,YAAY,CA2DhD"}