From 6f7363af3af17814bba41e9344c0d827d56a3e2e Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 4 Apr 2023 14:40:44 +0100
Subject: [PATCH] Dropdown: Stop Dropdown accepting a function as children
 (#65467)

remove dropdown accepting function children
---
 .../src/components/Dropdown/Dropdown.tsx         |  4 ++--
 .../components/AppChrome/QuickAdd/QuickAdd.tsx   | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
index 4bc664e75aa..21f1e28ed8c 100644
--- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
@@ -11,7 +11,7 @@ import { TooltipPlacement } from '../Tooltip/types';
 export interface Props {
   overlay: React.ReactElement | (() => React.ReactElement);
   placement?: TooltipPlacement;
-  children: React.ReactElement | ((isOpen: boolean) => React.ReactElement);
+  children: React.ReactElement;
   /** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */
   offset?: [number, number];
   onVisibleChange?: (state: boolean) => void;
@@ -51,7 +51,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
 
   return (
     <>
-      {React.cloneElement(typeof children === 'function' ? children(visible) : children, {
+      {React.cloneElement(children, {
         ref: setTriggerRef,
       })}
       {visible && (
diff --git a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
index 9a13cfb57da..c322b4c3875 100644
--- a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
+++ b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
@@ -19,6 +19,7 @@ export const QuickAdd = ({}: Props) => {
   const navBarTree = useSelector((state) => state.navBarTree);
   const breakpoint = theme.breakpoints.values.sm;
 
+  const [isOpen, setIsOpen] = useState(false);
   const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
   const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
 
@@ -46,14 +47,13 @@ export const QuickAdd = ({}: Props) => {
 
   return createActions.length > 0 ? (
     <>
-      <Dropdown overlay={MenuActions} placement="bottom-end">
-        {(isOpen) =>
-          isSmallScreen ? (
-            <ToolbarButton iconOnly icon="plus-circle" aria-label="New" />
-          ) : (
-            <ToolbarButton iconOnly icon="plus" isOpen={isOpen} aria-label="New" />
-          )
-        }
+      <Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={setIsOpen}>
+        <ToolbarButton
+          iconOnly
+          icon={isSmallScreen ? 'plus-circle' : 'plus'}
+          isOpen={isSmallScreen ? undefined : isOpen}
+          aria-label="New"
+        />
       </Dropdown>
       <NavToolbarSeparator className={styles.separator} />
     </>