@perses-dev/dashboards 0.11.0 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AAGtE,OAAO,EAA8B,YAAY,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA6ChD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAoC,MAAM,eAAe,CAAC;AAGhF,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAM/F,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkDhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -13,10 +13,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
-import { Box, Collapse, GlobalStyles } from '@mui/material';
+import { Box, Collapse, GlobalStyles, useTheme } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { styles } from '../../css/styles';
-import { useEditMode, usePanelGroup } from '../../context';
+import { useEditMode, usePanelGroup, usePanelGroupActions } from '../../context';
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 const ResponsiveGridLayout = WidthProvider(Responsive);
@@ -24,7 +24,9 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
  * Layout component that arranges children in a Grid based on the definition.
  */ export function GridLayout(props) {
     const { panelGroupId , ...others } = props;
+    const theme = useTheme();
     const groupDefinition = usePanelGroup(panelGroupId);
+    const { updatePanelGroupLayouts  } = usePanelGroupActions(panelGroupId);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
@@ -56,17 +58,11 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                         children: /*#__PURE__*/ _jsx(ResponsiveGridLayout, {
                             className: "layout",
                             breakpoints: {
-                                lg: 1200,
-                                md: 996,
-                                sm: 768,
-                                xs: 480,
+                                sm: theme.breakpoints.values.sm,
                                 xxs: 0
                             },
                             cols: {
-                                lg: 24,
-                                md: 24,
                                 sm: 24,
-                                xs: 24,
                                 xxs: 2
                             },
                             rowHeight: 30,
@@ -76,23 +72,25 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                             ],
                             isDraggable: isEditMode,
                             isResizable: isEditMode,
-                            children: groupDefinition.items.map(({ x , y , width , height  }, itemIndex)=>/*#__PURE__*/ _jsx("div", {
-                                    "data-grid": {
-                                        x,
-                                        y,
-                                        w: width,
-                                        h: height
-                                    },
+                            containerPadding: [
+                                0,
+                                10
+                            ],
+                            layouts: {
+                                sm: groupDefinition.itemLayouts
+                            },
+                            onLayoutChange: updatePanelGroupLayouts,
+                            children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
                                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                         FallbackComponent: ErrorAlert,
                                         children: /*#__PURE__*/ _jsx(GridItemContent, {
                                             panelGroupItemId: {
                                                 panelGroupId,
-                                                itemIndex
+                                                panelGroupItemLayoutId: i
                                             }
                                         })
                                     })
-                                }, itemIndex))
+                                }, i))
                         })
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { styles } from '../../css/styles';\nimport { useEditMode, usePanelGroup, PanelGroupId } from '../../context';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId, ...others } = props;\n  const groupDefinition = usePanelGroup(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {groupDefinition.title !== undefined && (\n          <GridTitle\n            panelGroupId={panelGroupId}\n            title={groupDefinition.title}\n            collapse={\n              groupDefinition.isCollapsed === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}\n            cols={{ lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n          >\n            {groupDefinition.items.map(({ x, y, width, height }, itemIndex) => (\n              <div key={itemIndex} data-grid={{ x, y, w: width, h: height }}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <GridItemContent panelGroupItemId={{ panelGroupId, itemIndex }} />\n                </ErrorBoundary>\n              </div>\n            ))}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","ErrorAlert","ErrorBoundary","styles","useEditMode","usePanelGroup","GridTitle","GridItemContent","ResponsiveGridLayout","GridLayout","props","panelGroupId","others","groupDefinition","isOpen","setIsOpen","isCollapsed","isEditMode","component","sx","marginTop","theme","spacing","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","className","breakpoints","lg","md","sm","xs","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","items","map","x","y","width","height","itemIndex","div","data-grid","w","h","FallbackComponent","panelGroupItemId"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { styles } from '../../css/styles';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId, ...others } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {groupDefinition.title !== undefined && (\n          <GridTitle\n            panelGroupId={panelGroupId}\n            title={groupDefinition.title}\n            collapse={\n              groupDefinition.isCollapsed === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n            cols={{ sm: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n            containerPadding={[0, 10]}\n            layouts={{ sm: groupDefinition.itemLayouts }}\n            onLayoutChange={updatePanelGroupLayouts}\n          >\n            {groupDefinition.itemLayouts.map(({ i }) => (\n              <div key={i}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <GridItemContent panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }} />\n                </ErrorBoundary>\n              </div>\n            ))}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","useTheme","ErrorAlert","ErrorBoundary","styles","useEditMode","usePanelGroup","usePanelGroupActions","GridTitle","GridItemContent","ResponsiveGridLayout","GridLayout","props","panelGroupId","others","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","component","sx","marginTop","spacing","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","className","breakpoints","sm","values","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","containerPadding","layouts","itemLayouts","onLayoutChange","map","i","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId"],"mappings":"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"}

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

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

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

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

package/dist/components/Panel/Panel.js

@@ -14,18 +14,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { useInView } from 'react-intersection-observer';
-import { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';
-import { Box, Card, CardHeader, CardContent, Typography, IconButton as MuiIconButton, Stack, styled } from '@mui/material';
-import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
-import PencilIcon from 'mdi-material-ui/Pencil';
-import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import DragIcon from 'mdi-material-ui/DragVertical';
-import { useEditMode, usePanelActions } from '../../context';
+import { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';
+import { Card, CardContent } from '@mui/material';
+import { useId } from '../../utils/component-ids';
+import { PanelHeader } from './PanelHeader';
 import { PanelContent } from './PanelContent';
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */ export function Panel(props) {
-    const { definition , panelGroupItemId , ...others } = props;
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    // Make sure we have an ID we can use for aria attributes
+    const generatedPanelId = useId('Panel');
+    const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = useState(null);
     const [isHovered, setIsHovered] = useState(false);
     const { width , height  } = useResizeObserver({
@@ -48,103 +48,47 @@ import { PanelContent } from './PanelContent';
     });
     // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
     const panelPadding = 1.5;
-    const { isEditMode  } = useEditMode();
-    const { openEditPanel , openDeletePanelDialog  } = usePanelActions(panelGroupItemId);
+    const handleMouseEnter = (e)=>{
+        setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    };
+    const handleMouseLeave = (e)=>{
+        setIsHovered(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    };
     return /*#__PURE__*/ _jsxs(Card, {
         ref: ref,
-        sx: {
-            ...others.sx,
+        component: "section",
+        sx: combineSx({
             width: '100%',
             height: '100%',
             display: 'flex',
             flexFlow: 'column nowrap'
-        },
+        }, sx),
         variant: "outlined",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "aria-labelledby": headerId,
+        "aria-describedby": headerId,
         ...others,
-        onMouseEnter: ()=>setIsHovered(true),
-        onMouseLeave: ()=>setIsHovered(false),
         children: [
-            /*#__PURE__*/ _jsx(CardHeader, {
-                title: /*#__PURE__*/ _jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        minHeight: '24px'
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            component: "h2",
-                            variant: "body2",
-                            fontWeight: (theme)=>theme.typography.fontWeightMedium,
-                            whiteSpace: "nowrap",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            children: definition.spec.display.name
-                        }),
-                        /*#__PURE__*/ _jsxs(Box, {
-                            sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginLeft: 'auto'
-                            },
-                            children: [
-                                !isEditMode && isHovered && definition.spec.display.description && /*#__PURE__*/ _jsx(InfoTooltip, {
-                                    id: "info-tooltip",
-                                    description: definition.spec.display.description,
-                                    placement: TooltipPlacement.Bottom,
-                                    children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
-                                        "aria-describedby": "info-tooltip",
-                                        "aria-hidden": false,
-                                        fontSize: "small",
-                                        sx: {
-                                            cursor: 'pointer'
-                                        }
-                                    })
-                                }),
-                                isEditMode && isHovered && /*#__PURE__*/ _jsxs(Stack, {
-                                    direction: "row",
-                                    alignItems: "center",
-                                    spacing: 0.5,
-                                    children: [
-                                        /*#__PURE__*/ _jsx(IconButton, {
-                                            "aria-label": "edit panel",
-                                            size: "small",
-                                            onClick: openEditPanel,
-                                            children: /*#__PURE__*/ _jsx(PencilIcon, {})
-                                        }),
-                                        /*#__PURE__*/ _jsx(IconButton, {
-                                            "aria-label": "delete panel",
-                                            size: "small",
-                                            onClick: openDeletePanelDialog,
-                                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
-                                        }),
-                                        /*#__PURE__*/ _jsx(IconButton, {
-                                            "aria-label": "drag handle",
-                                            size: "small",
-                                            children: /*#__PURE__*/ _jsx(DragIcon, {
-                                                className: "drag-handle",
-                                                sx: {
-                                                    cursor: 'grab'
-                                                }
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
+            /*#__PURE__*/ _jsx(PanelHeader, {
+                id: headerId,
+                title: definition.spec.display.name,
+                description: definition.spec.display.description,
+                editHandlers: editHandlers,
+                isHovered: isHovered,
                 sx: {
-                    display: 'block',
-                    padding: (theme)=>theme.spacing(1, panelPadding),
-                    borderBottom: (theme)=>`solid 1px ${theme.palette.divider}`
+                    paddingX: (theme)=>theme.spacing(panelPadding)
                 }
             }),
             /*#__PURE__*/ _jsx(CardContent, {
+                component: "figure",
                 sx: {
                     position: 'relative',
                     overflow: 'hidden',
                     flexGrow: 1,
+                    margin: 0,
                     padding: (theme)=>theme.spacing(panelPadding),
                     // Override MUI default style for last-child
                     ':last-child': {
@@ -164,9 +108,5 @@ import { PanelContent } from './PanelContent';
         ]
     });
 }
-const IconButton = styled(MuiIconButton)(({ theme  })=>({
-        borderRadius: theme.shape.borderRadius,
-        padding: '4px'
-    }));
 
 //# sourceMappingURL=Panel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport {\n  Box,\n  Card,\n  CardProps,\n  CardHeader,\n  CardContent,\n  Typography,\n  IconButton as MuiIconButton,\n  Stack,\n  styled,\n} from '@mui/material';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { useEditMode, LayoutItem, usePanelActions } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  panelGroupItemId: LayoutItem;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, panelGroupItemId, ...others } = props;\n\n  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const { isEditMode } = useEditMode();\n\n  const { openEditPanel, openDeletePanelDialog } = usePanelActions(panelGroupItemId);\n\n  return (\n    <Card\n      ref={ref}\n      sx={{\n        ...others.sx,\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexFlow: 'column nowrap',\n      }}\n      variant=\"outlined\"\n      {...others}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <CardHeader\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              minHeight: '24px',\n            }}\n          >\n            <Typography\n              component=\"h2\"\n              variant=\"body2\"\n              fontWeight={(theme) => theme.typography.fontWeightMedium}\n              whiteSpace=\"nowrap\"\n              overflow=\"hidden\"\n              textOverflow=\"ellipsis\"\n            >\n              {definition.spec.display.name}\n            </Typography>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                marginLeft: 'auto',\n              }}\n            >\n              {!isEditMode && isHovered && definition.spec.display.description && (\n                <InfoTooltip\n                  id=\"info-tooltip\"\n                  description={definition.spec.display.description}\n                  placement={TooltipPlacement.Bottom}\n                >\n                  <InformationOutlineIcon\n                    aria-describedby=\"info-tooltip\"\n                    aria-hidden={false}\n                    fontSize=\"small\"\n                    sx={{ cursor: 'pointer' }}\n                  />\n                </InfoTooltip>\n              )}\n              {isEditMode && isHovered && (\n                <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n                  <IconButton aria-label=\"edit panel\" size=\"small\" onClick={openEditPanel}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"delete panel\" size=\"small\" onClick={openDeletePanelDialog}>\n                    <DeleteIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"drag handle\" size=\"small\">\n                    <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n                  </IconButton>\n                </Stack>\n              )}\n            </Box>\n          </Box>\n        }\n        sx={{\n          display: 'block',\n          padding: (theme) => theme.spacing(1, panelPadding),\n          borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,\n        }}\n      />\n      <CardContent\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n\nconst IconButton = styled(MuiIconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","InfoTooltip","TooltipPlacement","Box","Card","CardHeader","CardContent","Typography","IconButton","MuiIconButton","Stack","styled","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","useEditMode","usePanelActions","PanelContent","Panel","props","definition","panelGroupItemId","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","openEditPanel","openDeletePanelDialog","sx","display","flexFlow","variant","onMouseEnter","onMouseLeave","title","alignItems","minHeight","component","fontWeight","theme","typography","fontWeightMedium","whiteSpace","overflow","textOverflow","spec","name","marginLeft","description","id","placement","Bottom","aria-describedby","aria-hidden","fontSize","cursor","direction","spacing","aria-label","size","onClick","className","padding","borderBottom","palette","divider","position","flexGrow","FallbackComponent","panelPluginKind","plugin","kind","borderRadius","shape"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { useId } from '../../utils/component-ids';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    setIsHovered(true);\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    setIsHovered(false);\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        isHovered={isHovered}\n        sx={{ paddingX: (theme) => theme.spacing(panelPadding) }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","Card","CardContent","useId","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","id","title","spec","name","description","paddingX","theme","spacing","position","overflow","flexGrow","margin","padding","FallbackComponent","panelPluginKind","plugin","kind"],"mappings":"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"}

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

@@ -11,64 +11,111 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PluginRegistry } from '@perses-dev/plugin-system';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';
-import { DashboardProvider } from '../../context';
+import { renderWithContext } from '../../test';
 import { Panel } from './Panel';
 describe('Panel', ()=>{
-    // Helper to create panel props for rendering tests
-    const createPanelProps = ()=>{
-        return {
-            definition: {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name: 'Fake Panel',
-                        description: 'This is a fake panel'
-                    },
-                    plugin: {
-                        kind: 'FakePanel',
-                        spec: {}
-                    }
+    const createTestPanel = ()=>({
+            kind: 'Panel',
+            spec: {
+                display: {
+                    name: 'Fake Panel Title',
+                    description: 'This is a fake panel'
+                },
+                plugin: {
+                    kind: 'TimeSeriesChart',
+                    spec: {}
                 }
-            },
-            panelGroupItemId: {
-                panelGroupId: 0,
-                itemIndex: 0
             }
-        };
-    };
+        });
     // Helper to render the panel with some context set
-    const renderPanel = (isEditMode = false)=>{
-        const { addMockPlugin , pluginRegistryProps  } = mockPluginRegistryProps();
-        addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);
-        renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
-            ...pluginRegistryProps,
-            children: /*#__PURE__*/ _jsx(DashboardProvider, {
-                initialState: {
-                    dashboardSpec: getTestDashboard().spec,
-                    isEditMode
-                },
-                children: /*#__PURE__*/ _jsx(Panel, {
-                    ...createPanelProps()
-                })
-            })
+    const renderPanel = (definition, editHandlers)=>{
+        definition !== null && definition !== void 0 ? definition : definition = createTestPanel();
+        renderWithContext(/*#__PURE__*/ _jsx(Panel, {
+            definition: definition,
+            editHandlers: editHandlers
         }));
     };
-    it('should render name and info icon', async ()=>{
+    // Helper to get the panel once rendered
+    const getPanel = ()=>screen.getByRole('region', {
+            name: 'Fake Panel Title'
+        });
+    it('should render panel', async ()=>{
         renderPanel();
-        await screen.findByText('Fake Panel');
-        screen.queryByLabelText('info-tooltip');
+        const panel = getPanel();
+        expect(panel).toBeInTheDocument();
+        // Should diplay header with panel's title
+        const header = screen.getByRole('banner');
+        expect(header).toHaveTextContent('Fake Panel Title');
+        // Should display chart's content from the fake panel plugin
+        const content = screen.getByRole('figure');
+        await waitFor(()=>{
+            expect(content).toHaveTextContent('TimeSeriesChart panel');
+        });
+        expect(content);
+    });
+    it('shows panel description', async ()=>{
+        renderPanel();
+        const panel = getPanel();
+        // Description button should not be visible until hover on panel
+        const missingButton = screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(missingButton).not.toBeInTheDocument();
+        userEvent.hover(panel);
+        const descriptionButton = screen.getByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).toBeInTheDocument();
+        // Can hover to see panel description in tooltip
+        userEvent.hover(descriptionButton);
+        const tooltip = await screen.findByRole('tooltip');
+        expect(tooltip).toHaveTextContent('This is a fake panel');
+    });
+    it('does not show description when panel does not have one', ()=>{
+        // Render a panel without a description set
+        const withoutDescription = createTestPanel();
+        withoutDescription.spec.display.description = undefined;
+        renderPanel(withoutDescription);
+        const panel = getPanel();
+        userEvent.hover(panel);
+        const descriptionButton = screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
+    });
+    it('does not show description in edit mode', ()=>{
+        renderPanel(undefined, {
+            onEditPanelClick: jest.fn(),
+            onDeletePanelClick: jest.fn()
+        });
+        const panel = getPanel();
+        userEvent.hover(panel);
+        const descriptionButton = screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
     });
-    it('should render edit icons when in edit mode', ()=>{
-        renderPanel(true);
-        const panelTitle = screen.getByText('Fake Panel');
-        userEvent.hover(panelTitle);
-        screen.getByLabelText('drag handle');
-        screen.getByLabelText('edit panel');
-        screen.getByLabelText('delete panel');
+    it('can trigger panel actions in edit mode', ()=>{
+        const onEditPanelClick = jest.fn();
+        const onDeletePanelClick = jest.fn();
+        renderPanel(undefined, {
+            onEditPanelClick,
+            onDeletePanelClick
+        });
+        const panel = getPanel();
+        userEvent.hover(panel);
+        const editButton = screen.getByRole('button', {
+            name: /edit/i
+        });
+        userEvent.click(editButton);
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        userEvent.click(deleteButton);
+        expect(onEditPanelClick).toHaveBeenCalledTimes(1);
+        expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
     });
 });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  // Helper to create panel props for rendering tests\n  const createPanelProps = (): PanelProps => {\n    return {\n      definition: {\n        kind: 'Panel',\n        spec: {\n          display: {\n            name: 'Fake Panel',\n            description: 'This is a fake panel',\n          },\n          plugin: {\n            kind: 'FakePanel',\n            spec: {},\n          },\n        },\n      },\n      panelGroupItemId: { panelGroupId: 0, itemIndex: 0 },\n    };\n  };\n\n  // Helper to render the panel with some context set\n  const renderPanel = (isEditMode = false) => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n          <Panel {...createPanelProps()} />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n  };\n\n  it('should render name and info icon', async () => {\n    renderPanel();\n    await screen.findByText('Fake Panel');\n    screen.queryByLabelText('info-tooltip');\n  });\n\n  it('should render edit icons when in edit mode', () => {\n    renderPanel(true);\n    const panelTitle = screen.getByText('Fake Panel');\n    userEvent.hover(panelTitle);\n    screen.getByLabelText('drag handle');\n    screen.getByLabelText('edit panel');\n    screen.getByLabelText('delete panel');\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","panelGroupItemId","panelGroupId","itemIndex","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText","panelTitle","getByText","hover","getByLabelText"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACDK,gBAAgB,EAAE;gBAAEC,YAAY,EAAE,CAAC;gBAAEC,SAAS,EAAE,CAAC;aAAE;SACpD,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGpB,uBAAuB,EAAE,AAAC;QACzEmB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAElB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACH,cAAc;YAAE,GAAGwB,mBAAmB;sBACrC,cAAA,KAACjB,iBAAiB;gBAACkB,YAAY,EAAE;oBAAEC,aAAa,EAAEpB,gBAAgB,EAAE,CAACO,IAAI;oBAAES,UAAU;iBAAE;0BACrF,cAAA,KAACd,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFiB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMpB,MAAM,CAAC2B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC3B,MAAM,CAAC4B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG7B,MAAM,CAAC8B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD7B,SAAS,CAAC8B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B7B,MAAM,CAACgC,cAAc,CAAC,aAAa,CAAC,CAAC;QACrChC,MAAM,CAACgC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpChC,MAAM,CAACgC,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { renderWithContext } from '../../test';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  const createTestPanel = (): PanelDefinition => ({\n    kind: 'Panel',\n    spec: {\n      display: {\n        name: 'Fake Panel Title',\n        description: 'This is a fake panel',\n      },\n      plugin: {\n        kind: 'TimeSeriesChart',\n        spec: {},\n      },\n    },\n  });\n\n  // Helper to render the panel with some context set\n  const renderPanel = (definition?: PanelDefinition, editHandlers?: PanelProps['editHandlers']) => {\n    definition ??= createTestPanel();\n\n    renderWithContext(<Panel definition={definition} editHandlers={editHandlers} />);\n  };\n\n  // Helper to get the panel once rendered\n  const getPanel = () => screen.getByRole('region', { name: 'Fake Panel Title' });\n\n  it('should render panel', async () => {\n    renderPanel();\n\n    const panel = getPanel();\n    expect(panel).toBeInTheDocument();\n\n    // Should diplay header with panel's title\n    const header = screen.getByRole('banner');\n    expect(header).toHaveTextContent('Fake Panel Title');\n\n    // Should display chart's content from the fake panel plugin\n    const content = screen.getByRole('figure');\n    await waitFor(() => {\n      expect(content).toHaveTextContent('TimeSeriesChart panel');\n    });\n    expect(content);\n  });\n\n  it('shows panel description', async () => {\n    renderPanel();\n\n    const panel = getPanel();\n\n    // Description button should not be visible until hover on panel\n    const missingButton = screen.queryByRole('button', { name: /description/i });\n    expect(missingButton).not.toBeInTheDocument();\n    userEvent.hover(panel);\n    const descriptionButton = screen.getByRole('button', { name: /description/i });\n    expect(descriptionButton).toBeInTheDocument();\n\n    // Can hover to see panel description in tooltip\n    userEvent.hover(descriptionButton);\n    const tooltip = await screen.findByRole('tooltip');\n    expect(tooltip).toHaveTextContent('This is a fake panel');\n  });\n\n  it('does not show description when panel does not have one', () => {\n    // Render a panel without a description set\n    const withoutDescription = createTestPanel();\n    withoutDescription.spec.display.description = undefined;\n    renderPanel(withoutDescription);\n\n    const panel = getPanel();\n    userEvent.hover(panel);\n    const descriptionButton = screen.queryByRole('button', { name: /description/i });\n    expect(descriptionButton).not.toBeInTheDocument();\n  });\n\n  it('does not show description in edit mode', () => {\n    renderPanel(undefined, { onEditPanelClick: jest.fn(), onDeletePanelClick: jest.fn() });\n\n    const panel = getPanel();\n    userEvent.hover(panel);\n    const descriptionButton = screen.queryByRole('button', { name: /description/i });\n    expect(descriptionButton).not.toBeInTheDocument();\n  });\n\n  it('can trigger panel actions in edit mode', () => {\n    const onEditPanelClick = jest.fn();\n    const onDeletePanelClick = jest.fn();\n    renderPanel(undefined, { onEditPanelClick, onDeletePanelClick });\n\n    const panel = getPanel();\n    userEvent.hover(panel);\n\n    const editButton = screen.getByRole('button', { name: /edit/i });\n    userEvent.click(editButton);\n\n    const deleteButton = screen.getByRole('button', { name: /delete/i });\n    userEvent.click(deleteButton);\n\n    expect(onEditPanelClick).toHaveBeenCalledTimes(1);\n    expect(onDeletePanelClick).toHaveBeenCalledTimes(1);\n  });\n});\n"],"names":["screen","waitFor","userEvent","renderWithContext","Panel","describe","createTestPanel","kind","spec","display","name","description","plugin","renderPanel","definition","editHandlers","getPanel","getByRole","it","panel","expect","toBeInTheDocument","header","toHaveTextContent","content","missingButton","queryByRole","not","hover","descriptionButton","tooltip","findByRole","withoutDescription","undefined","onEditPanelClick","jest","fn","onDeletePanelClick","editButton","click","deleteButton","toHaveBeenCalledTimes"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CardHeaderProps } from '@mui/material';
+declare type OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';
+export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
+    id: string;
+    title: string;
+    description?: string;
+    editHandlers?: {
+        onEditPanelClick: () => void;
+        onDeletePanelClick: () => void;
+    };
+    isHovered: boolean;
+}
+export declare function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps): JSX.Element;
+export {};
+//# sourceMappingURL=PanelHeader.d.ts.map

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

@@ -0,0 +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,eAiE7G"}