From 60f9817303be1bb293b76a12160702a680e15bfa Mon Sep 17 00:00:00 2001
From: Domas <domasx2@gmail.com>
Date: Fri, 24 May 2024 14:38:59 +0300
Subject: [PATCH] ButtonSelect: Render option custom component (#88272)

allow providing custom component to button select
---
 packages/grafana-data/src/types/select.ts                   | 2 +-
 .../grafana-ui/src/components/Dropdown/ButtonSelect.tsx     | 1 +
 packages/grafana-ui/src/components/Menu/MenuItem.test.tsx   | 6 ++++++
 packages/grafana-ui/src/components/Menu/MenuItem.tsx        | 3 +++
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-data/src/types/select.ts b/packages/grafana-data/src/types/select.ts
index 0e46c04392b..13a18f66cd3 100644
--- a/packages/grafana-data/src/types/select.ts
+++ b/packages/grafana-data/src/types/select.ts
@@ -11,7 +11,7 @@ export interface SelectableValue<T = any> {
   description?: string;
   // Adds a simple native title attribute to each option.
   title?: string;
-  // Optional component that will be shown together with other options. Does not get past any props.
+  // Optional component that will be shown together with other options. Does not get passed any props.
   component?: React.ComponentType;
   isDisabled?: boolean;
   [key: string]: any;
diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
index dd8a13b72a0..2fb0bb2f98b 100644
--- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
@@ -101,6 +101,7 @@ const ButtonSelectComponent = <T,>(props: Props<T>) => {
                   ariaChecked={item.value === value?.value}
                   ariaLabel={item.ariaLabel || item.label}
                   disabled={item.isDisabled}
+                  component={item.component}
                   role="menuitemradio"
                 />
               ))}
diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx
index 3a7e2dc7057..c15876d206c 100644
--- a/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx
+++ b/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx
@@ -88,4 +88,10 @@ describe('MenuItem', () => {
     render(<MenuItem label="URL Item" url="/some-url" role="menuitem" />);
     expect(screen.getByRole('menuitem', { name: 'URL Item' })).toBeInTheDocument();
   });
+
+  it('renders extra component if provided', async () => {
+    render(<MenuItem label="main label" component={() => <p>extra content</p>} />);
+    expect(screen.getByText('main label')).toBeInTheDocument();
+    expect(screen.getByText('extra content')).toBeInTheDocument();
+  });
 });
diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
index 8c0f0f1d21f..49d4b41d145 100644
--- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx
+++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
@@ -59,6 +59,8 @@ export interface MenuItemProps<T = unknown> {
   shortcut?: string;
   /** Test id for e2e tests and fullstory*/
   testId?: string;
+  /* Optional component that will be shown together with other options. Does not get passed any props. */
+  component?: React.ComponentType;
 }
 
 /** @internal */
@@ -202,6 +204,7 @@ export const MenuItem = React.memo(
             {description}
           </div>
         )}
+        {props.component ? <props.component /> : null}
       </ItemElement>
     );
   })