@perses-dev/dashboards 0.50.3 → 0.51.0-beta.1

package/dist/components/Panel/PanelHeader.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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
@@ -10,100 +10,17 @@
 // 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, Fragment as _Fragment } from "react/jsx-runtime";
-import { CardHeader, Typography, Stack, styled, IconButton } from '@mui/material';
-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';
-import DragIcon from 'mdi-material-ui/DragVertical';
-import ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';
-import ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';
-import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardHeader, Stack, Typography } from '@mui/material';
+import { combineSx } from '@perses-dev/components';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
-import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
-import { PanelLinks } from './PanelLinks';
-export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }) {
+import { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';
+import { PanelActions } from './PanelActions';
+export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = useReplaceVariablesInString(rawTitle);
     const description = useReplaceVariablesInString(rawDescription);
-    let readActions = undefined;
-    if (readHandlers !== undefined) {
-        readActions = /*#__PURE__*/ _jsx(InfoTooltip, {
-            description: TOOLTIP_TEXT.viewPanel,
-            children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                "aria-label": ARIA_LABEL_TEXT.viewPanel(title),
-                size: "small",
-                onClick: readHandlers.onViewPanelClick,
-                children: readHandlers.isPanelViewed ? /*#__PURE__*/ _jsx(ArrowCollapseIcon, {
-                    fontSize: "inherit"
-                }) : /*#__PURE__*/ _jsx(ArrowExpandIcon, {
-                    fontSize: "inherit"
-                })
-            })
-        });
-    }
-    let editActions = undefined;
-    if (editHandlers !== undefined) {
-        // If there are edit handlers, always just show the edit buttons
-        editActions = /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.editPanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.editPanel(title),
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ _jsx(PencilIcon, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.duplicatePanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.duplicatePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDuplicatePanelClick,
-                        children: /*#__PURE__*/ _jsx(ContentCopyIcon, {
-                            fontSize: "inherit",
-                            sx: {
-                                // Shrink this icon a little bit to look more consistent
-                                // with the other icons in the header.
-                                transform: 'scale(0.925)'
-                            }
-                        })
-                    })
-                }),
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.deletePanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.deletePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ _jsx(DeleteIcon, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.movePanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.movePanel(title),
-                        size: "small",
-                        children: /*#__PURE__*/ _jsx(DragIcon, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            },
-                            fontSize: "inherit"
-                        })
-                    })
-                })
-            ]
-        });
-    }
     return /*#__PURE__*/ _jsx(CardHeader, {
         id: id,
         component: "header",
@@ -120,75 +37,36 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
                         // `minHeight` guarantees that the header has the correct height
                         // when there is no title (i.e. in the preview)
                         lineHeight: '24px',
-                        minHeight: '24px',
+                        minHeight: '26px',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis'
                     },
                     children: title
                 }),
-                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ _jsx(InfoTooltip, {
-                    id: descriptionTooltipId,
+                /*#__PURE__*/ _jsx(PanelActions, {
+                    title: title,
                     description: description,
-                    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.text.secondary
-                            }
-                        })
-                    })
-                }),
-                links !== undefined && links.length > 0 && /*#__PURE__*/ _jsx(PanelLinks, {
-                    links: links
+                    descriptionTooltipId: descriptionTooltipId,
+                    links: links,
+                    queryResults: queryResults,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    extra: extra
                 })
             ]
         }),
-        action: /*#__PURE__*/ _jsxs(HeaderActionWrapper, {
-            direction: "row",
-            spacing: 0.25,
-            alignItems: "center",
-            children: [
-                editHandlers === undefined && extra,
-                " ",
-                readActions,
-                " ",
-                editActions
-            ]
-        }),
         sx: combineSx((theme)=>({
+                containerType: 'inline-size',
+                containerName: HEADER_ACTIONS_CONTAINER_NAME,
                 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
     });
 }
