@perses-dev/dashboards 0.9.0 → 0.11.0

package/dist/components/GridLayout/GridTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAgD9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAqC,YAAY,EAAE,MAAM,eAAe,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAyD9C"}

package/dist/components/GridLayout/GridTitle.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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Box, IconButton, Stack, Typography } from '@mui/material';
 import ExpandedIcon from 'mdi-material-ui/ChevronUp';
 import CollapsedIcon from 'mdi-material-ui/ChevronDown';
 import AddIcon from 'mdi-material-ui/Plus';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
-import { useState } from 'react';
-import { useDashboardApp, useEditMode } from '../../context';
+import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
+import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { usePanelGroupActions, useEditMode } from '../../context';
 /**
  * Renders the title for a Grid section, optionally also supporting expanding
  * and collapsing
  */ export function GridTitle(props) {
-    const { groupIndex , title , collapse  } = props;
+    const { panelGroupId , title , collapse  } = props;
     const [isHovered, setIsHovered] = useState(false);
-    const { openPanelDrawer , openPanelGroupDialog  } = useDashboardApp();
+    const { openAddPanel , openEditPanelGroup , deletePanelGroup , moveUp , moveDown  } = usePanelGroupActions(panelGroupId);
     const { isEditMode  } = useEditMode();
     const text = /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
@@ -57,14 +60,31 @@ import { useDashboardApp, useEditMode } from '../../context';
                     },
                     children: [
                         /*#__PURE__*/ _jsx(IconButton, {
-                            onClick: ()=>openPanelDrawer({
-                                    groupIndex
-                                }),
+                            "aria-label": "add panel to group",
+                            onClick: openAddPanel,
                             children: /*#__PURE__*/ _jsx(AddIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
-                            onClick: ()=>openPanelGroupDialog(groupIndex),
+                            "aria-label": "edit group",
+                            onClick: openEditPanelGroup,
                             children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "delete group",
+                            onClick: deletePanelGroup,
+                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "move group down",
+                            disabled: moveDown === undefined,
+                            onClick: moveDown,
+                            children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "move group up",
+                            disabled: moveUp === undefined,
+                            onClick: moveUp,
+                            children: /*#__PURE__*/ _jsx(ArrowUpIcon, {})
                         })
                     ]
                 })

