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),
+      },
+    },
   });
 }

public/app/features/dashboard-scene/scene/layout-rows/RowItemMenu.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Dropdown, Menu, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
+import { Button, Dropdown, Menu, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { RowItem } from './RowItem';
@@ -38,16 +38,16 @@ export function RowItemMenu({ model }: RowItemMenuProps) {
           </Menu>
         )}
       >
-        <ToolbarButton
+        <Button
           aria-label={t('dashboard.rows-layout.row.menu.add', 'Add row')}
           title={t('dashboard.rows-layout.row.menu.add', 'Add row')}
           tooltip={t('dashboard.rows-layout.row.menu.add', 'Add row')}
           icon="plus"
-          iconSize="sm"
-          variant="default"
+          size="sm"
+          variant="secondary"
         >
           <Trans i18nKey="grafana-ui.tags-input.add">Add</Trans>
-        </ToolbarButton>
+        </Button>
       </Dropdown>
       <Dropdown
         placement="bottom-end"
@@ -69,13 +69,13 @@ export function RowItemMenu({ model }: RowItemMenuProps) {
           </Menu>
         )}
       >
-        <ToolbarButton
+        <Button
           aria-label={t('dashboard.rows-layout.row.menu.move-row', 'Move row')}
           title={t('dashboard.rows-layout.row.menu.move-row', 'Move row')}
           tooltip={t('dashboard.rows-layout.row.menu.move-row', 'Move row')}
           icon="arrows-v"
-          iconSize="md"
-          variant="default"
+          size="sm"
+          variant="secondary"
         />
       </Dropdown>
     </ToolbarButtonRow>

public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx

@@ -1,10 +1,10 @@
 import { css, cx } from '@emotion/css';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { SceneComponentProps, sceneGraph } from '@grafana/scenes';
