[APM] Remove dependency on ui/chrome in favor of newer core APIs (#41868

) * [APM] Remove dependency on ui/chrome in favor of newer core APIs * [APM] fix broken tests by mocking useCore hook
elastic · Jul 25, 2019 · b74f931 · b74f931
1 parent d4d8e15
commit b74f931
Show file tree

Hide file tree

Showing 31 changed files with 254 additions and 122 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/GlobalHelpExtension/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/GlobalHelpExtension/index.tsx
@@ -8,15 +8,17 @@ import { EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import chrome from 'ui/chrome';
 import url from 'url';
 import { px, units } from '../../../style/variables';
+import { useCore } from '../../../hooks/useCore';
 
 const Container = styled.div`
   margin: ${px(units.minus)} 0;
 `;
 
 export const GlobalHelpExtension: React.SFC = () => {
+  const core = useCore();
+
   return (
     <Fragment>
       <Container>
@@ -33,7 +35,7 @@ export const GlobalHelpExtension: React.SFC = () => {
       <Container>
         <EuiLink
           href={url.format({
-            pathname: chrome.addBasePath('/app/kibana'),
+            pathname: core.http.basePath.prepend('/app/kibana'),
             hash: '/management/elasticsearch/upgrade_assistant'
           })}
         >

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.tsx b/x-pack/legacy/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.tsx
@@ -7,14 +7,16 @@
 import { Location } from 'history';
 import { last } from 'lodash';
 import React from 'react';
-import chrome from 'ui/chrome';
+import { InternalCoreStart } from 'src/core/public';
+import { useCore } from '../../../hooks/useCore';
 import { getAPMHref } from '../../shared/Links/APMLink';
 import { Breadcrumb, ProvideBreadcrumbs } from './ProvideBreadcrumbs';
 import { routes } from './route_config';
 
 interface Props {
   location: Location;
   breadcrumbs: Breadcrumb[];
+  core: InternalCoreStart;
 }
 
 class UpdateBreadcrumbsComponent extends React.Component<Props> {
@@ -26,7 +28,7 @@ class UpdateBreadcrumbsComponent extends React.Component<Props> {
 
     const current = last(breadcrumbs) || { text: '' };
     document.title = current.text;
-    chrome.breadcrumbs.set(breadcrumbs);
+    this.props.core.chrome.setBreadcrumbs(breadcrumbs);
   }
 
   public componentDidMount() {
@@ -43,13 +45,15 @@ class UpdateBreadcrumbsComponent extends React.Component<Props> {
 }
 
 export function UpdateBreadcrumbs() {
+  const core = useCore();
   return (
     <ProvideBreadcrumbs
       routes={routes}
       render={({ breadcrumbs, location }) => (
         <UpdateBreadcrumbsComponent
           breadcrumbs={breadcrumbs}
           location={location}
+          core={core}
         />
       )}
     />

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/__test__/UpdateBreadcrumbs.test.js b/x-pack/legacy/plugins/apm/public/components/app/Main/__test__/UpdateBreadcrumbs.test.js
@@ -7,44 +7,27 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import chrome from 'ui/chrome';
 import { UpdateBreadcrumbs } from '../UpdateBreadcrumbs';
+import * as hooks from '../../../../hooks/useCore';
 
 jest.mock('ui/kfetch');
 
-jest.mock(
-  'ui/chrome',
-  () => ({
-    breadcrumbs: {
-      set: jest.fn()
-    },
-    getBasePath: () => `/some/base/path`,
-    getUiSettingsClient: () => {
-      return {
-        get: key => {
-          switch (key) {
-            case 'timepicker:timeDefaults':
-              return { from: 'now-15m', to: 'now', mode: 'quick' };
-            case 'timepicker:refreshIntervalDefaults':
-              return { pause: false, value: 0 };
-            default:
-              throw new Error(`Unexpected config key: ${key}`);
-          }
-        }
-      };
-    }
-  }),
-  { virtual: true }
-);
+const coreMock = {
+  chrome: {
+    setBreadcrumbs: jest.fn()
+  }
+};
+
+jest.spyOn(hooks, 'useCore').mockReturnValue(coreMock);
 
 function expectBreadcrumbToMatchSnapshot(route) {
   mount(
     <MemoryRouter initialEntries={[`${route}?kuery=myKuery`]}>
       <UpdateBreadcrumbs />
     </MemoryRouter>
   );
-  expect(chrome.breadcrumbs.set).toHaveBeenCalledTimes(1);
-  expect(chrome.breadcrumbs.set.mock.calls[0][0]).toMatchSnapshot();
+  expect(coreMock.chrome.setBreadcrumbs).toHaveBeenCalledTimes(1);
+  expect(coreMock.chrome.setBreadcrumbs.mock.calls[0][0]).toMatchSnapshot();
 }
 
 describe('Breadcrumbs', () => {
@@ -55,7 +38,7 @@ describe('Breadcrumbs', () => {
     global.document = {
       title: 'Kibana'
     };
-    chrome.breadcrumbs.set.mockReset();
+    coreMock.chrome.setBreadcrumbs.mockReset();
   });
 
   afterEach(() => {

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/useUpdateBadgeEffect.ts b/x-pack/legacy/plugins/apm/public/components/app/Main/useUpdateBadgeEffect.ts
@@ -7,12 +7,13 @@
 import { i18n } from '@kbn/i18n';
 import { useEffect } from 'react';
 import { capabilities } from 'ui/capabilities';
-import chrome from 'ui/chrome';
+import { useCore } from '../../../hooks/useCore';
 
 export const useUpdateBadgeEffect = () => {
+  const { chrome } = useCore();
   useEffect(() => {
     const uiCapabilities = capabilities.get();
-    chrome.badge.set(
+    chrome.setBadge(
       !uiCapabilities.apm.save
         ? {
             text: i18n.translate('xpack.apm.header.badge.readOnly.text', {

diff --git a/...cy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx b/...cy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
@@ -30,20 +30,20 @@ import { memoize, padLeft, range } from 'lodash';
 import moment from 'moment-timezone';
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import chrome from 'ui/chrome';
 import { toastNotifications } from 'ui/notify';
+import { InternalCoreStart } from 'src/core/public';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { KibanaLink } from '../../../shared/Links/KibanaLink';
 import { createErrorGroupWatch, Schedule } from './createErrorGroupWatch';
 import { ElasticDocsLink } from '../../../shared/Links/ElasticDocsLink';
+import { CoreContext } from '../../../../context/CoreContext';
 
 type ScheduleKey = keyof Schedule;
 
-const getUserTimezone = memoize(() => {
-  const uiSettings = chrome.getUiSettingsClient();
-  return uiSettings.get('dateFormat:tz') === 'Browser'
+const getUserTimezone = memoize((core: InternalCoreStart): string => {
+  return core.uiSettings.get('dateFormat:tz') === 'Browser'
     ? moment.tz.guess()
-    : uiSettings.get('dateFormat:tz');
+    : core.uiSettings.get('dateFormat:tz');
 });
 
 const SmallInput = styled.div`
@@ -83,6 +83,7 @@ export class WatcherFlyout extends Component<
   WatcherFlyoutProps,
   WatcherFlyoutState
 > {
+  static contextType = CoreContext;
   public state: WatcherFlyoutState = {
     schedule: 'daily',
     threshold: 10,
@@ -155,6 +156,7 @@ export class WatcherFlyout extends Component<
   };
 
   public createWatch = () => {
+    const core: InternalCoreStart = this.context;
     const { serviceName } = this.props.urlParams;
 
     if (!serviceName) {
@@ -190,13 +192,18 @@ export class WatcherFlyout extends Component<
             unit: 'h'
           };
 
+    const apmIndexPatternTitle = core.injectedMetadata.getInjectedVar(
+      'apmIndexPatternTitle'
+    ) as string;
+
     return createErrorGroupWatch({
       emails,
       schedule,
       serviceName,
       slackUrl,
       threshold: this.state.threshold,
-      timeRange
+      timeRange,
+      apmIndexPatternTitle
     })
       .then((id: string) => {
         this.props.onClose();
@@ -271,7 +278,8 @@ export class WatcherFlyout extends Component<
       return null;
     }
 
-    const userTimezoneSetting = getUserTimezone();
+    const core: InternalCoreStart = this.context;
+    const userTimezoneSetting = getUserTimezone(core);
     const dailyTime = this.state.daily;
     const inputTime = `${dailyTime}Z`; // Add tz to make into UTC
     const inputFormat = 'HH:mmZ'; // Parse as 24 hour w. tz

diff --git a/.../components/app/ServiceDetails/ServiceIntegrations/__test__/createErrorGroupWatch.test.ts b/.../components/app/ServiceDetails/ServiceIntegrations/__test__/createErrorGroupWatch.test.ts
@@ -6,7 +6,6 @@
 
 import { isArray, isObject, isString } from 'lodash';
 import mustache from 'mustache';
-import chrome from 'ui/chrome';
 import uuid from 'uuid';
 import { StringMap } from '../../../../../../typings/common';
 // @ts-ignore
@@ -23,7 +22,6 @@ describe('createErrorGroupWatch', () => {
   let createWatchResponse: string;
   let tmpl: any;
   beforeEach(async () => {
-    chrome.getInjected = jest.fn().mockReturnValue('myIndexPattern');
     jest.spyOn(uuid, 'v4').mockReturnValue(new Buffer('mocked-uuid'));
     jest.spyOn(rest, 'createWatch').mockReturnValue(undefined);
 
@@ -37,7 +35,8 @@ describe('createErrorGroupWatch', () => {
       serviceName: 'opbeans-node',
       slackUrl: 'https://hooks.slack.com/services/slackid1/slackid2/slackid3',
       threshold: 10,
-      timeRange: { value: 24, unit: 'h' }
+      timeRange: { value: 24, unit: 'h' },
+      apmIndexPatternTitle: 'myIndexPattern'
     });
 
     const watchBody = rest.createWatch.mock.calls[0][1];

diff --git a/...ins/apm/public/components/app/ServiceDetails/ServiceIntegrations/createErrorGroupWatch.ts b/...ins/apm/public/components/app/ServiceDetails/ServiceIntegrations/createErrorGroupWatch.ts
@@ -6,7 +6,6 @@
 
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
-import chrome from 'ui/chrome';
 import url from 'url';
 import uuid from 'uuid';
 import {
@@ -46,6 +45,7 @@ interface Arguments {
     value: number;
     unit: string;
   };
+  apmIndexPatternTitle: string;
 }
 
 interface Actions {
@@ -60,10 +60,10 @@ export async function createErrorGroupWatch({
   serviceName,
   slackUrl,
   threshold,
-  timeRange
+  timeRange,
+  apmIndexPatternTitle
 }: Arguments) {
   const id = `apm-${uuid.v4()}`;
-  const apmIndexPatternTitle = chrome.getInjected('apmIndexPatternTitle');
 
   const slackUrlPath = getSlackPathUrl(slackUrl);
   const emailTemplate = i18n.translate(

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
@@ -13,11 +13,12 @@ import {
 import { i18n } from '@kbn/i18n';
 import { memoize } from 'lodash';
 import React, { Fragment } from 'react';
-import chrome from 'ui/chrome';
+import { InternalCoreStart } from 'src/core/public';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { LicenseContext } from '../../../../context/LicenseContext';
 import { MachineLearningFlyout } from './MachineLearningFlyout';
 import { WatcherFlyout } from './WatcherFlyout';
+import { CoreContext } from '../../../../context/CoreContext';
 
 interface Props {
   transactionTypes: string[];
@@ -30,6 +31,7 @@ interface State {
 type FlyoutName = null | 'ML' | 'Watcher';
 
 export class ServiceIntegrations extends React.Component<Props, State> {
+  static contextType = CoreContext;
   public state: State = { isPopoverOpen: false, activeFlyout: null };
 
   public getPanelItems = memoize((mlAvailable: boolean) => {
@@ -65,6 +67,8 @@ export class ServiceIntegrations extends React.Component<Props, State> {
   };
 
   public getWatcherPanelItems = () => {
+    const core: InternalCoreStart = this.context;
+
     return [
       {
         name: i18n.translate(
@@ -87,7 +91,7 @@ export class ServiceIntegrations extends React.Component<Props, State> {
           }
         ),
         icon: 'watchesApp',
-        href: chrome.addBasePath(
+        href: core.http.basePath.prepend(
           '/app/kibana#/management/elasticsearch/watcher'
         ),
         target: '_blank',

diff --git a/...egacy/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx b/...egacy/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
@@ -10,7 +10,9 @@ import 'react-testing-library/cleanup-after-each';
 import { toastNotifications } from 'ui/notify';
 import * as apmRestServices from '../../../../services/rest/apm/services';
 import { ServiceOverview } from '..';
-import * as hooks from '../../../../hooks/useUrlParams';
+import * as urlParamsHooks from '../../../../hooks/useUrlParams';
+import * as coreHooks from '../../../../hooks/useCore';
+import { InternalCoreStart } from 'src/core/public';
 
 jest.mock('ui/kfetch');
 
@@ -20,13 +22,22 @@ function renderServiceOverview() {
 
 describe('Service Overview -> View', () => {
   beforeEach(() => {
+    const coreMock = ({
+      http: {
+        basePath: {
+          prepend: (path: string) => `/basepath${path}`
+        }
+      }
+    } as unknown) as InternalCoreStart;
+
     // mock urlParams
-    spyOn(hooks, 'useUrlParams').and.returnValue({
+    spyOn(urlParamsHooks, 'useUrlParams').and.returnValue({
       urlParams: {
         start: 'myStart',
         end: 'myEnd'
       }
     });
+    spyOn(coreHooks, 'useCore').and.returnValue(coreMock);
   });
 
   afterEach(() => {

diff --git a/...ublic/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/...ublic/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap