[Composable template] Demo and PR review fixes (#71065)

Author: sebelga

src/plugins/es_ui_shared/static/forms/components/form_row.tsx

@@ -57,13 +57,9 @@ export const FormRow = ({
     titleWrapped = title;
   }
 
-  if (!children && !field) {
-    throw new Error('You need to provide either children or a field to the FormRow');
-  }
-
   return (
     <EuiDescribedFormGroup title={titleWrapped} description={description} fullWidth>
-      {children ? children : <Field field={field!} {...rest} />}
+      {children ? children : field ? <Field field={field!} {...rest} /> : null}
     </EuiDescribedFormGroup>
   );
 };

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

@@ -95,9 +95,9 @@ const createActions = (testBed: TestBed<TestSubjects>) => {
     find('closeDetailsButton').simulate('click');
   };
 
-  const toggleViewItem = (view: 'composable' | 'system') => {
+  const toggleViewItem = (view: 'managed' | 'cloudManaged' | 'system') => {
     const { find, component } = testBed;
-    const views = ['composable', 'system'];
+    const views = ['managed', 'cloudManaged', 'system'];
 
     // First open the pop over
     act(() => {

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

@@ -63,7 +63,6 @@ describe('Index Templates tab', () => {
         },
       },
     });
-    (template1 as any).hasSettings = true;
 
     const template2 = fixtures.getTemplate({
       name: `b${getRandomString()}`,
@@ -73,6 +72,7 @@ describe('Index Templates tab', () => {
     const template3 = fixtures.getTemplate({
       name: `.c${getRandomString()}`, // mock system template
       indexPatterns: ['template3Pattern1*', 'template3Pattern2', 'template3Pattern3'],
+      type: 'system',
     });
 
     const template4 = fixtures.getTemplate({
@@ -101,6 +101,7 @@ describe('Index Templates tab', () => {
       name: `.c${getRandomString()}`, // mock system template
       indexPatterns: ['template6Pattern1*', 'template6Pattern2', 'template6Pattern3'],
       isLegacy: true,
+      type: 'system',
     });
 
     const templates = [template1, template2, template3];
@@ -124,44 +125,49 @@ describe('Index Templates tab', () => {
       // Test composable table content
       tableCellsValues.forEach((row, i) => {
         const indexTemplate = templates[i];
-        const { name, indexPatterns, priority, ilmPolicy, composedOf, template } = indexTemplate;
+        const { name, indexPatterns, ilmPolicy, composedOf, template } = indexTemplate;
 
         const hasContent = !!template.settings || !!template.mappings || !!template.aliases;
         const ilmPolicyName = ilmPolicy && ilmPolicy.name ? ilmPolicy.name : '';
         const composedOfString = composedOf ? composedOf.join(',') : '';
-        const priorityFormatted = priority ? priority.toString() : '';
-
-        expect(removeWhiteSpaceOnArrayValues(row)).toEqual([
-          '', // Checkbox to select row
-          name,
-          indexPatterns.join(', '),
-          ilmPolicyName,
-          composedOfString,
-          priorityFormatted,
-          hasContent ? 'M S A' : 'None', // M S A -> Mappings Settings Aliases badges
-          '', // Column of actions
-        ]);
+
+        try {
+          expect(removeWhiteSpaceOnArrayValues(row)).toEqual([
+            '', // Checkbox to select row
+            name,
+            indexPatterns.join(', '),
+            ilmPolicyName,
+            composedOfString,
+            hasContent ? 'M S A' : 'None', // M S A -> Mappings Settings Aliases badges
+            '', // Column of actions
+          ]);
+        } catch (e) {
+          console.error(`Error in index template at row ${i}`); // eslint-disable-line no-console
+          throw e;
+        }
       });
 
       // Test legacy table content
       legacyTableCellsValues.forEach((row, i) => {
-        const template = legacyTemplates[i];
-        const { name, indexPatterns, order, ilmPolicy } = template;
+        const legacyIndexTemplate = legacyTemplates[i];
+        const { name, indexPatterns, ilmPolicy, template } = legacyIndexTemplate;
 
+        const hasContent = !!template.settings || !!template.mappings || !!template.aliases;
         const ilmPolicyName = ilmPolicy && ilmPolicy.name ? ilmPolicy.name : '';
-        const orderFormatted = order ? order.toString() : order;
-
-        expect(removeWhiteSpaceOnArrayValues(row)).toEqual([
-          '',
-          name,
-          indexPatterns.join(', '),
-          ilmPolicyName,
-          orderFormatted,
-          '',
-          '',
-          '',
-          '',
-        ]);
+
+        try {
+          expect(removeWhiteSpaceOnArrayValues(row)).toEqual([
+            '',
+            name,
+            indexPatterns.join(', '),
+            ilmPolicyName,
+            hasContent ? 'M S A' : 'None', // M S A -> Mappings Settings Aliases badges
+            '', // Column of actions
+          ]);
+        } catch (e) {
+          console.error(`Error in legacy template at row ${i}`); // eslint-disable-line no-console
+          throw e;
+        }
       });
     });
 
@@ -211,7 +217,7 @@ describe('Index Templates tab', () => {
       await actions.clickTemplateAt(0);
       expect(exists('templateList')).toBe(true);
       expect(exists('templateDetails')).toBe(true);
-      expect(find('templateDetails.title').text()).toBe(templates[0].name);
+      expect(find('templateDetails.title').text().trim()).toBe(templates[0].name);
 
       // Close flyout
       await act(async () => {
@@ -223,7 +229,7 @@ describe('Index Templates tab', () => {
 
       expect(exists('templateList')).toBe(true);
       expect(exists('templateDetails')).toBe(true);
-      expect(find('templateDetails.title').text()).toBe(legacyTemplates[0].name);
+      expect(find('templateDetails.title').text().trim()).toBe(legacyTemplates[0].name);
     });
 
     describe('table row actions', () => {
@@ -460,7 +466,7 @@ describe('Index Templates tab', () => {
           const { find } = testBed;
           const [{ name }] = templates;
 
-          expect(find('templateDetails.title').text()).toEqual(name);
+          expect(find('templateDetails.title').text().trim()).toEqual(name);
         });
 
         it('should have a close button and be able to close flyout', async () => {

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

@@ -368,8 +368,8 @@ describe.skip('<TemplateCreate />', () => {
           aliases: ALIASES,
         },
         _kbnMeta: {
+          type: 'default',
           isLegacy: false,
-          isManaged: false,
         },
       };
 

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

@@ -213,7 +213,7 @@ describe.skip('<TemplateEdit />', () => {
             aliases: ALIASES,
           },
           _kbnMeta: {
-            isManaged: false,
+            type: 'default',
             isLegacy: templateToEdit._kbnMeta.isLegacy,
           },
         };

x-pack/plugins/index_management/common/lib/template_serialization.ts

@@ -8,18 +8,28 @@ import {
   LegacyTemplateSerialized,
   TemplateSerialized,
   TemplateListItem,
+  TemplateType,
 } from '../types';
 
 const hasEntries = (data: object = {}) => Object.entries(data).length > 0;
 
 export function serializeTemplate(templateDeserialized: TemplateDeserialized): TemplateSerialized {
-  const { version, priority, indexPatterns, template, composedOf, _meta } = templateDeserialized;
+  const {
+    version,
+    priority,
+    indexPatterns,
+    template,
+    composedOf,
+    dataStream,
+    _meta,
+  } = templateDeserialized;
 
   return {
     version,
     priority,
     template,
     index_patterns: indexPatterns,
+    data_stream: dataStream,
     composed_of: composedOf,
     _meta,
   };
@@ -41,6 +51,15 @@ export function deserializeTemplate(
   } = templateEs;
   const { settings } = template;
 
+  let type: TemplateType = 'default';
+  if (Boolean(cloudManagedTemplatePrefix && name.startsWith(cloudManagedTemplatePrefix))) {
+    type = 'cloudManaged';
+  } else if (name.startsWith('.')) {
+    type = 'system';
+  } else if (Boolean(_meta?.managed === true)) {
+    type = 'managed';
+  }
+
   const deserializedTemplate: TemplateDeserialized = {
     name,
     version,
@@ -52,10 +71,7 @@ export function deserializeTemplate(
     dataStream,
     _meta,
     _kbnMeta: {
-      isManaged: Boolean(_meta?.managed === true),
-      isCloudManaged: Boolean(
-        cloudManagedTemplatePrefix && name.startsWith(cloudManagedTemplatePrefix)
-      ),
+      type,
       hasDatastream: Boolean(dataStream),
     },
   };

x-pack/plugins/index_management/common/lib/utils.ts

@@ -23,5 +23,5 @@ export const getTemplateParameter = (
 ) => {
   return isLegacyTemplate(template)
     ? (template as LegacyTemplateSerialized)[setting]
-    : (template as TemplateSerialized).template[setting];
+    : (template as TemplateSerialized).template?.[setting];
 };

x-pack/plugins/index_management/common/types/templates.ts

@@ -38,23 +38,24 @@ export interface TemplateDeserialized {
     aliases?: Aliases;
     mappings?: Mappings;
   };
-  composedOf?: string[]; // Used on composable index template
+  composedOf?: string[]; // Composable template only
   version?: number;
-  priority?: number;
-  order?: number; // Used on legacy index template
+  priority?: number; // Composable template only
+  order?: number; // Legacy template only
   ilmPolicy?: {
     name: string;
   };
-  _meta?: { [key: string]: any };
-  dataStream?: { timestamp_field: string };
+  _meta?: { [key: string]: any }; // Composable template only
+  dataStream?: { timestamp_field: string }; // Composable template only
   _kbnMeta: {
-    isManaged: boolean;
-    isCloudManaged: boolean;
+    type: TemplateType;
     hasDatastream: boolean;
     isLegacy?: boolean;
   };
 }
 
+export type TemplateType = 'default' | 'managed' | 'cloudManaged' | 'system';
+
 export interface TemplateFromEs {
   name: string;
   index_template: TemplateSerialized;
@@ -78,8 +79,7 @@ export interface TemplateListItem {
     name: string;
   };
   _kbnMeta: {
-    isManaged: boolean;
-    isCloudManaged: boolean;
+    type: TemplateType;
     hasDatastream: boolean;
     isLegacy?: boolean;
   };

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_create.test.tsx

@@ -177,8 +177,6 @@ describe('<ComponentTemplateCreate />', () => {
           template: {
             settings: SETTINGS,
             mappings: {
-              _source: {},
-              _meta: {},
               properties: {
                 [BOOLEAN_MAPPING_FIELD.name]: {
                   type: BOOLEAN_MAPPING_FIELD.type,

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_edit.test.tsx

@@ -109,11 +109,6 @@ describe('<ComponentTemplateEdit />', () => {
         ...COMPONENT_TEMPLATE_TO_EDIT,
         template: {
           ...COMPONENT_TEMPLATE_TO_EDIT.template,
-          mappings: {
-            _meta: {},
-            _source: {},
-            properties: {},
-          },
         },
       };