moving useBreakPoint to common hooks folder, removing useShouldUSeMob…

…ileLayout hook

x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx

@@ -18,7 +18,7 @@ import { UXMetrics } from './UXMetrics';
 import { ImpactfulMetrics } from './ImpactfulMetrics';
 import { PageLoadAndViews } from './Panels/PageLoadAndViews';
 import { VisitorBreakdownsPanel } from './Panels/VisitorBreakdowns';
-import { useBreakPoints } from './hooks/useBreakPoints';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 import { getPercentileLabel } from './UXMetrics/translations';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 

x-pack/plugins/apm/public/components/app/service_overview/index.tsx

@@ -12,6 +12,7 @@ import { isRumAgentName } from '../../../../common/agent_name';
 import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 import { LatencyChart } from '../../shared/charts/latency_chart';
 import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
@@ -22,7 +23,6 @@ import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
 import { ServiceOverviewInstancesTable } from './service_overview_instances_table';
 import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
 import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
-import { useShouldUseMobileLayout } from './use_should_use_mobile_layout';
 
 /**
  * The height a chart should be if it's next to a table with 5 rows and a title.
@@ -44,8 +44,8 @@ export function ServiceOverview({
 
   // The default EuiFlexGroup breaks at 768, but we want to break at 992, so we
   // observe the window width and set the flex directions of rows accordingly
-  const shouldUseMobileLayout = useShouldUseMobileLayout();
-  const rowDirection = shouldUseMobileLayout ? 'column' : 'row';
+  const { isMedium } = useBreakPoints();
+  const rowDirection = isMedium ? 'column' : 'row';
 
   const { transactionType } = useApmServiceContext();
   const transactionTypeLabel = i18n.translate(

x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx

@@ -6,7 +6,7 @@
 
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { useShouldUseMobileLayout } from './use_should_use_mobile_layout';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 
 /**
  * The height for a table on the overview page. Is the height of a 5-row basic
@@ -58,12 +58,12 @@ export function ServiceOverviewTableContainer({
   children?: ReactNode;
   isEmptyAndLoading: boolean;
 }) {
-  const shouldUseMobileLayout = useShouldUseMobileLayout();
+  const { isMedium } = useBreakPoints();
 
   return (
     <ServiceOverviewTableContainerDiv
       isEmptyAndLoading={isEmptyAndLoading}
-      shouldUseMobileLayout={shouldUseMobileLayout}
+      shouldUseMobileLayout={isMedium}
     >
       {children}
     </ServiceOverviewTableContainerDiv>

x-pack/plugins/apm/public/components/shared/search_bar.tsx

@@ -11,7 +11,7 @@ import { px } from '../../style/variables';
 import { DatePicker } from './DatePicker';
 import { KueryBar } from './KueryBar';
 import { TimeComparison } from './time_comparison';
-import { useBreakPoints } from '../app/RumDashboard/hooks/useBreakPoints';
+import { useBreakPoints } from '../../hooks/use_break_points';
 
 const SearchBarFlexGroup = styled(EuiFlexGroup)`
   margin: ${({ theme }) =>

x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx

@@ -13,7 +13,7 @@ import { getDateDifference } from '../../../../common/utils/formatters';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { px, unit } from '../../../style/variables';
 import * as urlHelpers from '../../shared/Links/url_helpers';
-import { useBreakPoints } from '../../app/RumDashboard/hooks/useBreakPoints';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 
 const PrependContainer = styled.div`
   display: flex;