-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 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, CardHeaderProps, styled, IconButton } 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';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { Link } from '@perses-dev/core';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { PanelLinks } from './PanelLinks';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  links?: Link[];\n  extra?: ReactNode;\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps): ReactElement {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let readActions: CardHeaderProps['action'] = undefined;\n  if (readHandlers !== undefined) {\n    readActions = (\n      <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>\n        <HeaderIconButton\n          aria-label={ARIA_LABEL_TEXT.viewPanel(title)}\n          size=\"small\"\n          onClick={readHandlers.onViewPanelClick}\n        >\n          {readHandlers.isPanelViewed ? (\n            <ArrowCollapseIcon fontSize=\"inherit\" />\n          ) : (\n            <ArrowExpandIcon fontSize=\"inherit\" />\n          )}\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n  let editActions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    editActions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopyIcon\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\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        <Stack direction=\"row\">\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          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\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.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n          {links !== undefined && links.length > 0 && <PanelLinks links={links} />}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {readActions} {editActions}\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","styled","IconButton","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ArrowExpandIcon","ArrowCollapseIcon","ContentCopyIcon","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelLinks","PanelHeader","id","title","rawTitle","description","rawDescription","links","readHandlers","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","readActions","undefined","viewPanel","HeaderIconButton","aria-label","size","onClick","onViewPanelClick","isPanelViewed","fontSize","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2025 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, CardHeaderProps, Stack, Typography } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { QueryData, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\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  links?: Link[];\n  extra?: ReactNode;\n  queryResults: QueryData[];\n  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  queryResults,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps): ReactElement {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\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: '26px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          <PanelActions\n            title={title}\n            description={description}\n            descriptionTooltipId={descriptionTooltipId}\n            links={links}\n            queryResults={queryResults}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            extra={extra}\n          />\n        </Stack>\n      }\n      sx={combineSx(\n        (theme) => ({\n          containerType: 'inline-size',\n          containerName: HEADER_ACTIONS_CONTAINER_NAME,\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"],"names":["CardHeader","Stack","Typography","combineSx","useReplaceVariablesInString","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAmBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC/E,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAoBC,2BAA2B,QAAQ,4BAA4B;AAEnF,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAejE,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACL,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGZ,GAAG,MAAM,CAAC;IACpC,MAAMa,uBAAuB,GAAGb,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQL,4BAA4BM;IAC1C,MAAMC,cAAcP,4BAA4BQ;IAEhD,qBACE,KAACZ;QACCQ,IAAIA;QACJc,WAAU;QACVC,mBAAiBH;QACjBI,oBAAkBH;QAClBI,iBAAiB;QACjBhB,qBACE,MAACR;YAAMyB,WAAU;;8BACf,KAACxB;oBACCM,IAAIY;oBACJO,SAAQ;oBACRV,IAAI;wBACF,gEAAgE;wBAChE,+CAA+C;wBAC/CW,YAAY;wBACZC,WAAW;wBACXC,YAAY;wBACZC,UAAU;wBACVC,cAAc;oBAChB;8BAECvB;;8BAEH,KAACH;oBACCG,OAAOA;oBACPE,aAAaA;oBACbU,sBAAsBA;oBACtBR,OAAOA;oBACPC,cAAcA;oBACdC,cAAcA;oBACdC,cAAcA;oBACdE,OAAOA;;;;QAIbD,IAAId,UACF,CAAC8B,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAe9B;gBACf+B,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACAd;QAED,GAAGE,IAAI;;AAGd"}

package/dist/components/Panel/PanelLinks.js

@@ -72,10 +72,10 @@ export function PanelLinks({ links }) {
 function LinkButton({ link }) {
     const { url, name, tooltip, targetBlank } = useLink(link);
     return /*#__PURE__*/ _jsx(InfoTooltip, {
-        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        description: tooltip ?? url,
         enterDelay: 100,
         children: /*#__PURE__*/ _jsx(IconButton, {
-            "aria-label": name !== null && name !== void 0 ? name : url,
+            "aria-label": name ?? url,
             size: "small",
             href: url,
             target: targetBlank ? '_blank' : '_self',
@@ -95,19 +95,18 @@ function LinkButton({ link }) {
 function LinkMenuItem({ link }) {
     const { url, name, tooltip, targetBlank } = useLink(link);
     return /*#__PURE__*/ _jsx(InfoTooltip, {
-        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        description: tooltip ?? url,
         enterDelay: 100,
         children: /*#__PURE__*/ _jsx(MenuItem, {
             component: LinkComponent,
             href: url,
             target: targetBlank ? '_blank' : '_self',
-            children: name !== null && name !== void 0 ? name : url
+            children: name ?? url
         })
     });
 }
 function useLink(link) {
-    var _useReplaceVariablesInString;
-    const url = (_useReplaceVariablesInString = useReplaceVariablesInString(link.url)) !== null && _useReplaceVariablesInString !== void 0 ? _useReplaceVariablesInString : link.url;
+    const url = useReplaceVariablesInString(link.url) ?? link.url;
     const name = useReplaceVariablesInString(link.name);
     const tooltip = useReplaceVariablesInString(link.tooltip);
     if (link.renderVariables === false) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelLinks.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Link as LinkComponent, Menu, MenuItem, Theme } from '@mui/material';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { Link } from '@perses-dev/core';\nimport { MouseEvent, ReactElement, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\n\nexport function PanelLinks({ links }: { links: Link[] }): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isMenuOpened = Boolean(anchorEl);\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  // If there is only one link, show it directly\n  if (links.length === 1 && links[0]) {\n    const link = links[0];\n    return <LinkButton link={link} />;\n  }\n\n  // Else we show a menu with a list of all links\n  return (\n    <>\n      <InfoTooltip description={`${links.length} links`} enterDelay={100}>\n        <IconButton\n          aria-label=\"Panel links\"\n          size=\"small\"\n          onClick={handleOpenMenu}\n          sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n        >\n          <LaunchIcon\n            aria-describedby=\"links-icon\"\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.text.secondary }}\n          />\n        </IconButton>\n      </InfoTooltip>\n\n      <Menu\n        anchorEl={anchorEl}\n        open={isMenuOpened}\n        onClose={handleClose}\n        MenuListProps={{\n          'aria-labelledby': 'panel-links',\n        }}\n      >\n        {links.map((link: Link) => (\n          <LinkMenuItem key={link.url} link={link} />\n        ))}\n      </Menu>\n    </>\n  );\n}\n\nfunction LinkButton({ link }: { link: Link }): ReactElement {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <IconButton\n        aria-label={name ?? url}\n        size=\"small\"\n        href={url}\n        target={targetBlank ? '_blank' : '_self'}\n        sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n      >\n        <LaunchIcon fontSize=\"inherit\" sx={{ color: (theme: Theme) => theme.palette.text.secondary }} />\n      </IconButton>\n    </InfoTooltip>\n  );\n}\n\nfunction LinkMenuItem({ link }: { link: Link }): ReactElement {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <MenuItem component={LinkComponent} href={url} target={targetBlank ? '_blank' : '_self'}>\n        {name ?? url}\n      </MenuItem>\n    </InfoTooltip>\n  );\n}\n\nfunction useLink(link: Link): Link {\n  const url = useReplaceVariablesInString(link.url) ?? link.url;\n  const name = useReplaceVariablesInString(link.name);\n  const tooltip = useReplaceVariablesInString(link.tooltip);\n\n  if (link.renderVariables === false) {\n    return link;\n  }\n\n  return { ...link, url, name, tooltip };\n}\n"],"names":["IconButton","Link","LinkComponent","Menu","MenuItem","LaunchIcon","useState","InfoTooltip","useReplaceVariablesInString","PanelLinks","links","anchorEl","setAnchorEl","isMenuOpened","Boolean","handleOpenMenu","event","currentTarget","handleClose","length","link","LinkButton","description","enterDelay","aria-label","size","onClick","sx","theme","borderRadius","shape","padding","aria-describedby","fontSize","color","palette","text","secondary","open","onClose","MenuListProps","map","LinkMenuItem","url","name","tooltip","targetBlank","useLink","href","target","component","renderVariables"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelLinks.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Link as LinkComponent, Menu, MenuItem, Theme } from '@mui/material';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { Link } from '@perses-dev/core';\nimport { MouseEvent, ReactElement, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\n\nexport function PanelLinks({ links }: { links: Link[] }): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isMenuOpened = Boolean(anchorEl);\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  // If there is only one link, show it directly\n  if (links.length === 1 && links[0]) {\n    const link = links[0];\n    return <LinkButton link={link} />;\n  }\n\n  // Else we show a menu with a list of all links\n  return (\n    <>\n      <InfoTooltip description={`${links.length} links`} enterDelay={100}>\n        <IconButton\n          aria-label=\"Panel links\"\n          size=\"small\"\n          onClick={handleOpenMenu}\n          sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n        >\n          <LaunchIcon\n            aria-describedby=\"links-icon\"\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.text.secondary }}\n          />\n        </IconButton>\n      </InfoTooltip>\n\n      <Menu\n        anchorEl={anchorEl}\n        open={isMenuOpened}\n        onClose={handleClose}\n        MenuListProps={{\n          'aria-labelledby': 'panel-links',\n        }}\n      >\n        {links.map((link: Link) => (\n          <LinkMenuItem key={link.url} link={link} />\n        ))}\n      </Menu>\n    </>\n  );\n}\n\nfunction LinkButton({ link }: { link: Link }): ReactElement {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <IconButton\n        aria-label={name ?? url}\n        size=\"small\"\n        href={url}\n        target={targetBlank ? '_blank' : '_self'}\n        sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n      >\n        <LaunchIcon fontSize=\"inherit\" sx={{ color: (theme: Theme) => theme.palette.text.secondary }} />\n      </IconButton>\n    </InfoTooltip>\n  );\n}\n\nfunction LinkMenuItem({ link }: { link: Link }): ReactElement {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <MenuItem component={LinkComponent} href={url} target={targetBlank ? '_blank' : '_self'}>\n        {name ?? url}\n      </MenuItem>\n    </InfoTooltip>\n  );\n}\n\nfunction useLink(link: Link): Link {\n  const url = useReplaceVariablesInString(link.url) ?? link.url;\n  const name = useReplaceVariablesInString(link.name);\n  const tooltip = useReplaceVariablesInString(link.tooltip);\n\n  if (link.renderVariables === false) {\n    return link;\n  }\n\n  return { ...link, url, name, tooltip };\n}\n"],"names":["IconButton","Link","LinkComponent","Menu","MenuItem","LaunchIcon","useState","InfoTooltip","useReplaceVariablesInString","PanelLinks","links","anchorEl","setAnchorEl","isMenuOpened","Boolean","handleOpenMenu","event","currentTarget","handleClose","length","link","LinkButton","description","enterDelay","aria-label","size","onClick","sx","theme","borderRadius","shape","padding","aria-describedby","fontSize","color","palette","text","secondary","open","onClose","MenuListProps","map","LinkMenuItem","url","name","tooltip","targetBlank","useLink","href","target","component","renderVariables"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import { PanelProps } from '@perses-dev/plugin-system';
+import { UnknownSpec, QueryDataType } from '@perses-dev/core';
+import { ReactElement } from 'react';
+interface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {
+    kind: string;
+}
+/**
+ * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and
+ * renders its PanelComponent.
+ */
+export declare function PanelPluginLoader(props: PanelPluginProps): ReactElement;
+export {};
+//# sourceMappingURL=PanelPluginLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelPluginLoader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,UAAU,gBAAiB,SAAQ,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAsCvE"}

package/dist/components/Panel/PanelPluginLoader.js

@@ -0,0 +1,51 @@
+// Copyright 2025 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 } from "react/jsx-runtime";
+import { usePlugin } from '@perses-dev/plugin-system';
+import { Skeleton } from '@mui/material';
+/**
+ * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and
+ * renders its PanelComponent.
+ */ export function PanelPluginLoader(props) {
+    const { kind, spec, contentDimensions, definition, queryResults } = props;
+    const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, {
+        throwOnError: true
+    });
+    const PanelComponent = plugin?.PanelComponent;
+    const supportedQueryTypes = plugin?.supportedQueryTypes || [];
+    // Show fullsize skeleton if the panel plugin is loading.
+    if (isPanelLoading) {
+        return /*#__PURE__*/ _jsx(Skeleton, {
+            variant: "rectangular",
+            width: contentDimensions?.width,
+            height: contentDimensions?.height,
+            "aria-label": "Loading..."
+        });
+    }
+    if (PanelComponent === undefined) {
+        throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);
+    }
+    for (const queryResult of queryResults){
+        if (!supportedQueryTypes.includes(queryResult.definition.kind)) {
+            throw new Error(`This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`);
+        }
+    }
+    return /*#__PURE__*/ _jsx(PanelComponent, {
+        spec: spec,
+        contentDimensions: contentDimensions,
+        definition: definition,
+        queryResults: queryResults
+    });
+}
+
+//# sourceMappingURL=PanelPluginLoader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"sourcesContent":["// Copyright 2025 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 { UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { Skeleton } from '@mui/material';\n\ninterface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {\n  kind: string;\n}\n\n/**\n * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and\n * renders its PanelComponent.\n */\nexport function PanelPluginLoader(props: PanelPluginProps): ReactElement {\n  const { kind, spec, contentDimensions, definition, queryResults } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, { throwOnError: true });\n  const PanelComponent = plugin?.PanelComponent;\n  const supportedQueryTypes = plugin?.supportedQueryTypes || [];\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);\n  }\n\n  for (const queryResult of queryResults) {\n    if (!supportedQueryTypes.includes(queryResult.definition.kind)) {\n      throw new Error(\n        `This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`\n      );\n    }\n  }\n\n  return (\n    <PanelComponent\n      spec={spec}\n      contentDimensions={contentDimensions}\n      definition={definition}\n      queryResults={queryResults}\n    />\n  );\n}\n"],"names":["usePlugin","Skeleton","PanelPluginLoader","props","kind","spec","contentDimensions","definition","queryResults","data","plugin","isLoading","isPanelLoading","throwOnError","PanelComponent","supportedQueryTypes","variant","width","height","aria-label","undefined","Error","queryResult","includes","join"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,SAAS,QAAoB,4BAA4B;AAGlE,SAASC,QAAQ,QAAQ,gBAAgB;AAMzC;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,KAAuB;IACvD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL;IACpE,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGZ,UAAU,SAASI,MAAM;QAAES,cAAc;IAAK;IAClG,MAAMC,iBAAiBJ,QAAQI;IAC/B,MAAMC,sBAAsBL,QAAQK,uBAAuB,EAAE;IAE7D,yDAAyD;IACzD,IAAIH,gBAAgB;QAClB,qBACE,KAACX;YACCe,SAAQ;YACRC,OAAOX,mBAAmBW;YAC1BC,QAAQZ,mBAAmBY;YAC3BC,cAAW;;IAGjB;IAEA,IAAIL,mBAAmBM,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEjB,KAAK,CAAC,CAAC;IAC/E;IAEA,KAAK,MAAMkB,eAAed,aAAc;QACtC,IAAI,CAACO,oBAAoBQ,QAAQ,CAACD,YAAYf,UAAU,CAACH,IAAI,GAAG;YAC9D,MAAM,IAAIiB,MACR,CAAC,6CAA6C,EAAEC,YAAYf,UAAU,CAACH,IAAI,CAAC,0BAA0B,EAAEW,oBAAoBS,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7I;IACF;IAEA,qBACE,KAACV;QACCT,MAAMA;QACNC,mBAAmBA;QACnBC,YAAYA;QACZC,cAAcA;;AAGpB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/components/Panel/index.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Panel';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU"}
+{"version":3,"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Panel';\nexport * from './PanelPluginLoader';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU;AACxB,cAAc,sBAAsB"}

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":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAM/C;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,YA+C9B,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAM/C;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,YAiD9B,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Drawer } from '@perses-dev/components';
+import { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { usePanelEditor } from '../../context';
 import { PanelEditorForm } from './PanelEditorForm';
 /**
@@ -36,7 +36,7 @@ import { PanelEditorForm } from './PanelEditorForm';
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
     const handleExited = ()=>{
-        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        panelEditor?.close();
         setIsClosing(false);
     };
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
@@ -50,11 +50,14 @@ import { PanelEditorForm } from './PanelEditorForm';
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ _jsx(PanelEditorForm, {
-            initialAction: panelEditor.mode,
-            initialValues: panelEditor.initialValues,
-            onSave: handleSave,
-            onClose: handleClose
+        children: panelEditor && /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorAlert,
+            children: /*#__PURE__*/ _jsx(PanelEditorForm, {
+                initialAction: panelEditor.mode,
+                initialValues: panelEditor.initialValues,
+                onSave: handleSave,
+                onClose: handleClose
+            })
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\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\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  function handleSave(values: PanelEditorValues): void {\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 handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = (): void => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor && (\n        <PanelEditorForm\n          initialAction={panelEditor.mode}\n          initialValues={panelEditor.initialValues}\n          onSave={handleSave}\n          onClose={handleClose}\n        />\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGP,SAAS;IAE3C,oEAAoE;IACpE,MAAMQ,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,wBAAAA,kCAAAA,YAAaW,KAAK;QAClBT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAChB;QAAOO,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACF;YACCmB,eAAejB,YAAYkB,IAAI;YAC/BC,eAAenB,YAAYmB,aAAa;YACxCC,QAAQf;YACRQ,SAASJ;;;AAKnB,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\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\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  function handleSave(values: PanelEditorValues): void {\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 handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = (): void => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor && (\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelEditorForm\n            initialAction={panelEditor.mode}\n            initialValues={panelEditor.initialValues}\n            onSave={handleSave}\n            onClose={handleClose}\n          />\n        </ErrorBoundary>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","ErrorAlert","ErrorBoundary","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGT,SAAS;IAE3C,oEAAoE;IACpE,MAAMU,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,aAAaW;QACbT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAClB;QAAOS,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACJ;YAAcqB,mBAAmBtB;sBAChC,cAAA,KAACG;gBACCoB,eAAelB,YAAYmB,IAAI;gBAC/BC,eAAepB,YAAYoB,aAAa;gBACxCC,QAAQhB;gBACRQ,SAASJ;;;;AAMrB,EAAE"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -161,22 +161,19 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.name",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ _jsx(TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Name",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: watchedName !== null && watchedName !== void 0 ? watchedName : '',
+                                        helperText: fieldState.error?.message,
+                                        value: watchedName ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
@@ -185,28 +182,22 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "groupId",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ _jsx(TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         select: true,
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Group",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
                                         },
-                                        children: panelGroups.map((panelGroup, index)=>{
-                                            var _panelGroup_title;
-                                            return /*#__PURE__*/ _jsx(MenuItem, {
+                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
                                                 value: panelGroup.id,
-                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
-                                            }, panelGroup.id);
-                                        })
-                                    });
-                                }
+                                                children: panelGroup.title ?? `Group ${index + 1}`
+                                            }, panelGroup.id))
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
@@ -215,21 +206,18 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.description",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ _jsx(TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: watchedDescription !== null && watchedDescription !== void 0 ? watchedDescription : '',
+                                        helperText: fieldState.error?.message,
+                                        value: watchedDescription ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
@@ -238,10 +226,7 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.plugin.kind",
-                                render: ({ field, fieldState })=>{
-                                    var _pluginEditor_error, _fieldState_error;
-                                    var _pluginEditor_error_message;
-                                    return /*#__PURE__*/ _jsx(PluginKindSelect, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(PluginKindSelect, {
                                         ...field,
                                         pluginTypes: [
                                             'Panel'
@@ -251,7 +236,7 @@ export function PanelEditorForm(props) {
                                         label: "Type",
                                         disabled: pluginEditor.isLoading,
                                         error: !!pluginEditor.error || !!fieldState.error,
-                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: pluginEditor.error?.message ?? fieldState.error?.message,
                                         value: {
                                             type: 'Panel',
                                             kind: watchedPluginKind
@@ -260,8 +245,7 @@ export function PanelEditorForm(props) {
                                             field.onChange(event.kind);
                                             pluginEditor.onSelectionChange(event);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsxs(Grid, {