Dashboard: Editing design tweaks for the checkbox placements (#101618)

Dashboard: Design tweaks

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

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

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),

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>
             ))}