[Index management] Prepare support Index template V2 format

src/plugins/es_ui_shared/public/request/np_ready_request.ts

@@ -43,7 +43,7 @@ export interface UseRequestResponse<D = any, E = Error> {
   isInitialRequest: boolean;
   isLoading: boolean;
   error: E | null;
-  data: D | null;
+  data?: D | null;
   sendRequest: (...args: any[]) => Promise<SendRequestResponse<D, E>>;
 }
 

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider.ts

@@ -28,9 +28,9 @@ interface Props {
 }
 
 export const FormDataProvider = React.memo(({ children, pathsToWatch }: Props) => {
-  const [formData, setFormData] = useState<FormData>({});
-  const previousRawData = useRef<FormData>({});
   const form = useFormContext();
+  const previousRawData = useRef<FormData>(form.__formData$.current.value);
+  const [formData, setFormData] = useState<FormData>(previousRawData.current);
 
   useEffect(() => {
     const subscription = form.subscribe(({ data: { raw } }) => {
@@ -41,6 +41,7 @@ export const FormDataProvider = React.memo(({ children, pathsToWatch }: Props) =
         const valuesToWatchArray = Array.isArray(pathsToWatch)
           ? (pathsToWatch as string[])
           : ([pathsToWatch] as string[]);
+
         if (valuesToWatchArray.some(value => previousRawData.current[value] !== raw[value])) {
           previousRawData.current = raw;
           setFormData(raw);

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

@@ -16,7 +16,7 @@ import {
 import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { BASE_PATH } from '../../../common/constants';
 import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
-import { Template } from '../../../common/types';
+import { TemplateDeserialized } from '../../../common';
 import { WithAppDependencies, services } from './setup_environment';
 
 const testBedConfig: TestBedConfig = {
@@ -36,10 +36,13 @@ export interface IdxMgmtHomeTestBed extends TestBed<IdxMgmtTestSubjects> {
     selectHomeTab: (tab: 'indicesTab' | 'templatesTab') => void;
     selectDetailsTab: (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => void;
     clickReloadButton: () => void;
-    clickTemplateAction: (name: Template['name'], action: 'edit' | 'clone' | 'delete') => void;
+    clickTemplateAction: (
+      name: TemplateDeserialized['name'],
+      action: 'edit' | 'clone' | 'delete'
+    ) => void;
     clickTemplateAt: (index: number) => void;
     clickCloseDetailsButton: () => void;
-    clickActionMenu: (name: Template['name']) => void;
+    clickActionMenu: (name: TemplateDeserialized['name']) => void;
   };
 }
 
@@ -78,7 +81,7 @@ export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
     find('reloadButton').simulate('click');
   };
 
-  const clickActionMenu = async (templateName: Template['name']) => {
+  const clickActionMenu = async (templateName: TemplateDeserialized['name']) => {
     const { component } = testBed;
 
     // When a table has > 2 actions, EUI displays an overflow menu with an id "<template_name>-actions"
@@ -87,7 +90,7 @@ export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
   };
 
   const clickTemplateAction = (
-    templateName: Template['name'],
+    templateName: TemplateDeserialized['name'],
     action: 'edit' | 'clone' | 'delete'
   ) => {
     const actions = ['edit', 'clone', 'delete'];

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { TestBed, SetupFunc, UnwrapPromise } from '../../../../../test_utils';
-import { Template } from '../../../common/types';
+import { TemplateDeserialized } from '../../../common';
 import { nextTick } from './index';
 
 interface MappingField {
@@ -62,8 +62,8 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
     indexPatterns,
     order,
     version,
-  }: Partial<Template> = {}) => {
-    const { form, find, component } = testBed;
+  }: Partial<TemplateDeserialized> = {}) => {
+    const { form, find, waitFor } = testBed;
 
     if (name) {
       form.setInputValue('nameField.input', name);
@@ -88,12 +88,11 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
     }
 
     clickNextButton();
-    await nextTick();
-    component.update();
+    await waitFor('stepSettings');
   };
 
   const completeStepTwo = async (settings?: string) => {
-    const { find, component } = testBed;
+    const { find, component, waitFor } = testBed;
 
     if (settings) {
       find('mockCodeEditor').simulate('change', {
@@ -104,42 +103,41 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
     }
 
     clickNextButton();
-    await nextTick();
-    component.update();
+    await waitFor('stepMappings');
   };
 
   const completeStepThree = async (mappingFields?: MappingField[]) => {
-    const { component } = testBed;
+    const { waitFor } = testBed;
 
     if (mappingFields) {
       for (const field of mappingFields) {
         const { name, type } = field;
         await addMappingField(name, type);
       }
-    } else {
-      await nextTick();
     }
 
-    await nextTick(50); // hooks updates cycles are tricky, adding some latency is needed
     clickNextButton();
-    await nextTick(50);
-    component.update();
+    await waitFor('stepAliases');
   };
 
-  const completeStepFour = async (aliases?: string) => {
-    const { find, component } = testBed;
+  const completeStepFour = async (aliases?: string, waitForNextStep = true) => {
+    const { find, component, waitFor } = testBed;
 
     if (aliases) {
       find('mockCodeEditor').simulate('change', {
         jsonString: aliases,
       }); // Using mocked EuiCodeEditor
-      await nextTick(50);
+      await nextTick();
       component.update();
     }
 
     clickNextButton();
-    await nextTick(50);
-    component.update();
+
+    if (waitForNextStep) {
+      await waitFor('summaryTab');
+    } else {
+      component.update();
+    }
   };
 
   const selectSummaryTab = (tab: 'summary' | 'request') => {

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

@@ -115,11 +115,13 @@ describe('<IndexManagementHome />', () => {
         const template1 = fixtures.getTemplate({
           name: `a${getRandomString()}`,
           indexPatterns: ['template1Pattern1*', 'template1Pattern2'],
-          settings: {
-            index: {
-              number_of_shards: '1',
-              lifecycle: {
-                name: 'my_ilm_policy',
+          template: {
+            settings: {
+              index: {
+                number_of_shards: '1',
+                lifecycle: {
+                  name: 'my_ilm_policy',
+                },
               },
             },
           },
@@ -302,7 +304,10 @@ describe('<IndexManagementHome />', () => {
 
             const templateId = rows[0].columns[2].value;
 
-            const { name: templateName } = template1;
+            const {
+              name: templateName,
+              _kbnMeta: { formatVersion },
+            } = template1;
             await actions.clickTemplateAction(templateName, 'delete');
 
             const modal = document.body.querySelector(
@@ -327,8 +332,11 @@ describe('<IndexManagementHome />', () => {
 
             const latestRequest = server.requests[server.requests.length - 1];
 
-            expect(latestRequest.method).toBe('DELETE');
-            expect(latestRequest.url).toBe(`${API_BASE_PATH}/templates/${template1.name}`);
+            expect(latestRequest.method).toBe('POST');
+            expect(latestRequest.url).toBe(`${API_BASE_PATH}/delete-templates`);
+            expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual({
+              templates: [{ name: template1.name, formatVersion }],
+            });
           });
         });
 
@@ -396,24 +404,26 @@ describe('<IndexManagementHome />', () => {
               const template = fixtures.getTemplate({
                 name: `a${getRandomString()}`,
                 indexPatterns: ['template1Pattern1*', 'template1Pattern2'],
-                settings: {
-                  index: {
-                    number_of_shards: '1',
-                  },
-                },
-                mappings: {
-                  _source: {
-                    enabled: false,
+                template: {
+                  settings: {
+                    index: {
+                      number_of_shards: '1',
+                    },
                   },
-                  properties: {
-                    created_at: {
-                      type: 'date',
-                      format: 'EEE MMM dd HH:mm:ss Z yyyy',
+                  mappings: {
+                    _source: {
+                      enabled: false,
+                    },
+                    properties: {
+                      created_at: {
+                        type: 'date',
+                        format: 'EEE MMM dd HH:mm:ss Z yyyy',
+                      },
                     },
                   },
-                },
-                aliases: {
-                  alias1: {},
+                  aliases: {
+                    alias1: {},
+                  },
                 },
               });
 

x-pack/plugins/index_management/__jest__/client_integration/template_clone.test.tsx

@@ -54,21 +54,17 @@ describe('<TemplateClone />', () => {
   const templateToClone = getTemplate({
     name: TEMPLATE_NAME,
     indexPatterns: ['indexPattern1'],
-    mappings: {
-      ...MAPPINGS,
-      _meta: {},
-      _source: {},
+    template: {
+      mappings: MAPPINGS,
     },
   });
 
   beforeEach(async () => {
     httpRequestsMockHelpers.setLoadTemplateResponse(templateToClone);
 
-    testBed = await setup();
-
     await act(async () => {
-      await nextTick();
-      testBed.component.update();
+      testBed = await setup();
+      await testBed.waitFor('templateForm');
     });
   });
 

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

@@ -6,6 +6,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
+import { DEFAULT_INDEX_TEMPLATE_VERSION_FORMAT } from '../../common';
 import { setupEnvironment, pageHelpers, nextTick } from './helpers';
 import { TemplateFormTestBed } from './helpers/template_form.helpers';
 import {
@@ -71,6 +72,7 @@ describe('<TemplateCreate />', () => {
     beforeEach(async () => {
       await act(async () => {
         testBed = await setup();
+        await testBed.waitFor('templateForm');
       });
     });
 
@@ -100,6 +102,7 @@ describe('<TemplateCreate />', () => {
     beforeEach(async () => {
       await act(async () => {
         testBed = await setup();
+        await testBed.waitFor('templateForm');
       });
     });
 
@@ -209,7 +212,7 @@ describe('<TemplateCreate />', () => {
 
         await act(async () => {
           // Complete step 4 (aliases) with invalid json
-          await actions.completeStepFour('{ invalidJsonString ');
+          await actions.completeStepFour('{ invalidJsonString ', false);
         });
 
         expect(form.getErrorsMessages()).toContain('Invalid JSON format.');
@@ -221,6 +224,7 @@ describe('<TemplateCreate />', () => {
     beforeEach(async () => {
       await act(async () => {
         testBed = await setup();
+        await testBed.waitFor('templateForm');
 
         const { actions } = testBed;
 
@@ -275,6 +279,7 @@ describe('<TemplateCreate />', () => {
     it('should render a warning message if a wildcard is used as an index pattern', async () => {
       await act(async () => {
         testBed = await setup();
+        await testBed.waitFor('templateForm');
 
         const { actions } = testBed;
         // Complete step 1 (logistics)
@@ -308,6 +313,7 @@ describe('<TemplateCreate />', () => {
 
       await act(async () => {
         testBed = await setup();
+        await testBed.waitFor('templateForm');
 
         const { actions } = testBed;
         // Complete step 1 (logistics)
@@ -323,7 +329,6 @@ describe('<TemplateCreate />', () => {
         await actions.completeStepThree(MAPPING_FIELDS);
 
         // Complete step 4 (aliases)
-        await nextTick(100);
         await actions.completeStepFour(JSON.stringify(ALIASES));
       });
     });
@@ -338,29 +343,34 @@ describe('<TemplateCreate />', () => {
 
       const latestRequest = server.requests[server.requests.length - 1];
 
-      const expected = JSON.stringify({
+      const expected = {
         isManaged: false,
         name: TEMPLATE_NAME,
         indexPatterns: DEFAULT_INDEX_PATTERNS,
-        settings: SETTINGS,
-        mappings: {
-          ...MAPPINGS,
-          properties: {
-            [BOOLEAN_MAPPING_FIELD.name]: {
-              type: BOOLEAN_MAPPING_FIELD.type,
-            },
-            [TEXT_MAPPING_FIELD.name]: {
-              type: TEXT_MAPPING_FIELD.type,
-            },
-            [KEYWORD_MAPPING_FIELD.name]: {
-              type: KEYWORD_MAPPING_FIELD.type,
+        template: {
+          settings: SETTINGS,
+          mappings: {
+            ...MAPPINGS,
+            properties: {
+              [BOOLEAN_MAPPING_FIELD.name]: {
+                type: BOOLEAN_MAPPING_FIELD.type,
+              },
+              [TEXT_MAPPING_FIELD.name]: {
+                type: TEXT_MAPPING_FIELD.type,
+              },
+              [KEYWORD_MAPPING_FIELD.name]: {
+                type: KEYWORD_MAPPING_FIELD.type,
+              },
             },
           },
+          aliases: ALIASES,
         },
-        aliases: ALIASES,
-      });
+        _kbnMeta: {
+          formatVersion: DEFAULT_INDEX_TEMPLATE_VERSION_FORMAT,
+        },
+      };
 
-      expect(JSON.parse(latestRequest.requestBody).body).toEqual(expected);
+      expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
     });
 
     it('should surface the API errors from the put HTTP request', async () => {