PublicDashboards: HoverWidget in panel fix (#66685)

Hover widget modified for public dashboards.

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -77,6 +77,10 @@ export const Components = {
       containerByTitle: (title: string) => `${title} panel`,
       headerCornerInfo: (mode: string) => `Panel header ${mode}`,
       loadingBar: () => `Panel loading bar`,
+      HoverWidget: {
+        container: 'data-test-id hover-header-container',
+        dragIcon: 'data-testid drag-icon',
+      },
     },
     Visualization: {
       Graph: {

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

@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { ReactElement, useCallback, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 
 import { useStyles2 } from '../../themes';
 import { Icon } from '../Icon/Icon';
@@ -16,6 +17,8 @@ interface Props {
   dragClass?: string;
 }
 
+const selectors = e2eSelectors.components.Panels.Panel.HoverWidget;
+
 export function HoverWidget({ menu, title, dragClass, children, offset = -32 }: Props) {
   const styles = useStyles2(getStyles);
   const draggableRef = useRef<HTMLDivElement>(null);
@@ -39,7 +42,7 @@ export function HoverWidget({ menu, title, dragClass, children, offset = -32 }:
     <div
       className={cx(styles.container, { 'show-on-hover': !menuOpen })}
       style={{ top: `${offset}px` }}
-      data-testid="hover-header-container"
+      data-testid={selectors.container}
     >
       {dragClass && (
         <div
@@ -47,11 +50,12 @@ export function HoverWidget({ menu, title, dragClass, children, offset = -32 }:
           onPointerDown={onPointerDown}
           onPointerUp={onPointerUp}
           ref={draggableRef}
+          data-testid={selectors.dragIcon}
         >
           <Icon name="expand-arrows" className={styles.draggableIcon} />
         </div>
       )}
-      {!title && <h6 className={cx(styles.untitled, styles.draggable, dragClass)}>Untitled</h6>}
+      {!title && <h6 className={cx(styles.untitled, { [styles.draggable]: !!dragClass }, dragClass)}>Untitled</h6>}
       {children}
       {menu && (
         <PanelMenu