[ML] Transforms: Fixed custom KibanaContext deprecation. (#59410)

- Deprecates the custom KibanaContext.
- Where applicable dependencies provided via KibanaContext are now passed on via AppDependencies.
- The main feature of KibanaContext was to populate index pattern and saved search information for the transform wizard. This is now provided via the useSearchItems() custom hook.

Author: walterra

x-pack/legacy/plugins/transform/public/__mocks__/shared_imports.ts

@@ -6,12 +6,14 @@
 
 jest.mock('ui/new_platform');
 
-export function XJsonMode() {}
-export function setDependencyCache() {}
-export const useRequest = () => ({
+export const expandLiteralStrings = jest.fn();
+export const XJsonMode = jest.fn();
+export const setDependencyCache = jest.fn();
+export const useRequest = jest.fn(() => ({
   isLoading: false,
   error: null,
   data: undefined,
-});
+}));
 export { mlInMemoryTableBasicFactory } from '../../../ml/public/application/components/ml_in_memory_table';
 export const SORT_DIRECTION = { ASC: 'asc' };
+export const KqlFilterBar = jest.fn(() => null);

x-pack/legacy/plugins/transform/public/app/common/request.ts

@@ -7,7 +7,7 @@
 import { DefaultOperator } from 'elasticsearch';
 
 import { dictionaryToArray } from '../../../common/types/common';
-import { SavedSearchQuery } from '../lib/kibana';
+import { SavedSearchQuery } from '../hooks/use_search_items';
 
 import { StepDefineExposedState } from '../sections/create_transform/components/step_define/step_define_form';
 import { StepDetailsExposedState } from '../sections/create_transform/components/step_details/step_details_form';

x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.test.tsx

@@ -7,13 +7,13 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { KibanaContext } from '../lib/kibana';
 import { createPublicShim } from '../../shim';
 import { getAppProviders } from '../app_dependencies';
 
 import { ToastNotificationText } from './toast_notification_text';
 
 jest.mock('../../shared_imports');
+jest.mock('ui/new_platform');
 
 describe('ToastNotificationText', () => {
   test('should render the text as plain text', () => {
@@ -23,9 +23,7 @@ describe('ToastNotificationText', () => {
     };
     const { container } = render(
       <Providers>
-        <KibanaContext.Provider value={{ initialized: false }}>
-          <ToastNotificationText {...props} />
-        </KibanaContext.Provider>
+        <ToastNotificationText {...props} />
       </Providers>
     );
     expect(container.textContent).toBe('a short text message');
@@ -39,9 +37,7 @@ describe('ToastNotificationText', () => {
     };
     const { container } = render(
       <Providers>
-        <KibanaContext.Provider value={{ initialized: false }}>
-          <ToastNotificationText {...props} />
-        </KibanaContext.Provider>
+        <ToastNotificationText {...props} />
       </Providers>
     );
     expect(container.textContent).toBe(

x-pack/legacy/plugins/transform/public/app/lib/kibana/common.ts x-pack/legacy/plugins/transform/public/app/hooks/use_search_items/common.ts

@@ -14,6 +14,8 @@ import {
 
 import { matchAllQuery } from '../../common';
 
+export type SavedSearchQuery = object;
+
 type IndexPatternId = string;
 type SavedSearchId = string;
 
@@ -60,7 +62,7 @@ export function getIndexPatternIdByTitle(indexPatternTitle: string): string | un
   return indexPatternCache.find(d => d?.attributes?.title === indexPatternTitle)?.id;
 }
 
-type CombinedQuery = Record<'bool', any> | unknown;
+type CombinedQuery = Record<'bool', any> | object;
 
 export function loadCurrentIndexPattern(
   indexPatterns: IndexPatternsContract,
@@ -79,17 +81,20 @@ export function loadCurrentSavedSearch(savedSearches: any, savedSearchId: SavedS
 function isIndexPattern(arg: any): arg is IndexPattern {
   return arg !== undefined;
 }
+
+export interface SearchItems {
+  indexPattern: IndexPattern;
+  savedSearch: any;
+  query: any;
+  combinedQuery: CombinedQuery;
+}
+
 // Helper for creating the items used for searching and job creation.
 export function createSearchItems(
   indexPattern: IndexPattern | undefined,
   savedSearch: any,
   config: IUiSettingsClient
-): {
-  indexPattern: IndexPattern;
-  savedSearch: any;
-  query: any;
-  combinedQuery: CombinedQuery;
-} {
+): SearchItems {
   // query is only used by the data visualizer as it needs
   // a lucene query_string.
   // Using a blank query will cause match_all:{} to be used

x-pack/legacy/plugins/transform/public/app/hooks/use_search_items/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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 { SavedSearchQuery, SearchItems } from './common';
+export { useSearchItems } from './use_search_items';

x-pack/legacy/plugins/transform/public/app/lib/kibana/kibana_provider.tsx x-pack/legacy/plugins/transform/public/app/hooks/use_search_items/use_search_items.ts

@@ -4,30 +4,36 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState, FC } from 'react';
+import { useEffect, useState } from 'react';
+
+import { createSavedSearchesLoader } from '../../../shared_imports';
 
 import { useAppDependencies } from '../../app_dependencies';
 
 import {
   createSearchItems,
+  getIndexPatternIdByTitle,
   loadCurrentIndexPattern,
   loadIndexPatterns,
   loadCurrentSavedSearch,
+  SearchItems,
 } from './common';
 
-import { InitializedKibanaContextValue, KibanaContext, KibanaContextValue } from './kibana_context';
-
-interface Props {
-  savedObjectId: string;
-}
+export const useSearchItems = (defaultSavedObjectId: string | undefined) => {
+  const [savedObjectId, setSavedObjectId] = useState(defaultSavedObjectId);
 
-export const KibanaProvider: FC<Props> = ({ savedObjectId, children }) => {
   const appDeps = useAppDependencies();
   const indexPatterns = appDeps.plugins.data.indexPatterns;
+  const uiSettings = appDeps.core.uiSettings;
   const savedObjectsClient = appDeps.core.savedObjects.client;
-  const savedSearches = appDeps.plugins.savedSearches.getClient();
+  const savedSearches = createSavedSearchesLoader({
+    savedObjectsClient,
+    indexPatterns,
+    chrome: appDeps.core.chrome,
+    overlays: appDeps.core.overlays,
+  });
 
-  const [contextValue, setContextValue] = useState<KibanaContextValue>({ initialized: false });
+  const [searchItems, setSearchItems] = useState<SearchItems | undefined>(undefined);
 
   async function fetchSavedObject(id: string) {
     await loadIndexPatterns(savedObjectsClient, indexPatterns);
@@ -47,31 +53,21 @@ export const KibanaProvider: FC<Props> = ({ savedObjectId, children }) => {
       // Just let fetchedSavedSearch stay undefined in case it doesn't exist.
     }
 
-    const kibanaConfig = appDeps.core.uiSettings;
-
-    const {
-      indexPattern: currentIndexPattern,
-      savedSearch: currentSavedSearch,
-      combinedQuery,
-    } = createSearchItems(fetchedIndexPattern, fetchedSavedSearch, kibanaConfig);
-
-    const kibanaContext: InitializedKibanaContextValue = {
-      indexPatterns,
-      initialized: true,
-      kibanaConfig,
-      combinedQuery,
-      currentIndexPattern,
-      currentSavedSearch,
-    };
-
-    setContextValue(kibanaContext);
+    setSearchItems(createSearchItems(fetchedIndexPattern, fetchedSavedSearch, uiSettings));
   }
 
   useEffect(() => {
-    fetchSavedObject(savedObjectId);
-    // fetchSavedObject should not be tracked.
+    if (savedObjectId !== undefined) {
+      fetchSavedObject(savedObjectId);
+    }
+    // Run this only when savedObjectId changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [savedObjectId]);
 
-  return <KibanaContext.Provider value={contextValue}>{children}</KibanaContext.Provider>;
+  return {
+    getIndexPatternIdByTitle,
+    loadIndexPatterns,
+    searchItems,
+    setSavedObjectId,
+  };
 };

x-pack/legacy/plugins/transform/public/app/lib/kibana/index.ts

@@ -22,19 +22,14 @@ import {
 } from '@elastic/eui';
 
 import { useApi } from '../../hooks/use_api';
+import { useSearchItems } from '../../hooks/use_search_items';
 
 import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants';
 
 import { useAppDependencies, useDocumentationLinks } from '../../app_dependencies';
 import { TransformPivotConfig } from '../../common';
 import { breadcrumbService, docTitleService, BREADCRUMB_SECTION } from '../../services/navigation';
 import { PrivilegesWrapper } from '../../lib/authorization';
-import {
-  getIndexPatternIdByTitle,
-  loadIndexPatterns,
-  KibanaProvider,
-  RenderOnlyWithInitializedKibanaContext,
-} from '../../lib/kibana';
 
 import { Wizard } from '../create_transform/components/wizard';
 
@@ -80,7 +75,12 @@ export const CloneTransformSection: FC<Props> = ({ match }) => {
   const [transformConfig, setTransformConfig] = useState<TransformPivotConfig>();
   const [errorMessage, setErrorMessage] = useState();
   const [isInitialized, setIsInitialized] = useState(false);
-  const [savedObjectId, setSavedObjectId] = useState<string | undefined>(undefined);
+  const {
+    getIndexPatternIdByTitle,
+    loadIndexPatterns,
+    searchItems,
+    setSavedObjectId,
+  } = useSearchItems(undefined);
 
   const fetchTransformConfig = async () => {
     try {
@@ -169,12 +169,8 @@ export const CloneTransformSection: FC<Props> = ({ match }) => {
               <pre>{JSON.stringify(errorMessage)}</pre>
             </EuiCallOut>
           )}
-          {savedObjectId !== undefined && isInitialized === true && transformConfig !== undefined && (
-            <KibanaProvider savedObjectId={savedObjectId}>
-              <RenderOnlyWithInitializedKibanaContext>
-                <Wizard cloneConfig={transformConfig} />
-              </RenderOnlyWithInitializedKibanaContext>
-            </KibanaProvider>
+          {searchItems !== undefined && isInitialized === true && transformConfig !== undefined && (
+            <Wizard cloneConfig={transformConfig} searchItems={searchItems} />
           )}
         </EuiPageContentBody>
       </EuiPageContent>