[ML] [NP] Removing ui imports

x-pack/legacy/plugins/ml/index.ts

@@ -45,7 +45,6 @@ export const ml = (kibana: any) => {
         category: DEFAULT_APP_CATEGORIES.analyze,
       },
       styleSheetPaths: resolve(__dirname, 'public/application/index.scss'),
-      hacks: ['plugins/ml/application/hacks/toggle_app_link_in_nav'],
       savedObjectSchemas: {
         'ml-telemetry': {
           isNamespaceAgnostic: true,

x-pack/legacy/plugins/ml/public/application/app.tsx

@@ -7,50 +7,78 @@
 import React, { FC } from 'react';
 import ReactDOM from 'react-dom';
 
-import 'uiExports/savedObjectTypes';
-
-import 'ui/autoload/all';
-
 // needed to make syntax highlighting work in ace editors
 import 'ace';
 import { AppMountParameters, CoreStart } from 'kibana/public';
-import {
-  IndexPatternsContract,
-  Plugin as DataPlugin,
-} from '../../../../../../src/plugins/data/public';
 
-import { KibanaConfigTypeFix } from './contexts/kibana';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
+
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { setDependencyCache, clearCache } from './util/dependency_cache';
 
 import { MlRouter } from './routing';
 
 export interface MlDependencies extends AppMountParameters {
-  npData: ReturnType<DataPlugin['start']>;
-  indexPatterns: IndexPatternsContract;
+  data: DataPublicPluginStart;
+  __LEGACY: {
+    XSRF: string;
+    APP_URL: string;
+  };
 }
 
 interface AppProps {
   coreStart: CoreStart;
-  indexPatterns: IndexPatternsContract;
+  deps: MlDependencies;
 }
 
-const App: FC<AppProps> = ({ coreStart, indexPatterns }) => {
-  const config = (coreStart.uiSettings as never) as KibanaConfigTypeFix; // TODO - make this UiSettingsClientContract, get rid of KibanaConfigTypeFix
+const App: FC<AppProps> = ({ coreStart, deps }) => {
+  setDependencyCache({
+    indexPatterns: deps.data.indexPatterns,
+    timefilter: deps.data.query.timefilter,
+    config: coreStart.uiSettings!,
+    chrome: coreStart.chrome!,
+    docLinks: coreStart.docLinks!,
+    toastNotifications: coreStart.notifications.toasts,
+    overlays: coreStart.overlays,
+    recentlyAccessed: coreStart.chrome!.recentlyAccessed,
+    fieldFormats: deps.data.fieldFormats,
+    autocomplete: deps.data.autocomplete,
+    basePath: coreStart.http.basePath,
+    savedObjectsClient: coreStart.savedObjects.client,
+    XSRF: deps.__LEGACY.XSRF,
+    APP_URL: deps.__LEGACY.APP_URL,
+    application: coreStart.application,
+    http: coreStart.http,
+  });
+  deps.onAppLeave(actions => {
+    clearCache();
+    return actions.default();
+  });
+
+  const pageDeps = {
+    indexPatterns: deps.data.indexPatterns,
+    config: coreStart.uiSettings!,
+    setBreadcrumbs: coreStart.chrome!.setBreadcrumbs,
+  };
+
+  const services = {
+    appName: 'ML',
+    data: deps.data,
+    ...coreStart,
+  };
 
+  const I18nContext = coreStart.i18n.Context;
   return (
-    <MlRouter
-      config={config}
-      setBreadcrumbs={coreStart.chrome.setBreadcrumbs}
-      indexPatterns={indexPatterns}
-    />
+    <I18nContext>
+      <KibanaContextProvider services={services}>
+        <MlRouter pageDeps={pageDeps} />
+      </KibanaContextProvider>
+    </I18nContext>
   );
 };
 
-export const renderApp = (
-  coreStart: CoreStart,
-  depsStart: object,
-  { element, indexPatterns }: MlDependencies
-) => {
-  ReactDOM.render(<App coreStart={coreStart} indexPatterns={indexPatterns} />, element);
+export const renderApp = (coreStart: CoreStart, depsStart: object, deps: MlDependencies) => {
+  ReactDOM.render(<App coreStart={coreStart} deps={deps} />, deps.element);
 
-  return () => ReactDOM.unmountComponentAtNode(element);
+  return () => ReactDOM.unmountComponentAtNode(deps.element);
 };

x-pack/legacy/plugins/ml/public/application/components/annotations/annotation_description_list/index.test.tsx

@@ -21,12 +21,7 @@ describe('AnnotationDescriptionList', () => {
   });
 
   test('Initialization with annotation.', () => {
-    const wrapper = shallowWithIntl(
-      <AnnotationDescriptionList.WrappedComponent
-        annotation={mockAnnotations[0]}
-        intl={null as any}
-      />
-    );
+    const wrapper = shallowWithIntl(<AnnotationDescriptionList annotation={mockAnnotations[0]} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

x-pack/legacy/plugins/ml/public/application/components/annotations/annotation_description_list/index.tsx

@@ -13,27 +13,24 @@ import React from 'react';
 
 import { EuiDescriptionList } from '@elastic/eui';
 
-import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { Annotation } from '../../../../../common/types/annotations';
 import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
 
 interface Props {
   annotation: Annotation;
-  intl: InjectedIntl;
 }
 
-export const AnnotationDescriptionList = injectI18n(({ annotation, intl }: Props) => {
+export const AnnotationDescriptionList = ({ annotation }: Props) => {
   const listItems = [
     {
-      title: intl.formatMessage({
-        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.jobIdTitle',
+      title: i18n.translate('xpack.ml.timeSeriesExplorer.annotationDescriptionList.jobIdTitle', {
         defaultMessage: 'Job ID',
       }),
       description: annotation.job_id,
     },
     {
-      title: intl.formatMessage({
-        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.startTitle',
+      title: i18n.translate('xpack.ml.timeSeriesExplorer.annotationDescriptionList.startTitle', {
         defaultMessage: 'Start',
       }),
       description: formatHumanReadableDateTimeSeconds(annotation.timestamp),
@@ -42,8 +39,7 @@ export const AnnotationDescriptionList = injectI18n(({ annotation, intl }: Props
 
   if (annotation.end_timestamp !== undefined) {
     listItems.push({
-      title: intl.formatMessage({
-        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.endTitle',
+      title: i18n.translate('xpack.ml.timeSeriesExplorer.annotationDescriptionList.endTitle', {
         defaultMessage: 'End',
       }),
       description: formatHumanReadableDateTimeSeconds(annotation.end_timestamp),
@@ -52,31 +48,36 @@ export const AnnotationDescriptionList = injectI18n(({ annotation, intl }: Props
 
   if (annotation.create_time !== undefined && annotation.modified_time !== undefined) {
     listItems.push({
-      title: intl.formatMessage({
-        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.createdTitle',
+      title: i18n.translate('xpack.ml.timeSeriesExplorer.annotationDescriptionList.createdTitle', {
         defaultMessage: 'Created',
       }),
       description: formatHumanReadableDateTimeSeconds(annotation.create_time),
     });
     listItems.push({
-      title: intl.formatMessage({
-        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.createdByTitle',
-        defaultMessage: 'Created by',
-      }),
+      title: i18n.translate(
+        'xpack.ml.timeSeriesExplorer.annotationDescriptionList.createdByTitle',
+        {
+          defaultMessage: 'Created by',
+        }
+      ),
       description: annotation.create_username,
     });
     listItems.push({
-      title: intl.formatMessage({
-        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.lastModifiedTitle',
-        defaultMessage: 'Last modified',
-      }),
+      title: i18n.translate(
+        'xpack.ml.timeSeriesExplorer.annotationDescriptionList.lastModifiedTitle',
+        {
+          defaultMessage: 'Last modified',
+        }
+      ),
       description: formatHumanReadableDateTimeSeconds(annotation.modified_time),
     });
     listItems.push({
-      title: intl.formatMessage({
-        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.modifiedByTitle',
-        defaultMessage: 'Modified by',
-      }),
+      title: i18n.translate(
+        'xpack.ml.timeSeriesExplorer.annotationDescriptionList.modifiedByTitle',
+        {
+          defaultMessage: 'Modified by',
+        }
+      ),
       description: annotation.modified_username,
     });
   }
@@ -88,4 +89,4 @@ export const AnnotationDescriptionList = injectI18n(({ annotation, intl }: Props
       listItems={listItems}
     />
   );
-});
+};

x-pack/legacy/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx

@@ -27,7 +27,6 @@ import { CommonProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { toastNotifications } from 'ui/notify';
 import { ANNOTATION_MAX_LENGTH_CHARS } from '../../../../../common/constants/annotations';
 import {
   annotation$,
@@ -38,6 +37,7 @@ import { AnnotationDescriptionList } from '../annotation_description_list';
 import { DeleteAnnotationModal } from '../delete_annotation_modal';
 
 import { ml } from '../../../services/ml_api_service';
+import { getToastNotifications } from '../../../util/dependency_cache';
 
 interface Props {
   annotation: AnnotationState;
@@ -47,7 +47,7 @@ interface State {
   isDeleteModalVisible: boolean;
 }
 
-class AnnotationFlyoutIntl extends Component<CommonProps & Props> {
+class AnnotationFlyoutUI extends Component<CommonProps & Props> {
   public state: State = {
     isDeleteModalVisible: false,
   };
@@ -75,6 +75,7 @@ class AnnotationFlyoutIntl extends Component<CommonProps & Props> {
 
   public deleteHandler = async () => {
     const { annotation } = this.props;
+    const toastNotifications = getToastNotifications();
 
     if (annotation === null) {
       return;
@@ -161,6 +162,7 @@ class AnnotationFlyoutIntl extends Component<CommonProps & Props> {
       .indexAnnotation(annotation)
       .then(() => {
         annotationsRefreshed();
+        const toastNotifications = getToastNotifications();
         if (typeof annotation._id === 'undefined') {
           toastNotifications.addSuccess(
             i18n.translate(
@@ -184,6 +186,7 @@ class AnnotationFlyoutIntl extends Component<CommonProps & Props> {
         }
       })
       .catch(resp => {
+        const toastNotifications = getToastNotifications();
         if (typeof annotation._id === 'undefined') {
           toastNotifications.addDanger(
             i18n.translate(
@@ -343,5 +346,5 @@ export const AnnotationFlyout: FC<any> = props => {
     return null;
   }
 
-  return <AnnotationFlyoutIntl annotation={annotationProp} {...props} />;
+  return <AnnotationFlyoutUI annotation={annotationProp} {...props} />;
 };