@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc → 0.0.0-snapshot-test-theming-76fd1cc

package/dist/components/DownloadButton/DownloadButton.js

@@ -13,8 +13,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useRef } from 'react';
 import DownloadIcon from 'mdi-material-ui/DownloadOutline';
-import { IconButton, styled } from '@mui/material';
 import { useDashboard } from '../../context';
+import { ToolbarIconButton } from '../ToolbarIconButton';
 // Button to download the dashboard as a JSON file.
 export function DownloadButton() {
     const { dashboard  } = useDashboard();
@@ -35,7 +35,7 @@ export function DownloadButton() {
     };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(DownloadIconButton, {
+            /*#__PURE__*/ _jsx(ToolbarIconButton, {
                 title: "Download JSON",
                 onClick: onDownloadButtonClick,
                 children: /*#__PURE__*/ _jsx(DownloadIcon, {})
@@ -50,11 +50,5 @@ export function DownloadButton() {
         ]
     });
 }
-const DownloadIconButton = styled(IconButton)(({ theme  })=>({
-        border: `1px solid ${theme.palette.grey[300]}`,
-        borderRadius: theme.shape.borderRadius,
-        padding: '4px',
-        color: theme.palette.grey[900]
-    }));
 
 //# sourceMappingURL=DownloadButton.js.map

package/dist/components/DownloadButton/DownloadButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 React, { useRef } from 'react';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { IconButton, styled } from '@mui/material';\nimport { useDashboard } from '../../context';\n\n// Button to download the dashboard as a JSON file.\nexport function DownloadButton() {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const onDownloadButtonClick = () => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <DownloadIconButton title=\"Download JSON\" onClick={onDownloadButtonClick}>\n        <DownloadIcon />\n      </DownloadIconButton>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n\nconst DownloadIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n  color: theme.palette.grey[900],\n}));\n"],"names":["React","useRef","DownloadIcon","IconButton","styled","useDashboard","DownloadButton","dashboard","hiddenLinkRef","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","DownloadIconButton","title","onClick","a","ref","style","display","download","metadata","name","theme","border","palette","grey","borderRadius","shape","padding","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;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO,CAAC;AACtC,OAAOC,YAAY,MAAM,iCAAiC,CAAC;AAC3D,SAASC,UAAU,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACnD,SAASC,YAAY,QAAQ,eAAe,CAAC;AAE7C,mDAAmD;AACnD,OAAO,SAASC,cAAc,GAAG;IAC/B,MAAM,EAAEC,SAAS,CAAA,EAAE,GAAGF,YAAY,EAAE,AAAC;IACrC,MAAMG,aAAa,GAAGP,MAAM,CAAoB,IAAI,CAAC,AAAC;IAEtD,MAAMQ,qBAAqB,GAAG,IAAM;QAClC,IAAI,CAACD,aAAa,IAAI,CAACA,aAAa,CAACE,OAAO,EAAE,OAAO;QACrD,kBAAkB;QAClB,MAAMC,aAAa,GAAGC,GAAG,CAACC,eAAe,CACvC,IAAIC,IAAI,CAAC;YAACC,IAAI,CAACC,SAAS,CAACT,SAAS,CAAC;SAAC,EAAE;YACpCU,IAAI,EAAE,kBAAkB;SACzB,CAAC,CACH,AAAC;QACF,iBAAiB;QACjBT,aAAa,CAACE,OAAO,CAACQ,IAAI,GAAGP,aAAa,CAAC;QAC3CH,aAAa,CAACE,OAAO,CAACS,KAAK,EAAE,CAAC;QAC9B,0CAA0C;QAC1CP,GAAG,CAACQ,eAAe,CAACT,aAAa,CAAC,CAAC;IACrC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACU,kBAAkB;gBAACC,KAAK,EAAC,eAAe;gBAACC,OAAO,EAAEd,qBAAqB;0BACtE,cAAA,KAACP,YAAY,KAAG;cACG;0BAIrB,KAACsB,GAAC;gBAACC,GAAG,EAAEjB,aAAa;gBAAEkB,KAAK,EAAE;oBAAEC,OAAO,EAAE,MAAM;iBAAE;gBAAEC,QAAQ,EAAE,CAAC,EAAErB,SAAS,CAACsB,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;cAAI;;MACjG,CACH;AACJ,CAAC;AAED,MAAMT,kBAAkB,GAAGjB,MAAM,CAACD,UAAU,CAAC,CAAC,CAAC,EAAE4B,KAAK,CAAA,EAAE,GAAM,CAAA;QAC5DC,MAAM,EAAE,CAAC,UAAU,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9CC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAACD,YAAY;QACtCE,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEP,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;KAC/B,CAAA,AAAC,CAAC,AAAC"}
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 React, { useRef } from 'react';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { useDashboard } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\n\n// Button to download the dashboard as a JSON file.\nexport function DownloadButton() {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const onDownloadButtonClick = () => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <ToolbarIconButton title=\"Download JSON\" onClick={onDownloadButtonClick}>\n        <DownloadIcon />\n      </ToolbarIconButton>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n"],"names":["React","useRef","DownloadIcon","useDashboard","ToolbarIconButton","DownloadButton","dashboard","hiddenLinkRef","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","title","onClick","a","ref","style","display","download","metadata","name"],"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,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO,CAAC;AACtC,OAAOC,YAAY,MAAM,iCAAiC,CAAC;AAC3D,SAASC,YAAY,QAAQ,eAAe,CAAC;AAC7C,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AAEzD,mDAAmD;AACnD,OAAO,SAASC,cAAc,GAAG;IAC/B,MAAM,EAAEC,SAAS,CAAA,EAAE,GAAGH,YAAY,EAAE,AAAC;IACrC,MAAMI,aAAa,GAAGN,MAAM,CAAoB,IAAI,CAAC,AAAC;IAEtD,MAAMO,qBAAqB,GAAG,IAAM;QAClC,IAAI,CAACD,aAAa,IAAI,CAACA,aAAa,CAACE,OAAO,EAAE,OAAO;QACrD,kBAAkB;QAClB,MAAMC,aAAa,GAAGC,GAAG,CAACC,eAAe,CACvC,IAAIC,IAAI,CAAC;YAACC,IAAI,CAACC,SAAS,CAACT,SAAS,CAAC;SAAC,EAAE;YACpCU,IAAI,EAAE,kBAAkB;SACzB,CAAC,CACH,AAAC;QACF,iBAAiB;QACjBT,aAAa,CAACE,OAAO,CAACQ,IAAI,GAAGP,aAAa,CAAC;QAC3CH,aAAa,CAACE,OAAO,CAACS,KAAK,EAAE,CAAC;QAC9B,0CAA0C;QAC1CP,GAAG,CAACQ,eAAe,CAACT,aAAa,CAAC,CAAC;IACrC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACN,iBAAiB;gBAACgB,KAAK,EAAC,eAAe;gBAACC,OAAO,EAAEb,qBAAqB;0BACrE,cAAA,KAACN,YAAY,KAAG;cACE;0BAIpB,KAACoB,GAAC;gBAACC,GAAG,EAAEhB,aAAa;gBAAEiB,KAAK,EAAE;oBAAEC,OAAO,EAAE,MAAM;iBAAE;gBAAEC,QAAQ,EAAE,CAAC,EAAEpB,SAAS,CAACqB,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;cAAI;;MACjG,CACH;AACJ,CAAC"}

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,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,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,eAwD9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,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,eAyE9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -19,6 +19,7 @@ import PencilIcon from 'mdi-material-ui/PencilOutline';
 import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
 import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { InfoTooltip } from '@perses-dev/components';
 import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';
 /**
  * Renders the title for a Grid section, optionally also supporting expanding
@@ -54,32 +55,47 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                     direction: "row",
                     marginLeft: "auto",
                     children: [
-                        /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": `add panel to group ${title}`,
-                            onClick: openAddPanel,
-                            children: /*#__PURE__*/ _jsx(AddPanelIcon, {})
+                        /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: `Add a new panel to ${title}`,
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": `add panel to group ${title}`,
+                                onClick: openAddPanel,
+                                children: /*#__PURE__*/ _jsx(AddPanelIcon, {})
+                            })
                         }),
