@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -11,20 +11,23 @@
 // 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 { Box, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
-import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { PluginKindSelect, usePluginEditor, PanelSpecEditor } from '@perses-dev/plugin-system';
+import { useState } from 'react';
+import { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';
+import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, getSubmitText } from '@perses-dev/plugin-system';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useListPanelGroups } from '../../context';
+import { panelEditorValidationSchema } from '../../validation';
 import { PanelPreview } from './PanelPreview';
 import { usePanelEditor } from './usePanelEditor';
 export function PanelEditorForm(props) {
-    var ref;
-    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , onChange ,  } = props;
+    const { initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId }, initialAction, onSave, onClose } = props;
     const panelGroups = useListPanelGroups();
     const [groupId, setGroupId] = useState(initialGroupId);
-    const { panelDefinition , setName , setDescription , setQueries , setPlugin , setPanelDefinition  } = usePanelEditor(initialPanelDef);
-    const { plugin  } = panelDefinition.spec;
+    const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } = usePanelEditor(initialPanelDef);
+    const { plugin } = panelDefinition.spec;
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = usePluginEditor({
         pluginType: 'Panel',
@@ -39,163 +42,249 @@ export function PanelEditorForm(props) {
             setQueries(undefined, isHidden);
         }
     });
-    // Ignore string values (which would be an "empty" value from the Select) since we don't allow them to unset it
-    const handleGroupChange = (e)=>{
-        const { value  } = e.target;
-        if (typeof value === 'string') {
-            return;
+    const titleAction = getTitleAction(initialAction, true);
+    const submitText = getSubmitText(initialAction, true);
+    const form = useForm({
+        resolver: zodResolver(panelEditorValidationSchema),
+        mode: 'onBlur',
+        defaultValues: {
+            name: initialPanelDef.spec.display.name,
+            groupId: initialGroupId,
+            description: initialPanelDef.spec.display.description,
+            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
         }
-        setGroupId(value);
+    });
+    const processForm = ()=>{
+        const values = {
+            groupId,
+            panelDefinition
+        };
+        onSave(values);
     };
-    const handlePanelDefinitionChange = (nextPanelDef)=>{
-        const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
+    // When user click on cancel, several possibilities:
+    // - create action: ask for discard approval
+    // - update action: ask for discard approval if changed
+    // - read action: don´t ask for discard approval
+    function handleCancel() {
+        if (JSON.stringify({
+            groupId: initialGroupId,
+            panelDefinition: initialPanelDef
+        }) !== JSON.stringify({
+            groupId,
+            panelDefinition
+        })) {
+            setDiscardDialogOpened(true);
+        } else {
+            onClose();
+        }
+    }
+    const handlePanelDefinitionChange = (nextPanelDefStr)=>{
+        const nextPanelDef = JSON.parse(nextPanelDefStr);
+        const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
         if (panelDefinition.spec.plugin.kind !== pluginKind && JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)) {
             pluginEditor.rememberCurrentSpecState();
         }
         setPanelDefinition(nextPanelDef);
     };
-    useEffect(()=>{
-        const values = {
-            groupId,
-            panelDefinition
-        };
-        onChange(values);
-    }, [
-        groupId,
-        panelDefinition,
-        onChange
-    ]);
-    var _name, _title, _description, ref1;
-    return(// Grid maxHeight allows user to scroll inside Drawer to see all content
-    /*#__PURE__*/ _jsx(Box, {
-        component: "form",
-        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(TextField, {
-                        required: true,
-                        fullWidth: true,
-                        label: "Name",
-                        value: (_name = panelDefinition.spec.display.name) !== null && _name !== void 0 ? _name : '',
-                        variant: "outlined",
-                        onChange: (e)=>{
-                            setName(e.target.value);
-                        }
-                    })
-                }),
-                /*#__PURE__*/ _jsx(Grid, {
-                    item: true,
-                    xs: 4,
-                    children: /*#__PURE__*/ _jsxs(FormControl, {
-                        fullWidth: true,
+    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}`
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "h2",
+                        children: [
+                            titleAction,
+                            " Panel"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        marginLeft: "auto",
                         children: [
-                            /*#__PURE__*/ _jsx(InputLabel, {
-                                id: "select-group",
-                                children: "Group"
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: !form.formState.isValid,
+                                onClick: form.handleSubmit(processForm),
+                                children: submitText
                             }),
-                            /*#__PURE__*/ _jsx(Select, {
-                                required: true,
-                                labelId: "select-group",
-                                label: "Group",
-                                value: groupId,
-                                onChange: handleGroupChange,
-                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                        value: panelGroup.id,
-                                        children: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
-                                    }, panelGroup.id))
+                            /*#__PURE__*/ _jsx(Button, {
+                                color: "secondary",
+                                variant: "outlined",
+                                onClick: handleCancel,
+                                children: "Cancel"
                             })
                         ]
                     })
-                }),
-                /*#__PURE__*/ _jsx(Grid, {
-                    item: true,
-                    xs: 8,
-                    children: /*#__PURE__*/ _jsx(TextField, {
-                        fullWidth: true,
-                        label: "Description",
-                        value: (_description = panelDefinition.spec.display.description) !== null && _description !== void 0 ? _description : '',
-                        variant: "outlined",
-                        onChange: (e)=>{
-                            setDescription(e.target.value);
-                        }
-                    })
-                }),
-                /*#__PURE__*/ _jsxs(Grid, {
-                    item: true,
-                    xs: 4,
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                id: panelEditorFormId,
+                sx: {
+                    flex: 1,
+                    overflowY: 'scroll',
+                    padding: (theme)=>theme.spacing(2)
+                },
+                children: /*#__PURE__*/ _jsxs(Grid, {
+                    container: true,
+                    spacing: 2,
                     children: [
-                        /*#__PURE__*/ _jsxs(FormControl, {
-                            fullWidth: true,
-                            disabled: pluginEditor.isLoading,
-                            error: pluginEditor.error !== null,
+                        /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 8,
+                            children: /*#__PURE__*/ _jsx(Controller, {
+                                name: "name",
+                                render: ({ field, fieldState })=>{
+                                    var _fieldState_error;
+                                    return /*#__PURE__*/ _jsx(TextField, {
+                                        ...field,
+                                        required: true,
+                                        fullWidth: true,
+                                        label: "Name",
+                                        error: !!fieldState.error,
+                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            setName(event.target.value);
+                                        }
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 4,
+                            children: /*#__PURE__*/ _jsx(Controller, {
+                                name: "groupId",
+                                render: ({ field, fieldState })=>{
+                                    var _fieldState_error;
+                                    return /*#__PURE__*/ _jsx(TextField, {
+                                        select: true,
+                                        ...field,
+                                        required: true,
+                                        fullWidth: true,
+                                        label: "Group",
+                                        error: !!fieldState.error,
+                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            setGroupId(+event.target.value);
+                                        },
+                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ {
+                                            var _panelGroup_title;
+                                            return _jsx(MenuItem, {
+                                                value: panelGroup.id,
+                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
+                                            }, panelGroup.id);
+                                        })
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 8,
+                            children: /*#__PURE__*/ _jsx(Controller, {
+                                name: "description",
+                                render: ({ field, fieldState })=>{
+                                    var _fieldState_error;
+                                    return /*#__PURE__*/ _jsx(TextField, {
+                                        ...field,
+                                        fullWidth: true,
+                                        label: "Description",
+                                        error: !!fieldState.error,
+                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            setDescription(event.target.value);
+                                        }
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 4,
+                            children: /*#__PURE__*/ _jsx(Controller, {
+                                name: "type",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                    var _pluginEditor_error, _fieldState_error;
+                                    var _pluginEditor_error_message;
+                                    return _jsx(PluginKindSelect, {
+                                        ...field,
+                                        pluginType: "Panel",
+                                        required: true,
+                                        fullWidth: true,
+                                        label: "Type",
+                                        disabled: pluginEditor.isLoading,
+                                        error: !!pluginEditor.error || !!fieldState.error,
+                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        onChange: (event)=>{
+                                            field.onChange(event);
+                                            pluginEditor.onKindChange(event);
+                                        }
+                                    });
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(Grid, {
+                            item: true,
+                            xs: 12,
                             children: [
-                                /*#__PURE__*/ _jsx(InputLabel, {
-                                    id: "panel-type-label",
-                                    children: "Type"
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "h4",
+                                    marginBottom: 1,
+                                    children: "Preview"
                                 }),
-                                /*#__PURE__*/ _jsx(PluginKindSelect, {
-                                    pluginType: "Panel",
-                                    required: true,
-                                    labelId: "panel-type-label",
-                                    label: "Type",
-                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,
-                                    onChange: pluginEditor.onKindChange
+                                /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                    FallbackComponent: ErrorAlert,
+                                    children: /*#__PURE__*/ _jsx(PanelPreview, {
+                                        panelDefinition: panelDefinition
+                                    })
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ _jsx(FormHelperText, {
-                            children: (ref1 = (ref = pluginEditor.error) === null || ref === void 0 ? void 0 : ref.message) !== null && ref1 !== void 0 ? ref1 : ''
-                        })
-                    ]
-                }),
-                /*#__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, {
+                                    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, {
-                            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();
+                }
+            })
+        ]
+    });
 }
 /**
  * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.

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

@@ -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 { useEffect, useState } from 'react';\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, usePluginEditor, PanelSpecEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onChange: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const {\n    initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId },\n    onChange,\n  } = props;\n\n  const panelGroups = useListPanelGroups();\n  const [groupId, setGroupId] = useState(initialGroupId);\n  const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialPanelDef);\n  const { plugin } = panelDefinition.spec;\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind: plugin.kind, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin(plugin);\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handlePanelDefinitionChange = (nextPanelDef: PanelDefinition) => {\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\n    setPanelDefinition(nextPanelDef);\n  };\n\n  useEffect(() => {\n    const values: PanelEditorValues = { groupId, panelDefinition };\n    onChange(values);\n  }, [groupId, panelDefinition, onChange]);\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}\n    >\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={panelDefinition.spec.display.name ?? ''}\n            variant=\"outlined\"\n            onChange={(e) => {\n              setName(e.target.value);\n            }}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={panelDefinition.spec.display.description ?? ''}\n            variant=\"outlined\"\n            onChange={(e) => {\n              setDescription(e.target.value);\n            }}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\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              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  );\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","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","useListPanelGroups","PanelPreview","usePanelEditor","PanelEditorForm","props","pluginEditor","initialValues","panelDefinition","initialPanelDef","groupId","initialGroupId","onChange","panelGroups","setGroupId","setName","setDescription","setQueries","setPlugin","setPanelDefinition","plugin","spec","pluginType","value","kind","onHideQueryEditorChange","isHidden","undefined","handleGroupChange","e","target","handlePanelDefinitionChange","nextPanelDef","pluginKind","pluginSpec","JSON","stringify","rememberCurrentSpecState","values","panelGroup","component","id","panelEditorFormId","sx","flex","overflowY","padding","theme","spacing","container","item","xs","required","fullWidth","label","display","name","variant","labelId","map","index","title","description","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange"],"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;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SACEC,GAAG,EACHC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,MAAM,EAENC,SAAS,EACTC,UAAU,QACL,eAAe,CAAC;AAEvB,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,eAAe,QAAQ,2BAA2B,CAAC;AAC/F,SAASC,kBAAkB,QAAQ,eAAe,CAAC;AAEnD,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAC9C,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAOlD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;QA0GlCC,GAAkB;IAzG3C,MAAM,EACJC,aAAa,EAAE,EAAEC,eAAe,EAAEC,eAAe,CAAA,EAAEC,OAAO,EAAEC,cAAc,CAAA,EAAE,CAAA,EAC5EC,QAAQ,CAAA,IACT,GAAGP,KAAK,AAAC;IAEV,MAAMQ,WAAW,GAAGZ,kBAAkB,EAAE,AAAC;IACzC,MAAM,CAACS,OAAO,EAAEI,UAAU,CAAC,GAAG5B,QAAQ,CAACyB,cAAc,CAAC,AAAC;IACvD,MAAM,EAAEH,eAAe,CAAA,EAAEO,OAAO,CAAA,EAAEC,cAAc,CAAA,EAAEC,UAAU,CAAA,EAAEC,SAAS,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAC3FhB,cAAc,CAACM,eAAe,CAAC,AAAC;IAClC,MAAM,EAAEW,MAAM,CAAA,EAAE,GAAGZ,eAAe,CAACa,IAAI,AAAC;IAExC,oFAAoF;IACpF,MAAMf,YAAY,GAAGP,eAAe,CAAC;QACnCuB,UAAU,EAAE,OAAO;QACnBC,KAAK,EAAE;YAAEC,IAAI,EAAEJ,MAAM,CAACI,IAAI;YAAEH,IAAI,EAAED,MAAM,CAACC,IAAI;SAAE;QAC/CT,QAAQ,EAAE,CAACQ,MAAM,GAAK;YACpBF,SAAS,CAACE,MAAM,CAAC,CAAC;QACpB,CAAC;QACDK,uBAAuB,EAAE,CAACC,QAAQ,GAAK;YACrCT,UAAU,CAACU,SAAS,EAAED,QAAQ,CAAC,CAAC;QAClC,CAAC;KACF,CAAC,AAAC;IAEH,+GAA+G;IAC/G,MAAME,iBAAiB,GAAoC,CAACC,CAAC,GAAK;QAChE,MAAM,EAAEN,KAAK,CAAA,EAAE,GAAGM,CAAC,CAACC,MAAM,AAAC;QAC3B,IAAI,OAAOP,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO;QACT,CAAC;QACDT,UAAU,CAACS,KAAK,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,MAAMQ,2BAA2B,GAAG,CAACC,YAA6B,GAAK;QACrE,MAAM,EAAER,IAAI,EAAES,UAAU,CAAA,EAAEZ,IAAI,EAAEa,UAAU,CAAA,EAAE,GAAGF,YAAY,CAACX,IAAI,CAACD,MAAM,AAAC;QACxE,6EAA6E;QAC7E,IACEZ,eAAe,CAACa,IAAI,CAACD,MAAM,CAACI,IAAI,KAAKS,UAAU,IAC/CE,IAAI,CAACC,SAAS,CAAC5B,eAAe,CAACa,IAAI,CAACD,MAAM,CAACC,IAAI,CAAC,KAAKc,IAAI,CAACC,SAAS,CAACF,UAAU,CAAC,EAC/E;YACA5B,YAAY,CAAC+B,wBAAwB,EAAE,CAAC;QAC1C,CAAC;QAEDlB,kBAAkB,CAACa,YAAY,CAAC,CAAC;IACnC,CAAC,AAAC;IAEF/C,SAAS,CAAC,IAAM;QACd,MAAMqD,MAAM,GAAsB;YAAE5B,OAAO;YAAEF,eAAe;SAAE,AAAC;QAC/DI,QAAQ,CAAC0B,MAAM,CAAC,CAAC;IACnB,CAAC,EAAE;QAAC5B,OAAO;QAAEF,eAAe;QAAEI,QAAQ;KAAC,CAAC,CAAC;QAexBJ,KAAiC,EAajC+B,MAAgB,EAUhB/B,YAAwC,EAmBhCF,IAA2B;IAvDpD,OACE,wEAAwE;kBACxE,KAACnB,GAAG;QACFqD,SAAS,EAAC,MAAM;QAChBC,EAAE,EAAEC,iBAAiB;QACrBC,EAAE,EAAE;YAAEC,IAAI,EAAE,CAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;SAAE;kBAE1E,cAAA,MAAC1D,IAAI;YAAC2D,SAAS;YAACD,OAAO,EAAE,CAAC;;8BACxB,KAAC1D,IAAI;oBAAC4D,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAACzD,SAAS;wBACR0D,QAAQ;wBACRC,SAAS;wBACTC,KAAK,EAAC,MAAM;wBACZ/B,KAAK,EAAEf,CAAAA,KAAiC,GAAjCA,eAAe,CAACa,IAAI,CAACkC,OAAO,CAACC,IAAI,cAAjChD,KAAiC,cAAjCA,KAAiC,GAAI,EAAE;wBAC9CiD,OAAO,EAAC,UAAU;wBAClB7C,QAAQ,EAAE,CAACiB,CAAC,GAAK;4BACfd,OAAO,CAACc,CAAC,CAACC,MAAM,CAACP,KAAK,CAAC,CAAC;wBAC1B,CAAC;sBACD;kBACG;8BACP,KAACjC,IAAI;oBAAC4D,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,MAAC/D,WAAW;wBAACiE,SAAS;;0CACpB,KAAC9D,UAAU;gCAACkD,EAAE,EAAC,cAAc;0CAAC,OAAK;8BAAa;0CAChD,KAAChD,MAAM;gCAAC2D,QAAQ;gCAACM,OAAO,EAAC,cAAc;gCAACJ,KAAK,EAAC,OAAO;gCAAC/B,KAAK,EAAEb,OAAO;gCAAEE,QAAQ,EAAEgB,iBAAiB;0CAC9Ff,WAAW,CAAC8C,GAAG,CAAC,CAACpB,UAAU,EAAEqB,KAAK,iBACjC,KAACpE,QAAQ;wCAAqB+B,KAAK,EAAEgB,UAAU,CAACE,EAAE;kDAC/CF,CAAAA,MAAgB,GAAhBA,UAAU,CAACsB,KAAK,cAAhBtB,MAAgB,cAAhBA,MAAgB,GAAI,CAAC,MAAM,EAAEqB,KAAK,GAAG,CAAC,CAAC,CAAC;uCAD5BrB,UAAU,CAACE,EAAE,CAEjB,AACZ,CAAC;8BACK;;sBACG;kBACT;8BACP,KAACnD,IAAI;oBAAC4D,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAACzD,SAAS;wBACR2D,SAAS;wBACTC,KAAK,EAAC,aAAa;wBACnB/B,KAAK,EAAEf,CAAAA,YAAwC,GAAxCA,eAAe,CAACa,IAAI,CAACkC,OAAO,CAACO,WAAW,cAAxCtD,YAAwC,cAAxCA,YAAwC,GAAI,EAAE;wBACrDiD,OAAO,EAAC,UAAU;wBAClB7C,QAAQ,EAAE,CAACiB,CAAC,GAAK;4BACfb,cAAc,CAACa,CAAC,CAACC,MAAM,CAACP,KAAK,CAAC,CAAC;wBACjC,CAAC;sBACD;kBACG;8BACP,MAACjC,IAAI;oBAAC4D,IAAI;oBAACC,EAAE,EAAE,CAAC;;sCACd,MAAC/D,WAAW;4BAACiE,SAAS;4BAACU,QAAQ,EAAEzD,YAAY,CAAC0D,SAAS;4BAAEC,KAAK,EAAE3D,YAAY,CAAC2D,KAAK,KAAK,IAAI;;8CACzF,KAAC1E,UAAU;oCAACkD,EAAE,EAAC,kBAAkB;8CAAC,MAAI;kCAAa;8CACnD,KAAC3C,gBAAgB;oCACfwB,UAAU,EAAC,OAAO;oCAClB8B,QAAQ;oCACRM,OAAO,EAAC,kBAAkB;oCAC1BJ,KAAK,EAAC,MAAM;oCACZ/B,KAAK,EAAEjB,YAAY,CAAC4D,WAAW,GAAG5D,YAAY,CAAC4D,WAAW,GAAG9C,MAAM,CAACI,IAAI;oCACxEZ,QAAQ,EAAEN,YAAY,CAAC6D,YAAY;kCACnC;;0BACU;sCACd,KAAC9E,cAAc;sCAAEiB,CAAAA,IAA2B,GAA3BA,CAAAA,GAAkB,GAAlBA,YAAY,CAAC2D,KAAK,cAAlB3D,GAAkB,WAAS,GAA3BA,KAAAA,CAA2B,GAA3BA,GAAkB,CAAE8D,OAAO,cAA3B9D,IAA2B,cAA3BA,IAA2B,GAAI,EAAE;0BAAkB;;kBAC/D;8BACP,MAAChB,IAAI;oBAAC4D,IAAI;oBAACC,EAAE,EAAE,EAAE;;sCACf,KAACxD,UAAU;4BAAC8D,OAAO,EAAC,IAAI;4BAACY,YAAY,EAAE,CAAC;sCAAE,SAE1C;0BAAa;sCACb,KAACxE,aAAa;4BAACyE,iBAAiB,EAAE1E,UAAU;sCAC1C,cAAA,KAACM,YAAY;gCAACM,eAAe,EAAEA,eAAe;8BAAI;0BACpC;;kBACX;8BACP,KAAClB,IAAI;oBAAC4D,IAAI;oBAACC,EAAE,EAAE,EAAE;8BACf,cAAA,KAACtD,aAAa;wBAACyE,iBAAiB,EAAE1E,UAAU;kCAC1C,cAAA,KAACI,eAAe;4BACdQ,eAAe,EAAEA,eAAe;4BAChC+D,YAAY,EAAExC,2BAA2B;4BACzCyC,eAAe,EAAE,CAACC,OAAO,GAAK;gCAC5BxD,UAAU,CAACwD,OAAO,CAAC,CAAC;4BACtB,CAAC;4BACDC,kBAAkB,EAAE,CAACrD,IAAI,GAAK;gCAC5Bf,YAAY,CAACqE,YAAY,CAACtD,IAAI,CAAC,CAAC;4BAClC,CAAC;0BACD;sBACY;kBACX;;UACF;MACH,EACN;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAMqB,iBAAiB,GAAG,mBAAmB,CAAC"}
+{"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 { useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { panelEditorValidationSchema, PanelEditorValidationType } from '../../validation';\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) {\n  const {\n    initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId },\n    initialAction,\n    onSave,\n    onClose,\n  } = props;\n  const panelGroups = useListPanelGroups();\n  const [groupId, setGroupId] = useState(initialGroupId);\n  const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialPanelDef);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind: plugin.kind, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin(plugin);\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 form = useForm<PanelEditorValidationType>({\n    resolver: zodResolver(panelEditorValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: initialPanelDef.spec.display.name,\n      groupId: initialGroupId,\n      description: initialPanelDef.spec.display.description,\n      type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,\n    },\n  });\n\n  const processForm: SubmitHandler<PanelEditorValidationType> = () => {\n    const values: PanelEditorValues = { groupId, panelDefinition };\n    onSave(values);\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() {\n    if (\n      JSON.stringify({ groupId: initialGroupId, panelDefinition: initialPanelDef }) !==\n      JSON.stringify({ groupId, panelDefinition })\n    ) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string) => {\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  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              name=\"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                  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              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                    setGroupId(+event.target.value);\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              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\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              name=\"type\"\n              render={({ field, fieldState }) => (\n                <PluginKindSelect\n                  {...field}\n                  pluginType=\"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                  onChange={(event) => {\n                    field.onChange(event);\n                    pluginEditor.onKindChange(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                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":["useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","Controller","FormProvider","useForm","zodResolver","useListPanelGroups","panelEditorValidationSchema","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","panelDefinition","initialPanelDef","groupId","initialGroupId","initialAction","onSave","onClose","panelGroups","setGroupId","setName","setDescription","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","pluginEditor","pluginType","value","kind","onChange","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","form","resolver","mode","defaultValues","name","display","description","type","pendingKind","processForm","values","handleCancel","JSON","stringify","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","sx","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","onKindChange","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelPreview.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PanelEditorValues } from '../../context';
-export declare function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): JSX.Element | null;
+export declare function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=PanelPreview.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,sBA+B3F"}
+{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAMlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,kDA+B3F"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -13,12 +13,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Box } from '@mui/material';
-import { DataQueriesProvider } from '@perses-dev/plugin-system';
+import { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { Panel } from '../Panel';
-import { useSuggestedStepMs } from '../../utils';
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
-export function PanelPreview({ panelDefinition  }) {
+export function PanelPreview({ panelDefinition }) {
     const boxRef = useRef(null);
     let width = PANEL_PREVIEW_DEFAULT_WIDTH;
     if (boxRef.current !== null) {
@@ -28,8 +27,8 @@ export function PanelPreview({ panelDefinition  }) {
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
-    var _queries;
-    const queries = (_queries = panelDefinition.spec.queries) !== null && _queries !== void 0 ? _queries : [];
+    var _panelDefinition_spec_queries;
+    const queries = (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [];
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {

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

@@ -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 { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { QueryDefinition } from '@perses-dev/core';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\nimport { useSuggestedStepMs } from '../../utils';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\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  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: QueryDefinition) => {\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 }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","Panel","useSuggestedStepMs","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","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;AAAA,SAASA,MAAM,QAAQ,OAAO,CAAC;AAC/B,SAASC,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,mBAAmB,QAAQ,2BAA2B,CAAC;AAEhE,SAASC,KAAK,QAAQ,UAAU,CAAC;AACjC,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AAEjD,MAAMC,oBAAoB,GAAG,GAAG,AAAC;AACjC,MAAMC,2BAA2B,GAAG,GAAG,AAAC;AAExC,OAAO,SAASC,YAAY,CAAC,EAAEC,eAAe,CAAA,EAA8C,EAAE;IAC5F,MAAMC,MAAM,GAAGT,MAAM,CAAiB,IAAI,CAAC,AAAC;IAC5C,IAAIU,KAAK,GAAGJ,2BAA2B,AAAC;IACxC,IAAIG,MAAM,CAACE,OAAO,KAAK,IAAI,EAAE;QAC3BD,KAAK,GAAGD,MAAM,CAACE,OAAO,CAACC,qBAAqB,EAAE,CAACF,KAAK,CAAC;IACvD,CAAC;IACD,MAAMG,eAAe,GAAGT,kBAAkB,CAACM,KAAK,CAAC,AAAC;IAElD,IAAIF,eAAe,CAACM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,EAAE,EAAE;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;QAEeR,QAA4B;IAA5C,MAAMS,OAAO,GAAGT,CAAAA,QAA4B,GAA5BA,eAAe,CAACM,IAAI,CAACG,OAAO,cAA5BT,QAA4B,cAA5BA,QAA4B,GAAI,EAAE,AAAC;IAEnD,2DAA2D;IAC3D,MAAMU,WAAW,GAAGD,OAAO,CAACE,MAAM,GAC9BF,OAAO,CAACG,GAAG,CAAC,CAACC,KAAsB,GAAK;QACtC,OAAO;YACLL,IAAI,EAAEK,KAAK,CAACP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACC,MAAM,CAACD,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,GACF,EAAE,AAAC;IAEP,qBACE,KAACb,GAAG;QAACqB,GAAG,EAAEb,MAAM;QAAEc,MAAM,EAAElB,oBAAoB;kBAC5C,cAAA,KAACH,mBAAmB;YAACgB,WAAW,EAAEA,WAAW;YAAEM,OAAO,EAAE;gBAAEX,eAAe;aAAE;sBACzE,cAAA,KAACV,KAAK;gBAACsB,UAAU,EAAEjB,eAAe;cAAI;UAClB;MAClB,CACN;AACJ,CAAC"}
+{"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 { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\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  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 }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","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,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,kBAAkB,QAAQ,4BAA4B;AAEpF,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAAST,OAAuB;IACtC,IAAIU,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,IAAIF,gBAAgBM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;QAEgBR;IAAhB,MAAMS,UAAUT,CAAAA,gCAAAA,gBAAgBM,IAAI,CAACG,OAAO,cAA5BT,2CAAAA,gCAAgC,EAAE;IAElD,2DAA2D;IAC3D,MAAMU,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,MAAMO,MAAMP,IAAI,CAACC,MAAM,CAACD,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACb;QAAIqB,KAAKb;QAAQc,QAAQlB;kBACxB,cAAA,KAACH;YAAoBgB,aAAaA;YAAaM,SAAS;gBAAEX;YAAgB;sBACxE,cAAA,KAACT;gBAAMqB,YAAYjB;;;;AAI3B"}

package/dist/components/PanelDrawer/index.d.ts

@@ -1,2 +1,3 @@
 export * from './PanelDrawer';
+export * from './PanelPreview';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/PanelDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/components/PanelDrawer/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './PanelDrawer';
+export * from './PanelPreview';
 
 //# sourceMappingURL=index.js.map

package/dist/components/PanelDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/index.ts"],"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\nexport * from './PanelDrawer';\n"],"names":[],"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,cAAc,eAAe,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/index.ts"],"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\nexport * from './PanelDrawer';\nexport * from './PanelPreview';\n"],"names":[],"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,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB"}

package/dist/components/PanelDrawer/usePanelEditor.js

@@ -15,7 +15,7 @@ import { useCallback, useMemo, useState } from 'react';
  * UsePanelEditor is used in PanelEditorForm
  * This hook stores the states of panel definition and returns the onChange handlers for each state
  */ export const usePanelEditor = (panelDefinition)=>{
-    const { display , plugin: pluginDefinition , queries: initialQueries  } = panelDefinition.spec;
+    const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;
     const [name, setName] = useState(display.name);
     const [description, setDescription] = useState(display.description);
     const [plugin, setPlugin] = useState(pluginDefinition);
@@ -40,7 +40,7 @@ import { useCallback, useMemo, useState } from 'react';
     ]);
     // reset panel definition
     const setPanelDefinition = useCallback((panelDefinition)=>{
-        const { display , plugin , queries  } = panelDefinition.spec;
+        const { display, plugin, queries } = panelDefinition.spec;
         setName(display.name);
         setDescription(display.description);
         setPlugin(plugin);