[ML] Use context and custom hooks to manage legacy dependencies.

x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js

@@ -12,11 +12,6 @@ import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
 import 'ui/directives/kbn_href';
-import chrome from 'ui/chrome';
-import { timefilter } from 'ui/timefilter';
-import { timeHistory } from 'ui/timefilter/time_history';
-
-import { NavigationMenuContext } from '../../util/context_utils';
 
 import { NavigationMenu } from './navigation_menu';
 
@@ -25,12 +20,7 @@ module.directive('mlNavMenu', function () {
     restrict: 'E',
     transclude: true,
     link: function (scope, element, attrs) {
-      ReactDOM.render(
-        <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
-          <NavigationMenu tabId={attrs.name} />
-        </NavigationMenuContext.Provider>,
-        element[0]
-      );
+      ReactDOM.render(<NavigationMenu tabId={attrs.name} />, element[0]);
 
       element.on('$destroy', () => {
         ReactDOM.unmountComponentAtNode(element[0]);

x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx

@@ -4,12 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, Fragment, useContext, useState, useEffect } from 'react';
+import React, { FC, Fragment, useState, useEffect } from 'react';
 import { EuiSuperDatePicker } from '@elastic/eui';
 import { TimeHistory, TimeRange } from 'ui/timefilter/time_history';
 
 import { mlTimefilterRefresh$ } from '../../../services/timefilter_refresh_service';
-import { NavigationMenuContext } from '../../../util/context_utils';
+import { useUiContext } from '../../../contexts/ui/use_ui_context';
 
 interface Duration {
   start: string;
@@ -28,9 +28,8 @@ function getRecentlyUsedRangesFactory(timeHistory: TimeHistory) {
 }
 
 export const TopNav: FC = () => {
-  const navigationMenuContext = useContext(NavigationMenuContext);
-  const timefilter = navigationMenuContext.timefilter;
-  const getRecentlyUsedRanges = getRecentlyUsedRangesFactory(navigationMenuContext.timeHistory);
+  const { chrome, timefilter, timeHistory } = useUiContext();
+  const getRecentlyUsedRanges = getRecentlyUsedRangesFactory(timeHistory);
 
   const [refreshInterval, setRefreshInterval] = useState(timefilter.getRefreshInterval());
   const [time, setTime] = useState(timefilter.getTime());
@@ -42,7 +41,7 @@ export const TopNav: FC = () => {
     timefilter.isTimeRangeSelectorEnabled
   );
 
-  const dateFormat = navigationMenuContext.chrome.getUiSettingsClient().get('dateFormat');
+  const dateFormat = chrome.getUiSettingsClient().get('dateFormat');
 
   useEffect(() => {
     timefilter.on('refreshIntervalUpdate', timefilterUpdateListener);

x-pack/legacy/plugins/ml/public/contexts/kibana/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export { KibanaContext, KibanaContextValue, SavedSearchQuery } from './kibana_context';
+export { useKibanaContext } from './use_kibana_context';
+export { useCurrentIndexPattern } from './use_current_index_pattern';
+export { useCurrentSavedSearch } from './use_current_saved_search';

x-pack/legacy/plugins/ml/public/contexts/kibana/kibana_context.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 React from 'react';
+
+import { IndexPattern } from 'ui/index_patterns';
+
+export interface KibanaContextValue {
+  combinedQuery?: any;
+  currentIndexPattern?: IndexPattern;
+  currentSavedSearch?: any;
+  indexPatterns?: any;
+  kbnBaseUrl?: string;
+  kibanaConfig?: any;
+}
+
+export type SavedSearchQuery = object;
+
+// This context provides dependencies which can be injected
+// via angularjs only (like services, currentIndexPattern etc.).
+// Because we cannot just import these dependencies, the default value
+// for the context is just {} and the value's type has optional
+// attributes for the angularjs based dependencies. Therefor, the
+// actual dependencies are set like we did previously with KibanaContext
+// in the wrapping angularjs directive. In the custom hook we check if
+// the dependencies are present with error reporting if they weren't
+// added properly. That's why in tests, these custom hooks must not
+// be mocked, instead <UiChrome.Provider value="mocked-value">` needs
+// to be used. This guarantees that we have both properly set up
+// TypeScript support and runtime checks for these dependencies.
+// Multiple custom hooks can be created to access subsets of
+// the overall context value if necessary too,
+// see useCurrentIndexPattern() for example.
+export const KibanaContext = React.createContext<KibanaContextValue>({});

x-pack/legacy/plugins/ml/public/contexts/kibana/use_current_index_pattern.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { KibanaContext } from './kibana_context';
+
+export const useCurrentIndexPattern = () => {
+  const context = useContext(KibanaContext);
+
+  if (context.currentIndexPattern === undefined) {
+    throw new Error('currentIndexPattern is undefined');
+  }
+
+  return context.currentIndexPattern;
+};

x-pack/legacy/plugins/ml/public/contexts/kibana/use_current_saved_search.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { KibanaContext } from './kibana_context';
+
+export const useCurrentSavedSearch = () => {
+  const context = useContext(KibanaContext);
+
+  if (context.currentSavedSearch === undefined) {
+    throw new Error('currentSavedSearch is undefined');
+  }
+
+  return context.currentSavedSearch;
+};

x-pack/legacy/plugins/ml/public/contexts/kibana/use_kibana_context.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { KibanaContext, KibanaContextValue } from './kibana_context';
+
+export const useKibanaContext = () => {
+  const context = useContext(KibanaContext);
+
+  if (
+    context.combinedQuery === undefined ||
+    context.currentIndexPattern === undefined ||
+    context.currentSavedSearch === undefined ||
+    context.indexPatterns === undefined ||
+    context.kbnBaseUrl === undefined ||
+    context.kibanaConfig === undefined
+  ) {
+    throw new Error('required attribute is undefined');
+  }
+
+  return context as Required<KibanaContextValue>;
+};

x-pack/legacy/plugins/ml/public/contexts/ui/__mocks__/mocks.ts

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+export const uiChromeMock = {
+  getBasePath: () => 'basePath',
+  getUiSettingsClient: () => {
+    return {
+      get: (key: string) => {
+        switch (key) {
+          case 'dateFormat':
+          case 'timepicker:timeDefaults':
+            return {};
+          case 'timepicker:refreshIntervalDefaults':
+            return { pause: false, value: 0 };
+          default:
+            throw new Error(`Unexpected config key: ${key}`);
+        }
+      },
+    };
+  },
+};
+
+export const uiTimefilterMock = {
+  getRefreshInterval: () => '30s',
+  getTime: () => ({ from: 0, to: 0 }),
+  on: (event: string, reload: () => void) => {},
+};
+
+export const uiTimeHistoryMock = {
+  get: () => [{ from: 0, to: 0 }],
+};

x-pack/legacy/plugins/ml/public/contexts/ui/__mocks__/use_ui_chrome_context.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 { uiChromeMock } from './mocks';
+
+export const useUiChromeContext = () => uiChromeMock;

x-pack/legacy/plugins/ml/public/contexts/ui/__mocks__/use_ui_context.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { uiChromeMock, uiTimefilterMock, uiTimeHistoryMock } from './mocks';
+
+export const useUiContext = () => ({
+  chrome: uiChromeMock,
+  timefilter: uiTimefilterMock,
+  timeHistory: uiTimeHistoryMock,
+});

x-pack/legacy/plugins/ml/public/contexts/ui/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+// We only export UiContext but not any custom hooks, because if we'd import them
+// from here, mocking the hook from jest tests won't work as expected.
+export { UiContext } from './ui_context';

x-pack/legacy/plugins/ml/public/contexts/ui/ui_context.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 React from 'react';
+
+import chrome from 'ui/chrome';
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
+
+// This provides ui/* based imports via React Context.
+// Because these dependencies can use regular imports,
+// they are just passed on as the default value
+// of the Context which means it's not necessary
+// to add <UiContext.Provider value="..." />... to the
+// wrapping angular directive, reducing a lot of boilerplate.
+// The custom hooks like useUiContext() need to be mocked in
+// tests because we rely on the properly set up default value.
+// Different custom hooks can be created to access parts only
+// from the full context value, see useUiChromeContext() as an example.
+export const UiContext = React.createContext({
+  chrome,
+  timefilter,
+  timeHistory,
+});

x-pack/legacy/plugins/ml/public/contexts/ui/use_ui_chrome_context.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { UiContext } from './ui_context';
+
+export const useUiChromeContext = () => {
+  return useContext(UiContext).chrome;
+};

x-pack/legacy/plugins/ml/public/contexts/ui/use_ui_context.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { UiContext } from './ui_context';
+
+export const useUiContext = () => {
+  return useContext(UiContext);
+};

x-pack/legacy/plugins/ml/public/data_frame/common/index.ts

@@ -16,13 +16,6 @@ export {
   MAX_COLUMNS,
 } from './fields';
 export { DropDownLabel, DropDownOption, Label } from './dropdown';
-export {
-  KibanaContext,
-  KibanaContextValue,
-  isKibanaContext,
-  NullableKibanaContextValue,
-  SavedSearchQuery,
-} from './kibana_context';
 export {
   isTransformIdValid,
   refreshTransformList$,

x-pack/legacy/plugins/ml/public/data_frame/common/navigation.ts

@@ -6,8 +6,6 @@
 
 import rison from 'rison-node';
 
-import chrome from 'ui/chrome';
-
 export function moveToDataFrameWizard() {
   window.location.href = '#/data_frames/new_transform';
 }
@@ -16,15 +14,14 @@ export function moveToDataFrameTransformList() {
   window.location.href = '#/data_frames';
 }
 
-export function moveToDiscover(indexPatternId: string, kbnBaseUrl: string) {
+export function moveToDiscover(indexPatternId: string, baseUrl: string) {
   const _g = rison.encode({});
 
   // Add the index pattern ID to the appState part of the URL.
   const _a = rison.encode({
     index: indexPatternId,
   });
 
-  const baseUrl = chrome.addBasePath(kbnBaseUrl);
   const hash = `#/discover?_g=${_g}&_a=${_a}`;
 
   window.location.href = `${baseUrl}${hash}`;

x-pack/legacy/plugins/ml/public/data_frame/common/request.ts

@@ -9,6 +9,7 @@ import { DefaultOperator } from 'elasticsearch';
 import { IndexPattern } from 'ui/index_patterns';
 
 import { dictionaryToArray } from '../../../common/types/common';
+import { SavedSearchQuery } from '../../contexts/kibana';
 
 import { StepDefineExposedState } from '../pages/data_frame_new_pivot/components/step_define/step_define_form';
 import { StepDetailsExposedState } from '../pages/data_frame_new_pivot/components/step_details/step_details_form';
@@ -24,7 +25,6 @@ import {
 
 import { PivotAggsConfig } from './pivot_aggs';
 import { DateHistogramAgg, HistogramAgg, TermsAgg } from './pivot_group_by';
-import { SavedSearchQuery } from './kibana_context';
 import { PreviewRequestBody, CreateRequestBody } from './transform';
 
 export interface SimpleQuery {