-                        /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": `edit group ${title}`,
-                            onClick: openEditPanelGroup,
-                            children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                        /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: "Edit",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": `edit group ${title}`,
+                                onClick: openEditPanelGroup,
+                                children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                            })
                         }),
-                        /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": `delete group ${title}`,
-                            onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
-                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                        /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: "Delete",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": `delete group ${title}`,
+                                onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                            })
                         }),
-                        /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": `move group ${title} down`,
-                            disabled: moveDown === undefined,
-                            onClick: moveDown,
-                            children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
+                        /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: "Move panel group down",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": `move group ${title} down`,
+                                disabled: moveDown === undefined,
+                                onClick: moveDown,
+                                children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
+                            })
                         }),
-                        /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": `move group ${title} up`,
-                            disabled: moveUp === undefined,
-                            onClick: moveUp,
-                            children: /*#__PURE__*/ _jsx(ArrowUpIcon, {})
+                        /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: "Move panel group up",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": `move group ${title} 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/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\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, useDeletePanelGroupDialog } 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 { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\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: ({ palette }) =>\n          palette.mode === 'dark' ? palette.background.paper : palette.background.default,\n      }}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <IconButton aria-label={`add panel to group ${title}`} onClick={openAddPanel}>\n                <AddPanelIcon />\n              </IconButton>\n              <IconButton aria-label={`edit group ${title}`} onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label={`delete group ${title}`} onClick={() => openDeletePanelGroupDialog(panelGroupId)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} down`} disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} 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":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","mode","background","paper","default","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"mappings":"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"}
+{"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/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\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 { InfoTooltip } from '@perses-dev/components';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } 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 { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\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: ({ palette }) =>\n          palette.mode === 'dark' ? palette.background.paper : palette.background.default,\n      }}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={`Add a new panel to ${title}`}>\n                <IconButton aria-label={`add panel to group ${title}`} onClick={openAddPanel}>\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description=\"Edit\">\n                <IconButton aria-label={`edit group ${title}`} onClick={openEditPanelGroup}>\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description=\"Delete\">\n                <IconButton\n                  aria-label={`delete group ${title}`}\n                  onClick={() => openDeletePanelGroupDialog(panelGroupId)}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description=\"Move panel group down\">\n                <IconButton\n                  aria-label={`move group ${title} down`}\n                  disabled={moveDown === undefined}\n                  onClick={moveDown}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description=\"Move panel group up\">\n                <IconButton aria-label={`move group ${title} up`} disabled={moveUp === undefined} onClick={moveUp}>\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\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","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","mode","background","paper","default","onClick","onToggleOpen","isOpen","direction","description","aria-label","disabled"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AAOnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAyE7G"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AAOnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eA2F7G"}

