From 96660992f46693303f7db0a8c2e045e848e81616 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 19 Oct 2022 10:00:57 +0100
Subject: [PATCH] Navigation: Ignore null children in `ToolbarButtonRow`
 (#57201)

* filter out any null buttons to prevent padding being added for them

* ignore null children in toolbarbuttonrow
---
 .../src/components/ToolbarButton/ToolbarButtonRow.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
index 10e1cb9f31f..1f43cd7d7b3 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
@@ -19,9 +19,9 @@ const OVERFLOW_BUTTON_ID = 'overflow-button';
 
 export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
   ({ alignment = 'left', className, children, ...rest }, ref) => {
-    const [childVisibility, setChildVisibility] = useState<boolean[]>(
-      Array(React.Children.toArray(children).length).fill(true)
-    );
+    // null is a valid react child so we need to filter it out to prevent unnecessary padding
+    const childrenWithoutNull = React.Children.toArray(children).filter((child) => child !== null);
+    const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(true));
     const containerRef = useRef<HTMLDivElement>(null);
     const [showOverflowItems, setShowOverflowItems] = useState(false);
     const overflowItemsRef = createRef<HTMLDivElement>();
@@ -66,8 +66,9 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
 
     return (
       <div ref={containerRef} className={cx(styles.container, className)} {...rest}>
-        {React.Children.map(children, (child, index) => (
+        {childrenWithoutNull.map((child, index) => (
           <div
+            key={index}
             style={{ order: index, visibility: childVisibility[index] ? 'visible' : 'hidden' }}
             className={styles.childWrapper}
           >
@@ -87,7 +88,7 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
             {showOverflowItems && (
               <FocusScope contain autoFocus>
                 <div className={styles.overflowItems} ref={overflowItemsRef} {...overlayProps} {...dialogProps}>
-                  {React.Children.toArray(children).map((child, index) => !childVisibility[index] && child)}
+                  {childrenWithoutNull.map((child, index) => !childVisibility[index] && child)}
                 </div>
               </FocusScope>
             )}