move common step containers to shared

x-pack/plugins/index_management/public/application/components/shared/components/index.ts

@@ -6,4 +6,9 @@
 
 export { TabAliases, TabMappings, TabSettings } from './details_panel';
 
-export { StepAliases, StepMappings, StepSettings } from './wizard_steps';
+export {
+  StepAliasesContainer,
+  StepMappingsContainer,
+  StepSettingsContainer,
+  CommonWizardSteps,
+} from './wizard_steps';

x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/index.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { StepAliases } from './step_aliases';
-export { StepMappings } from './step_mappings';
-export { StepSettings } from './step_settings';
+export { StepAliasesContainer } from './step_aliases_container';
+export { StepMappingsContainer } from './step_mappings_container';
+export { StepSettingsContainer } from './step_settings_container';
+
+export { CommonWizardSteps } from './types';

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

@@ -0,0 +1,22 @@
+/*
+ * 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 { Forms } from '../../../../../shared_imports';
+import { CommonWizardSteps } from './types';
+import { StepAliases } from './step_aliases';
+
+interface Props {
+  esDocsBase: string;
+}
+
+export const StepAliasesContainer: React.FunctionComponent<Props> = ({ esDocsBase }) => {
+  const { defaultValue, updateContent } = Forms.useContent<CommonWizardSteps>('aliases');
+
+  return (
+    <StepAliases defaultValue={defaultValue} onChange={updateContent} esDocsBase={esDocsBase} />
+  );
+};

x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings_container.tsx → x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx

@@ -5,20 +5,23 @@
  */
 import React from 'react';
 
-import { Forms } from '../../../../shared_imports';
-import { documentationService } from '../../../services/documentation';
-import { StepMappings } from '../../shared';
-import { WizardContent } from '../template_form';
+import { Forms } from '../../../../../shared_imports';
+import { CommonWizardSteps } from './types';
+import { StepMappings } from './step_mappings';
 
-export const StepMappingsContainer = () => {
-  const { defaultValue, updateContent, getData } = Forms.useContent<WizardContent>('mappings');
+interface Props {
+  esDocsBase: string;
+}
+
+export const StepMappingsContainer: React.FunctionComponent<Props> = ({ esDocsBase }) => {
+  const { defaultValue, updateContent, getData } = Forms.useContent<CommonWizardSteps>('mappings');
 
   return (
     <StepMappings
       defaultValue={defaultValue}
       onChange={updateContent}
       indexSettings={getData().settings}
-      esDocsBase={documentationService.getEsDocsBase()}
+      esDocsBase={esDocsBase}
     />
   );
 };

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

@@ -0,0 +1,22 @@
+/*
+ * 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 { Forms } from '../../../../../shared_imports';
+import { CommonWizardSteps } from './types';
+import { StepSettings } from './step_settings';
+
+interface Props {
+  esDocsBase: string;
+}
+
+export const StepSettingsContainer = React.memo(({ esDocsBase }: Props) => {
+  const { defaultValue, updateContent } = Forms.useContent<CommonWizardSteps>('settings');
+
+  return (
+    <StepSettings defaultValue={defaultValue} onChange={updateContent} esDocsBase={esDocsBase} />
+  );
+});

x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/types.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 { Mappings, IndexSettings, Aliases } from '../../../../../../common';
+
+export interface CommonWizardSteps {
+  settings?: IndexSettings;
+  mappings?: Mappings;
+  aliases?: Aliases;
+}

x-pack/plugins/index_management/public/application/components/shared/index.ts

@@ -8,7 +8,8 @@ export {
   TabAliases,
   TabMappings,
   TabSettings,
-  StepAliases,
-  StepMappings,
-  StepSettings,
+  StepAliasesContainer,
+  StepMappingsContainer,
+  StepSettingsContainer,
+  CommonWizardSteps,
 } from './components';

x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts

@@ -5,7 +5,4 @@
  */
 
 export { StepLogisticsContainer } from './step_logistics_container';
-export { StepAliasesContainer } from './step_aliases_container';
-export { StepMappingsContainer } from './step_mappings_container';
-export { StepSettingsContainer } from './step_settings_container';
 export { StepReviewContainer } from './step_review_container';

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

@@ -11,13 +11,14 @@ import { EuiSpacer } from '@elastic/eui';
 import { TemplateDeserialized, CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../../common';
 import { serializers, Forms } from '../../../shared_imports';
 import { SectionError } from '../section_error';
+import { StepLogisticsContainer, StepReviewContainer } from './steps';
 import {
-  StepLogisticsContainer,
+  CommonWizardSteps,
   StepSettingsContainer,
   StepMappingsContainer,
   StepAliasesContainer,
-  StepReviewContainer,
-} from './steps';
+} from '../shared';
+import { documentationService } from '../../services/documentation';
 
 const { stripEmptyFields } = serializers;
 const { FormWizard, FormWizardStep } = Forms;
@@ -31,11 +32,8 @@ interface Props {
   isEditing?: boolean;
 }
 
-export interface WizardContent {
+export interface WizardContent extends CommonWizardSteps {
   logistics: Omit<TemplateDeserialized, '_kbnMeta' | 'template'>;
-  settings: TemplateDeserialized['template']['settings'];
-  mappings: TemplateDeserialized['template']['mappings'];
-  aliases: TemplateDeserialized['template']['aliases'];
 }
 
 export type WizardSection = keyof WizardContent | 'review';
@@ -183,15 +181,15 @@ export const TemplateForm = ({
       </FormWizardStep>
 
       <FormWizardStep id={wizardSections.settings.id} label={wizardSections.settings.label}>
-        <StepSettingsContainer />
+        <StepSettingsContainer esDocsBase={documentationService.getEsDocsBase()} />
       </FormWizardStep>
 
       <FormWizardStep id={wizardSections.mappings.id} label={wizardSections.mappings.label}>
-        <StepMappingsContainer />
+        <StepMappingsContainer esDocsBase={documentationService.getEsDocsBase()} />
       </FormWizardStep>
 
       <FormWizardStep id={wizardSections.aliases.id} label={wizardSections.aliases.label}>
-        <StepAliasesContainer />
+        <StepAliasesContainer esDocsBase={documentationService.getEsDocsBase()} />
       </FormWizardStep>
 
       <FormWizardStep id={wizardSections.review.id} label={wizardSections.review.label}>