[Composable template] Demo and PR review fixes

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/component_template_selector/component_templates.tsx

@@ -48,7 +48,7 @@ const i18nTexts = {
   searchBoxPlaceholder: i18n.translate(
     'xpack.idxMgmt.componentTemplatesSelector.searchBox.placeholder',
     {
-      defaultMessage: 'Search components',
+      defaultMessage: 'Search component templates',
     }
   ),
 };
@@ -78,24 +78,33 @@ export const ComponentTemplates = ({ isLoading, components, listItemProps }: Pro
       return [];
     }
 
-    return components.filter((component) => {
-      if (filters.settings.checked === 'on' && !component.hasSettings) {
-        return false;
-      }
-      if (filters.mappings.checked === 'on' && !component.hasMappings) {
-        return false;
-      }
-      if (filters.aliases.checked === 'on' && !component.hasAliases) {
-        return false;
-      }
-
-      if (searchValue.trim() === '') {
-        return true;
-      }
-
-      const match = fuzzyMatch(searchValue, component.name);
-      return match;
-    });
+    return components
+      .filter((component) => {
+        if (filters.settings.checked === 'on' && !component.hasSettings) {
+          return false;
+        }
+        if (filters.mappings.checked === 'on' && !component.hasMappings) {
+          return false;
+        }
+        if (filters.aliases.checked === 'on' && !component.hasAliases) {
+          return false;
+        }
+
+        if (searchValue.trim() === '') {
+          return true;
+        }
+
+        const match = fuzzyMatch(searchValue, component.name);
+        return match;
+      })
+      .sort((a, b) => {
+        if (a.name < b.name) {
+          return -1;
+        } else if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      });
   }, [isLoading, components, searchValue, filters]);
 
   const isSearchResultEmpty = filteredComponents.length === 0 && components.length > 0;

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx

@@ -96,7 +96,7 @@ export const ComponentTemplatesSelector = ({
     <SectionLoading>
       <FormattedMessage
         id="xpack.idxMgmt.componentTemplatesSelector.loadingComponentsDescription"
-        defaultMessage="Loading components…"
+        defaultMessage="Loading component templates…"
       />
     </SectionLoading>
   );
@@ -163,7 +163,7 @@ export const ComponentTemplatesSelector = ({
           <div>
             <FormattedMessage
               id="xpack.idxMgmt.componentTemplatesSelector.noComponentSelectedLabel"
-              defaultMessage="No component selected."
+              defaultMessage="No component template selected."
             />
           </div>
         )}

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics.tsx

@@ -200,7 +200,7 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
             </>
           }
         >
-          {isMetaVisible ? (
+          {isMetaVisible && (
             <UseField
               path="_meta"
               component={JsonEditorField}
@@ -211,16 +211,12 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
                   'aria-label': i18n.translate(
                     'xpack.idxMgmt.componentTemplateForm.stepLogistics.metaAriaLabel',
                     {
-                      defaultMessage: 'Metadata JSON editor',
+                      defaultMessage: '_meta field data editor',
                     }
                   ),
                 },
               }}
             />
-          ) : (
-            // <FormRow/> requires children or a field
-            // For now, we return an empty <div> if the editor is not visible
-            <div />
           )}
         </FormRow>
       </Form>

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics_schema.tsx

@@ -65,7 +65,7 @@ export const logisticsFormSchema: FormSchema = {
   },
   _meta: {
     label: i18n.translate('xpack.idxMgmt.componentTemplateForm.stepLogistics.metaFieldLabel', {
-      defaultMessage: 'Metadata (optional)',
+      defaultMessage: '_meta field data (optional)',
     }),
     helpText: (
       <FormattedMessage