ButtonSelect: Render option custom component (#88272)

allow providing custom component to button select

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;

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

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

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