[v10.0.x] Navigation: Fix toolbar actions flickering on mobile (#70564)

Navigation: Fix toolbar actions flickering on mobile (#70524)

* fix flickering overflow

* set everything to hidden by default

* extend intersectionobserver mock

(cherry picked from commit ff429c9af5)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx

@@ -18,9 +18,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
   ({ alignment = 'left', className, children, ...rest }, ref) => {
-    // 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));
+    // null/undefined are valid react children so we need to filter them out to prevent unnecessary padding
+    const childrenWithoutNull = React.Children.toArray(children).filter((child) => child != null);
+    const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(false));
     const containerRef = useRef<HTMLDivElement>(null);
     const [showOverflowItems, setShowOverflowItems] = useState(false);
     const overflowRef = useRef<HTMLDivElement>(null);

public/test/jest-setup.ts

@@ -50,12 +50,16 @@ angular.module('grafana.directives', []);
 angular.module('grafana.filters', []);
 angular.module('grafana.routes', ['ngRoute']);
 
-// Mock IntersectionObserver
-const mockIntersectionObserver = jest.fn().mockReturnValue({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-});
+// mock the intersection observer and just say everything is in view
+const mockIntersectionObserver = jest
+  .fn()
+  .mockImplementation((callback: (arg: IntersectionObserverEntry[]) => void) => ({
+    observe: jest.fn().mockImplementation((elem: HTMLElement) => {
+      callback([{ target: elem, isIntersecting: true }] as unknown as IntersectionObserverEntry[]);
+    }),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
 global.IntersectionObserver = mockIntersectionObserver;
 
 jest.mock('../app/core/core', () => ({