[IM] Move template wizard steps to shared directory + update legacy details panel

x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts

@@ -5,7 +5,7 @@
  */
 
 export type TestSubjects =
-  | 'aliasesTab'
+  | 'aliasesTabContent'
   | 'appTitle'
   | 'cell'
   | 'closeDetailsButton'
@@ -27,7 +27,7 @@ export type TestSubjects =
   | 'indicesTab'
   | 'legacyTemplateTable'
   | 'manageTemplateButton'
-  | 'mappingsTab'
+  | 'mappingsTabContent'
   | 'noAliasesCallout'
   | 'noMappingsCallout'
   | 'noSettingsCallout'
@@ -36,7 +36,7 @@ export type TestSubjects =
   | 'row'
   | 'sectionError'
   | 'sectionLoading'
-  | 'settingsTab'
+  | 'settingsTabContent'
   | 'summaryTab'
   | 'summaryTitle'
   | 'systemTemplatesSwitch'

x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts

@@ -432,18 +432,18 @@ describe('Index Templates tab', () => {
           // Navigate and verify all tabs
           actions.selectDetailsTab('settings');
           expect(exists('summaryTab')).toBe(false);
-          expect(exists('settingsTab')).toBe(true);
+          expect(exists('settingsTabContent')).toBe(true);
 
           actions.selectDetailsTab('aliases');
           expect(exists('summaryTab')).toBe(false);
-          expect(exists('settingsTab')).toBe(false);
-          expect(exists('aliasesTab')).toBe(true);
+          expect(exists('settingsTabContent')).toBe(false);
+          expect(exists('aliasesTabContent')).toBe(true);
 
           actions.selectDetailsTab('mappings');
           expect(exists('summaryTab')).toBe(false);
-          expect(exists('settingsTab')).toBe(false);
-          expect(exists('aliasesTab')).toBe(false);
-          expect(exists('mappingsTab')).toBe(true);
+          expect(exists('settingsTabContent')).toBe(false);
+          expect(exists('aliasesTabContent')).toBe(false);
+          expect(exists('mappingsTabContent')).toBe(true);
         });
 
         test('should show an info callout if data is not present', async () => {

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

@@ -5,3 +5,5 @@
  */
 
 export { TabAliases, TabMappings, TabSettings } from './details_panel';
+
+export { StepAliases, StepMappings, StepSettings } from './wizard_steps';

x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/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.
+ */
+
+export { StepAliases } from './step_aliases';
+export { StepMappings } from './step_mappings';
+export { StepSettings } from './step_settings';

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

@@ -19,17 +19,17 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Forms } from '../../../../shared_imports';
-import { documentationService } from '../../../services/documentation';
+import { Forms } from '../../../../../shared_imports';
 import { useJsonStep } from './use_json_step';
 
 interface Props {
   defaultValue: { [key: string]: any };
   onChange: (content: Forms.Content) => void;
+  esDocsBase: string;
 }
 
 export const StepAliases: React.FunctionComponent<Props> = React.memo(
-  ({ defaultValue, onChange }) => {
+  ({ defaultValue, onChange, esDocsBase }) => {
     const { jsonContent, setJsonContent, error } = useJsonStep({
       defaultValue,
       onChange,
@@ -42,7 +42,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
             <EuiTitle>
               <h2 data-test-subj="stepTitle">
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepAliases.stepTitle"
+                  id="xpack.idxMgmt.formWizard.stepAliases.stepTitle"
                   defaultMessage="Aliases (optional)"
                 />
               </h2>
@@ -53,7 +53,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
             <EuiText>
               <p>
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepAliases.aliasesDescription"
+                  id="xpack.idxMgmt.formWizard.stepAliases.aliasesDescription"
                   defaultMessage="Set up aliases to associate with your indices."
                 />
               </p>
@@ -64,13 +64,13 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
             <EuiButtonEmpty
               size="s"
               flush="right"
-              href={documentationService.getTemplatesDocumentationLink()}
+              href={`${esDocsBase}/indices-aliases.html`}
               target="_blank"
               iconType="help"
             >
               <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepAliases.docsButtonLabel"
-                defaultMessage="Index Templates docs"
+                id="xpack.idxMgmt.formWizard.stepAliases.docsButtonLabel"
+                defaultMessage="Index Aliases docs"
               />
             </EuiButtonEmpty>
           </EuiFlexItem>
@@ -82,13 +82,13 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
         <EuiFormRow
           label={
             <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepAliases.fieldAliasesLabel"
+              id="xpack.idxMgmt.formWizard.stepAliases.fieldAliasesLabel"
               defaultMessage="Aliases"
             />
           }
           helpText={
             <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepAliases.aliasesEditorHelpText"
+              id="xpack.idxMgmt.formWizard.stepAliases.aliasesEditorHelpText"
               defaultMessage="Use JSON format: {code}"
               values={{
                 code: (
@@ -120,7 +120,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
             showGutter={false}
             minLines={6}
             aria-label={i18n.translate(
-              'xpack.idxMgmt.templateForm.stepAliases.fieldAliasesAriaLabel',
+              'xpack.idxMgmt.formWizard.stepAliases.fieldAliasesAriaLabel',
               {
                 defaultMessage: 'Aliases code editor',
               }

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

@@ -15,23 +15,23 @@ import {
   EuiText,
 } from '@elastic/eui';
 
-import { Forms } from '../../../../shared_imports';
-import { documentationService } from '../../../services/documentation';
+import { Forms } from '../../../../../shared_imports';
 import {
   MappingsEditor,
   OnUpdateHandler,
   LoadMappingsFromJsonButton,
   IndexSettings,
-} from '../../mappings_editor';
+} from '../../../mappings_editor';
 
 interface Props {
   defaultValue: { [key: string]: any };
   onChange: (content: Forms.Content) => void;
   indexSettings?: IndexSettings;
+  esDocsBase: string;
 }
 
 export const StepMappings: React.FunctionComponent<Props> = React.memo(
-  ({ defaultValue, onChange, indexSettings }) => {
+  ({ defaultValue, onChange, indexSettings, esDocsBase }) => {
     const [mappings, setMappings] = useState(defaultValue);
 
     const onMappingsEditorUpdate = useCallback<OnUpdateHandler>(
@@ -58,7 +58,7 @@ export const StepMappings: React.FunctionComponent<Props> = React.memo(
             <EuiTitle>
               <h2 data-test-subj="stepTitle">
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepMappings.stepTitle"
+                  id="xpack.idxMgmt.formWizard.stepMappings.stepTitle"
                   defaultMessage="Mappings (optional)"
                 />
               </h2>
@@ -69,7 +69,7 @@ export const StepMappings: React.FunctionComponent<Props> = React.memo(
             <EuiText>
               <p>
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepMappings.mappingsDescription"
+                  id="xpack.idxMgmt.formWizard.stepMappings.mappingsDescription"
                   defaultMessage="Define how to store and index documents."
                 />
               </p>
@@ -86,12 +86,12 @@ export const StepMappings: React.FunctionComponent<Props> = React.memo(
                 <EuiButtonEmpty
                   size="s"
                   flush="right"
-                  href={documentationService.getMappingDocumentationLink()}
+                  href={`${esDocsBase}/mapping.html`}
                   target="_blank"
                   iconType="help"
                 >
                   <FormattedMessage
-                    id="xpack.idxMgmt.templateForm.stepMappings.docsButtonLabel"
+                    id="xpack.idxMgmt.formWizard.stepMappings.docsButtonLabel"
                     defaultMessage="Mapping docs"
                   />
                 </EuiButtonEmpty>

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

@@ -19,17 +19,17 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Forms } from '../../../../shared_imports';
-import { documentationService } from '../../../services/documentation';
+import { Forms } from '../../../../../shared_imports';
 import { useJsonStep } from './use_json_step';
 
 interface Props {
   defaultValue: { [key: string]: any };
   onChange: (content: Forms.Content) => void;
+  esDocsBase: string;
 }
 
 export const StepSettings: React.FunctionComponent<Props> = React.memo(
-  ({ defaultValue, onChange }) => {
+  ({ defaultValue, onChange, esDocsBase }) => {
     const { jsonContent, setJsonContent, error } = useJsonStep({
       defaultValue,
       onChange,
@@ -42,7 +42,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
             <EuiTitle>
               <h2 data-test-subj="stepTitle">
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepSettings.stepTitle"
+                  id="xpack.idxMgmt.formWizard.stepSettings.stepTitle"
                   defaultMessage="Index settings (optional)"
                 />
               </h2>
@@ -53,7 +53,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
             <EuiText>
               <p>
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepSettings.settingsDescription"
+                  id="xpack.idxMgmt.formWizard.stepSettings.settingsDescription"
                   defaultMessage="Define the behavior of your indices."
                 />
               </p>
@@ -64,12 +64,12 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
             <EuiButtonEmpty
               size="s"
               flush="right"
-              href={documentationService.getSettingsDocumentationLink()}
+              href={`${esDocsBase}/index-modules.html#index-modules-settings`}
               target="_blank"
               iconType="help"
             >
               <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepSettings.docsButtonLabel"
+                id="xpack.idxMgmt.formWizard.stepSettings.docsButtonLabel"
                 defaultMessage="Index settings docs"
               />
             </EuiButtonEmpty>
@@ -82,13 +82,13 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
         <EuiFormRow
           label={
             <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsLabel"
+              id="xpack.idxMgmt.formWizard.stepSettings.fieldIndexSettingsLabel"
               defaultMessage="Index settings"
             />
           }
           helpText={
             <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepSettings.settingsEditorHelpText"
+              id="xpack.idxMgmt.formWizard.stepSettings.settingsEditorHelpText"
               defaultMessage="Use JSON format: {code}"
               values={{
                 code: <EuiCode>{JSON.stringify({ number_of_replicas: 1 })}</EuiCode>,
@@ -114,7 +114,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
             showGutter={false}
             minLines={6}
             aria-label={i18n.translate(
-              'xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsAriaLabel',
+              'xpack.idxMgmt.formWizard.stepSettings.fieldIndexSettingsAriaLabel',
               {
                 defaultMessage: 'Index settings editor',
               }

x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts → x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/use_json_step.ts

@@ -7,7 +7,7 @@
 import { useEffect, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { isJSON, Forms } from '../../../../shared_imports';
+import { isJSON, Forms } from '../../../../../shared_imports';
 
 interface Parameters {
   onChange: (content: Forms.Content) => void;

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

@@ -4,4 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { TabAliases, TabMappings, TabSettings } from './components';
+export {
+  TabAliases,
+  TabMappings,
+  TabSettings,
+  StepAliases,
+  StepMappings,
+  StepSettings,
+} from './components';

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

@@ -6,11 +6,18 @@
 import React from 'react';
 
 import { Forms } from '../../../../shared_imports';
+import { documentationService } from '../../../services/documentation';
+import { StepAliases } from '../../shared';
 import { WizardContent } from '../template_form';
-import { StepAliases } from './step_aliases';
 
 export const StepAliasesContainer = () => {
   const { defaultValue, updateContent } = Forms.useContent<WizardContent>('aliases');
 
-  return <StepAliases defaultValue={defaultValue} onChange={updateContent} />;
+  return (
+    <StepAliases
+      defaultValue={defaultValue}
+      onChange={updateContent}
+      esDocsBase={documentationService.getEsDocsBase()}
+    />
+  );
 };

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

@@ -6,8 +6,9 @@
 import React from 'react';
 
 import { Forms } from '../../../../shared_imports';
+import { documentationService } from '../../../services/documentation';
+import { StepMappings } from '../../shared';
 import { WizardContent } from '../template_form';
-import { StepMappings } from './step_mappings';
 
 export const StepMappingsContainer = () => {
   const { defaultValue, updateContent, getData } = Forms.useContent<WizardContent>('mappings');
@@ -17,6 +18,7 @@ export const StepMappingsContainer = () => {
       defaultValue={defaultValue}
       onChange={updateContent}
       indexSettings={getData().settings}
+      esDocsBase={documentationService.getEsDocsBase()}
     />
   );
 };

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

@@ -6,11 +6,18 @@
 import React from 'react';
 
 import { Forms } from '../../../../shared_imports';
+import { documentationService } from '../../../services/documentation';
+import { StepSettings } from '../../shared';
 import { WizardContent } from '../template_form';
-import { StepSettings } from './step_settings';
 
 export const StepSettingsContainer = React.memo(() => {
   const { defaultValue, updateContent } = Forms.useContent<WizardContent>('settings');
 
-  return <StepSettings defaultValue={defaultValue} onChange={updateContent} />;
+  return (
+    <StepSettings
+      defaultValue={defaultValue}
+      onChange={updateContent}
+      esDocsBase={documentationService.getEsDocsBase()}
+    />
+  );
 });