Use ConfigProvider in mappings editor to provide docLinks to runtime …

…field editor

x-pack/plugins/index_management/public/application/app_context.tsx

@@ -37,6 +37,7 @@ export interface AppDependencies {
   setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
   uiSettings: CoreSetup['uiSettings'];
   urlGenerators: SharePluginStart['urlGenerators'];
+  docLinks: CoreStart['docLinks'];
 }
 
 export const AppContextProvider = ({

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter.tsx

@@ -16,7 +16,7 @@ import {
   SelectOption,
   SuperSelectOption,
 } from '../../../types';
-import { useIndexSettings } from '../../../index_settings_context';
+import { useConfig } from '../../../config_context';
 import { AnalyzerParameterSelects } from './analyzer_parameter_selects';
 
 interface Props {
@@ -71,7 +71,9 @@ export const AnalyzerParameter = ({
   allowsIndexDefaultOption = true,
   'data-test-subj': dataTestSubj,
 }: Props) => {
-  const { value: indexSettings } = useIndexSettings();
+  const {
+    value: { indexSettings },
+  } = useConfig();
   const customAnalyzers = getCustomAnalyzers(indexSettings);
   const analyzerOptions = allowsIndexDefaultOption
     ? ANALYZER_OPTIONS

x-pack/plugins/index_management/public/application/components/mappings_editor/components/runtime_fields/runtime_fields_list.tsx

@@ -15,6 +15,7 @@ import {
   RuntimeFieldEditorFlyoutContent,
   RuntimeFieldEditorFlyoutContentProps,
 } from '../../shared_imports';
+import { useConfig } from '../../config_context';
 import { EmptyPrompt } from './empty_prompt';
 import { RuntimeFieldsListItemContainer } from './runtimefields_list_item_container';
 
@@ -26,12 +27,18 @@ export const RuntimeFieldsList = () => {
     runtimeFields,
     runtimeFieldsList: { status, fieldToEdit },
   } = useMappingsState();
+
   const dispatch = useDispatch();
+
   const {
     addContent: addContentToGlobalFlyout,
     removeContent: removeContentFromGlobalFlyout,
   } = useGlobalFlyout();
 
+  const {
+    value: { docLinks },
+  } = useConfig();
+
   const createField = useCallback(() => {
     dispatch({ type: 'runtimeFieldsList.createField' });
   }, [dispatch]);
@@ -66,11 +73,7 @@ export const RuntimeFieldsList = () => {
           onSave: saveRuntimeField,
           onCancel: exitEdit,
           defaultValue: fieldToEdit ? runtimeFields[fieldToEdit]?.source : undefined,
-          docLinks: {
-            DOC_LINK_VERSION: 'master',
-            ELASTIC_WEBSITE_URL: 'https://elastic.co',
-            links: {} as any,
-          },
+          docLinks: docLinks!,
         },
         flyoutProps: {
           'data-test-subj': 'runtimeFieldEditor',
@@ -87,6 +90,7 @@ export const RuntimeFieldsList = () => {
     status,
     fieldToEdit,
     runtimeFields,
+    docLinks,
     addContentToGlobalFlyout,
     removeContentFromGlobalFlyout,
     saveRuntimeField,

x-pack/plugins/index_management/public/application/components/mappings_editor/config_context.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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, { createContext, useContext, useState } from 'react';
+
+import { DocLinksStart } from './shared_imports';
+import { IndexSettings } from './types';
+
+interface ContextState {
+  indexSettings: IndexSettings;
+  docLinks?: DocLinksStart;
+}
+
+interface Context {
+  value: ContextState;
+  update: (value: ContextState) => void;
+}
+
+const ConfigContext = createContext<Context | undefined>(undefined);
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const ConfigProvider = ({ children }: Props) => {
+  const [state, setState] = useState<ContextState>({
+    indexSettings: {},
+  });
+
+  return (
+    <ConfigContext.Provider value={{ value: state, update: setState }}>
+      {children}
+    </ConfigContext.Provider>
+  );
+};
+
+export const useConfig = () => {
+  const ctx = useContext(ConfigContext);
+  if (ctx === undefined) {
+    throw new Error('useConfig must be used within a <ConfigProvider />');
+  }
+  return ctx;
+};

x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx

@@ -27,7 +27,8 @@ import {
 import { extractMappingsDefinition } from './lib';
 import { useMappingsState } from './mappings_state_context';
 import { useMappingsStateListener } from './use_state_listener';
-import { useIndexSettings } from './index_settings_context';
+import { useConfig } from './config_context';
+import { DocLinksStart } from './shared_imports';
 
 type TabName = 'fields' | 'runtimeFields' | 'advanced' | 'templates';
 
@@ -45,9 +46,10 @@ interface Props {
   onChange: OnUpdateHandler;
   value?: { [key: string]: any };
   indexSettings?: IndexSettings;
+  docLinks: DocLinksStart;
 }
 
-export const MappingsEditor = React.memo(({ onChange, value, indexSettings }: Props) => {
+export const MappingsEditor = React.memo(({ onChange, value, docLinks, indexSettings }: Props) => {
   const { parsedDefaultValue, multipleMappingsDeclared } = useMemo<
     MappingsEditorParsedMetadata
   >(() => {
@@ -99,12 +101,7 @@ export const MappingsEditor = React.memo(({ onChange, value, indexSettings }: Pr
    */
   useMappingsStateListener({ onChange, value: parsedDefaultValue });
 
-  // Update the Index settings context so it is available in the Global flyout
-  const { update: updateIndexSettings } = useIndexSettings();
-  if (indexSettings !== undefined) {
-    updateIndexSettings(indexSettings);
-  }
-
+  const { update: updateConfig } = useConfig();
   const state = useMappingsState();
   const [selectedTab, selectTab] = useState<TabName>('fields');
 
@@ -119,6 +116,14 @@ export const MappingsEditor = React.memo(({ onChange, value, indexSettings }: Pr
     }
   }, [multipleMappingsDeclared, onChange, value]);
 
+  useEffect(() => {
+    // Update the the config context so it is available globally (e.g in our Global flyout)
+    updateConfig({
+      docLinks,
+      indexSettings: indexSettings ?? {},
+    });
+  }, [updateConfig, docLinks, indexSettings]);
+
   const changeTab = async (tab: TabName) => {
     if (selectedTab === 'advanced') {
       // When we navigate away we need to submit the form to validate if there are any errors.

x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_editor_context.tsx

@@ -6,12 +6,12 @@
 import React from 'react';
 
 import { StateProvider } from './mappings_state_context';
-import { IndexSettingsProvider } from './index_settings_context';
+import { ConfigProvider } from './config_context';
 
 export const MappingsEditorProvider: React.FC = ({ children }) => {
   return (
     <StateProvider>
-      <IndexSettingsProvider>{children}</IndexSettingsProvider>
+      <ConfigProvider>{children}</ConfigProvider>
     </StateProvider>
   );
 };

x-pack/plugins/index_management/public/application/components/mappings_editor/shared_imports.ts

@@ -61,3 +61,5 @@ export {
 } from '../../../../../runtime_fields/public';
 
 export { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public';
+
+export { DocLinksStart } from '../../../../../../../src/core/public';

x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx

@@ -16,6 +16,7 @@ import {
 } from '@elastic/eui';
 
 import { Forms } from '../../../../../shared_imports';
+import { useAppContext } from '../../../../app_context';
 import {
   MappingsEditor,
   OnUpdateHandler,
@@ -33,6 +34,7 @@ interface Props {
 export const StepMappings: React.FunctionComponent<Props> = React.memo(
   ({ defaultValue = {}, onChange, indexSettings, esDocsBase }) => {
     const [mappings, setMappings] = useState(defaultValue);
+    const { docLinks } = useAppContext();
 
     const onMappingsEditorUpdate = useCallback<OnUpdateHandler>(
       ({ isValid, getData, validate }) => {
@@ -107,6 +109,7 @@ export const StepMappings: React.FunctionComponent<Props> = React.memo(
           value={mappings}
           onChange={onMappingsEditorUpdate}
           indexSettings={indexSettings}
+          docLinks={docLinks}
         />
 
         <EuiSpacer size="m" />

x-pack/plugins/index_management/public/application/mount_management_section.ts

@@ -64,6 +64,7 @@ export async function mountManagementSection(
     setBreadcrumbs,
     uiSettings,
     urlGenerators,
+    docLinks,
   };
 
   const unmountAppCallback = renderApp(element, { core, dependencies: appDependencies });