@perses-dev/dashboards 0.39.0 → 0.40.1

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 React, { 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 [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,14 +42,42 @@ 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);
     };
+    // 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 = (nextPanelDef)=>{
         const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
@@ -55,147 +86,201 @@ export function PanelEditorForm(props) {
         }
         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,
+    var _panelGroup_title, _pluginEditor_error_message;
+    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;
+                                    /*#__PURE__*/ return _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;
+                                    /*#__PURE__*/ return _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__*/ _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;
+                                    /*#__PURE__*/ return _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  })=>{
+                                    var _pluginEditor_error, _fieldState_error;
+                                    /*#__PURE__*/ 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":"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"}
+{"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 React, { useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  Action,\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 = (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    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":["React","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","nextPanelDef","pluginKind","pluginSpec","rememberCurrentSpecState","panelGroup","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","index","title","isLoading","onKindChange","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -28,8 +28,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 { 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) => {\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;AACpC,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,KAAK,GAAK;QACrB,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 } 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) => {\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,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,QAAQ,4BAA4B;AAEhE,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,kBAAkB,QAAQ,cAAc;AAEjD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,gBAAe,EAA8C;IAC1F,MAAMC,SAAST,OAAuB;IACtC,IAAIU,QAAQJ;IACZ,IAAIG,OAAOE,YAAY,MAAM;QAC3BD,QAAQD,OAAOE,QAAQC,wBAAwBF;IACjD;IACA,MAAMG,kBAAkBT,mBAAmBM;IAE3C,IAAIF,gBAAgBM,KAAKC,OAAOC,SAAS,IAAI;QAC3C,OAAO;IACT;QAEgBR;IAAhB,MAAMS,UAAUT,CAAAA,gCAAAA,gBAAgBM,KAAKG,qBAArBT,2CAAAA,gCAAgC,EAAE;IAElD,2DAA2D;IAC3D,MAAMU,cAAcD,QAAQE,SACxBF,QAAQG,IAAI,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMP,KAAKC,OAAOC;YACxBF,MAAMO,MAAMP,KAAKC,OAAOD;QAC1B;IACF,KACA,EAAE;IAEN,qBACE,KAACb;QAAIqB,KAAKb;QAAQc,QAAQlB;kBACxB,cAAA,KAACH;YAAoBgB,aAAaA;YAAaM,SAAS;gBAAEX;YAAgB;sBACxE,cAAA,KAACV;gBAAMsB,YAAYjB;;;;AAI3B"}

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';\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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/usePanelEditor.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 { useCallback, useMemo, useState } from 'react';\nimport { PanelDefinition, QueryDefinition } from '@perses-dev/core';\n\n/**\n * UsePanelEditor is used in PanelEditorForm\n * This hook stores the states of panel definition and returns the onChange handlers for each state\n */\nexport const usePanelEditor = (panelDefinition: PanelDefinition) => {\n  const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;\n  const [name, setName] = useState(display.name);\n  const [description, setDescription] = useState(display.description);\n  const [plugin, setPlugin] = useState(pluginDefinition);\n\n  // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries\n  const [prevQueries, setPrevQueries] = useState(initialQueries);\n  const [currentQueries, setCurrentQueries] = useState(initialQueries);\n\n  /**\n   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.\n   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.\n   */\n  const setQueries = useCallback(\n    (queries?: QueryDefinition[], hideQueryEditor?: boolean) => {\n      if (hideQueryEditor) {\n        setPrevQueries(currentQueries);\n        setCurrentQueries(undefined);\n      } else {\n        setCurrentQueries(queries === undefined ? prevQueries : queries);\n      }\n    },\n    [setCurrentQueries, currentQueries, setPrevQueries, prevQueries]\n  );\n\n  // reset panel definition\n  const setPanelDefinition = useCallback(\n    (panelDefinition: PanelDefinition) => {\n      const { display, plugin, queries } = panelDefinition.spec;\n      setName(display.name);\n      setDescription(display.description);\n      setPlugin(plugin);\n      setQueries(queries);\n    },\n    [setName, setDescription, setPlugin, setQueries]\n  );\n\n  return useMemo(\n    () => ({\n      panelDefinition: {\n        kind: 'Panel',\n        spec: {\n          display: { name, description },\n          plugin,\n          queries: currentQueries,\n        },\n      } as PanelDefinition,\n      setName,\n      setDescription,\n      setQueries,\n      setPlugin,\n      setPanelDefinition,\n    }),\n    [name, description, plugin, currentQueries, setName, setDescription, setQueries, setPlugin, setPanelDefinition]\n  );\n};\n"],"names":["useCallback","useMemo","useState","usePanelEditor","panelDefinition","display","plugin","pluginDefinition","queries","initialQueries","spec","name","setName","description","setDescription","setPlugin","prevQueries","setPrevQueries","currentQueries","setCurrentQueries","setQueries","hideQueryEditor","undefined","setPanelDefinition","kind"],"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,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAGvD;;;CAGC,GACD,OAAO,MAAMC,cAAc,GAAG,CAACC,eAAgC,GAAK;IAClE,MAAM,EAAEC,OAAO,CAAA,EAAEC,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,OAAO,EAAEC,cAAc,CAAA,EAAE,GAAGL,eAAe,CAACM,IAAI,AAAC;IAC5F,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGV,QAAQ,CAACG,OAAO,CAACM,IAAI,CAAC,AAAC;IAC/C,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGZ,QAAQ,CAACG,OAAO,CAACQ,WAAW,CAAC,AAAC;IACpE,MAAM,CAACP,MAAM,EAAES,SAAS,CAAC,GAAGb,QAAQ,CAACK,gBAAgB,CAAC,AAAC;IAEvD,iHAAiH;IACjH,MAAM,CAACS,WAAW,EAAEC,cAAc,CAAC,GAAGf,QAAQ,CAACO,cAAc,CAAC,AAAC;IAC/D,MAAM,CAACS,cAAc,EAAEC,iBAAiB,CAAC,GAAGjB,QAAQ,CAACO,cAAc,CAAC,AAAC;IAErE;;;GAGC,GACD,MAAMW,UAAU,GAAGpB,WAAW,CAC5B,CAACQ,OAA2B,EAAEa,eAAyB,GAAK;QAC1D,IAAIA,eAAe,EAAE;YACnBJ,cAAc,CAACC,cAAc,CAAC,CAAC;YAC/BC,iBAAiB,CAACG,SAAS,CAAC,CAAC;QAC/B,OAAO;YACLH,iBAAiB,CAACX,OAAO,KAAKc,SAAS,GAAGN,WAAW,GAAGR,OAAO,CAAC,CAAC;QACnE,CAAC;IACH,CAAC,EACD;QAACW,iBAAiB;QAAED,cAAc;QAAED,cAAc;QAAED,WAAW;KAAC,CACjE,AAAC;IAEF,yBAAyB;IACzB,MAAMO,kBAAkB,GAAGvB,WAAW,CACpC,CAACI,eAAgC,GAAK;QACpC,MAAM,EAAEC,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEE,OAAO,CAAA,EAAE,GAAGJ,eAAe,CAACM,IAAI,AAAC;QAC1DE,OAAO,CAACP,OAAO,CAACM,IAAI,CAAC,CAAC;QACtBG,cAAc,CAACT,OAAO,CAACQ,WAAW,CAAC,CAAC;QACpCE,SAAS,CAACT,MAAM,CAAC,CAAC;QAClBc,UAAU,CAACZ,OAAO,CAAC,CAAC;IACtB,CAAC,EACD;QAACI,OAAO;QAAEE,cAAc;QAAEC,SAAS;QAAEK,UAAU;KAAC,CACjD,AAAC;IAEF,OAAOnB,OAAO,CACZ,IAAO,CAAA;YACLG,eAAe,EAAE;gBACfoB,IAAI,EAAE,OAAO;gBACbd,IAAI,EAAE;oBACJL,OAAO,EAAE;wBAAEM,IAAI;wBAAEE,WAAW;qBAAE;oBAC9BP,MAAM;oBACNE,OAAO,EAAEU,cAAc;iBACxB;aACF;YACDN,OAAO;YACPE,cAAc;YACdM,UAAU;YACVL,SAAS;YACTQ,kBAAkB;SACnB,CAAA,AAAC,EACF;QAACZ,IAAI;QAAEE,WAAW;QAAEP,MAAM;QAAEY,cAAc;QAAEN,OAAO;QAAEE,cAAc;QAAEM,UAAU;QAAEL,SAAS;QAAEQ,kBAAkB;KAAC,CAChH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/usePanelEditor.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 { useCallback, useMemo, useState } from 'react';\nimport { PanelDefinition, QueryDefinition } from '@perses-dev/core';\n\n/**\n * UsePanelEditor is used in PanelEditorForm\n * This hook stores the states of panel definition and returns the onChange handlers for each state\n */\nexport const usePanelEditor = (panelDefinition: PanelDefinition) => {\n  const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;\n  const [name, setName] = useState(display.name);\n  const [description, setDescription] = useState(display.description);\n  const [plugin, setPlugin] = useState(pluginDefinition);\n\n  // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries\n  const [prevQueries, setPrevQueries] = useState(initialQueries);\n  const [currentQueries, setCurrentQueries] = useState(initialQueries);\n\n  /**\n   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.\n   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.\n   */\n  const setQueries = useCallback(\n    (queries?: QueryDefinition[], hideQueryEditor?: boolean) => {\n      if (hideQueryEditor) {\n        setPrevQueries(currentQueries);\n        setCurrentQueries(undefined);\n      } else {\n        setCurrentQueries(queries === undefined ? prevQueries : queries);\n      }\n    },\n    [setCurrentQueries, currentQueries, setPrevQueries, prevQueries]\n  );\n\n  // reset panel definition\n  const setPanelDefinition = useCallback(\n    (panelDefinition: PanelDefinition) => {\n      const { display, plugin, queries } = panelDefinition.spec;\n      setName(display.name);\n      setDescription(display.description);\n      setPlugin(plugin);\n      setQueries(queries);\n    },\n    [setName, setDescription, setPlugin, setQueries]\n  );\n\n  return useMemo(\n    () => ({\n      panelDefinition: {\n        kind: 'Panel',\n        spec: {\n          display: { name, description },\n          plugin,\n          queries: currentQueries,\n        },\n      } as PanelDefinition,\n      setName,\n      setDescription,\n      setQueries,\n      setPlugin,\n      setPanelDefinition,\n    }),\n    [name, description, plugin, currentQueries, setName, setDescription, setQueries, setPlugin, setPanelDefinition]\n  );\n};\n"],"names":["useCallback","useMemo","useState","usePanelEditor","panelDefinition","display","plugin","pluginDefinition","queries","initialQueries","spec","name","setName","description","setDescription","setPlugin","prevQueries","setPrevQueries","currentQueries","setCurrentQueries","setQueries","hideQueryEditor","undefined","setPanelDefinition","kind"],"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,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAGvD;;;CAGC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,QAAO,EAAEC,QAAQC,iBAAgB,EAAEC,SAASC,eAAc,EAAE,GAAGL,gBAAgBM;IACvF,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAASG,QAAQM;IACzC,MAAM,CAACE,aAAaC,eAAe,GAAGZ,SAASG,QAAQQ;IACvD,MAAM,CAACP,QAAQS,UAAU,GAAGb,SAASK;IAErC,iHAAiH;IACjH,MAAM,CAACS,aAAaC,eAAe,GAAGf,SAASO;IAC/C,MAAM,CAACS,gBAAgBC,kBAAkB,GAAGjB,SAASO;IAErD;;;GAGC,GACD,MAAMW,aAAapB,YACjB,CAACQ,SAA6Ba;QAC5B,IAAIA,iBAAiB;YACnBJ,eAAeC;YACfC,kBAAkBG;QACpB,OAAO;YACLH,kBAAkBX,YAAYc,YAAYN,cAAcR;QAC1D;IACF,GACA;QAACW;QAAmBD;QAAgBD;QAAgBD;KAAY;IAGlE,yBAAyB;IACzB,MAAMO,qBAAqBvB,YACzB,CAACI;QACC,MAAM,EAAEC,QAAO,EAAEC,OAAM,EAAEE,QAAO,EAAE,GAAGJ,gBAAgBM;QACrDE,QAAQP,QAAQM;QAChBG,eAAeT,QAAQQ;QACvBE,UAAUT;QACVc,WAAWZ;IACb,GACA;QAACI;QAASE;QAAgBC;QAAWK;KAAW;IAGlD,OAAOnB,QACL,IAAO,CAAA;YACLG,iBAAiB;gBACfoB,MAAM;gBACNd,MAAM;oBACJL,SAAS;wBAAEM;wBAAME;oBAAY;oBAC7BP;oBACAE,SAASU;gBACX;YACF;YACAN;YACAE;YACAM;YACAL;YACAQ;QACF,CAAA,GACA;QAACZ;QAAME;QAAaP;QAAQY;QAAgBN;QAASE;QAAgBM;QAAYL;QAAWQ;KAAmB;AAEnH,EAAE"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form","color"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form","color"],"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,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAmC,yBAAyB;AAEjH;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,mBAAmBJ;IAEzB,iHAAiH;IACjH,MAAM,CAACK,WAAWC,aAAa,GAAGP,SAAS;IAC3C,MAAMQ,cAAc,IAAMD,aAAa;IAEvC,iFAAiF;IACjF,MAAME,eAAe;QACnBJ,6BAAAA,8BAAAA,KAAAA,IAAAA,iBAAkBK;QAClBH,aAAa;IACf;IAEA,oEAAoE;IACpE,MAAMI,SAASN,qBAAqBO,aAAaN,cAAc;IAE/D,MAAMO,eAAsD,CAACC;QAC3D,kHAAkH;QAClH,IAAIT,qBAAqBO,WAAW;YAClC,MAAM,IAAIG,MAAM;QAClB;QACAV,iBAAiBW,aAAaF;QAC9BN;IACF;IAEA,qBACE,KAACd;QAAOuB,MAAMN;QAAQO,iBAAiB;YAAEC,UAAUV;QAAa;kBAC7DJ,qBAAqBO,2BACpB;;8BACE,MAACjB;;wBAAaU,iBAAiBe;wBAAK;;;8BACpC,KAAC3B;oBACC4B,cAAW;oBACXC,SAASjB,iBAAiBK;oBAC1Ba,IAAI,CAACC,QAAW,CAAA;4BACdC,UAAU;4BACVC,KAAKF,MAAMG,QAAQ;4BACnBC,OAAOJ,MAAMG,QAAQ;wBACvB,CAAA;8BAEA,cAAA,KAAC5B;;8BAEH,KAACH;oBAAciC,QAAQ;oBAACN,IAAI;wBAAEO,OAAO;oBAAQ;8BAC3C,cAAA,KAAC5B;wBAAqB6B,eAAe1B,iBAAiB0B;wBAAeC,UAAUnB;;;8BAEjF,MAAChB;;sCACC,KAACC;4BAAOmC,SAAQ;4BAAYC,MAAK;4BAASC,MAAMhC;sCAC7CE,iBAAiBe,SAAS,SAAS,UAAU;;sCAEhD,KAACtB;4BAAOmC,SAAQ;4BAAWG,OAAM;4BAAYd,SAASjB,iBAAiBK;sCAAO;;;;;;;AAQ1F"}