[APM] Update useBreakpoints hook with EUI breakpoint deprecations

- since getBreakpoint is no longer an usable util

- EUI's new breakpoint hooks already use/debounce window resize events, so we now get to skip all that custom logic by simply making custom EUI breakpoint overrides and using EUI breakpoint hooks

- remove returned `breakpoint` and `width` keys - they weren't actually being used anywhere in APM that I could see and were causing type errors.
- If someone wants to access them, they can use `useCurrentEuiBreakpoint` and `useWindowSize` individually instead

x-pack/plugins/apm/public/application/index.tsx

@@ -64,7 +64,15 @@ export const renderApp = ({
   element.classList.add(APP_WRAPPER_CLASS);
 
   ReactDOM.render(
-    <KibanaThemeProvider theme$={theme$}>
+    <KibanaThemeProvider
+      theme$={theme$}
+      modify={{
+        breakpoint: {
+          xxl: 1600,
+          xxxl: 2000,
+        },
+      }}
+    >
       <ApmAppRoot
         apmPluginContextValue={apmPluginContextValue}
         pluginsStart={pluginsStart}

x-pack/plugins/apm/public/hooks/use_breakpoints.test.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { EuiProvider } from '@elastic/eui';
+import { useBreakpoints } from './use_breakpoints';
+
+const wrapper: FC = ({ children }) => (
+  <EuiProvider
+    modify={{
+      // set in apm/public/application/index.tsx
+      breakpoint: {
+        xxl: 1600,
+        xxxl: 2000,
+      },
+    }}
+  >
+    {children}
+  </EuiProvider>
+);
+
+describe('useBreakpoints', () => {
+  test('xs breakpoint', () => {
+    window.innerWidth = 0;
+    const { result } = renderHook(() => useBreakpoints(), { wrapper });
+    expect(result.current).toEqual({
+      isXSmall: true,
+      isSmall: true,
+      isMedium: true,
+      isLarge: true,
+      isXl: true,
+      isXXL: true,
+      isXXXL: false,
+    });
+  });
+
+  test('s breakpoint', () => {
+    window.innerWidth = 575;
+    const { result } = renderHook(() => useBreakpoints(), { wrapper });
+    expect(result.current).toEqual({
+      isXSmall: false,
+      isSmall: true,
+      isMedium: true,
+      isLarge: true,
+      isXl: true,
+      isXXL: true,
+      isXXXL: false,
+    });
+  });
+
+  test('m breakpoint', () => {
+    window.innerWidth = 768;
+    const { result } = renderHook(() => useBreakpoints(), { wrapper });
+    expect(result.current).toEqual({
+      isXSmall: false,
+      isSmall: false,
+      isMedium: true,
+      isLarge: true,
+      isXl: true,
+      isXXL: true,
+      isXXXL: false,
+    });
+  });
+
+  test('l breakpoint', () => {
+    window.innerWidth = 992;
+    const { result } = renderHook(() => useBreakpoints(), { wrapper });
+    expect(result.current).toEqual({
+      isXSmall: false,
+      isSmall: false,
+      isMedium: false,
+      isLarge: true,
+      isXl: true,
+      isXXL: true,
+      isXXXL: false,
+    });
+  });
+
+  test('xl breakpoint', () => {
+    window.innerWidth = 1200;
+    const { result } = renderHook(() => useBreakpoints(), { wrapper });
+    expect(result.current).toEqual({
+      isXSmall: false,
+      isSmall: false,
+      isMedium: false,
+      isLarge: false,
+      isXl: true,
+      isXXL: true,
+      isXXXL: false,
+    });
+  });
+
+  test('xxl breakpoint', () => {
+    window.innerWidth = 1600;
+    const { result } = renderHook(() => useBreakpoints(), { wrapper });
+    expect(result.current).toEqual({
+      isXSmall: false,
+      isSmall: false,
+      isMedium: false,
+      isLarge: false,
+      isXl: false,
+      isXXL: true,
+      isXXXL: false,
+    });
+  });
+
+  test('xxxl breakpoint', () => {
+    window.innerWidth = 2000;
+    const { result } = renderHook(() => useBreakpoints(), { wrapper });
+    expect(result.current).toEqual({
+      isXSmall: false,
+      isSmall: false,
+      isMedium: false,
+      isLarge: false,
+      isXl: false,
+      isXXL: false,
+      isXXXL: true,
+    });
+  });
+});

x-pack/plugins/apm/public/hooks/use_breakpoints.ts

@@ -5,42 +5,23 @@
  * 2.0.
  */
 
-import { useState } from 'react';
-import useWindowSize from 'react-use/lib/useWindowSize';
-import useDebounce from 'react-use/lib/useDebounce';
 import {
-  getBreakpoint,
-  isWithinMaxBreakpoint,
-  isWithinMinBreakpoint,
+  useIsWithinMaxBreakpoint,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 
-export type Breakpoints = ReturnType<typeof getScreenSizes>;
-
-export function getScreenSizes(windowWidth: number) {
-  return {
-    isXSmall: isWithinMaxBreakpoint(windowWidth, 'xs'),
-    isSmall: isWithinMaxBreakpoint(windowWidth, 's'),
-    isMedium: isWithinMaxBreakpoint(windowWidth, 'm'),
-    isLarge: isWithinMaxBreakpoint(windowWidth, 'l'),
-    isXl: isWithinMaxBreakpoint(windowWidth, 1599),
-    isXXL: isWithinMaxBreakpoint(windowWidth, 1999),
-    isXXXL: isWithinMinBreakpoint(windowWidth, 2000),
-  };
-}
+export type Breakpoints = Record<string, boolean>;
 
 export function useBreakpoints() {
-  const { width } = useWindowSize();
-  const [breakpoint, setBreakpoint] = useState(getBreakpoint(width));
-  const [screenSizes, setScreenSizes] = useState(getScreenSizes(width));
-
-  useDebounce(
-    () => {
-      setBreakpoint(getBreakpoint(width));
-      setScreenSizes(getScreenSizes(width));
-    },
-    50,
-    [width]
-  );
+  const screenSizes = {
+    isXSmall: useIsWithinMaxBreakpoint('xs'),
+    isSmall: useIsWithinMaxBreakpoint('s'),
+    isMedium: useIsWithinMaxBreakpoint('m'),
+    isLarge: useIsWithinMaxBreakpoint('l'),
+    isXl: useIsWithinMaxBreakpoint('xl'),
+    isXXL: useIsWithinMaxBreakpoint('xxl'),
+    isXXXL: useIsWithinMinBreakpoint('xxxl'),
+  };
 
-  return { ...screenSizes, breakpoint, width };
+  return screenSizes;
 }