[Stack monitoring] Setup mode cleaning post migration (#115556)

* Update tests for setup mode

* Remove old setup mode renderer and replace it with the react one

* Remove unnecessary await

* Update tests for setup mode renderer

x-pack/plugins/monitoring/public/application/pages/apm/instances.tsx

@@ -15,7 +15,7 @@ import { useTable } from '../../hooks/use_table';
 import { ApmTemplate } from './apm_template';
 // @ts-ignore
 import { ApmServerInstances } from '../../../components/apm/instances';
-import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 import { APM_SYSTEM_ID } from '../../../../common/constants';

x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx

@@ -15,7 +15,7 @@ import { useTable } from '../../hooks/use_table';
 import { BeatsTemplate } from './beats_template';
 // @ts-ignore
 import { Listing } from '../../../components/beats/listing';
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 import { BEATS_SYSTEM_ID } from '../../../../common/constants';

x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx

@@ -14,7 +14,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
 import { TabMenuItem } from '../page_template';
 import { Overview } from '../../../components/cluster/overview';
 import { ExternalConfigContext } from '../../contexts/external_config_context';
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 import { fetchClusters } from '../../../lib/fetch_clusters';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_page.tsx

@@ -13,7 +13,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
 // @ts-ignore
 import { Ccr } from '../../../components/elasticsearch/ccr';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx

@@ -15,7 +15,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
 // @ts-ignore
 import { CcrShardReact } from '../../../components/elasticsearch/ccr_shard';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx

@@ -11,7 +11,7 @@ import { useParams } from 'react-router-dom';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useCharts } from '../../hooks/use_charts';
 import { ItemTemplate } from './item_template';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx

@@ -13,7 +13,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
 // @ts-ignore
 import { IndexReact } from '../../../components/elasticsearch/index/index_react';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useCharts } from '../../hooks/use_charts';
 import { ItemTemplate } from './item_template';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx

@@ -12,7 +12,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ElasticsearchIndices } from '../../../components/elasticsearch';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import { useLocalStorage } from '../../hooks/use_local_storage';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ml_jobs_page.tsx

@@ -12,7 +12,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ElasticsearchMLJobs } from '../../../components/elasticsearch';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import type { MLJobs } from '../../../types';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx

@@ -13,7 +13,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { NodeReact } from '../../../components/elasticsearch';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useLocalStorage } from '../../hooks/use_local_storage';
 import { useCharts } from '../../hooks/use_charts';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx

@@ -13,7 +13,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ExternalConfigContext } from '../../contexts/external_config_context';
 import { ElasticsearchNodes } from '../../../components/elasticsearch';
 import { ComponentProps } from '../../route_init';
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';

x-pack/plugins/monitoring/public/application/pages/kibana/instances.tsx

@@ -16,7 +16,7 @@ import { KibanaTemplate } from './kibana_template';
 // @ts-ignore
 import { KibanaInstances } from '../../../components/kibana/instances';
 // @ts-ignore
-import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 import { AlertsByName } from '../../../alerts/types';

x-pack/plugins/monitoring/public/application/pages/logstash/nodes.tsx

@@ -13,7 +13,7 @@ import { ComponentProps } from '../../route_init';
 // @ts-ignore
 import { Listing } from '../../../components/logstash/listing';
 import { LogstashTemplate } from './logstash_template';
-import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import { LOGSTASH_SYSTEM_ID, RULE_LOGSTASH_VERSION_MISMATCH } from '../../../../common/constants';

x-pack/plugins/monitoring/public/application/route_init.tsx

@@ -9,7 +9,7 @@ import { Route, Redirect, useLocation } from 'react-router-dom';
 import { useClusters } from './hooks/use_clusters';
 import { GlobalStateContext } from './contexts/global_state_context';
 import { getClusterFromClusters } from '../lib/get_cluster_from_clusters';
