[Synthetics] Remove useBreakpoints in favor of new EUI breakpoint h…

…ooks

+ add xxl and xxxl breakpoints to Synthetics EUI themes

- `useBreakpoints`: - as far as I can tell, all attached APIs are basically the same APIs that EUI provides OOTB:
  - up -> `useIsWithinMinBreakpoint`
  - down -> `useIsWithinMaxBreakpoint`
  - between -> `useIsWithinBreakpoints`
  - debouncedWidth - not used, but could just use `useWindowSize` directly instead

- note: i'm confused by the `xl` override/conflation with `xxl`, but left the default xl breakpoint size as-is and assumed that all usage instances of 'xl' actually wanted 'xxl'

x-pack/plugins/synthetics/public/apps/synthetics/components/common/pages/synthetics_page_template.test.tsx

@@ -11,14 +11,6 @@ import 'jest-styled-components';
 import { render } from '../../../utils/testing/rtl_helpers';
 import { SyntheticsPageTemplateComponent } from './synthetics_page_template';
 import { OVERVIEW_ROUTE } from '../../../../../../common/constants';
-import { useBreakpoints } from '../../../../../hooks/use_breakpoints';
-
-jest.mock('../../../../../hooks/use_breakpoints', () => {
-  const down = jest.fn().mockReturnValue(false);
-  return {
-    useBreakpoints: () => ({ down }),
-  };
-});
 
 describe('SyntheticsPageTemplateComponent', () => {
   describe('styling', () => {
@@ -34,7 +26,7 @@ describe('SyntheticsPageTemplateComponent', () => {
     });
 
     it('applies the header centering on mobile', () => {
-      (useBreakpoints().down as jest.Mock).mockReturnValue(true);
+      window.innerWidth = 600;
       const { container } = render(<SyntheticsPageTemplateComponent path={OVERVIEW_ROUTE} />);
       expect(container.firstChild).toBeDefined();
     });

x-pack/plugins/synthetics/public/apps/synthetics/components/common/pages/synthetics_page_template.tsx

@@ -7,14 +7,13 @@
 
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import { EuiPageHeaderProps, EuiPageTemplateProps } from '@elastic/eui';
+import { EuiPageHeaderProps, EuiPageTemplateProps, useIsWithinMaxBreakpoint } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useInspectorContext } from '@kbn/observability-plugin/public';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { EmptyStateLoading } from '../../monitors_page/overview/empty_state/empty_state_loading';
 import { EmptyStateError } from '../../monitors_page/overview/empty_state/empty_state_error';
 import { useHasData } from '../../monitors_page/overview/empty_state/use_has_data';
-import { useBreakpoints } from '../../../hooks';
 
 interface Props {
   path: string;
@@ -36,8 +35,7 @@ export const SyntheticsPageTemplateComponent: React.FC<Props & EuiPageTemplatePr
   const {
     services: { observability },
   } = useKibana<ClientPluginsStart>();
-  const { down } = useBreakpoints();
-  const isMobile = down('s');
+  const isMobile = useIsWithinMaxBreakpoint('s');
 
   const PageTemplateComponent = observability.navigation.PageTemplate;
   const StyledPageTemplateComponent = useMemo(() => {

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_list.tsx

@@ -13,6 +13,7 @@ import {
   EuiPanel,
   EuiSpacer,
   useEuiTheme,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ListFilters } from '../list_filters/list_filters';
@@ -25,7 +26,6 @@ import {
   EncryptedSyntheticsSavedMonitor,
 } from '../../../../../../../common/runtime_types';
 import { SyntheticsSettingsContext } from '../../../../contexts/synthetics_settings_context';
-import { useBreakpoints } from '../../../../hooks';
 import { getMonitorListColumns } from './columns';
 import * as labels from './labels';
 
@@ -51,7 +51,7 @@ export const MonitorList = ({
   errorSummaries,
 }: Props) => {
   const { basePath } = useContext(SyntheticsSettingsContext);
-  const isXl = useBreakpoints().up('xl');
+  const isXl = useIsWithinMinBreakpoint('xxl');
   const canEditSynthetics = useCanEditSynthetics();
   const { euiTheme } = useEuiTheme();
 

x-pack/plugins/synthetics/public/apps/synthetics/hooks/index.ts

@@ -7,7 +7,6 @@
 
 export * from './use_url_params';
 export * from './use_breadcrumbs';
-export * from '../../../hooks/use_breakpoints';
 export * from './use_service_allowed';
 export * from './use_enablement';
 export * from './use_locations';

x-pack/plugins/synthetics/public/apps/synthetics/synthetics_app.tsx

@@ -71,7 +71,15 @@ const Application = (props: SyntheticsAppProps) => {
   return (
     <EuiErrorBoundary>
       <i18nCore.Context>
-        <KibanaThemeProvider theme$={props.appMountParameters.theme$}>
+        <KibanaThemeProvider
+          theme$={props.appMountParameters.theme$}
+          modify={{
+            breakpoint: {
+              xxl: 1600,
+              xxxl: 2000,
+            },
+          }}
+        >
           <ReduxProvider store={store}>
             <KibanaContextProvider
               services={{

x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_app.tsx

@@ -104,7 +104,15 @@ const Application = (props: UptimeAppProps) => {
   return (
     <EuiErrorBoundary>
       <i18nCore.Context>
-        <KibanaThemeProvider theme$={props.appMountParameters.theme$}>
+        <KibanaThemeProvider
+          theme$={props.appMountParameters.theme$}
+          modify={{
+            breakpoint: {
+              xxl: 1600,
+              xxxl: 2000,
+            },
+          }}
+        >
           <ReduxProvider store={store}>
             <KibanaContextProvider
               services={{

x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.test.tsx

@@ -11,14 +11,6 @@ import 'jest-styled-components';
 import { render } from '../lib/helper/rtl_helpers';
 import { UptimePageTemplateComponent } from './uptime_page_template';
 import { OVERVIEW_ROUTE } from '../../../common/constants';
-import { useBreakpoints } from '../../hooks/use_breakpoints';
-
-jest.mock('../../hooks/use_breakpoints', () => {
-  const down = jest.fn().mockReturnValue(false);
-  return {
-    useBreakpoints: () => ({ down }),
-  };
-});
 
 describe('UptimePageTemplateComponent', () => {
   describe('styling', () => {
@@ -34,7 +26,7 @@ describe('UptimePageTemplateComponent', () => {
     });
 
     it('applies the header centering on mobile', () => {
-      (useBreakpoints().down as jest.Mock).mockReturnValue(true);
+      window.innerWidth = 600;
       const { container } = render(<UptimePageTemplateComponent path={OVERVIEW_ROUTE} />);
       expect(container.firstChild).toMatchSnapshot();
     });

x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx

@@ -7,7 +7,7 @@
 
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import { EuiPageHeaderProps, EuiPageTemplateProps } from '@elastic/eui';
+import { EuiPageHeaderProps, EuiPageTemplateProps, useIsWithinMaxBreakpoint } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useInspectorContext } from '@kbn/observability-plugin/public';
 import { CERTIFICATES_ROUTE, OVERVIEW_ROUTE } from '../../../common/constants';
@@ -16,7 +16,6 @@ import { useNoDataConfig } from './use_no_data_config';
 import { EmptyStateLoading } from '../components/overview/empty_state/empty_state_loading';
 import { EmptyStateError } from '../components/overview/empty_state/empty_state_error';
 import { useHasData } from '../components/overview/empty_state/use_has_data';
-import { useBreakpoints } from '../../hooks/use_breakpoints';
 
 interface Props {
   path: string;
@@ -38,8 +37,7 @@ export const UptimePageTemplateComponent: React.FC<Props & EuiPageTemplateProps>
   const {
     services: { observability },
   } = useKibana<ClientPluginsStart>();
-  const { down } = useBreakpoints();
-  const isMobile = down('s');
+  const isMobile = useIsWithinMaxBreakpoint('s');
 
   const PageTemplateComponent = observability.navigation.PageTemplate;
   const StyledPageTemplateComponent = useMemo(() => {