From e4b9f356bc0dd5db92bc42f54115c74982d7180b Mon Sep 17 00:00:00 2001
From: Bogdan Matei <bogdan.matei@grafana.com>
Date: Tue, 25 Jun 2024 17:10:36 +0300
Subject: [PATCH] Scopes: Implement radio buttons for containers with single
 node selection (#89674)

---
 .../Forms/RadioButtonList/RadioButtonDot.tsx  |  5 ++-
 packages/grafana-ui/src/components/index.ts   |  1 +
 .../scene/Scopes/ScopesFiltersScene.tsx       | 15 ++++----
 .../scene/Scopes/ScopesScene.test.tsx         | 12 ++++---
 .../scene/Scopes/ScopesTreeLevel.tsx          | 36 ++++++++++++++-----
 .../scene/Scopes/testUtils.tsx                |  9 ++---
 6 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx
index 6567ae9b3ad..23616fa1f5a 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx
@@ -5,7 +5,8 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../../themes';
 
-export interface RadioButtonDotProps<T> {
+export interface RadioButtonDotProps<T>
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'label' | 'value' | 'onChange' | 'type'> {
   id: string;
   name: string;
   checked?: boolean;
@@ -25,12 +26,14 @@ export const RadioButtonDot = <T extends string | number | readonly string[]>({
   disabled,
   description,
   onChange,
+  ...props
 }: RadioButtonDotProps<T>) => {
   const styles = useStyles2(getStyles);
 
   return (
     <label title={description} className={styles.label}>
       <input
+        {...props}
         id={id}
         name={name}
         type="radio"
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index dca235c72c0..cca55c7121d 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -238,6 +238,7 @@ export * from './Select/types';
 export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout';
 export { Badge, type BadgeColor, type BadgeProps } from './Badge/Badge';
 export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
+export { RadioButtonDot } from './Forms/RadioButtonList/RadioButtonDot';
 export { RadioButtonList } from './Forms/RadioButtonList/RadioButtonList';
 
 export { Input, getInputStyles } from './Input/Input';
diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx
index b96e129a0ad..f0d9ddfb503 100644
--- a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx
+++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx
@@ -131,14 +131,14 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
   public toggleNodeSelect(path: string[]) {
     let treeScopes = [...this.state.treeScopes];
 
-    let siblings = this.state.nodes;
+    let parentNode = this.state.nodes[''];
 
-    for (let idx = 0; idx < path.length - 1; idx++) {
-      siblings = siblings[path[idx]].nodes;
+    for (let idx = 1; idx < path.length - 1; idx++) {
+      parentNode = parentNode.nodes[path[idx]];
     }
 
     const nodeName = path[path.length - 1];
-    const { linkId } = siblings[nodeName];
+    const { linkId } = parentNode.nodes[nodeName];
 
     const selectedIdx = treeScopes.findIndex(({ scopeName }) => scopeName === linkId);
 
@@ -146,14 +146,17 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
       fetchScope(linkId!);
 
       const selectedFromSameNode =
-        treeScopes.length === 0 || Object.values(siblings).some(({ linkId }) => linkId === treeScopes[0].scopeName);
+        treeScopes.length === 0 ||
+        Object.values(parentNode.nodes).some(({ linkId }) => linkId === treeScopes[0].scopeName);
 
       const treeScope = {
         scopeName: linkId!,
         path,
       };
 
-      this.setState({ treeScopes: !selectedFromSameNode ? [treeScope] : [...treeScopes, treeScope] });
+      this.setState({
+        treeScopes: parentNode?.disableMultiSelect || !selectedFromSameNode ? [treeScope] : [...treeScopes, treeScope],
+      });
     } else {
       treeScopes.splice(selectedIdx, 1);
 
diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx
index a51158e3bb6..013ba8af965 100644
--- a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx
+++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx
@@ -28,8 +28,8 @@ import {
   getFiltersInput,
   getClustersExpand,
   getClustersSelect,
-  getClustersSlothClusterNorthSelect,
-  getClustersSlothClusterSouthSelect,
+  getClustersSlothClusterNorthRadio,
+  getClustersSlothClusterSouthRadio,
   getDashboard,
   getDashboardsContainer,
   getDashboardsExpand,
@@ -158,8 +158,12 @@ describe('ScopesScene', () => {
       it('Respects only one select per container', async () => {
         await userEvents.click(getFiltersInput());
         await userEvents.click(getClustersExpand());
-        await userEvents.click(getClustersSlothClusterNorthSelect());
-        expect(getClustersSlothClusterSouthSelect()).toBeDisabled();
+        await userEvents.click(getClustersSlothClusterNorthRadio());
+        expect(getClustersSlothClusterNorthRadio().checked).toBe(true);
+        expect(getClustersSlothClusterSouthRadio().checked).toBe(false);
+        await userEvents.click(getClustersSlothClusterSouthRadio());
+        expect(getClustersSlothClusterNorthRadio().checked).toBe(false);
+        expect(getClustersSlothClusterSouthRadio().checked).toBe(true);
       });
 
       it('Search works', async () => {
diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx
index a8c7444ee6c..81209146af4 100644
--- a/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx
+++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Checkbox, Icon, IconButton, Input, useStyles2 } from '@grafana/ui';
+import { Checkbox, Icon, IconButton, Input, RadioButtonDot, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { NodesMap, TreeScope } from './types';
@@ -72,18 +72,32 @@ export function ScopesTreeLevel({
 
             const childNodePath = [...nodePath, childNode.name];
 
+            const radioName = childNodePath.join('.');
+
             return (
               <div key={childNode.name} role="treeitem" aria-selected={childNode.isExpanded}>
                 <div className={styles.itemTitle}>
                   {childNode.isSelectable && !childNode.isExpanded ? (
-                    <Checkbox
-                      checked={isSelected}
-                      disabled={anyChildSelected && !isSelected && node.disableMultiSelect}
-                      data-testid={`scopes-tree-${childNode.name}-checkbox`}
-                      onChange={() => {
-                        onNodeSelectToggle(childNodePath);
-                      }}
-                    />
+                    node.disableMultiSelect ? (
+                      <RadioButtonDot
+                        id={radioName}
+                        name={radioName}
+                        checked={isSelected}
+                        label=""
+                        data-testid={`scopes-tree-${childNode.name}-radio`}
+                        onClick={() => {
+                          onNodeSelectToggle(childNodePath);
+                        }}
+                      />
+                    ) : (
+                      <Checkbox
+                        checked={isSelected}
+                        data-testid={`scopes-tree-${childNode.name}-checkbox`}
+                        onChange={() => {
+                          onNodeSelectToggle(childNodePath);
+                        }}
+                      />
+                    )
                   ) : null}
 
                   {childNode.isExpandable && (
@@ -142,6 +156,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       fontSize: theme.typography.pxToRem(14),
       lineHeight: theme.typography.pxToRem(22),
       padding: theme.spacing(0.5, 0),
+
+      '& > label': css({
+        gap: 0,
+      }),
     }),
     itemChildren: css({
       paddingLeft: theme.spacing(4),
diff --git a/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx b/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx
index 8cd17827854..a66ed6a9e37 100644
--- a/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx
+++ b/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx
@@ -295,6 +295,7 @@ const selectors = {
   tree: {
     search: (nodeId: string) => `scopes-tree-${nodeId}-search`,
     select: (nodeId: string) => `scopes-tree-${nodeId}-checkbox`,
+    radio: (nodeId: string) => `scopes-tree-${nodeId}-radio`,
     expand: (nodeId: string) => `scopes-tree-${nodeId}-expand`,
     title: (nodeId: string) => `scopes-tree-${nodeId}-title`,
   },
@@ -354,10 +355,10 @@ export const getApplicationsClustersSlothClusterSouthSelect = () =>
 
 export const getClustersSelect = () => screen.getByTestId(selectors.tree.select('clusters'));
 export const getClustersExpand = () => screen.getByTestId(selectors.tree.expand('clusters'));
-export const getClustersSlothClusterNorthSelect = () =>
-  screen.getByTestId(selectors.tree.select('clusters-slothClusterNorth'));
-export const getClustersSlothClusterSouthSelect = () =>
-  screen.getByTestId(selectors.tree.select('clusters-slothClusterSouth'));
+export const getClustersSlothClusterNorthRadio = () =>
+  screen.getByTestId<HTMLInputElement>(selectors.tree.radio('clusters-slothClusterNorth'));
+export const getClustersSlothClusterSouthRadio = () =>
+  screen.getByTestId<HTMLInputElement>(selectors.tree.radio('clusters-slothClusterSouth'));
 
 export function buildTestScene(overrides: Partial<DashboardScene> = {}) {
   return new DashboardScene({