-import { isInSetupMode } from './setup_mode';
+import { isInSetupMode } from '../lib/setup_mode';
 import { LoadingPage } from './pages/loading_page';
 
 export interface ComponentProps {

x-pack/plugins/monitoring/public/application/setup_mode/index.ts

@@ -1,8 +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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-export * from '../../lib/setup_mode';

x-pack/plugins/monitoring/public/application/setup_mode/setup_mode_renderer.js

@@ -1,225 +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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { Fragment } from 'react';
-import {
-  getSetupModeState,
-  initSetupModeState,
-  updateSetupModeData,
-  disableElasticsearchInternalCollection,
-  toggleSetupMode,
-  setSetupModeMenuItem,
-} from '../../lib/setup_mode';
-import { Flyout } from '../../components/metricbeat_migration/flyout';
-import {
-  EuiBottomBar,
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTextColor,
-  EuiIcon,
-  EuiSpacer,
-} from '@elastic/eui';
-import { findNewUuid } from '../../components/renderers/lib/find_new_uuid';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { GlobalStateContext } from '../../application/contexts/global_state_context';
-import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
-import { useRequestErrorHandler } from '../hooks/use_request_error_handler';
-
-class WrappedSetupModeRenderer extends React.Component {
-  globalState;
-  state = {
-    renderState: false,
-    isFlyoutOpen: false,
-    instance: null,
-    newProduct: null,
-    isSettingUpNew: false,
-  };
-
-  UNSAFE_componentWillMount() {
-    this.globalState = this.context;
-    const { kibana, onHttpError } = this.props;
-    initSetupModeState(this.globalState, kibana.services.http, onHttpError, (_oldData) => {
-      const newState = { renderState: true };
-
-      const { productName } = this.props;
-      if (!productName) {
-        this.setState(newState);
-        return;
-      }
-
-      const setupModeState = getSetupModeState();
-      if (!setupModeState.enabled || !setupModeState.data) {
-        this.setState(newState);
-        return;
-      }
-
-      const data = setupModeState.data[productName];
-      const oldData = _oldData ? _oldData[productName] : null;
-      if (data && oldData) {
-        const newUuid = findNewUuid(Object.keys(oldData.byUuid), Object.keys(data.byUuid));
-        if (newUuid) {
-          newState.newProduct = data.byUuid[newUuid];
-        }
-      }
-
-      this.setState(newState);
-    });
-    setSetupModeMenuItem();
-  }
-
-  reset() {
-    this.setState({
-      renderState: false,
-      isFlyoutOpen: false,
-      instance: null,
-      newProduct: null,
-      isSettingUpNew: false,
-    });
-  }
-
-  getFlyout(data, meta) {
-    const { productName } = this.props;
-    const { isFlyoutOpen, instance, isSettingUpNew, newProduct } = this.state;
-    if (!data || !isFlyoutOpen) {
-      return null;
-    }
-
-    let product = null;
-    if (newProduct) {
-      product = newProduct;
-    }
-    // For new instance discovery flow, we pass in empty instance object
-    else if (instance && Object.keys(instance).length) {
-      product = data.byUuid[instance.uuid];
-    }
-
-    if (!product) {
-      const uuids = Object.values(data.byUuid);
-      if (uuids.length && !isSettingUpNew) {
-        product = uuids[0];
-      } else {
-        product = {
-          isNetNewUser: true,
-        };
-      }
-    }
-
-    return (
-      <Flyout
-        onClose={() => this.reset()}
-        productName={productName}
-        product={product}
-        meta={meta}
-        instance={instance}
-        updateProduct={updateSetupModeData}
-        isSettingUpNew={isSettingUpNew}
-      />
-    );
-  }
-
-  getBottomBar(setupModeState) {
-    if (!setupModeState.enabled || setupModeState.hideBottomBar) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <EuiSpacer size="xxl" />
-        <EuiBottomBar>
-          <EuiFlexGroup
-            justifyContent="spaceBetween"
-            alignItems="center"
-            data-test-subj="monitoringSetupModeBottomBar"
-          >
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <EuiTextColor color="ghost">
-                    <FormattedMessage
-                      id="xpack.monitoring.setupMode.description"
-                      defaultMessage="You are in setup mode. The ({flagIcon}) icon indicates configuration options."
-                      values={{
-                        flagIcon: <EuiIcon type="flag" />,
-                      }}
-                    />
-                  </EuiTextColor>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    color="danger"
-                    fill
-                    iconType="flag"
-                    iconSide="right"
-                    size="s"
-                    onClick={() => toggleSetupMode(false)}
-                  >
-                    {i18n.translate('xpack.monitoring.setupMode.exit', {
-                      defaultMessage: `Exit setup mode`,
-                    })}
-                  </EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiBottomBar>
-      </Fragment>
-    );
-  }
-
-  async shortcutToFinishMigration() {
-    await disableElasticsearchInternalCollection();
-    await updateSetupModeData();
-  }
-
-  render() {
-    const { render, productName } = this.props;
-    const setupModeState = getSetupModeState();
-
-    let data = { byUuid: {} };
-    if (setupModeState.data) {
-      if (productName && setupModeState.data[productName]) {
-        data = setupModeState.data[productName];
-      } else if (setupModeState.data) {
-        data = setupModeState.data;
-      }
-    }
-
-    const meta = setupModeState.data ? setupModeState.data._meta : null;
-
-    return render({
-      setupMode: {
-        data,
-        meta,
-        enabled: setupModeState.enabled,
-        productName,
-        updateSetupModeData,
-        shortcutToFinishMigration: () => this.shortcutToFinishMigration(),
-        openFlyout: (instance, isSettingUpNew) =>
-          this.setState({ isFlyoutOpen: true, instance, isSettingUpNew }),
-        closeFlyout: () => this.setState({ isFlyoutOpen: false }),
-      },
-      flyoutComponent: this.getFlyout(data, meta),
-      bottomBarComponent: this.getBottomBar(setupModeState),
-    });
-  }
-}
-
-function withErrorHandler(Component) {
-  return function WrappedComponent(props) {
-    const handleRequestError = useRequestErrorHandler();
-    return <Component {...props} onHttpError={handleRequestError} />;
-  };
-}
-
-WrappedSetupModeRenderer.contextType = GlobalStateContext;
-export const SetupModeRenderer = withKibana(withErrorHandler(WrappedSetupModeRenderer));

