PanelChrome: Hover header fixes (#113908)

* PanelChrome: Hover header fixes

* More fixes

* fixes

* Fix test

* restore hoverHeaderOffset feature

* Fixes

packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx

@@ -37,7 +37,11 @@ export function HoverWidget({ menu, title, dragClass, children, offset = -32, on
   }
 
   return (
-    <div className={cx(styles.container, 'show-on-hover')} style={{ top: offset }} data-testid={selectors.container}>
+    <div
+      className={cx(styles.container, 'show-on-hover')}
+      style={{ top: offset === 0 ? -1 : offset }}
+      data-testid={selectors.container}
+    >
       {dragClass && (
         <div
           className={cx(styles.square, styles.draggable, dragClass)}
@@ -73,15 +77,18 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       position: 'absolute',
       zIndex: 1,
-      right: 0,
+      right: -1,
+      top: -1,
       boxSizing: 'content-box',
       alignItems: 'center',
       background: theme.colors.background.secondary,
       color: theme.colors.text.primary,
       border: `1px solid ${theme.colors.border.weak}`,
-      borderRadius: theme.shape.radius.default,
+      borderBottomLeftRadius: theme.shape.radius.default,
       height: theme.spacing(4),
       boxShadow: theme.shadows.z1,
+      gap: theme.spacing(1),
+      padding: theme.spacing(0, 1),
     }),
     square: css({
       display: 'flex',
@@ -101,9 +108,6 @@ function getStyles(theme: GrafanaTheme2) {
       // Background and border are overriden when topnav toggle is disabled
       background: 'inherit',
       border: 'none',
-      '&:hover': {
-        background: theme.colors.secondary.main,
-      },
     }),
     draggableIcon: css({
       transform: 'rotate(45deg)',

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -293,10 +293,13 @@ export function PanelChrome({
         </div>
       )}
 
-      <div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
-        <PanelDescription description={description} className={dragClassCancel} />
-        {titleItems}
-      </div>
+      {(titleItems || description) && (
+        <div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
+          <PanelDescription description={description} className={dragClassCancel} />
+          {titleItems}
+        </div>
+      )}
+
       {loadingState === LoadingState.Streaming && (
         <Tooltip
           content={
@@ -323,12 +326,15 @@ export function PanelChrome({
           </Tooltip>
         </DelayRender>
       )}
-      <div className={styles.rightAligned}>
-        {actions && <div className={styles.rightActions}>{itemsRenderer(actions, (item) => item)}</div>}
-      </div>
+      {!hoverHeader && <div className={styles.flexGrow} />}
+      {actions && itemsRenderer(actions, (item) => item)}
     </>
   );
 
+  // Ignores streaming and loading (cancel query) states for simplicity
+  // If you need to cancel streaming / loading panels set a title
+  const hasHeaderContent = title || description || titleItems || menu || dragClass || actions;
+
   return (
     // tabIndex={0} is needed for keyboard accessibility in the plot area
     <section
@@ -358,15 +364,17 @@ export function PanelChrome({
 
       {hoverHeader && (
         <>
-          <HoverWidget
-            menu={menu}
-            title={typeof title === 'string' ? title : undefined}
-            offset={hoverHeaderOffset}
-            dragClass={dragClass}
-            onOpenMenu={onOpenMenu}
-          >
-            {headerContent}
-          </HoverWidget>
+          {hasHeaderContent && (
+            <HoverWidget
+              menu={menu}
+              title={typeof title === 'string' ? title : undefined}
+              dragClass={dragClass}
+              offset={hoverHeaderOffset}
+              onOpenMenu={onOpenMenu}
+            >
+              {headerContent}
+            </HoverWidget>
+          )}
 
           {statusMessage && (
             <div className={styles.errorContainerFloating}>
@@ -607,16 +615,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       top: 0,
       zIndex: 1,
     }),
-    rightActions: css({
-      display: 'flex',
-      gap: theme.spacing(1),
-    }),
-    rightAligned: css({
-      label: 'right-aligned-container',
-      marginLeft: 'auto',
-      display: 'flex',
-      alignItems: 'center',
-    }),
     titleItems: css({
       display: 'flex',
       height: '100%',
@@ -631,5 +629,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: 0,
       maxWidth: '100%',
     }),
+    flexGrow: css({
+      flexGrow: 1,
+    }),
   };
 };

packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx

@@ -81,7 +81,7 @@ const getStyles = (theme: GrafanaTheme2) => {
 
     '&:hover ': {
       boxShadow: `${theme.shadows.z1}`,
-      background: `${theme.colors.background.secondary}`,
+      background: theme.colors.secondary.shade,
       color: `${theme.colors.text.primary}`,
     },
   });

public/app/features/dashboard/containers/PublicDashboardPage.test.tsx

@@ -202,6 +202,7 @@ describe('PublicDashboardPage', () => {
           repeatDirection: 'h',
           transformations: [],
           transparent: false,
+          description: 'hello',
         },
       ];
 

yarn.lock

@@ -3597,10 +3597,10 @@ __metadata:
   linkType: soft
 
 "@grafana/scenes-react@npm:^6.46.0":
-  version: 6.46.0
-  resolution: "@grafana/scenes-react@npm:6.46.0"
+  version: 6.46.1
+  resolution: "@grafana/scenes-react@npm:6.46.1"
   dependencies:
-    "@grafana/scenes": "npm:6.46.0"
+    "@grafana/scenes": "npm:6.46.1"
     lru-cache: "npm:^10.2.2"
     react-use: "npm:^17.4.0"
   peerDependencies:
@@ -3612,7 +3612,7 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-router-dom: ^6.28.0
-  checksum: 10/be082f31c14e636efe6c60f98771a03b94606c6210a1f90d64a1c4ee8429ccb5aaa9e401092f4f6d728befeec13051d9811ec894bdee9b3c39865a5ebc2bba41
+  checksum: 10/47007ae998dd52c774f1b53cc1cbd62cbff6c077886ba36381f371454918bd7fbe9ea9373e021a38ba0144e507c8c51a435a2be1aa8250a36c37d7bbfa72fb9d
   languageName: node
   linkType: hard
 
@@ -3642,9 +3642,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/scenes@npm:6.46.0, @grafana/scenes@npm:^6.46.0":
-  version: 6.46.0
-  resolution: "@grafana/scenes@npm:6.46.0"
+"@grafana/scenes@npm:6.46.1, @grafana/scenes@npm:^6.46.0":
+  version: 6.46.1
+  resolution: "@grafana/scenes@npm:6.46.1"
   dependencies:
     "@floating-ui/react": "npm:^0.26.16"
     "@leeoniya/ufuzzy": "npm:^1.0.16"
@@ -3664,7 +3664,7 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-router-dom: ^6.28.0
-  checksum: 10/c4b2b3113da0ea9b5745b4d560e73ad8877934138cb2862ed0fecf0954a36dc7aee2b15e12b802e0884ff8f56756935acc545019753f99a2900ba19a620a4e96
+  checksum: 10/e72a90833a94307c6a4633d9f637e407f681d2be9fa27938158b0bdbb9520e31a3ff804eaab3f5e146673af5a21822b6a8279b4b8fd2ead79b94e2593e366144
   languageName: node
   linkType: hard