npm - @perses-dev/dashboards - Versions diffs - 0.0.0-snapshot-ts-panel-actions-76080ec → 0.0.0-snapshot-reverse-proxy-75afbd7 - Mend

@perses-dev/dashboards 0.0.0-snapshot-ts-panel-actions-76080ec → 0.0.0-snapshot-reverse-proxy-75afbd7

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

package/dist/components/PanelDrawer/PanelEditorForm.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, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, 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 } from '@perses-dev/plugin-system';
+import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, getSubmitText, useValidationSchemas, TimeRangeProvider, useTimeRangeParams, useInitialTimeRange } from '@perses-dev/plugin-system';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useListPanelGroups } from '../../context';
+import { useDashboard, useListPanelGroups } from '../../context';
+import { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';
 import { PanelPreview } from './PanelPreview';
 import { usePanelEditor } from './usePanelEditor';
 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;
@@ -32,6 +35,9 @@ 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: [
@@ -70,9 +76,11 @@ export function PanelEditorForm(props) {
         setLinks,
         links
     ]);
-    const processForm = (data)=>{
+    const processForm = useCallback((data)=>{
         onSave(data);
-    };
+    }, [
+        onSave
+    ]);
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
@@ -105,199 +113,213 @@ export function PanelEditorForm(props) {
         control: form.control,
         name: 'panelDefinition.spec.plugin.kind'
     });
-    return /*#__PURE__*/ _jsxs(FormProvider, {
-        ...form,
-        children: [
-            /*#__PURE__*/ _jsxs(Box, {
-                sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: (theme)=>theme.spacing(1, 2),
-                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                },
+    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(Typography, {
-                        variant: "h2",
-                        children: [
-                            titleAction,
-                            " Panel"
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        marginLeft: "auto",
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: (theme)=>theme.spacing(1, 2),
+                            borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                        },
                         children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "contained",
-                                disabled: !form.formState.isValid,
-                                onClick: form.handleSubmit(processForm),
-                                children: submitText
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "h2",
+                                children: [
+                                    titleAction,
+                                    " Panel"
+                                ]
                             }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                color: "secondary",
-                                variant: "outlined",
-                                onClick: handleCancel,
-                                children: "Cancel"
+                            /*#__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__*/ _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(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: 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: 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__*/ _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(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__*/ _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(Grid, {
-                            item: true,
-                            xs: 12,
-                            children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                FallbackComponent: ErrorAlert,
-                                children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
-                                    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, 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 PanelSpecEditor,\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 { 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 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> = (data) => {\n onSave(data);\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 return (\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={form.handleSubmit(processForm)}>\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 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 );\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":["useEffect","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelPreview","usePanelEditor","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","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","handleSubmit","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","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":"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"}

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;~~AAI~~/C;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,YAAY,~~CAwD~~/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"}