package/dist/components/Panel/PanelHeader.js

@@ -10,9 +10,9 @@
 // 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CardHeader, Typography, Stack, IconButton, styled } from '@mui/material';
-import { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';
+import { InfoTooltip, combineSx } from '@perses-dev/components';
 import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
@@ -20,49 +20,62 @@ import DragIcon from 'mdi-material-ui/DragVertical';
 export function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    let action = undefined;
+    let actions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons
-        action = /*#__PURE__*/ _jsxs(Stack, {
-            direction: "row",
-            spacing: 0.5,
-            alignItems: "center",
+        actions = /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                /*#__PURE__*/ _jsx(HeaderIconButton, {
-                    "aria-label": `edit panel ${title}`,
-                    size: "small",
-                    onClick: editHandlers.onEditPanelClick,
-                    children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                /*#__PURE__*/ _jsx(InfoTooltip, {
+                    description: "Edit",
+                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                        "aria-label": `edit panel ${title}`,
+                        size: "small",
+                        onClick: editHandlers.onEditPanelClick,
+                        children: /*#__PURE__*/ _jsx(PencilIcon, {
+                            fontSize: "inherit"
+                        })
+                    })
                 }),
-                /*#__PURE__*/ _jsx(HeaderIconButton, {
-                    "aria-label": `delete panel ${title}`,
-                    size: "small",
-                    onClick: editHandlers.onDeletePanelClick,
-                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                /*#__PURE__*/ _jsx(InfoTooltip, {
+                    description: "Delete",
+                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                        "aria-label": `delete panel ${title}`,
+                        size: "small",
+                        onClick: editHandlers.onDeletePanelClick,
+                        children: /*#__PURE__*/ _jsx(DeleteIcon, {
+                            fontSize: "inherit"
+                        })
+                    })
                 }),
-                /*#__PURE__*/ _jsx(HeaderIconButton, {
-                    "aria-label": `move panel ${title}`,
-                    size: "small",
-                    children: /*#__PURE__*/ _jsx(DragIcon, {
-                        className: "drag-handle",
-                        sx: {
-                            cursor: 'grab'
-                        }
+                /*#__PURE__*/ _jsx(InfoTooltip, {
+                    description: "Drag and drop panel to reorganize",
+                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                        "aria-label": `move panel ${title}`,
+                        size: "small",
+                        children: /*#__PURE__*/ _jsx(DragIcon, {
+                            className: "drag-handle",
+                            sx: {
+                                cursor: 'grab'
+                            },
+                            fontSize: "inherit"
+                        })
                     })
                 })
             ]
         });
     } else if (description !== undefined && isHovered) {
         // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-        action = /*#__PURE__*/ _jsx(InfoTooltip, {
+        actions = /*#__PURE__*/ _jsx(InfoTooltip, {
             id: descriptionTooltipId,
             description: description,
-            placement: TooltipPlacement.Bottom,
+            enterDelay: 100,
             children: /*#__PURE__*/ _jsx(HeaderIconButton, {
                 "aria-label": "Panel Description",
+                size: "small",
                 children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
                     "aria-describedby": "info-tooltip",
                     "aria-hidden": false,
+                    fontSize: "inherit",
                     sx: {
                         color: (theme)=>theme.palette.grey[700]
                     }
@@ -90,12 +103,24 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
             },
             children: title
         }),
-        action: action,
+        action: /*#__PURE__*/ _jsx(HeaderActionWrapper, {
+            direction: "row",
+            spacing: 0.25,
+            alignItems: "center",
+            children: actions
+        }),
         sx: combineSx((theme)=>({
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
                     overflow: 'hidden'
+                },
+                '.MuiCardHeader-action': {
+                    // Overriding the negative margins from MUI's defaults, so we
+                    // can vertically center the icons. Moving these values to a wrapper
+                    // inside the action in `HeaderActionWrapper` below.
+                    // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
+                    margin: 'auto'
                 }
             }), sx),
         ...rest
@@ -105,5 +130,13 @@ const HeaderIconButton = styled(IconButton)(({ theme  })=>({
         borderRadius: theme.shape.borderRadius,
         padding: '4px'
     }));
+const HeaderActionWrapper = styled(Stack)(()=>({
+        // Adding back the negative margins from MUI's defaults for actions, so we
+        // avoid increasing the header size when actions are present while also being
+        // able to vertically center the actions.
+        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
+        marginTop: -4,
+        marginBottom: -4
+    }));
 
 //# sourceMappingURL=PanelHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let action: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    action = (\n      <Stack direction=\"row\" spacing={0.5} alignItems=\"center\">\n        <HeaderIconButton aria-label={`edit panel ${title}`} size=\"small\" onClick={editHandlers.onEditPanelClick}>\n          <PencilIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`delete panel ${title}`} size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n          <DeleteIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`move panel ${title}`} size=\"small\">\n          <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n        </HeaderIconButton>\n      </Stack>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    action = (\n      <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n        <HeaderIconButton aria-label=\"Panel Description\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={action}\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","spacing","alignItems","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","padding","borderBottom","divider","borderRadius","shape"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description=\"Edit\">\n          <HeaderIconButton aria-label={`edit panel ${title}`} size=\"small\" onClick={editHandlers.onEditPanelClick}>\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description=\"Delete\">\n          <HeaderIconButton aria-label={`delete panel ${title}`} size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description=\"Drag and drop panel to reorganize\">\n          <HeaderIconButton aria-label={`move panel ${title}`} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\n      <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n        <HeaderIconButton aria-label=\"Panel Description\" size=\"small\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","onDeletePanelClick","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

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":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAsDvB,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAoBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBA+EvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+/* eslint-disable @typescript-eslint/no-empty-function */ // 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
@@ -11,18 +11,36 @@
 // 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 { useCallback, useState } from 'react';
 import { Stack, Box, Button, Typography } from '@mui/material';
 import { Drawer } from '@perses-dev/components';
-import { usePanelEditor } from '../../context';
-import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
+import { useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';
+import { PanelEditorForm } from './PanelEditorForm';
 /**
  * The Add/Edit panel drawer for editing a panel's options.
  */ export const PanelDrawer = ()=>{
     const panelEditor = usePanelEditor();
+    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = useDiscardChangesConfirmationDialog();
+    const [values, setValues] = useState(undefined);
     // 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);
+    const handleClose = ()=>{
+        const isModified = JSON.stringify(panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.initialValues) !== JSON.stringify(values);
+        if (isModified) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    setIsClosing(true);
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            setIsClosing(true);
+        }
+    };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out
     const handleExited = ()=>{
         panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
@@ -30,14 +48,17 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
     };
     // Drawer is open if we have a model and we're not transitioning out
     const isOpen = panelEditor !== undefined && isClosing === false;
-    const handleSubmit = (values)=>{
+    const handleSubmit = ()=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
-        if (panelEditor === undefined) {
+        if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
-        handleClose();
+        setIsClosing(true);
     };
+    const handleChange = useCallback((values)=>{
+        setValues(values);
+    }, []);
     return /*#__PURE__*/ _jsx(Drawer, {
         isOpen: isOpen,
         onClose: handleClose,
@@ -69,7 +90,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                                 /*#__PURE__*/ _jsx(Button, {
                                     type: "submit",
                                     variant: "contained",
-                                    form: panelEditorFormId,
+                                    onClick: handleSubmit,
                                     children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
@@ -83,8 +104,8 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                     ]
                 }),
                 /*#__PURE__*/ _jsx(PanelEditorForm, {
-                    onSubmit: handleSubmit,
-                    initialValues: panelEditor.initialValues
+                    initialValues: panelEditor.initialValues,
+                    onChange: handleChange
                 })
             ]
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.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 { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\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 closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['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 (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\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\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","mode","direction","marginLeft","type","form","color","onClick","onSubmit","initialValues"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// 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 { useCallback, useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues, useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';\nimport { PanelEditorForm, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const [values, setValues] = useState<PanelEditorValues | undefined>(undefined);\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 = () => {\n    const isModified = JSON.stringify(panelEditor?.initialValues) !== JSON.stringify(values);\n    if (isModified) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          setIsClosing(true);\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      setIsClosing(true);\n    }\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit = () => {\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 (panelEditor === undefined || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  };\n\n  const handleChange: PanelEditorFormProps['onChange'] = useCallback((values) => {\n    setValues(values);\n  }, []);\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\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\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" onClick={handleSubmit}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm initialValues={panelEditor.initialValues} onChange={handleChange} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useCallback","useState","Stack","Box","Button","Typography","Drawer","useDiscardChangesConfirmationDialog","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","values","setValues","undefined","isClosing","setIsClosing","handleClose","isModified","JSON","stringify","initialValues","onDiscardChanges","onCancel","description","handleExited","close","isOpen","handleSubmit","Error","applyChanges","handleChange","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","mode","direction","marginLeft","type","onClick","color","onChange"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
-    onSubmit: (values: PanelEditorValues) => void;
+    onChange: (values: PanelEditorValues) => void;
 }
 export declare function PanelEditorForm(props: PanelEditorFormProps): JSX.Element;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA0G1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAwG1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -11,7 +11,7 @@
 // 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 { useState } from 'react';
+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, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
@@ -19,7 +19,7 @@ import { useListPanelGroups } from '../../context';
 import { PanelPreview } from './PanelPreview';
 export function PanelEditorForm(props) {
     var ref;
-    const { initialValues , onSubmit  } = props;
+    const { initialValues , onChange  } = props;
     const panelGroups = useListPanelGroups();
     const [name, setName] = useState(initialValues.name);
     const [description, setDescription] = useState(initialValues.description);
@@ -46,8 +46,7 @@ export function PanelEditorForm(props) {
         }
         setGroupId(value);
     };
-    const handleSubmit = (e)=>{
-        e.preventDefault();
+    useEffect(()=>{
         const values = {
             name,
             description,
@@ -55,14 +54,20 @@ export function PanelEditorForm(props) {
             kind,
             spec
         };
-        onSubmit(values);
-    };
+        onChange(values);
+    }, [
+        name,
+        description,
+        groupId,
+        kind,
+        spec,
+        onChange
+    ]);
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
     /*#__PURE__*/ _jsx(Box, {
         component: "form",
         id: panelEditorFormId,
-        onSubmit: handleSubmit,
         sx: {
             flex: 1,
             overflowY: 'scroll',