package/dist/components/GridLayout/GridTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2022 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 { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { useState } from 'react';\nimport { useDashboardApp, useEditMode } from '../../context';\n\nexport interface GridTitleProps {\n  groupIndex: number;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { groupIndex, title, collapse } = props;\n\n  const [isHovered, setIsHovered] = useState(false);\n  const { openPanelDrawer, openPanelGroupDialog } = useDashboardApp();\n  const { isEditMode } = useEditMode();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: (theme) => theme.palette.background.default,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && isHovered && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton onClick={() => openPanelDrawer({ groupIndex })}>\n                <AddIcon />\n              </IconButton>\n              <IconButton onClick={() => openPanelGroupDialog(groupIndex)}>\n                <PencilIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddIcon","PencilIcon","useState","useDashboardApp","useEditMode","GridTitle","props","groupIndex","title","collapse","isHovered","setIsHovered","openPanelDrawer","openPanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","direction"],"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,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACnE,OAAOC,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAOC,aAAa,MAAM,6BAA6B,CAAC;AACxD,OAAOC,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,eAAe,EAAEC,WAAW,QAAQ,eAAe,CAAC;AAW7D;;;CAGC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,UAAU,CAAA,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGH,KAAK,AAAC;IAE9C,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC,AAAC;IAClD,MAAM,EAAEU,eAAe,CAAA,EAAEC,oBAAoB,CAAA,EAAE,GAAGV,eAAe,EAAE,AAAC;IACpE,MAAM,EAAEW,UAAU,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IAErC,MAAMW,IAAI,iBACR,KAAClB,UAAU;QAACmB,OAAO,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,UAAU,EAAET,QAAQ,KAAKU,SAAS,GAAG,CAAC,GAAGA,SAAS;SAAE;kBAChFX,KAAK;MACK,AACd,AAAC;IAEF,qBACE,KAACd,GAAG;QACFuB,EAAE,EAAE;YACFG,OAAO,EAAE,MAAM;YACfC,cAAc,EAAE,OAAO;YACvBC,UAAU,EAAE,QAAQ;YACpBC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;YACpCC,eAAe,EAAE,CAACF,KAAK,GAAKA,KAAK,CAACG,OAAO,CAACC,UAAU,CAACC,OAAO;SAC7D;QACDC,YAAY,EAAE,IAAMnB,YAAY,CAAC,IAAI,CAAC;QACtCoB,YAAY,EAAE,IAAMpB,YAAY,CAAC,KAAK,CAAC;kBAEtCF,QAAQ,iBACP;;8BACE,KAACd,UAAU;oBAACqC,OAAO,EAAEvB,QAAQ,CAACwB,YAAY;8BACvCxB,QAAQ,CAACyB,MAAM,iBAAG,KAACpC,YAAY,KAAG,iBAAG,KAACC,aAAa,KAAG;kBAC5C;gBACZgB,IAAI;gBACJD,UAAU,IAAIJ,SAAS,kBACtB,MAACd,KAAK;oBAACuC,SAAS,EAAC,KAAK;oBAAClB,EAAE,EAAE;wBAAEC,UAAU,EAAE,MAAM;qBAAE;;sCAC/C,KAACvB,UAAU;4BAACqC,OAAO,EAAE,IAAMpB,eAAe,CAAC;oCAAEL,UAAU;iCAAE,CAAC;sCACxD,cAAA,KAACP,OAAO,KAAG;0BACA;sCACb,KAACL,UAAU;4BAACqC,OAAO,EAAE,IAAMnB,oBAAoB,CAACN,UAAU,CAAC;sCACzD,cAAA,KAACN,UAAU,KAAG;0BACH;;kBACP,AACT;;UACA,GAEH,+DAA+D;QAC/Dc,IAAI,AACL;MACG,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2022 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, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { usePanelGroupActions, useEditMode, PanelGroupId } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const [isHovered, setIsHovered] = useState(false);\n  const { openAddPanel, openEditPanelGroup, deletePanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { isEditMode } = useEditMode();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: (theme) => theme.palette.background.default,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && isHovered && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton aria-label=\"add panel to group\" onClick={openAddPanel}>\n                <AddIcon />\n              </IconButton>\n              <IconButton aria-label=\"edit group\" onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label=\"delete group\" onClick={deletePanelGroup}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group down\" disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group up\" disabled={moveUp === undefined} onClick={moveUp}>\n                <ArrowUpIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","GridTitle","props","panelGroupId","title","collapse","isHovered","setIsHovered","openAddPanel","openEditPanelGroup","deletePanelGroup","moveUp","moveDown","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"mappings":"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"}

package/dist/components/Panel/DeletePanelDialog.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DeletePanelDialog } from '../../context/DashboardProvider/panel-editor-slice';
+declare const DeletePanelDialog: () => JSX.Element;
+export default DeletePanelDialog;
+//# sourceMappingURL=DeletePanelDialog.d.ts.map

package/dist/components/Panel/DeletePanelDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeletePanelDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/DeletePanelDialog.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAEvF,QAAA,MAAM,iBAAiB,mBAoBtB,CAAC;AA+BF,eAAe,iBAAiB,CAAC"}

package/dist/components/Panel/DeletePanelDialog.js

@@ -0,0 +1,84 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+import CloseIcon from 'mdi-material-ui/Close';
+import { useDeletePanelDialog } from '../../context';
+const DeletePanelDialog = ()=>{
+    const { deletePanelDialog , closeDeletePanelDialog  } = useDeletePanelDialog();
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: deletePanelDialog !== undefined,
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: "Delete Panel"
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closeDeletePanelDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ _jsx(CloseIcon, {})
+            }),
+            deletePanelDialog && /*#__PURE__*/ _jsx(DeletePanelForm, {
+                deletePanelDialog: deletePanelDialog
+            })
+        ]
+    });
+};
+const DeletePanelForm = ({ deletePanelDialog  })=>{
+    const { deletePanels , closeDeletePanelDialog  } = useDeletePanelDialog();
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        const { panelGroupItemId  } = deletePanelDialog;
+        deletePanels([
+            panelGroupItemId
+        ]);
+        closeDeletePanelDialog();
+    };
+    return /*#__PURE__*/ _jsxs("form", {
+        onSubmit: handleDelete,
+        children: [
+            /*#__PURE__*/ _jsxs(DialogContent, {
+                sx: {
+                    width: '500px'
+                },
+                children: [
+                    "Are you sure you want to delete ",
+                    deletePanelDialog.panelName,
+                    " from ",
+                    deletePanelDialog.panelGroupName,
+                    "? This action cannot be undone."
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        type: "submit",
+                        children: "Delete"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>closeDeletePanelDialog(),
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default DeletePanelDialog;
+
+//# sourceMappingURL=DeletePanelDialog.js.map

package/dist/components/Panel/DeletePanelDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/DeletePanelDialog.tsx"],"sourcesContent":["// Copyright 2022 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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelDialog } from '../../context';\nimport { DeletePanelDialog } from '../../context/DashboardProvider/panel-editor-slice';\n\nconst DeletePanelDialog = () => {\n  const { deletePanelDialog, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  return (\n    <Dialog open={deletePanelDialog !== undefined}>\n      <DialogTitle>Delete Panel</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelDialog()}\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      {deletePanelDialog && <DeletePanelForm deletePanelDialog={deletePanelDialog} />}\n    </Dialog>\n  );\n};\n\ninterface DeletePanelFormProps {\n  deletePanelDialog: DeletePanelDialog;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps) => {\n  const { deletePanels, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    const { panelGroupItemId } = deletePanelDialog;\n    deletePanels([panelGroupItemId]);\n    closeDeletePanelDialog();\n  };\n  return (\n    <form onSubmit={handleDelete}>\n      <DialogContent sx={{ width: '500px' }}>\n        Are you sure you want to delete {deletePanelDialog.panelName} from {deletePanelDialog.panelGroupName}? This\n        action cannot be undone.\n      </DialogContent>\n      <DialogActions>\n        <Button variant=\"contained\" type=\"submit\">\n          Delete\n        </Button>\n        <Button onClick={() => closeDeletePanelDialog()}>Cancel</Button>\n      </DialogActions>\n    </form>\n  );\n};\n\nexport default DeletePanelDialog;\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelDialog","DeletePanelDialog","deletePanelDialog","closeDeletePanelDialog","open","undefined","aria-label","onClick","sx","theme","position","top","spacing","right","DeletePanelForm","deletePanels","handleDelete","e","preventDefault","panelGroupItemId","form","onSubmit","width","panelName","panelGroupName","variant","type"],"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;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,oBAAoB,QAAQ,eAAe,CAAC;AAGrD,MAAMC,iBAAiB,GAAG,IAAM;IAC9B,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,sBAAsB,CAAA,EAAE,GAAGH,oBAAoB,EAAE,AAAC;IAE7E,qBACE,MAACN,MAAM;QAACU,IAAI,EAAEF,iBAAiB,KAAKG,SAAS;;0BAC3C,KAACV,WAAW;0BAAC,cAAY;cAAc;0BACvC,KAACF,UAAU;gBACTa,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;gBACvCK,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,SAAS,KAAG;cACF;YACZG,iBAAiB,kBAAI,KAACY,eAAe;gBAACZ,iBAAiB,EAAEA,iBAAiB;cAAI;;MACxE,CACT;AACJ,CAAC,AAAC;AAMF,MAAMY,eAAe,GAAG,CAAC,EAAEZ,iBAAiB,CAAA,EAAwB,GAAK;IACvE,MAAM,EAAEa,YAAY,CAAA,EAAEZ,sBAAsB,CAAA,EAAE,GAAGH,oBAAoB,EAAE,AAAC;IAExE,MAAMgB,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGjB,iBAAiB,AAAC;QAC/Ca,YAAY,CAAC;YAACI,gBAAgB;SAAC,CAAC,CAAC;QACjChB,sBAAsB,EAAE,CAAC;IAC3B,CAAC,AAAC;IACF,qBACE,MAACiB,MAAI;QAACC,QAAQ,EAAEL,YAAY;;0BAC1B,MAACpB,aAAa;gBAACY,EAAE,EAAE;oBAAEc,KAAK,EAAE,OAAO;iBAAE;;oBAAE,kCACL;oBAACpB,iBAAiB,CAACqB,SAAS;oBAAC,QAAM;oBAACrB,iBAAiB,CAACsB,cAAc;oBAAC,iCAEvG;;cAAgB;0BAChB,MAAC3B,aAAa;;kCACZ,KAACC,MAAM;wBAAC2B,OAAO,EAAC,WAAW;wBAACC,IAAI,EAAC,QAAQ;kCAAC,QAE1C;sBAAS;kCACT,KAAC5B,MAAM;wBAACS,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;kCAAE,QAAM;sBAAS;;cAClD;;MACX,CACP;AACJ,CAAC,AAAC;AAEF,eAAeF,iBAAiB,CAAC"}

package/dist/components/Panel/Panel.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { PanelDefinition } from '@perses-dev/core';
 import { CardProps } from '@mui/material';
+import { LayoutItem } from '../../context';
 export interface PanelProps extends CardProps {
     definition: PanelDefinition;
-    groupIndex: number;
-    panelKey: string;
+    panelGroupItemId: LayoutItem;
 }
 /**
  * Renders a PanelDefinition's content inside of a Card.

package/dist/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2HtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAe,UAAU,EAAmB,MAAM,eAAe,CAAC;AAGzE,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,gBAAgB,EAAE,UAAU,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAgItC"}

package/dist/components/Panel/Panel.js

@@ -18,13 +18,14 @@ import { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perse
 import { Box, Card, CardHeader, CardContent, Typography, IconButton as MuiIconButton, Stack, styled } from '@mui/material';
 import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/Pencil';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
-import { useDashboardApp, useEditMode } from '../../context';
+import { useEditMode, usePanelActions } from '../../context';
 import { PanelContent } from './PanelContent';
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */ export function Panel(props) {
-    const { definition , groupIndex , panelKey , ...others } = props;
+    const { definition , panelGroupItemId , ...others } = props;
     const [contentElement, setContentElement] = useState(null);
     const [isHovered, setIsHovered] = useState(false);
     const { width , height  } = useResizeObserver({
@@ -48,13 +49,7 @@ import { PanelContent } from './PanelContent';
     // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
     const panelPadding = 1.5;
     const { isEditMode  } = useEditMode();
-    const { openPanelDrawer  } = useDashboardApp();
-    const handleEditButtonClick = ()=>{
-        openPanelDrawer({
-            groupIndex,
-            panelKey
-        });
-    };
+    const { openEditPanel , openDeletePanelDialog  } = usePanelActions(panelGroupItemId);
     return /*#__PURE__*/ _jsxs(Card, {
         ref: ref,
         sx: {
@@ -114,9 +109,15 @@ import { PanelContent } from './PanelContent';
                                         /*#__PURE__*/ _jsx(IconButton, {
                                             "aria-label": "edit panel",
                                             size: "small",
-                                            onClick: handleEditButtonClick,
+                                            onClick: openEditPanel,
                                             children: /*#__PURE__*/ _jsx(PencilIcon, {})
                                         }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "delete panel",
+                                            size: "small",
+                                            onClick: openDeletePanelDialog,
+                                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                        }),
                                         /*#__PURE__*/ _jsx(IconButton, {
                                             "aria-label": "drag handle",
                                             size: "small",
@@ -154,7 +155,8 @@ import { PanelContent } from './PanelContent';
                 children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                     FallbackComponent: ErrorAlert,
                     children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
-                        definition: definition,
+                        panelPluginKind: definition.spec.plugin.kind,
+                        spec: definition.spec.plugin.spec,
                         contentDimensions: contentDimensions
                     })
                 })

package/dist/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2022 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, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport {\n  Box,\n  Card,\n  CardProps,\n  CardHeader,\n  CardContent,\n  Typography,\n  IconButton as MuiIconButton,\n  Stack,\n  styled,\n} from '@mui/material';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { useDashboardApp, useEditMode } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  groupIndex: number;\n  panelKey: string;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, groupIndex, panelKey, ...others } = props;\n\n  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const { isEditMode } = useEditMode();\n\n  const { openPanelDrawer } = useDashboardApp();\n\n  const handleEditButtonClick = () => {\n    openPanelDrawer({ groupIndex, panelKey });\n  };\n\n  return (\n    <Card\n      ref={ref}\n      sx={{\n        ...others.sx,\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexFlow: 'column nowrap',\n      }}\n      variant=\"outlined\"\n      {...others}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <CardHeader\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              minHeight: '24px',\n            }}\n          >\n            <Typography\n              component=\"h2\"\n              variant=\"body2\"\n              fontWeight={(theme) => theme.typography.fontWeightMedium}\n              whiteSpace=\"nowrap\"\n              overflow=\"hidden\"\n              textOverflow=\"ellipsis\"\n            >\n              {definition.spec.display.name}\n            </Typography>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                marginLeft: 'auto',\n              }}\n            >\n              {!isEditMode && isHovered && definition.spec.display.description && (\n                <InfoTooltip\n                  id=\"info-tooltip\"\n                  description={definition.spec.display.description}\n                  placement={TooltipPlacement.Bottom}\n                >\n                  <InformationOutlineIcon\n                    aria-describedby=\"info-tooltip\"\n                    aria-hidden={false}\n                    fontSize=\"small\"\n                    sx={{ cursor: 'pointer' }}\n                  />\n                </InfoTooltip>\n              )}\n              {isEditMode && isHovered && (\n                <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n                  <IconButton aria-label=\"edit panel\" size=\"small\" onClick={handleEditButtonClick}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"drag handle\" size=\"small\">\n                    <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n                  </IconButton>\n                </Stack>\n              )}\n            </Box>\n          </Box>\n        }\n        sx={{\n          display: 'block',\n          padding: (theme) => theme.spacing(1, panelPadding),\n          borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,\n        }}\n      />\n      <CardContent\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && <PanelContent definition={definition} contentDimensions={contentDimensions} />}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n\nconst IconButton = styled(MuiIconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","InfoTooltip","TooltipPlacement","Box","Card","CardHeader","CardContent","Typography","IconButton","MuiIconButton","Stack","styled","InformationOutlineIcon","PencilIcon","DragIcon","useDashboardApp","useEditMode","PanelContent","Panel","props","definition","groupIndex","panelKey","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","openPanelDrawer","handleEditButtonClick","sx","display","flexFlow","variant","onMouseEnter","onMouseLeave","title","alignItems","minHeight","component","fontWeight","theme","typography","fontWeightMedium","whiteSpace","overflow","textOverflow","spec","name","marginLeft","description","id","placement","Bottom","aria-describedby","aria-hidden","fontSize","cursor","direction","spacing","aria-label","size","onClick","className","padding","borderBottom","palette","divider","position","flexGrow","FallbackComponent","borderRadius","shape"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2022 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, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport {\n  Box,\n  Card,\n  CardProps,\n  CardHeader,\n  CardContent,\n  Typography,\n  IconButton as MuiIconButton,\n  Stack,\n  styled,\n} from '@mui/material';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { useEditMode, LayoutItem, usePanelActions } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  panelGroupItemId: LayoutItem;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, panelGroupItemId, ...others } = props;\n\n  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const { isEditMode } = useEditMode();\n\n  const { openEditPanel, openDeletePanelDialog } = usePanelActions(panelGroupItemId);\n\n  return (\n    <Card\n      ref={ref}\n      sx={{\n        ...others.sx,\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexFlow: 'column nowrap',\n      }}\n      variant=\"outlined\"\n      {...others}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <CardHeader\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              minHeight: '24px',\n            }}\n          >\n            <Typography\n              component=\"h2\"\n              variant=\"body2\"\n              fontWeight={(theme) => theme.typography.fontWeightMedium}\n              whiteSpace=\"nowrap\"\n              overflow=\"hidden\"\n              textOverflow=\"ellipsis\"\n            >\n              {definition.spec.display.name}\n            </Typography>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                marginLeft: 'auto',\n              }}\n            >\n              {!isEditMode && isHovered && definition.spec.display.description && (\n                <InfoTooltip\n                  id=\"info-tooltip\"\n                  description={definition.spec.display.description}\n                  placement={TooltipPlacement.Bottom}\n                >\n                  <InformationOutlineIcon\n                    aria-describedby=\"info-tooltip\"\n                    aria-hidden={false}\n                    fontSize=\"small\"\n                    sx={{ cursor: 'pointer' }}\n                  />\n                </InfoTooltip>\n              )}\n              {isEditMode && isHovered && (\n                <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n                  <IconButton aria-label=\"edit panel\" size=\"small\" onClick={openEditPanel}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"delete panel\" size=\"small\" onClick={openDeletePanelDialog}>\n                    <DeleteIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"drag handle\" size=\"small\">\n                    <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n                  </IconButton>\n                </Stack>\n              )}\n            </Box>\n          </Box>\n        }\n        sx={{\n          display: 'block',\n          padding: (theme) => theme.spacing(1, panelPadding),\n          borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,\n        }}\n      />\n      <CardContent\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n\nconst IconButton = styled(MuiIconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","InfoTooltip","TooltipPlacement","Box","Card","CardHeader","CardContent","Typography","IconButton","MuiIconButton","Stack","styled","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","useEditMode","usePanelActions","PanelContent","Panel","props","definition","panelGroupItemId","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","openEditPanel","openDeletePanelDialog","sx","display","flexFlow","variant","onMouseEnter","onMouseLeave","title","alignItems","minHeight","component","fontWeight","theme","typography","fontWeightMedium","whiteSpace","overflow","textOverflow","spec","name","marginLeft","description","id","placement","Bottom","aria-describedby","aria-hidden","fontSize","cursor","direction","spacing","aria-label","size","onClick","className","padding","borderBottom","palette","divider","position","flexGrow","FallbackComponent","panelPluginKind","plugin","kind","borderRadius","shape"],"mappings":"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"}

package/dist/components/Panel/Panel.test.d.ts

@@ -1,2 +1,2 @@
-import 'intersection-observer';
+export {};
 //# sourceMappingURL=Panel.test.d.ts.map

package/dist/components/Panel/Panel.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":"AAcA,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":""}

package/dist/components/Panel/Panel.test.js

@@ -12,8 +12,8 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PluginRegistry } from '@perses-dev/plugin-system';
-import 'intersection-observer'; // TODO: Why do we need this side-effect? Should it be in test setup somewhere?
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';
 import { DashboardProvider } from '../../context';
 import { Panel } from './Panel';
@@ -34,8 +34,10 @@ describe('Panel', ()=>{
                     }
                 }
             },
-            groupIndex: 0,
-            panelKey: 'panelRef'
+            panelGroupItemId: {
+                panelGroupId: 0,
+                itemIndex: 0
+            }
         };
     };
     // Helper to render the panel with some context set
@@ -62,9 +64,11 @@ describe('Panel', ()=>{
     });
     it('should render edit icons when in edit mode', ()=>{
         renderPanel(true);
-        screen.queryByLabelText('drag handle');
-        screen.queryByLabelText('edit panel');
-        screen.queryByLabelText('more');
+        const panelTitle = screen.getByText('Fake Panel');
+        userEvent.hover(panelTitle);
+        screen.getByLabelText('drag handle');
+        screen.getByLabelText('edit panel');
+        screen.getByLabelText('delete panel');
     });
 });
 

package/dist/components/Panel/Panel.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport 'intersection-observer'; // TODO: Why do we need this side-effect? Should it be in test setup somewhere?\nimport { screen } from '@testing-library/react';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  // Helper to create panel props for rendering tests\n  const createPanelProps = (): PanelProps => {\n    return {\n      definition: {\n        kind: 'Panel',\n        spec: {\n          display: {\n            name: 'Fake Panel',\n            description: 'This is a fake panel',\n          },\n          plugin: {\n            kind: 'FakePanel',\n            spec: {},\n          },\n        },\n      },\n      groupIndex: 0,\n      panelKey: 'panelRef',\n    };\n  };\n\n  // Helper to render the panel with some context set\n  const renderPanel = (isEditMode = false) => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n          <Panel {...createPanelProps()} />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n  };\n\n  it('should render name and info icon', async () => {\n    renderPanel();\n    await screen.findByText('Fake Panel');\n    screen.queryByLabelText('info-tooltip');\n  });\n\n  it('should render edit icons when in edit mode', () => {\n    renderPanel(true);\n    screen.queryByLabelText('drag handle');\n    screen.queryByLabelText('edit panel');\n    screen.queryByLabelText('more');\n  });\n});\n"],"names":["PluginRegistry","screen","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","groupIndex","panelKey","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText"],"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,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,OAAO,uBAAuB,CAAC,CAAC,+EAA+E;AAC/G,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACDK,UAAU,EAAE,CAAC;YACbC,QAAQ,EAAE,UAAU;SACrB,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGnB,uBAAuB,EAAE,AAAC;QACzEkB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAEjB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACF,cAAc;YAAE,GAAGsB,mBAAmB;sBACrC,cAAA,KAAChB,iBAAiB;gBAACiB,YAAY,EAAE;oBAAEC,aAAa,EAAEnB,gBAAgB,EAAE,CAACO,IAAI;oBAAEQ,UAAU;iBAAE;0BACrF,cAAA,KAACb,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFgB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMlB,MAAM,CAACyB,UAAU,CAAC,YAAY,CAAC,CAAC;QACtCzB,MAAM,CAAC0B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClBlB,MAAM,CAAC0B,gBAAgB,CAAC,aAAa,CAAC,CAAC;QACvC1B,MAAM,CAAC0B,gBAAgB,CAAC,YAAY,CAAC,CAAC;QACtC1B,MAAM,CAAC0B,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  // Helper to create panel props for rendering tests\n  const createPanelProps = (): PanelProps => {\n    return {\n      definition: {\n        kind: 'Panel',\n        spec: {\n          display: {\n            name: 'Fake Panel',\n            description: 'This is a fake panel',\n          },\n          plugin: {\n            kind: 'FakePanel',\n            spec: {},\n          },\n        },\n      },\n      panelGroupItemId: { panelGroupId: 0, itemIndex: 0 },\n    };\n  };\n\n  // Helper to render the panel with some context set\n  const renderPanel = (isEditMode = false) => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n          <Panel {...createPanelProps()} />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n  };\n\n  it('should render name and info icon', async () => {\n    renderPanel();\n    await screen.findByText('Fake Panel');\n    screen.queryByLabelText('info-tooltip');\n  });\n\n  it('should render edit icons when in edit mode', () => {\n    renderPanel(true);\n    const panelTitle = screen.getByText('Fake Panel');\n    userEvent.hover(panelTitle);\n    screen.getByLabelText('drag handle');\n    screen.getByLabelText('edit panel');\n    screen.getByLabelText('delete panel');\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","panelGroupItemId","panelGroupId","itemIndex","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText","panelTitle","getByText","hover","getByLabelText"],"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,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACDK,gBAAgB,EAAE;gBAAEC,YAAY,EAAE,CAAC;gBAAEC,SAAS,EAAE,CAAC;aAAE;SACpD,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGpB,uBAAuB,EAAE,AAAC;QACzEmB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAElB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACH,cAAc;YAAE,GAAGwB,mBAAmB;sBACrC,cAAA,KAACjB,iBAAiB;gBAACkB,YAAY,EAAE;oBAAEC,aAAa,EAAEpB,gBAAgB,EAAE,CAACO,IAAI;oBAAES,UAAU;iBAAE;0BACrF,cAAA,KAACd,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFiB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMpB,MAAM,CAAC2B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC3B,MAAM,CAAC4B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG7B,MAAM,CAAC8B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD7B,SAAS,CAAC8B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B7B,MAAM,CAACgC,cAAc,CAAC,aAAa,CAAC,CAAC;QACrChC,MAAM,CAACgC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpChC,MAAM,CAACgC,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/Panel/PanelContent.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { PanelProps } from '@perses-dev/plugin-system';
-export declare type PanelContentProps = PanelProps<unknown>;
+import { UnknownSpec } from '@perses-dev/core';
+export interface PanelContentProps extends PanelProps<UnknownSpec> {
+    panelPluginKind: string;
+}
 /**
  * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
  * definition's kind. Used so that an ErrorBoundary can be wrapped around this.

package/dist/components/Panel/PanelContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGlE,oBAAY,iBAAiB,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;AAEpD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAqBpD"}
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,WAAW,CAAC;IAChE,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAcpD"}

package/dist/components/Panel/PanelContent.js

@@ -17,7 +17,7 @@ import { Skeleton } from '@mui/material';
  * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
  * definition's kind. Used so that an ErrorBoundary can be wrapped around this.
  */ export function PanelContent(props) {
-    const { definition: { spec: { plugin: { kind: panelPluginKind  } ,  } ,  } , contentDimensions ,  } = props;
+    const { panelPluginKind , contentDimensions , ...others } = props;
     const { data: plugin , isLoading  } = usePlugin('Panel', panelPluginKind, {
         useErrorBoundary: true
     });
@@ -33,7 +33,8 @@ import { Skeleton } from '@mui/material';
         throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
     }
     return /*#__PURE__*/ _jsx(PanelComponent, {
-        ...props
+        ...others,
+        contentDimensions: contentDimensions
     });
 }
 