x-pack/plugins/monitoring/public/components/renderers/setup_mode.js

@@ -27,8 +27,12 @@ import {
 import { findNewUuid } from './lib/find_new_uuid';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { GlobalStateContext } from '../../application/contexts/global_state_context';
+import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { useRequestErrorHandler } from '../../application/hooks/use_request_error_handler';
 
-export class SetupModeRenderer extends React.Component {
+export class WrappedSetupModeRenderer extends React.Component {
+  globalState;
   state = {
     renderState: false,
     isFlyoutOpen: false,
@@ -38,9 +42,11 @@ export class SetupModeRenderer extends React.Component {
   };
 
   UNSAFE_componentWillMount() {
-    const { scope, injector } = this.props;
-    initSetupModeState(scope, injector, (_oldData) => {
+    this.globalState = this.context;
+    const { kibana, onHttpError } = this.props;
+    initSetupModeState(this.globalState, kibana.services.http, onHttpError, (_oldData) => {
       const newState = { renderState: true };
+
       const { productName } = this.props;
       if (!productName) {
         this.setState(newState);
@@ -207,3 +213,13 @@ export class SetupModeRenderer extends React.Component {
     });
   }
 }
+
+function withErrorHandler(Component) {
+  return function WrappedComponent(props) {
+    const handleRequestError = useRequestErrorHandler();
+    return <Component {...props} onHttpError={handleRequestError} />;
+  };
+}
+
+WrappedSetupModeRenderer.contextType = GlobalStateContext;
+export const SetupModeRenderer = withKibana(withErrorHandler(WrappedSetupModeRenderer));

x-pack/plugins/monitoring/public/components/renderers/setup_mode.test.js

@@ -9,6 +9,14 @@ import React, { Fragment } from 'react';
 import { shallow } from 'enzyme';
 import { ELASTICSEARCH_SYSTEM_ID } from '../../../common/constants';
 
+const kibanaMock = {
+  services: {
+    http: jest.fn(),
+  },
+};
+
+const onHttpErrorMock = jest.fn();
+
 describe('SetupModeRenderer', () => {
   beforeEach(() => jest.resetModules());
 
@@ -21,16 +29,14 @@ describe('SetupModeRenderer', () => {
       updateSetupModeData: () => {},
       setSetupModeMenuItem: () => {},
     }));
-    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+    const SetupModeRenderer = require('./setup_mode').WrappedSetupModeRenderer;
 
     const ChildComponent = () => <h1>Hi</h1>;
-    const scope = {};
-    const injector = {};
     const component = shallow(
       <SetupModeRenderer
-        scope={scope}
-        injector={injector}
         productName={ELASTICSEARCH_SYSTEM_ID}
+        kibana={kibanaMock}
+        onHttpError={onHttpErrorMock}
         render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
           <Fragment>
             {flyoutComponent}
@@ -57,16 +63,14 @@ describe('SetupModeRenderer', () => {
       updateSetupModeData: () => {},
       setSetupModeMenuItem: () => {},
     }));
-    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+    const SetupModeRenderer = require('./setup_mode').WrappedSetupModeRenderer;
 
     const ChildComponent = () => <h1>Hi</h1>;
-    const scope = {};
-    const injector = {};
     const component = shallow(
       <SetupModeRenderer
-        scope={scope}
-        injector={injector}
         productName={ELASTICSEARCH_SYSTEM_ID}
+        kibana={kibanaMock}
+        onHttpError={onHttpErrorMock}
         render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
           <Fragment>
             {flyoutComponent}
@@ -95,16 +99,14 @@ describe('SetupModeRenderer', () => {
       updateSetupModeData: () => {},
       setSetupModeMenuItem: () => {},
     }));
-    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+    const SetupModeRenderer = require('./setup_mode').WrappedSetupModeRenderer;
 
     const ChildComponent = () => <h1>Hi</h1>;
-    const scope = {};
-    const injector = {};
     const component = shallow(
       <SetupModeRenderer
-        scope={scope}
-        injector={injector}
         productName={ELASTICSEARCH_SYSTEM_ID}
+        kibana={kibanaMock}
+        onHttpError={onHttpErrorMock}
         render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
           <Fragment>
             {flyoutComponent}
@@ -135,16 +137,14 @@ describe('SetupModeRenderer', () => {
       updateSetupModeData: () => {},
       setSetupModeMenuItem: () => {},
     }));
-    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+    const SetupModeRenderer = require('./setup_mode').WrappedSetupModeRenderer;
 
     const ChildComponent = () => <h1>Hi</h1>;
-    const scope = {};
-    const injector = {};
     const component = shallow(
       <SetupModeRenderer
-        scope={scope}
-        injector={injector}
         productName={ELASTICSEARCH_SYSTEM_ID}
+        kibana={kibanaMock}
+        onHttpError={onHttpErrorMock}
         render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
           <Fragment>
             {flyoutComponent}
@@ -176,7 +176,7 @@ describe('SetupModeRenderer', () => {
           _meta: {},
         },
       }),
-      initSetupModeState: (_scope, _injectir, cb) => {
+      initSetupModeState: (_globalState, _httpService, _onError, cb) => {
         setTimeout(() => {
           cb({
             elasticsearch: {
@@ -190,16 +190,14 @@ describe('SetupModeRenderer', () => {
       updateSetupModeData: () => {},
       setSetupModeMenuItem: () => {},
     }));
-    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+    const SetupModeRenderer = require('./setup_mode').WrappedSetupModeRenderer;
 
     const ChildComponent = () => <h1>Hi</h1>;
-    const scope = {};
-    const injector = {};
     const component = shallow(
       <SetupModeRenderer
-        scope={scope}
-        injector={injector}
         productName={ELASTICSEARCH_SYSTEM_ID}
+        kibana={kibanaMock}
+        onHttpError={onHttpErrorMock}
         render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
           <Fragment>
             {flyoutComponent}
@@ -235,7 +233,7 @@ describe('SetupModeRenderer', () => {
           _meta: {},
         },
       }),
-      initSetupModeState: (_scope, _injectir, cb) => {
+      initSetupModeState: (_globalState, _httpService, _onError, cb) => {
         setTimeout(() => {
           cb({
             elasticsearch: {
@@ -249,16 +247,14 @@ describe('SetupModeRenderer', () => {
       updateSetupModeData: () => {},
       setSetupModeMenuItem,
     }));
-    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+    const SetupModeRenderer = require('./setup_mode').WrappedSetupModeRenderer;
 
     const ChildComponent = () => <h1>Hi</h1>;
-    const scope = {};
-    const injector = {};
     const component = shallow(
       <SetupModeRenderer
-        scope={scope}
-        injector={injector}
         productName={ELASTICSEARCH_SYSTEM_ID}
+        kibana={kibanaMock}
+        onHttpError={onHttpErrorMock}
         render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
           <Fragment>
             {flyoutComponent}

x-pack/plugins/monitoring/public/lib/setup_mode.test.js

@@ -11,11 +11,8 @@ let getSetupModeState;
 let updateSetupModeData;
 let setSetupModeMenuItem;
 
-jest.mock('./ajax_error_handler', () => ({
-  ajaxErrorHandlersProvider: (err) => {
-    throw err;
-  },
-}));
+const handleErrorsMock = jest.fn();
+const callbackMock = jest.fn();
 
 jest.mock('react-dom', () => ({
   render: jest.fn(),
@@ -25,7 +22,6 @@ jest.mock('../legacy_shims', () => {
   return {
     Legacy: {
       shims: {
-        getAngularInjector: () => ({ get: () => ({ get: () => 'utc' }) }),
         toastNotifications: {
           addDanger: jest.fn(),
         },
@@ -35,41 +31,8 @@ jest.mock('../legacy_shims', () => {
   };
 });
 
-let data = {};
-
-const injectorModulesMock = {
-  globalState: {
-    save: jest.fn(),
-  },
-  Private: (module) => module,
-  $http: {
-    post: jest.fn().mockImplementation(() => {
-      return { data };
-    }),
-  },
-  $executor: {
-    run: jest.fn(),
-  },
-};
-
-const angularStateMock = {
-  injector: {
-    get: (module) => {
-      return injectorModulesMock[module] || {};
-    },
-  },
-  scope: {
-    $apply: (fn) => fn && fn(),
-    $evalAsync: (fn) => fn && fn(),
-  },
-};
-
-// We are no longer waiting for setup mode data to be fetched when enabling
-// so we need to wait for the next tick for the async action to finish
-
 function setModulesAndMocks() {
   jest.clearAllMocks().resetModules();
-  injectorModulesMock.globalState.inSetupMode = false;
 
   const setupMode = require('./setup_mode');
   toggleSetupMode = setupMode.toggleSetupMode;
@@ -83,53 +46,76 @@ function waitForSetupModeData() {
   return new Promise((resolve) => process.nextTick(resolve));
 }
 
-xdescribe('setup_mode', () => {
+describe('setup_mode', () => {
   beforeEach(async () => {
     setModulesAndMocks();
   });
 
   describe('setup', () => {
-    it('should require angular state', async () => {
-      let error;
-      try {
-        toggleSetupMode(true);
-      } catch (err) {
-        error = err;
-      }
-      expect(error.message).toEqual(
-        'Unable to interact with setup ' +
-          'mode because the angular injector was not previously set. This needs to be ' +
-          'set by calling `initSetupModeState`.'
-      );
-    });
-
     it('should enable toggle mode', async () => {
-      await initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      const globalState = {
+        inSetupMode: false,
+        save: jest.fn(),
+      };
+      const httpServiceMock = {
+        post: jest.fn(),
+      };
+
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       toggleSetupMode(true);
-      expect(injectorModulesMock.globalState.inSetupMode).toBe(true);
+      expect(globalState.inSetupMode).toBe(true);
     });
 
     it('should disable toggle mode', async () => {
-      await initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      const globalState = {
+        inSetupMode: true,
+        save: jest.fn(),
+      };
+      const httpServiceMock = {
+        post: jest.fn(),
+      };
+      const handleErrorsMock = jest.fn();
+      const callbackMock = jest.fn();
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       toggleSetupMode(false);
-      expect(injectorModulesMock.globalState.inSetupMode).toBe(false);
+      expect(globalState.inSetupMode).toBe(false);
     });
 
     it('should set top nav config', async () => {
+      const globalState = {
+        inSetupMode: false,
+        save: jest.fn(),
+      };
+      const httpServiceMock = {
+        post: jest.fn(),
+      };
+
       const render = require('react-dom').render;
-      await initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       setSetupModeMenuItem();
       toggleSetupMode(true);
+
       expect(render.mock.calls.length).toBe(2);
     });
   });
 
   describe('in setup mode', () => {
-    afterEach(async () => {
-      data = {};
-    });
-
     it('should not fetch data if the user does not have sufficient permissions', async () => {
+      const globalState = {
+        inSetupMode: false,
+        save: jest.fn(),
+      };
+      const httpServiceMock = {
+        post: jest.fn().mockReturnValue(
+          Promise.resolve({
+            _meta: {
+              hasPermissions: false,
+            },
+          })
+        ),
+      };
+
       const addDanger = jest.fn();
       jest.doMock('../legacy_shims', () => ({
         Legacy: {
@@ -141,13 +127,9 @@ xdescribe('setup_mode', () => {
           },
         },
       }));
-      data = {
-        _meta: {
-          hasPermissions: false,
-        },
-      };
+
       setModulesAndMocks();
-      await initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       toggleSetupMode(true);
       await waitForSetupModeData();
 
@@ -160,78 +142,122 @@ xdescribe('setup_mode', () => {
     });
 
     it('should set the newly discovered cluster uuid', async () => {
-      const clusterUuid = '1ajy';
-      data = {
-        _meta: {
-          liveClusterUuid: clusterUuid,
-          hasPermissions: true,
-        },
-        elasticsearch: {
-          byUuid: {
-            123: {
-              isPartiallyMigrated: true,
-            },
-          },
-        },
+      const globalState = {
+        inSetupMode: false,
+        cluster_uuid: undefined,
+        save: jest.fn(),
       };
-      await initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      const clusterUuid = '1ajy';
+      const httpServiceMock = {
+        post: jest.fn().mockReturnValue(
+          Promise.resolve({
+            _meta: {
+              liveClusterUuid: clusterUuid,
+              hasPermissions: true,
+            },
+            elasticsearch: {
+              byUuid: {
+                123: {
+                  isPartiallyMigrated: true,
+                },
+              },
+            },
+          })
+        ),
+      };
+
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       toggleSetupMode(true);
       await waitForSetupModeData();
 
-      expect(injectorModulesMock.globalState.cluster_uuid).toBe(clusterUuid);
+      expect(globalState.cluster_uuid).toBe(clusterUuid);
     });
 
     it('should fetch data for a given cluster', async () => {
       const clusterUuid = '1ajy';
-      data = {
-        _meta: {
-          liveClusterUuid: clusterUuid,
-          hasPermissions: true,
-        },
-        elasticsearch: {
-          byUuid: {
-            123: {
-              isPartiallyMigrated: true,
+      const globalState = {
+        inSetupMode: false,
+        cluster_uuid: clusterUuid,
+        save: jest.fn(),
+      };
+      const httpServiceMock = {
+        post: jest.fn().mockReturnValue(
+          Promise.resolve({
+            _meta: {
+              liveClusterUuid: clusterUuid,
+              hasPermissions: true,
             },
-          },
-        },
+            elasticsearch: {
+              byUuid: {
+                123: {
+                  isPartiallyMigrated: true,
+                },
+              },
+            },
+          })
+        ),
       };
 
-      await initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       toggleSetupMode(true);
       await waitForSetupModeData();
 
-      expect(injectorModulesMock.$http.post).toHaveBeenCalledWith(
+      expect(httpServiceMock.post).toHaveBeenCalledWith(
         `../api/monitoring/v1/setup/collection/cluster/${clusterUuid}`,
-        {
-          ccs: undefined,
-        }
+        { body: '{}' }
       );
     });
 
     it('should fetch data for a single node', async () => {
-      await initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      const clusterUuid = '1ajy';
+      const globalState = {
+        inSetupMode: false,
+        save: jest.fn(),
+      };
+      const httpServiceMock = {
+        post: jest.fn().mockReturnValue(
+          Promise.resolve({
+            _meta: {
+              liveClusterUuid: clusterUuid,
+              hasPermissions: true,
+            },
+            elasticsearch: {
+              byUuid: {
+                123: {
+                  isPartiallyMigrated: true,
+                },
+              },
+            },
+          })
+        ),
+      };
+
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       toggleSetupMode(true);
       await waitForSetupModeData();
 
-      injectorModulesMock.$http.post.mockClear();
       await updateSetupModeData('45asd');
-      expect(injectorModulesMock.$http.post).toHaveBeenCalledWith(
+      expect(httpServiceMock.post).toHaveBeenCalledWith(
         '../api/monitoring/v1/setup/collection/node/45asd',
-        {
-          ccs: undefined,
-        }
+        { body: '{}' }
       );
     });
 
     it('should fetch data without a cluster uuid', async () => {
-      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      const globalState = {
+        inSetupMode: false,
+        save: jest.fn(),
+      };
+      const httpServiceMock = {
+        post: jest.fn(),
+      };
+
+      await initSetupModeState(globalState, httpServiceMock, handleErrorsMock, callbackMock);
       await toggleSetupMode(true);
-      injectorModulesMock.$http.post.mockClear();
       await updateSetupModeData(undefined, true);
       const url = '../api/monitoring/v1/setup/collection/cluster';
-      const args = { ccs: undefined };
-      expect(injectorModulesMock.$http.post).toHaveBeenCalledWith(url, args);
+      const args = { body: '{}' };
+      expect(httpServiceMock.post).toHaveBeenCalledWith(url, args);
     });
   });
 });