Kibana app migration: Centralize home dependencies (#48618)

Author: flash1293

src/legacy/core_plugins/kibana/public/home/components/add_data.js

@@ -21,7 +21,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import chrome from 'ui/chrome';
+import { getServices } from '../kibana_services';
 
 import {
   EuiButton,
@@ -38,10 +38,9 @@ import {
   EuiFlexGrid,
 } from '@elastic/eui';
 
-/* istanbul ignore next */
-const basePath = chrome.getBasePath();
 
 const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
+  const basePath = getServices().getBasePath();
   const renderCards = () => {
     const apmData = {
       title: intl.formatMessage({

src/legacy/core_plugins/kibana/public/home/components/add_data.test.js

@@ -20,15 +20,20 @@
 import React from 'react';
 import { AddData } from './add_data';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
-import chrome from 'ui/chrome';
+import { getServices } from '../kibana_services';
 
-jest.mock(
-  'ui/chrome',
-  () => ({
+jest.mock('../kibana_services', () =>{
+  const mock = {
     getBasePath: jest.fn(() => 'path'),
-  }),
-  { virtual: true }
-);
+  };
+  return {
+    getServices: () => mock,
+  };
+});
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
 
 test('render', () => {
   const component = shallowWithIntl(<AddData.WrappedComponent
@@ -37,7 +42,7 @@ test('render', () => {
     isNewKibanaInstance={false}
   />);
   expect(component).toMatchSnapshot(); // eslint-disable-line
-  expect(chrome.getBasePath).toHaveBeenCalledTimes(1);
+  expect(getServices().getBasePath).toHaveBeenCalledTimes(1);
 });
 
 test('mlEnabled', () => {
@@ -47,7 +52,7 @@ test('mlEnabled', () => {
     isNewKibanaInstance={false}
   />);
   expect(component).toMatchSnapshot(); // eslint-disable-line
-  expect(chrome.getBasePath).toHaveBeenCalledTimes(1);
+  expect(getServices().getBasePath).toHaveBeenCalledTimes(1);
 });
 
 test('apmUiEnabled', () => {
@@ -57,7 +62,7 @@ test('apmUiEnabled', () => {
     isNewKibanaInstance={false}
   />);
   expect(component).toMatchSnapshot(); // eslint-disable-line
-  expect(chrome.getBasePath).toHaveBeenCalledTimes(1);
+  expect(getServices().getBasePath).toHaveBeenCalledTimes(1);
 });
 
 test('isNewKibanaInstance', () => {
@@ -67,5 +72,5 @@ test('isNewKibanaInstance', () => {
     isNewKibanaInstance={true}
   />);
   expect(component).toMatchSnapshot(); // eslint-disable-line
-  expect(chrome.getBasePath).toHaveBeenCalledTimes(1);
+  expect(getServices().getBasePath).toHaveBeenCalledTimes(1);
 });

src/legacy/core_plugins/kibana/public/home/components/home.js

@@ -22,7 +22,6 @@ import PropTypes from 'prop-types';
 import { Synopsis } from './synopsis';
 import { AddData } from './add_data';
 import { FormattedMessage } from '@kbn/i18n/react';
-import chrome from 'ui/chrome';
 
 import {
   EuiButton,
@@ -40,14 +39,18 @@ import {
 
 import { Welcome } from './welcome';
 import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
+import { getServices } from '../kibana_services';
 
 const KEY_ENABLE_WELCOME = 'home:welcome:show';
 
 export class Home extends Component {
   constructor(props) {
     super(props);
 
-    const isWelcomeEnabled = !(chrome.getInjected('disableWelcomeScreen') || props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false');
+    const isWelcomeEnabled = !(
+      getServices().getInjected('disableWelcomeScreen') ||
+      props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false'
+    );
 
     this.state = {
       // If welcome is enabled, we wait for loading to complete

src/legacy/core_plugins/kibana/public/home/components/home.test.js

@@ -25,6 +25,13 @@ import { shallow } from 'enzyme';
 import { Home } from './home';
 import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 
+jest.mock('../kibana_services', () =>({
+  getServices: () => ({
+    getBasePath: () => 'path',
+    getInjected: () => ''
+  })
+}));
+
 describe('home', () => {
   let defaultProps;
 

src/legacy/core_plugins/kibana/public/home/components/home.test.mocks.ts

@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import { notificationServiceMock, overlayServiceMock } from '../../../../../../core/public/mocks';
+import {
+  notificationServiceMock,
+  overlayServiceMock,
+  httpServiceMock,
+  injectedMetadataServiceMock,
+} from '../../../../../../core/public/mocks';
 
 jest.doMock('ui/new_platform', () => {
   return {
@@ -29,22 +34,9 @@ jest.doMock('ui/new_platform', () => {
     npStart: {
       core: {
         overlays: overlayServiceMock.createStartContract(),
+        http: httpServiceMock.createStartContract({ basePath: 'path' }),
+        injectedMetadata: injectedMetadataServiceMock.createStartContract(),
       },
     },
   };
 });
-
-jest.doMock(
-  'ui/chrome',
-  () => ({
-    getBasePath: jest.fn(() => 'path'),
-    getInjected: jest.fn(() => ''),
-  }),
-  { virtual: true }
-);
-
-jest.doMock('ui/capabilities', () => ({
-  catalogue: {},
-  management: {},
-  navLinks: {},
-}));

src/legacy/core_plugins/kibana/public/home/components/home_app.js

@@ -26,23 +26,32 @@ import { Tutorial } from './tutorial/tutorial';
 import {
   HashRouter as Router,
   Switch,
-  Route
+  Route,
 } from 'react-router-dom';
 import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
-import { telemetryOptInProvider, shouldShowTelemetryOptIn } from '../kibana_services';
-import chrome from 'ui/chrome';
+import {
+  getServices
+} from '../kibana_services';
 
 export function HomeApp({ directories }) {
-  const isCloudEnabled = chrome.getInjected('isCloudEnabled', false);
-  const apmUiEnabled = chrome.getInjected('apmUiEnabled', true);
-  const mlEnabled = chrome.getInjected('mlEnabled', false);
-  const savedObjectsClient = chrome.getSavedObjectsClient();
+  const {
+    telemetryOptInProvider,
+    shouldShowTelemetryOptIn,
+    getInjected,
+    savedObjectsClient,
+    getBasePath,
+    addBasePath,
+  } = getServices();
+
+  const isCloudEnabled = getInjected('isCloudEnabled', false);
+  const apmUiEnabled = getInjected('apmUiEnabled', true);
+  const mlEnabled = getInjected('mlEnabled', false);
 
   const renderTutorialDirectory = (props) => {
     return (
       <TutorialDirectory
-        addBasePath={chrome.addBasePath}
+        addBasePath={addBasePath}
         openTab={props.match.params.tab}
         isCloudEnabled={isCloudEnabled}
       />
@@ -52,7 +61,7 @@ export function HomeApp({ directories }) {
   const renderTutorial = (props) => {
     return (
       <Tutorial
-        addBasePath={chrome.addBasePath}
+        addBasePath={addBasePath}
         isCloudEnabled={isCloudEnabled}
         getTutorial={getTutorial}
         replaceTemplateStrings={replaceTemplateStrings}
@@ -77,21 +86,21 @@ export function HomeApp({ directories }) {
           path="/home/feature_directory"
         >
           <FeatureDirectory
-            addBasePath={chrome.addBasePath}
+            addBasePath={addBasePath}
             directories={directories}
           />
         </Route>
         <Route
           path="/home"
         >
           <Home
-            addBasePath={chrome.addBasePath}
+            addBasePath={addBasePath}
             directories={directories}
             apmUiEnabled={apmUiEnabled}
             mlEnabled={mlEnabled}
             find={savedObjectsClient.find}
             localStorage={localStorage}
-            urlBasePath={chrome.getBasePath()}
+            urlBasePath={getBasePath()}
             shouldShowTelemetryOptIn={shouldShowTelemetryOptIn}
             setOptIn={telemetryOptInProvider.setOptIn}
             fetchTelemetry={telemetryOptInProvider.fetchExample}
@@ -111,6 +120,6 @@ HomeApp.propTypes = {
     icon: PropTypes.string.isRequired,
     path: PropTypes.string.isRequired,
     showOnHomePage: PropTypes.bool.isRequired,
-    category: PropTypes.string.isRequired
+    category: PropTypes.string.isRequired,
   })),
 };

src/legacy/core_plugins/kibana/public/home/components/sample_data_set_cards.js

@@ -31,7 +31,7 @@ import {
   UNINSTALLED_STATUS,
 } from './sample_data_set_card';
 
-import { toastNotifications } from 'ui/notify';
+import { getServices } from '../kibana_services';
 
 import {
   listSampleDataSets,
@@ -40,15 +40,14 @@ import {
 } from '../sample_data_client';
 
 import { i18n } from '@kbn/i18n';
-import chrome from 'ui/chrome';
-
-const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
 
 export class SampleDataSetCards extends React.Component {
 
   constructor(props) {
     super(props);
 
+    this.toastNotifications = getServices().toastNotifications;
+
     this.state = {
       sampleDataSets: [],
       processingStatus: {},
@@ -70,7 +69,7 @@ export class SampleDataSetCards extends React.Component {
     try {
       sampleDataSets = await listSampleDataSets();
     } catch (fetchError) {
-      toastNotifications.addDanger({
+      this.toastNotifications.addDanger({
         title: i18n.translate('kbn.home.sampleDataSet.unableToLoadListErrorMessage', {
           defaultMessage: 'Unable to load sample data sets list' }
         ),
@@ -109,7 +108,7 @@ export class SampleDataSetCards extends React.Component {
           processingStatus: { ...prevState.processingStatus, [id]: false }
         }));
       }
-      toastNotifications.addDanger({
+      this.toastNotifications.addDanger({
         title: i18n.translate('kbn.home.sampleDataSet.unableToInstallErrorMessage', {
           defaultMessage: 'Unable to install sample data set: {name}', values: { name: targetSampleDataSet.name } }
         ),
@@ -130,7 +129,7 @@ export class SampleDataSetCards extends React.Component {
       }));
     }
 
-    toastNotifications.addSuccess({
+    this.toastNotifications.addSuccess({
       title: i18n.translate('kbn.home.sampleDataSet.installedLabel', {
         defaultMessage: '{name} installed', values: { name: targetSampleDataSet.name } }
       ),
@@ -155,7 +154,7 @@ export class SampleDataSetCards extends React.Component {
           processingStatus: { ...prevState.processingStatus, [id]: false }
         }));
       }
-      toastNotifications.addDanger({
+      this.toastNotifications.addDanger({
         title: i18n.translate('kbn.home.sampleDataSet.unableToUninstallErrorMessage', {
           defaultMessage: 'Unable to uninstall sample data set: {name}', values: { name: targetSampleDataSet.name } }
         ),
@@ -176,7 +175,7 @@ export class SampleDataSetCards extends React.Component {
       }));
     }
 
-    toastNotifications.addSuccess({
+    this.toastNotifications.addSuccess({
       title: i18n.translate('kbn.home.sampleDataSet.uninstalledLabel', {
         defaultMessage: '{name} uninstalled', values: { name: targetSampleDataSet.name } }
       ),
@@ -185,7 +184,9 @@ export class SampleDataSetCards extends React.Component {
   }
 
   lightOrDarkImage = (sampleDataSet) => {
-    return IS_DARK_THEME && sampleDataSet.darkPreviewImagePath ? sampleDataSet.darkPreviewImagePath : sampleDataSet.previewImagePath;
+    return getServices().uiSettings.get('theme:darkMode') && sampleDataSet.darkPreviewImagePath
+      ? sampleDataSet.darkPreviewImagePath
+      : sampleDataSet.previewImagePath;
   }
 
   render() {

src/legacy/core_plugins/kibana/public/home/components/sample_data_view_data_button.js

@@ -27,9 +27,10 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import chrome from 'ui/chrome';
+import { getServices } from '../kibana_services';
 
 export class SampleDataViewDataButton extends React.Component {
+  addBasePath = getServices().addBasePath;
 
   state = {
     isPopoverOpen: false
@@ -56,7 +57,7 @@ export class SampleDataViewDataButton extends React.Component {
         datasetName: this.props.name,
       },
     });
-    const dashboardPath = chrome.addBasePath(`/app/kibana#/dashboard/${this.props.overviewDashboard}`);
+    const dashboardPath = this.addBasePath(`/app/kibana#/dashboard/${this.props.overviewDashboard}`);
 
     if (this.props.appLinks.length === 0) {
       return (
@@ -79,7 +80,7 @@ export class SampleDataViewDataButton extends React.Component {
             size="m"
           />
         ),
-        href: chrome.addBasePath(path)
+        href: this.addBasePath(path)
       };
     });
     const panels = [

src/legacy/core_plugins/kibana/public/home/components/sample_data_view_data_button.test.js

@@ -17,19 +17,18 @@
  * under the License.
  */
 
-jest.mock('ui/chrome', () => {
-  return {
-    addBasePath: (path) => {
-      return `root${path}`;
-    },
-  };
-});
 
 import React from 'react';
 import { shallow } from 'enzyme';
 
 import { SampleDataViewDataButton } from './sample_data_view_data_button';
 
+jest.mock('../kibana_services', () =>({
+  getServices: () =>({
+    addBasePath: path => `root${path}`
+  })
+}));
+
 test('should render simple button when appLinks is empty', () => {
   const component = shallow(<SampleDataViewDataButton
     id="ecommerce"