package/dist/components/Panel/PanelContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelContent.tsx"],"sourcesContent":["// Copyright 2022 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\n\nexport type PanelContentProps = PanelProps<unknown>;\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const {\n    definition: {\n      spec: {\n        plugin: { kind: panelPluginKind },\n      },\n    },\n    contentDimensions,\n  } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return <Skeleton variant=\"rectangular\" width={contentDimensions?.width} height={contentDimensions?.height} />;\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...props} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","definition","spec","plugin","kind","panelPluginKind","contentDimensions","data","isLoading","useErrorBoundary","PanelComponent","variant","width","height","undefined","Error"],"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,QAAoB,2BAA2B,CAAC;AAClE,SAASC,QAAQ,QAAQ,eAAe,CAAC;AAIzC;;;CAGC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EACJC,UAAU,EAAE,EACVC,IAAI,EAAE,EACJC,MAAM,EAAE,EAAEC,IAAI,EAAEC,eAAe,CAAA,EAAE,CAAA,IAClC,CAAA,IACF,CAAA,EACDC,iBAAiB,CAAA,IAClB,GAAGN,KAAK,AAAC;IACV,MAAM,EAAEO,IAAI,EAAEJ,MAAM,CAAA,EAAEK,SAAS,CAAA,EAAE,GAAGX,SAAS,CAAC,OAAO,EAAEQ,eAAe,EAAE;QAAEI,gBAAgB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpG,MAAMC,cAAc,GAAGP,MAAM,aAANA,MAAM,WAAgB,GAAtBA,KAAAA,CAAsB,GAAtBA,MAAM,CAAEO,cAAc,AAAC;IAE9C,IAAIF,SAAS,EAAE;QACb,qBAAO,KAACV,QAAQ;YAACa,OAAO,EAAC,aAAa;YAACC,KAAK,EAAEN,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEM,KAAK;YAAEC,MAAM,EAAEP,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAEO,MAAM;UAAI,CAAC;IAChH,CAAC;IAED,IAAIH,cAAc,KAAKI,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEV,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACK,cAAc;QAAE,GAAGV,KAAK;MAAI,CAAC;AACvC,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.tsx"],"sourcesContent":["// Copyright 2022 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n}\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const { panelPluginKind, contentDimensions, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return <Skeleton variant=\"rectangular\" width={contentDimensions?.width} height={contentDimensions?.height} />;\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","others","data","plugin","isLoading","useErrorBoundary","PanelComponent","variant","width","height","undefined","Error"],"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,QAAoB,2BAA2B,CAAC;AAClE,SAASC,QAAQ,QAAQ,eAAe,CAAC;AAOzC;;;CAGC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,eAAe,CAAA,EAAEC,iBAAiB,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IAChE,MAAM,EAAEI,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGT,SAAS,CAAC,OAAO,EAAEI,eAAe,EAAE;QAAEM,gBAAgB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpG,MAAMC,cAAc,GAAGH,MAAM,aAANA,MAAM,WAAgB,GAAtBA,KAAAA,CAAsB,GAAtBA,MAAM,CAAEG,cAAc,AAAC;IAE9C,IAAIF,SAAS,EAAE;QACb,qBAAO,KAACR,QAAQ;YAACW,OAAO,EAAC,aAAa;YAACC,KAAK,EAAER,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEQ,KAAK;YAAEC,MAAM,EAAET,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAES,MAAM;UAAI,CAAC;IAChH,CAAC;IAED,IAAIH,cAAc,KAAKI,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEZ,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACO,cAAc;QAAE,GAAGL,MAAM;QAAED,iBAAiB,EAAEA,iBAAiB;MAAI,CAAC;AAC9E,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAoBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAwDvB,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAuDvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -14,30 +14,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { Stack, Box, Button, Typography } from '@mui/material';
 import { Drawer } from '@perses-dev/components';