-import { Checkbox, clearButtonStyles, Icon, useElementSelection, useStyles2 } from '@grafana/ui';
+import { clearButtonStyles, Icon, useElementSelection, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
 import { isClonedKey } from '../../utils/clone';
@@ -23,25 +23,33 @@ export function RowItemRenderer({ model }: SceneComponentProps<RowItem>) {
   const titleInterpolated = sceneGraph.interpolate(model, title, undefined, 'text');
   const ref = useRef<HTMLDivElement>(null);
   const shouldGrow = !isCollapsed && height === 'expand';
-  const { isSelected, onSelect } = useElementSelection(key);
+  const { isSelected, isSelectable, onSelect } = useElementSelection(key);
+
+  // Highlight the full row when hovering over header
+  const [selectableHighlight, setSelectableHighlight] = useState(false);
+  const onHeaderEnter = useCallback(() => setSelectableHighlight(true), []);
+  const onHeaderLeave = useCallback(() => setSelectableHighlight(false), []);
 
   return (
     <div
       className={cx(
         styles.wrapper,
+        isEditing && !isCollapsed && styles.wrapperEditing,
+        isEditing && isCollapsed && styles.wrapperEditingCollapsed,
         isCollapsed && styles.wrapperCollapsed,
         shouldGrow && styles.wrapperGrow,
-        !isClone && isSelected && 'dashboard-selected-element'
+        !isClone && isSelected && 'dashboard-selected-element',
+        !isClone && !isSelected && selectableHighlight && 'dashboard-selectable-element'
       )}
       ref={ref}
+      onPointerDown={onSelect}
     >
       {(!isHeaderHidden || (isEditing && showHiddenElements)) && (
-        <div className={styles.rowHeader}>
-          {!isClone && isEditing && (
-            <div className={styles.checkboxWrapper} onPointerDown={onSelect}>
-              <Checkbox value={!!isSelected} />
-            </div>
-          )}
+        <div
+          className={cx(styles.rowHeader, 'dashboard-row-header')}
+          onMouseEnter={isSelectable ? onHeaderEnter : undefined}
+          onMouseLeave={isSelectable ? onHeaderLeave : undefined}
+        >
           <button
             onClick={() => model.onCollapseToggle()}
             className={cx(clearStyles, styles.rowTitleButton)}
@@ -71,9 +79,9 @@ function getStyles(theme: GrafanaTheme2) {
       width: '100%',
       display: 'flex',
       gap: theme.spacing(1),
-      padding: theme.spacing(0, 0, 0.5, 0),
-      margin: theme.spacing(0, 0, 1, 0),
+      padding: theme.spacing(0.5),
       alignItems: 'center',
+      marginBottom: theme.spacing(1),
     }),
     rowTitleButton: css({
       display: 'flex',
@@ -100,6 +108,21 @@ function getStyles(theme: GrafanaTheme2) {
       width: '100%',
       minHeight: '100px',
     }),
+    wrapperEditing: css({
+      padding: theme.spacing(0.5),
+
+      '.dashboard-row-header': {
+        padding: 0,
+      },
+    }),
+    wrapperEditingCollapsed: css({
+      padding: theme.spacing(0.5),
+
+      '.dashboard-row-header': {
+        marginBottom: theme.spacing(0),
+        padding: 0,
+      },
+    }),
     wrapperGrow: css({
       flexGrow: 1,
     }),
@@ -107,6 +130,10 @@ function getStyles(theme: GrafanaTheme2) {
       flexGrow: 0,
       borderBottom: `1px solid ${theme.colors.border.weak}`,
       minHeight: 'unset',
+
+      '.dashboard-row-header': {
+        marginBottom: theme.spacing(0),
+      },
     }),
     rowActions: css({
       display: 'flex',

public/app/features/dashboard-scene/scene/layout-tabs/TabItemMenu.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Dropdown, Menu, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
+import { Button, Dropdown, Menu, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { TabItem } from './TabItem';
@@ -38,16 +38,16 @@ export function TabItemMenu({ model }: Props) {
           </Menu>
         )}
       >
-        <ToolbarButton
+        <Button
           aria-label={t('dashboard.tabs-layout.tab.menu.add', 'Add tab')}
           title={t('dashboard.tabs-layout.tab.menu.add', 'Add tab')}
           tooltip={t('dashboard.tabs-layout.tab.menu.add', 'Add tab')}
           icon="plus"
-          iconSize="xs"
-          variant="default"
+          variant="secondary"
+          size="sm"
         >
           <Trans i18nKey="grafana-ui.tags-input.add">Add</Trans>
-        </ToolbarButton>
+        </Button>
       </Dropdown>
       <Dropdown
         placement="bottom-end"
@@ -67,13 +67,13 @@ export function TabItemMenu({ model }: Props) {
           </Menu>
         )}
       >
-        <ToolbarButton
+        <Button
           aria-label={t('dashboard.tabs-layout.menu.move-tab', 'Move tab')}
           title={t('dashboard.tabs-layout.menu.move-tab', 'Move tab')}
           tooltip={t('dashboard.tabs-layout.menu.move-tab', 'Move tab')}
           icon="arrows-h"
-          iconSize="md"
-          variant="default"
+          variant="secondary"
+          size="sm"
         />
       </Dropdown>
     </ToolbarButtonRow>
@@ -83,7 +83,7 @@ export function TabItemMenu({ model }: Props) {
 function getStyles(theme: GrafanaTheme2) {
   return {
     container: css({
-      gap: theme.spacing(0),
+      gap: theme.spacing(1),
       flexShrink: 0,
     }),
   };

public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router';
 
 import { GrafanaTheme2, locationUtil, textUtil } from '@grafana/data';
 import { SceneComponentProps, sceneGraph } from '@grafana/scenes';
-import { Checkbox, clearButtonStyles, useElementSelection, useStyles2 } from '@grafana/ui';
+import { clearButtonStyles, useElementSelection, useStyles2 } from '@grafana/ui';
 // eslint-disable-next-line no-restricted-imports
 import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
 
@@ -24,18 +24,20 @@ export function TabItemRenderer({ model }: SceneComponentProps<TabItem>) {
 
   return (
     <>
-      <div className={cx(styles.container, isSelected && 'dashboard-selected-element')} role="presentation">
-        {isSelectable && (
-          <div className={styles.checkboxWrapper} onPointerDown={onSelect}>
-            <Checkbox value={!!isSelected} />
-          </div>
+      <div
+        className={cx(
+          styles.container,
+          isSelected && 'dashboard-selected-element',
+          isSelectable && !isSelected && 'dashboard-selectable-element'
         )}
-
+        role="presentation"
+      >
         <a
           href={href}
           className={cx(clearStyles, styles.label, isActive ? styles.labelActive : styles.labelNotActive)}
           role="tab"
           aria-selected={isActive}
+          onPointerDown={onSelect}
         >
           {titleInterpolated}
         </a>
@@ -58,7 +60,7 @@ function getStyles(theme: GrafanaTheme2) {
     }),
     label: css({
       color: theme.colors.text.secondary,
-      padding: theme.spacing(1, 1.5, 0.5),
+      padding: theme.spacing(1, 2, 0.5),
       borderRadius: theme.shape.radius.default,
       userSelect: 'none',
 
@@ -83,7 +85,7 @@ function getStyles(theme: GrafanaTheme2) {
       },
     }),
     labelNotActive: css({
-      'a:hover, &:hover, &:focus': {
+      '&:hover, &:focus': {
         color: theme.colors.text.primary,
 
         '&::before': {

public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx

@@ -51,9 +51,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
   tabsContainer: css({
     display: 'flex',
     justifyContent: 'flex-start',
-    alignItems: 'center',
-    overflowX: 'scroll',
-    overflowY: 'visible',
+    alignItems: 'flex-end',
+    overflowX: 'auto',
+    overflowY: 'hidden',
     paddingInline: theme.spacing(0.125),
   }),
   tabContentContainer: css({