Dashboard: Editing selection redesign (#101763)

* Dashboard: Editing selection redesign

* Reduce row padding and make it uniform

* Minor tweak

* Update

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

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { CSSProperties, PointerEvent, ReactElement, ReactNode, useId, useRef } from 'react';
+import { CSSProperties, PointerEvent, ReactElement, ReactNode, useId, useRef, useState } from 'react';
 import * as React from 'react';
 import { useMeasure, useToggle } from 'react-use';
 
@@ -150,13 +150,18 @@ export function PanelChrome({
   const styles = useStyles2(getStyles);
   const panelContentId = useId();
   const panelTitleId = useId().replace(/:/g, '_');
-  const { isSelected, onSelect } = useElementSelection(selectionId);
+  const { isSelected, onSelect, isSelectable } = useElementSelection(selectionId);
   const pointerDownEvt = useRef<PointerEvent | null>(null);
 
   const hasHeader = !hoverHeader;
 
   const [isOpen, toggleOpen] = useToggle(true);
 
+  // Highlight the full panel when hovering over header
+  const [selectableHighlight, setSelectableHighlight] = useState(false);
+  const onHeaderEnter = React.useCallback(() => setSelectableHighlight(true), []);
+  const onHeaderLeave = React.useCallback(() => setSelectableHighlight(false), []);
+
   // if collapsed is not defined, then component is uncontrolled and state is managed internally
   if (collapsed === undefined) {
     collapsed = !isOpen;
@@ -273,7 +278,8 @@ export function PanelChrome({
       className={cx(
         styles.container,
         isPanelTransparent && styles.transparentContainer,
-        isSelected && 'dashboard-selected-element'
+        isSelected && 'dashboard-selected-element',
+        !isSelected && isSelectable && selectableHighlight && 'dashboard-selectable-element'
       )}
       style={containerStyles}
       aria-labelledby={!!title ? panelTitleId : undefined}
@@ -325,6 +331,8 @@ export function PanelChrome({
               pointerDownEvt.current = null;
             }
           }}
+          onMouseEnter={isSelectable ? onHeaderEnter : undefined}
+          onMouseLeave={isSelectable ? onHeaderLeave : undefined}
           onPointerUp={(evt) => {
             evt.stopPropagation();
             if (

packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts

@@ -69,9 +69,18 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
     },
 
     '.dashboard-selected-element': {
-      outline: `2px dashed ${theme.colors.primary.border}`,
+      outline: `1px dashed ${theme.colors.primary.border}`,
       outlineOffset: '0px',
       borderRadius: theme.shape.radius.default,
     },
+
+    '.dashboard-selectable-element': {
+      '&:hover': {
+        outline: `1px dashed ${theme.colors.border.strong}`,
+        outlineOffset: '0px',
+        borderRadius: theme.shape.radius.default,
+        backgroundColor: theme.colors.emphasize(theme.colors.background.canvas, 0.08),
+      },
+    },
   });
 }