[Index Template] Fix previewing data streams in template editor

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx

@@ -588,4 +588,33 @@ describe('<TemplateCreate />', () => {
       expect(find('saveTemplateError').text()).toContain(error.message);
     });
   });
+
+  test('preview data stream', async () => {
+    await act(async () => {
+      testBed = await setup(httpSetup);
+    });
+    testBed.component.update();
+
+    const { actions } = testBed;
+    // Logistics
+    await actions.completeStepOne({
+      name: TEMPLATE_NAME,
+      indexPatterns: DEFAULT_INDEX_PATTERNS,
+      dataStream: {},
+    });
+
+    await act(async () => {
+      await actions.previewTemplate();
+    });
+
+    expect(httpSetup.post).toHaveBeenLastCalledWith(
+      `${API_BASE_PATH}/index_templates/simulate`,
+      expect.objectContaining({
+        body: JSON.stringify({
+          index_patterns: DEFAULT_INDEX_PATTERNS,
+          data_stream: {},
+        }),
+      })
+    );
+  });
 });

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_form.helpers.ts

@@ -137,6 +137,7 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
     order,
     priority,
     version,
+    dataStream,
   }: Partial<TemplateDeserialized> = {}) => {
     const { component, form, find } = testBed;
 
@@ -162,6 +163,10 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
         form.setInputValue('orderField.input', JSON.stringify(order));
       }
 
+      if (dataStream) {
+        form.toggleEuiSwitch('dataStreamField.input');
+      }
+
       if (priority) {
         form.setInputValue('priorityField.input', JSON.stringify(priority));
       }
@@ -255,6 +260,10 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
     component.update();
   };
 
+  const previewTemplate = async () => {
+    testBed.find('previewIndexTemplate').simulate('click');
+  };
+
   return {
     ...testBed,
     actions: {
@@ -272,6 +281,7 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
       componentTemplates,
       mappings,
       review,
+      previewTemplate,
     },
   };
 };
@@ -317,6 +327,7 @@ export type TestSubjects =
   | 'orderField'
   | 'orderField.input'
   | 'priorityField.input'
+  | 'dataStreamField.input'
   | 'pageTitle'
   | 'previewTab'
   | 'removeFieldButton'
@@ -341,4 +352,5 @@ export type TestSubjects =
   | 'settingsEditor'
   | 'versionField.input'
   | 'mappingsEditor.formTab'
-  | 'mappingsEditor.advancedConfiguration.sizeEnabledToggle';
+  | 'mappingsEditor.advancedConfiguration.sizeEnabledToggle'
+  | 'previewIndexTemplate';

x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template.tsx

@@ -35,7 +35,9 @@ export const SimulateTemplate = React.memo(({ template, filters }: Props) => {
       return;
     }
 
-    const indexTemplate = serializeTemplate(stripEmptyFields(template) as TemplateDeserialized);
+    const indexTemplate = serializeTemplate(
+      stripEmptyFields(template, { types: ['string'] }) as TemplateDeserialized
+    );
     const { data, error } = await simulateIndexTemplate(indexTemplate);
     let filteredTemplate = data;
 

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

@@ -277,7 +277,7 @@ export const TemplateForm = ({
     }
 
     return (
-      <EuiButton size="s" onClick={showPreviewFlyout}>
+      <EuiButton size="s" onClick={showPreviewFlyout} data-test-subj="previewIndexTemplate">
         <FormattedMessage
           id="xpack.idxMgmt.templateForm.previewIndexTemplateButtonLabel"
           defaultMessage="Preview index template"