From f1ba2554e586eaa391797d3cc9cb2c3fd358cdf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 6 Mar 2025 15:53:44 +0100
Subject: [PATCH] Dashboard: Editing design tweaks for the checkbox placements 
 (#101618)

Dashboard: Design tweaks
---
 .../src/themes/GlobalStyles/dashboardGrid.ts        |  2 +-
 .../scene/layout-rows/RowItemRenderer.tsx           |  1 +
 .../scene/layout-tabs/TabItemRenderer.tsx           | 13 +++++++++----
 .../scene/layout-tabs/TabsLayoutManagerRenderer.tsx |  5 ++---
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
index 2e4ef8924de..1f6b410404d 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
@@ -71,7 +71,7 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
     '.dashboard-selected-element': {
       outline: `2px dashed ${theme.colors.primary.border}`,
       outlineOffset: '0px',
-      borderRadius: '2px',
+      borderRadius: theme.shape.radius.default,
     },
   });
 }
diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx
index 2e170df5dcd..80e6026c7a8 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx
@@ -115,6 +115,7 @@ function getStyles(theme: GrafanaTheme2) {
     checkboxWrapper: css({
       display: 'flex',
       alignItems: 'center',
+      paddingLeft: theme.spacing(1),
     }),
   };
 }
diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx
index 33e7386a7c6..30f4fa4e13a 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx
@@ -14,7 +14,7 @@ export function TabItemRenderer({ model }: SceneComponentProps<TabItem>) {
   const parentLayout = model.getParentLayout();
   const { tabs, currentTabIndex } = parentLayout.useState();
   const titleInterpolated = sceneGraph.interpolate(model, title, undefined, 'text');
-  const { isSelected, onSelect } = useElementSelection(key);
+  const { isSelected, onSelect, isSelectable } = useElementSelection(key);
   const myIndex = tabs.findIndex((tab) => tab === model);
   const isActive = myIndex === currentTabIndex;
   const location = useLocation();
@@ -25,9 +25,11 @@ export function TabItemRenderer({ model }: SceneComponentProps<TabItem>) {
   return (
     <>
       <div className={cx(styles.container, isSelected && 'dashboard-selected-element')} role="presentation">
-        <span onPointerDown={onSelect}>
-          <Checkbox value={!!isSelected} />
-        </span>
+        {isSelectable && (
+          <div className={styles.checkboxWrapper} onPointerDown={onSelect}>
+            <Checkbox value={!!isSelected} />
+          </div>
+        )}
 
         <a
           href={href}
@@ -51,6 +53,9 @@ function getStyles(theme: GrafanaTheme2) {
       whiteSpace: 'nowrap',
       alignItems: 'center',
     }),
+    checkboxWrapper: css({
+      paddingLeft: theme.spacing(1),
+    }),
     label: css({
       color: theme.colors.text.secondary,
       padding: theme.spacing(1, 1.5, 0.5),
diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
index 2f60457a6d4..5399d2496d9 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { SceneComponentProps } from '@grafana/scenes';
-import { Divider, TabContent, TabsBar, useStyles2 } from '@grafana/ui';
+import { TabContent, TabsBar, useStyles2 } from '@grafana/ui';
 
 import { getDashboardSceneFor } from '../../utils/utils';
 
@@ -23,9 +23,8 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
       <TabsBar className={styles.tabsWrapper}>
         <div className={styles.tabsRow}>
           <div className={styles.tabsContainer}>
-            {tabs.map((tab, idx) => (
+            {tabs.map((tab) => (
               <Fragment key={tab.state.key!}>
-                {isEditing && idx > 0 && <Divider direction="vertical" />}
                 <tab.Component model={tab} />
               </Fragment>
             ))}