-import { useDashboardApp } from '../../context';
-import { usePanelDrawerModel } from './panel-editor-model';
+import { usePanelEditor } from '../../context';
 import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
 /**
  * The Add/Edit panel drawer for editing a panel's options.
  */ export const PanelDrawer = ()=>{
-    const { closePanelDrawer  } = useDashboardApp();
-    const model = usePanelDrawerModel();
+    const panelEditor = usePanelEditor();
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
     const handleClose = ()=>setIsClosing(true);
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out
     const handleExited = ()=>{
-        closePanelDrawer();
+        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
         setIsClosing(false);
     };
     // Drawer is open if we have a model and we're not transitioning out
-    const isOpen = model !== undefined && isClosing === false;
+    const isOpen = panelEditor !== undefined && isClosing === false;
     const handleSubmit = (values)=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
-        if (model === undefined) {
+        if (panelEditor === undefined) {
             throw new Error('Cannot apply changes');
         }
-        model.applyChanges(values);
+        panelEditor.applyChanges(values);
         handleClose();
     };
     return /*#__PURE__*/ _jsx(Drawer, {
@@ -46,7 +44,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
         SlideProps: {
             onExited: handleExited
         },
-        children: model !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+        children: panelEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
                     sx: {
@@ -57,9 +55,12 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                         borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
                     },
                     children: [
-                        /*#__PURE__*/ _jsx(Typography, {
+                        /*#__PURE__*/ _jsxs(Typography, {
                             variant: "h2",
-                            children: model.drawerTitle
+                            children: [
+                                panelEditor.mode,
+                                " Panel"
+                            ]
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
@@ -72,7 +73,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                                     type: "submit",
                                     variant: "contained",
                                     form: panelEditorFormId,
-                                    children: model.submitButtonText
+                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
@@ -85,7 +86,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                 }),
                 /*#__PURE__*/ _jsx(PanelEditorForm, {
                     onSubmit: handleSubmit,
-                    initialValues: model.initialValues
+                    initialValues: panelEditor.initialValues
                 })
             ]
         })