diff --git a/x-pack/plugins/apm/public/application/application.test.tsx b/x-pack/plugins/apm/public/application/application.test.tsx index fc369b9cf672a..0566ff19017f4 100644 --- a/x-pack/plugins/apm/public/application/application.test.tsx +++ b/x-pack/plugins/apm/public/application/application.test.tsx @@ -14,6 +14,10 @@ import { createCallApmApi } from '../services/rest/createCallApmApi'; import { renderApp } from './'; import { disableConsoleWarning } from '../utils/testHelpers'; +jest.mock('../services/rest/index_pattern', () => ({ + createStaticIndexPattern: () => Promise.resolve(undefined), +})); + describe('renderApp', () => { let mockConsole: jest.SpyInstance; diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx index 2b0b3ddd98167..ffcc66631dad8 100644 --- a/x-pack/plugins/apm/public/application/index.tsx +++ b/x-pack/plugins/apm/public/application/index.tsx @@ -26,7 +26,6 @@ import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs'; import { ApmPluginContext } from '../context/ApmPluginContext'; import { LicenseProvider } from '../context/LicenseContext'; import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext'; -import { LocationProvider } from '../context/LocationContext'; import { UrlParamsProvider } from '../context/UrlParamsContext'; import { ApmPluginSetupDeps } from '../plugin'; import { createCallApmApi } from '../services/rest/createCallApmApi'; @@ -98,15 +97,13 @@ export function ApmAppRoot({ - - - - - - - - - + + + + + + + diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx index 1acfc5c49245d..84b72b62248b0 100644 --- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx +++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx @@ -11,6 +11,7 @@ import { MockUrlParamsContextProvider } from '../../../../../context/UrlParamsCo import { mockMoment, toJson } from '../../../../../utils/testHelpers'; import { ErrorGroupList } from '../index'; import props from './props.json'; +import { MemoryRouter } from 'react-router-dom'; jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => { return { @@ -26,9 +27,11 @@ describe('ErrorGroupOverview -> List', () => { it('should render empty state', () => { const storeState = {}; const wrapper = mount( - - - , + + + + + , storeState ); @@ -37,11 +40,13 @@ describe('ErrorGroupOverview -> List', () => { it('should render with data', () => { const wrapper = mount( - - - - - + + + + + + + ); expect(toJson(wrapper)).toMatchSnapshot(); diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx index 1fe5f17c39985..ad4178cf702c5 100644 --- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx @@ -114,33 +114,33 @@ function ServiceDetailsTransactions( return ; } -function SettingsAgentConfiguration() { +function SettingsAgentConfiguration(props: RouteComponentProps<{}>) { return ( - + ); } -function SettingsAnomalyDetection() { +function SettingsAnomalyDetection(props: RouteComponentProps<{}>) { return ( - + ); } -function SettingsApmIndices() { +function SettingsApmIndices(props: RouteComponentProps<{}>) { return ( - + ); } -function SettingsCustomizeUI() { +function SettingsCustomizeUI(props: RouteComponentProps<{}>) { return ( - + ); diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/route_handlers/agent_configuration.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/route_handlers/agent_configuration.tsx index cc07286457908..f2ae0c2ff99e8 100644 --- a/x-pack/plugins/apm/public/components/app/Main/route_config/route_handlers/agent_configuration.tsx +++ b/x-pack/plugins/apm/public/components/app/Main/route_config/route_handlers/agent_configuration.tsx @@ -13,10 +13,10 @@ import { AgentConfigurationCreateEdit } from '../../../Settings/AgentConfigurati type EditAgentConfigurationRouteHandler = RouteComponentProps<{}>; -export function EditAgentConfigurationRouteHandler({ - history, -}: EditAgentConfigurationRouteHandler) { - const { search } = history.location; +export function EditAgentConfigurationRouteHandler( + props: EditAgentConfigurationRouteHandler +) { + const { search } = props.history.location; // typescript complains because `pageStop` does not exist in `APMQueryParams` // Going forward we should move away from globally declared query params and this is a first step @@ -34,7 +34,7 @@ export function EditAgentConfigurationRouteHandler({ ); return ( - + ; -export function CreateAgentConfigurationRouteHandler({ - history, -}: CreateAgentConfigurationRouteHandlerProps) { - const { search } = history.location; +export function CreateAgentConfigurationRouteHandler( + props: CreateAgentConfigurationRouteHandlerProps +) { + const { search } = props.history.location; // Ignoring here because we specifically DO NOT want to add the query params to the global route handler // @ts-expect-error const { pageStep } = toQuery(search); return ( - + diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx index 8eeff018ad03f..e4ba1e36378d9 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx @@ -6,21 +6,22 @@ import { render, wait, waitForElement } from '@testing-library/react'; import { CoreStart } from 'kibana/public'; +import { merge } from 'lodash'; import React, { FunctionComponent, ReactChild } from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { createKibanaReactContext } from 'src/plugins/kibana_react/public'; -import { merge } from 'lodash'; import { ServiceOverview } from '..'; +import { EuiThemeProvider } from '../../../../../../observability/public'; import { ApmPluginContextValue } from '../../../../context/ApmPluginContext'; import { mockApmPluginContextValue, MockApmPluginContextWrapper, } from '../../../../context/ApmPluginContext/MockApmPluginContext'; +import * as useAnomalyDetectionJobs from '../../../../hooks/useAnomalyDetectionJobs'; import { FETCH_STATUS } from '../../../../hooks/useFetcher'; import * as useLocalUIFilters from '../../../../hooks/useLocalUIFilters'; import * as urlParamsHooks from '../../../../hooks/useUrlParams'; -import * as useAnomalyDetectionJobs from '../../../../hooks/useAnomalyDetectionJobs'; import { SessionStorageMock } from '../../../../services/__test__/SessionStorageMock'; -import { EuiThemeProvider } from '../../../../../../../legacy/common/eui_styled_components'; const KibanaReactContext = createKibanaReactContext({ usageCollection: { reportUiStats: () => {} }, @@ -44,13 +45,15 @@ function wrapper({ children }: { children: ReactChild }) { }) as unknown) as ApmPluginContextValue; return ( - + - - {children} - + + + {children} + + - + ); } diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx index 210b3c3da8d0b..a67df86b21b1e 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx @@ -15,12 +15,12 @@ import { import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; import React, { useState } from 'react'; +import { useLocation } from 'react-router-dom'; import { getOptionLabel } from '../../../../../../common/agent_configuration/all_option'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { AgentConfigurationListAPIResponse } from '../../../../../../server/lib/settings/agent_configuration/list_configurations'; import { useApmPluginContext } from '../../../../../hooks/useApmPluginContext'; import { FETCH_STATUS } from '../../../../../hooks/useFetcher'; -import { useLocation } from '../../../../../hooks/useLocation'; import { useTheme } from '../../../../../hooks/useTheme'; import { px, units } from '../../../../../style/variables'; import { diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx index 06d3f883e211a..8e32c55da9161 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx @@ -15,10 +15,10 @@ import { import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; import React from 'react'; +import { useLocation } from 'react-router-dom'; import { useTrackPageview } from '../../../../../../observability/public'; import { useApmPluginContext } from '../../../../hooks/useApmPluginContext'; import { useFetcher } from '../../../../hooks/useFetcher'; -import { useLocation } from '../../../../hooks/useLocation'; import { createAgentConfigurationHref } from '../../../shared/Links/apm/agentConfigurationLinks'; import { AgentConfigurationList } from './List'; diff --git a/x-pack/plugins/apm/public/components/app/Settings/Settings.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/Settings.test.tsx index 0e0194cac848c..21da12477b024 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/Settings.test.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/Settings.test.tsx @@ -8,23 +8,27 @@ import { render } from '@testing-library/react'; import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext'; import React, { ReactNode } from 'react'; import { Settings } from './'; -import { LocationContext } from '../../../context/LocationContext'; import { createMemoryHistory } from 'history'; +import { MemoryRouter, RouteComponentProps } from 'react-router-dom'; + +const { location } = createMemoryHistory(); function Wrapper({ children }: { children?: ReactNode }) { - const { location } = createMemoryHistory(); return ( - + {children} - + ); } describe('Settings', () => { it('renders', async () => { + const routerProps = ({ + location, + } as unknown) as RouteComponentProps<{}>; expect(() => render( - +
, { wrapper: Wrapper } diff --git a/x-pack/plugins/apm/public/components/app/Settings/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/index.tsx index 9ed3a85fe68b5..aa71050802215 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/index.tsx @@ -4,25 +4,29 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { ReactNode } from 'react'; -import { i18n } from '@kbn/i18n'; import { EuiButtonEmpty, EuiPage, - EuiSideNav, - EuiPageSideBar, EuiPageBody, + EuiPageSideBar, + EuiSideNav, } from '@elastic/eui'; -import { HomeLink } from '../../shared/Links/apm/HomeLink'; -import { useLocation } from '../../../hooks/useLocation'; -import { getAPMHref } from '../../shared/Links/apm/APMLink'; +import { i18n } from '@kbn/i18n'; +import React, { ReactNode } from 'react'; +import { RouteComponentProps } from 'react-router-dom'; import { useApmPluginContext } from '../../../hooks/useApmPluginContext'; +import { getAPMHref } from '../../shared/Links/apm/APMLink'; +import { HomeLink } from '../../shared/Links/apm/HomeLink'; + +interface SettingsProps extends RouteComponentProps<{}> { + children: ReactNode; +} -export function Settings(props: { children: ReactNode }) { +export function Settings({ children, location }: SettingsProps) { const { core } = useApmPluginContext(); const { basePath } = core.http; const canAccessML = !!core.application.capabilities.ml?.canAccessML; - const { search, pathname } = useLocation(); + const { search, pathname } = location; function getSettingsHref(path: string) { return getAPMHref({ basePath, path: `/settings${path}`, search }); @@ -94,7 +98,7 @@ export function Settings(props: { children: ReactNode }) { ]} /> - {props.children} + {children} ); diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx index bab31c9a460d0..614089c0457ac 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx @@ -18,7 +18,6 @@ import { useTrackPageview } from '../../../../../observability/public'; import { Projection } from '../../../../common/projections'; import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext'; import { FETCH_STATUS } from '../../../hooks/useFetcher'; -import { useLocation } from '../../../hooks/useLocation'; import { useTransactionCharts } from '../../../hooks/useTransactionCharts'; import { useTransactionDistribution } from '../../../hooks/useTransactionDistribution'; import { useUrlParams } from '../../../hooks/useUrlParams'; @@ -32,9 +31,11 @@ import { WaterfallWithSummmary } from './WaterfallWithSummmary'; type TransactionDetailsProps = RouteComponentProps<{ serviceName: string }>; -export function TransactionDetails({ match }: TransactionDetailsProps) { +export function TransactionDetails({ + location, + match, +}: TransactionDetailsProps) { const { serviceName } = match.params; - const location = useLocation(); const { urlParams } = useUrlParams(); const { data: distributionData, diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx index 544e2450fe5d9..3e32b0ec23b13 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx @@ -19,11 +19,11 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { Location } from 'history'; import { first } from 'lodash'; import React, { useMemo } from 'react'; +import { useLocation } from 'react-router-dom'; import { useTrackPageview } from '../../../../../observability/public'; import { Projection } from '../../../../common/projections'; import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext'; import { IUrlParams } from '../../../context/UrlParamsContext/types'; -import { useLocation } from '../../../hooks/useLocation'; import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes'; import { useTransactionCharts } from '../../../hooks/useTransactionCharts'; import { useTransactionList } from '../../../hooks/useTransactionList'; diff --git a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx b/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx index 01b1628504b3b..9de70d50b25e1 100644 --- a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx @@ -11,7 +11,6 @@ import { createMemoryHistory } from 'history'; import React, { ReactNode } from 'react'; import { Router } from 'react-router-dom'; import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; -import { LocationProvider } from '../../../../context/LocationContext'; import { UrlParamsContext, useUiFilters, @@ -46,11 +45,9 @@ function mountDatePicker(params?: IUrlParams) { return mount( - - - - - + + + ); diff --git a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx index 7e5c789507e07..c3ecaa1b053b6 100644 --- a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx @@ -8,13 +8,12 @@ import { EuiSelect } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { History } from 'history'; import React from 'react'; -import { useHistory, useParams } from 'react-router-dom'; +import { useHistory, useLocation, useParams } from 'react-router-dom'; import { ENVIRONMENT_ALL, ENVIRONMENT_NOT_DEFINED, } from '../../../../common/environment_filter_values'; import { useEnvironments } from '../../../hooks/useEnvironments'; -import { useLocation } from '../../../hooks/useLocation'; import { useUrlParams } from '../../../hooks/useUrlParams'; import { fromQuery, toQuery } from '../Links/url_helpers'; diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx index efd1446f21b21..157e014bee424 100644 --- a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import { startsWith, uniqueId } from 'lodash'; import React, { useState } from 'react'; -import { useHistory, useParams } from 'react-router-dom'; +import { useHistory, useLocation, useParams } from 'react-router-dom'; import styled from 'styled-components'; import { esKuery, @@ -16,7 +16,6 @@ import { } from '../../../../../../../src/plugins/data/public'; import { useApmPluginContext } from '../../../hooks/useApmPluginContext'; import { useDynamicIndexPattern } from '../../../hooks/useDynamicIndexPattern'; -import { useLocation } from '../../../hooks/useLocation'; import { useUrlParams } from '../../../hooks/useUrlParams'; import { fromQuery, toQuery } from '../Links/url_helpers'; import { getBoolFilter } from './get_bool_filter'; diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverLink.tsx index d4b20782a5527..93b5672aa54f9 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverLink.tsx +++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverLink.tsx @@ -8,11 +8,11 @@ import { EuiLink } from '@elastic/eui'; import { Location } from 'history'; import { IBasePath } from 'kibana/public'; import React from 'react'; +import { useLocation } from 'react-router-dom'; import rison, { RisonValue } from 'rison-node'; import url from 'url'; import { APM_STATIC_INDEX_PATTERN_ID } from '../../../../../../../../src/plugins/apm_oss/public'; import { useApmPluginContext } from '../../../../hooks/useApmPluginContext'; -import { useLocation } from '../../../../hooks/useLocation'; import { getTimepickerRisonData } from '../rison_helpers'; interface Props { diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.tsx index 5e2d728716704..d8ec212515c6f 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.tsx +++ b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.tsx @@ -6,11 +6,11 @@ import { EuiLink } from '@elastic/eui'; import React from 'react'; -import url from 'url'; +import { useLocation } from 'react-router-dom'; import rison, { RisonValue } from 'rison-node'; -import { useLocation } from '../../../../hooks/useLocation'; -import { getTimepickerRisonData, TimepickerRisonData } from '../rison_helpers'; +import url from 'url'; import { useApmPluginContext } from '../../../../hooks/useApmPluginContext'; +import { getTimepickerRisonData, TimepickerRisonData } from '../rison_helpers'; interface MlRisonData { ml?: { diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.test.ts b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.test.ts index 28daae7fd830e..66f3903ba849b 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.test.ts +++ b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.test.ts @@ -12,7 +12,7 @@ jest.mock('../../../../hooks/useApmPluginContext', () => ({ }), })); -jest.mock('../../../../hooks/useLocation', () => ({ +jest.mock('react-router-dom', () => ({ useLocation: () => ({ search: '?rangeFrom=2020-07-29T17:27:29.000Z&rangeTo=2020-07-29T18:45:00.000Z&refreshInterval=10000&refreshPaused=true', diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.ts b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.ts index 459ee8f0282ff..3b60962d797ed 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.ts +++ b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.ts @@ -4,10 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import url from 'url'; import querystring from 'querystring'; +import { useLocation } from 'react-router-dom'; import rison from 'rison-node'; -import { useLocation } from '../../../../hooks/useLocation'; +import url from 'url'; import { useApmPluginContext } from '../../../../hooks/useApmPluginContext'; import { getTimepickerRisonData } from '../rison_helpers'; diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/APMLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/APMLink.tsx index cde2471cc4ce3..bd43f2455c545 100644 --- a/x-pack/plugins/apm/public/components/shared/Links/apm/APMLink.tsx +++ b/x-pack/plugins/apm/public/components/shared/Links/apm/APMLink.tsx @@ -8,9 +8,9 @@ import { EuiLink, EuiLinkAnchorProps } from '@elastic/eui'; import { IBasePath } from 'kibana/public'; import { pick } from 'lodash'; import React from 'react'; +import { useLocation } from 'react-router-dom'; import url from 'url'; import { useApmPluginContext } from '../../../../hooks/useApmPluginContext'; -import { useLocation } from '../../../../hooks/useLocation'; import { APMQueryParams, fromQuery, toQuery } from '../url_helpers'; interface Props extends EuiLinkAnchorProps { diff --git a/x-pack/plugins/apm/public/components/shared/MetadataTable/ErrorMetadata/__test__/ErrorMetadata.test.tsx b/x-pack/plugins/apm/public/components/shared/MetadataTable/ErrorMetadata/__test__/ErrorMetadata.test.tsx index de77115ce90ee..e95122f54aff1 100644 --- a/x-pack/plugins/apm/public/components/shared/MetadataTable/ErrorMetadata/__test__/ErrorMetadata.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/MetadataTable/ErrorMetadata/__test__/ErrorMetadata.test.tsx @@ -4,18 +4,27 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; -import { ErrorMetadata } from '..'; import { render } from '@testing-library/react'; +import React, { ReactNode } from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { ErrorMetadata } from '..'; import { APMError } from '../../../../../../typings/es_schemas/ui/apm_error'; +import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; import { expectTextsInDocument, expectTextsNotInDocument, } from '../../../../../utils/testHelpers'; -import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; + +function Wrapper({ children }: { children?: ReactNode }) { + return ( + + {children} + + ); +} const renderOptions = { - wrapper: MockApmPluginContextWrapper, + wrapper: Wrapper, }; function getError() { diff --git a/x-pack/plugins/apm/public/components/shared/MetadataTable/SpanMetadata/__test__/SpanMetadata.test.tsx b/x-pack/plugins/apm/public/components/shared/MetadataTable/SpanMetadata/__test__/SpanMetadata.test.tsx index f27a7ebb780e0..1f10d923e351e 100644 --- a/x-pack/plugins/apm/public/components/shared/MetadataTable/SpanMetadata/__test__/SpanMetadata.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/MetadataTable/SpanMetadata/__test__/SpanMetadata.test.tsx @@ -4,18 +4,27 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; import { render } from '@testing-library/react'; +import React, { ReactNode } from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { SpanMetadata } from '..'; import { Span } from '../../../../../../typings/es_schemas/ui/span'; +import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; import { expectTextsInDocument, expectTextsNotInDocument, } from '../../../../../utils/testHelpers'; -import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; + +function Wrapper({ children }: { children?: ReactNode }) { + return ( + + {children} + + ); +} const renderOptions = { - wrapper: MockApmPluginContextWrapper, + wrapper: Wrapper, }; describe('SpanMetadata', () => { diff --git a/x-pack/plugins/apm/public/components/shared/MetadataTable/TransactionMetadata/__test__/TransactionMetadata.test.tsx b/x-pack/plugins/apm/public/components/shared/MetadataTable/TransactionMetadata/__test__/TransactionMetadata.test.tsx index 0577dca852bcf..8359716fc6966 100644 --- a/x-pack/plugins/apm/public/components/shared/MetadataTable/TransactionMetadata/__test__/TransactionMetadata.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/MetadataTable/TransactionMetadata/__test__/TransactionMetadata.test.tsx @@ -4,18 +4,27 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; -import { TransactionMetadata } from '..'; import { render } from '@testing-library/react'; +import React, { ReactNode } from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { TransactionMetadata } from '..'; import { Transaction } from '../../../../../../typings/es_schemas/ui/transaction'; +import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; import { expectTextsInDocument, expectTextsNotInDocument, } from '../../../../../utils/testHelpers'; -import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; + +function Wrapper({ children }: { children?: ReactNode }) { + return ( + + {children} + + ); +} const renderOptions = { - wrapper: MockApmPluginContextWrapper, + wrapper: Wrapper, }; function getTransaction() { diff --git a/x-pack/plugins/apm/public/components/shared/MetadataTable/__test__/MetadataTable.test.tsx b/x-pack/plugins/apm/public/components/shared/MetadataTable/__test__/MetadataTable.test.tsx index 0b40c2a727fa3..8e53aa4aa1089 100644 --- a/x-pack/plugins/apm/public/components/shared/MetadataTable/__test__/MetadataTable.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/MetadataTable/__test__/MetadataTable.test.tsx @@ -4,15 +4,24 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; import { render } from '@testing-library/react'; +import React, { ReactNode } from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { MetadataTable } from '..'; +import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; import { expectTextsInDocument } from '../../../../utils/testHelpers'; import { SectionsWithRows } from '../helper'; -import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; + +function Wrapper({ children }: { children?: ReactNode }) { + return ( + + {children} + + ); +} const renderOptions = { - wrapper: MockApmPluginContextWrapper, + wrapper: Wrapper, }; describe('MetadataTable', () => { diff --git a/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx b/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx index a8990e70150d1..1d2ac4d18a2a7 100644 --- a/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx @@ -16,8 +16,7 @@ import { import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; import React, { useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; -import { useLocation } from '../../../hooks/useLocation'; +import { useHistory, useLocation } from 'react-router-dom'; import { useUrlParams } from '../../../hooks/useUrlParams'; import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink'; import { HeightRetainer } from '../HeightRetainer'; diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.test.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.test.tsx index 0f42d8f9beb46..62952d1fb501b 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.test.tsx @@ -5,6 +5,7 @@ */ import { act, fireEvent, render } from '@testing-library/react'; import React, { ReactNode } from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { CustomLink } from '../../../../../common/custom_link/custom_link_types'; import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; @@ -12,7 +13,11 @@ import { expectTextsInDocument } from '../../../../utils/testHelpers'; import { CustomLinkPopover } from './CustomLinkPopover'; function Wrapper({ children }: { children?: ReactNode }) { - return {children}; + return ( + + {children} + + ); } describe('CustomLinkPopover', () => { diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.test.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.test.tsx index a2a2a211a48b1..29e93a47629b3 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.test.tsx @@ -4,17 +4,22 @@ * you may not use this file except in compliance with the Elastic License. */ +import { act, fireEvent, render } from '@testing-library/react'; import React, { ReactNode } from 'react'; -import { render, act, fireEvent } from '@testing-library/react'; -import { ManageCustomLink } from './ManageCustomLink'; +import { MemoryRouter } from 'react-router-dom'; +import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; import { expectTextsInDocument, expectTextsNotInDocument, } from '../../../../utils/testHelpers'; -import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; +import { ManageCustomLink } from './ManageCustomLink'; function Wrapper({ children }: { children?: ReactNode }) { - return {children}; + return ( + + {children} + + ); } describe('ManageCustomLink', () => { diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.test.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.test.tsx index 055fcc0955c68..5abeae265dfa6 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.test.tsx @@ -6,6 +6,7 @@ import { act, fireEvent, render } from '@testing-library/react'; import React, { ReactNode } from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { CustomLink } from '.'; import { CustomLink as CustomLinkType } from '../../../../../common/custom_link/custom_link_types'; import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; @@ -17,7 +18,11 @@ import { } from '../../../../utils/testHelpers'; function Wrapper({ children }: { children?: ReactNode }) { - return {children}; + return ( + + {children} + + ); } describe('Custom links', () => { diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx index c7ce83053db5c..4a548b44cf361 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx +++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx @@ -7,6 +7,7 @@ import { EuiButtonEmpty } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useMemo, useState } from 'react'; +import { useLocation } from 'react-router-dom'; import { ActionMenu, ActionMenuDivider, @@ -21,7 +22,6 @@ import { Transaction } from '../../../../typings/es_schemas/ui/transaction'; import { useApmPluginContext } from '../../../hooks/useApmPluginContext'; import { useFetcher } from '../../../hooks/useFetcher'; import { useLicense } from '../../../hooks/useLicense'; -import { useLocation } from '../../../hooks/useLocation'; import { useUrlParams } from '../../../hooks/useUrlParams'; import { CustomLinkFlyout } from '../../app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout'; import { convertFiltersToQuery } from '../../app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/helper'; diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx index e45df2feff771..ec0b473c3ade8 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx @@ -6,6 +6,7 @@ import { act, fireEvent, render } from '@testing-library/react'; import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { License } from '../../../../../../licensing/common/license'; import { Transaction } from '../../../../../typings/es_schemas/ui/transaction'; import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext'; @@ -19,13 +20,19 @@ import { import { TransactionActionMenu } from '../TransactionActionMenu'; import * as Transactions from './mockData'; +function Wrapper({ children }: { children?: React.ReactNode }) { + return ( + + {children} + + ); +} + const renderTransaction = async (transaction: Record) => { const rendered = render( , { - wrapper: ({ children }: { children?: React.ReactNode }) => ( - {children} - ), + wrapper: Wrapper, } ); @@ -246,14 +253,11 @@ describe('TransactionActionMenu component', () => { function renderTransactionActionMenuWithLicense(license: License) { return render( - - - - + + , + { wrapper: Wrapper } ); } it('doesnt show custom links when license is not valid', () => { @@ -286,14 +290,11 @@ describe('TransactionActionMenu component', () => { }); const component = render( - - - - + + , + { wrapper: Wrapper } ); act(() => { fireEvent.click(component.getByText('Actions')); diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx index 6a5ab344d2ba0..abe81185635b5 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx @@ -7,6 +7,7 @@ import { fireEvent } from '@testing-library/react'; import { act } from '@testing-library/react-hooks'; import React, { ReactNode } from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext'; import { expectTextsInDocument, @@ -16,7 +17,11 @@ import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummm import { ErrorMarker } from './ErrorMarker'; function Wrapper({ children }: { children?: ReactNode }) { - return {children}; + return ( + + {children} + + ); } describe('ErrorMarker', () => { diff --git a/x-pack/plugins/apm/public/context/LocationContext.tsx b/x-pack/plugins/apm/public/context/LocationContext.tsx deleted file mode 100644 index 1e9c20494b42e..0000000000000 --- a/x-pack/plugins/apm/public/context/LocationContext.tsx +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { Location } from 'history'; -import React, { createContext } from 'react'; -import { withRouter } from 'react-router-dom'; - -const initialLocation = {} as Location; - -const LocationContext = createContext(initialLocation); -const LocationProvider = withRouter(({ location, children }) => { - return ; -}); - -export { LocationContext, LocationProvider }; diff --git a/x-pack/plugins/apm/public/hooks/useLocation.tsx b/x-pack/plugins/apm/public/hooks/useLocation.tsx deleted file mode 100644 index e2b4e3e479629..0000000000000 --- a/x-pack/plugins/apm/public/hooks/useLocation.tsx +++ /dev/null @@ -1,12 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { useContext } from 'react'; -import { LocationContext } from '../context/LocationContext'; - -export function useLocation() { - return useContext(LocationContext); -} diff --git a/x-pack/plugins/apm/public/utils/testHelpers.tsx b/x-pack/plugins/apm/public/utils/testHelpers.tsx index 037da01c74464..a69288f7bd4f9 100644 --- a/x-pack/plugins/apm/public/utils/testHelpers.tsx +++ b/x-pack/plugins/apm/public/utils/testHelpers.tsx @@ -16,7 +16,6 @@ import { render, waitForElement } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { APMConfig } from '../../server'; -import { LocationProvider } from '../context/LocationContext'; import { PromiseReturnType } from '../../typings/common'; import { EuiThemeProvider } from '../../../observability/public'; import { @@ -68,9 +67,7 @@ export async function getRenderedHref(Component: React.FC, location: Location) { const el = render( - - - + );