[Component templates] Address feedback (#70912)

Author: alisonelizabeth

x-pack/plugins/index_management/common/lib/component_template_serialization.test.ts

@@ -92,6 +92,7 @@ describe('Component template serialization', () => {
         },
         _kbnMeta: {
           usedBy: ['my_index_template'],
+          isManaged: false,
         },
       });
     });
@@ -105,6 +106,7 @@ describe('Component template serialization', () => {
           version: 1,
           _kbnMeta: {
             usedBy: [],
+            isManaged: false,
           },
           _meta: {
             serialization: {

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

@@ -60,24 +60,26 @@ export function deserializeComponentTemplate(
     _meta,
     _kbnMeta: {
       usedBy: indexTemplatesToUsedBy[name] || [],
+      isManaged: Boolean(_meta?.managed === true),
     },
   };
 
   return deserializedComponentTemplate;
 }
 
-export function deserializeComponenTemplateList(
+export function deserializeComponentTemplateList(
   componentTemplateEs: ComponentTemplateFromEs,
   indexTemplatesEs: TemplateFromEs[]
 ) {
   const { name, component_template: componentTemplate } = componentTemplateEs;
-  const { template } = componentTemplate;
+  const { template, _meta } = componentTemplate;
 
   const indexTemplatesToUsedBy = getIndexTemplatesToUsedBy(indexTemplatesEs);
 
   const componentTemplateListItem: ComponentTemplateListItem = {
     name,
     usedBy: indexTemplatesToUsedBy[name] || [],
+    isManaged: Boolean(_meta?.managed === true),
     hasSettings: hasEntries(template.settings),
     hasMappings: hasEntries(template.mappings),
     hasAliases: hasEntries(template.aliases),

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

@@ -19,6 +19,6 @@ export { getTemplateParameter } from './utils';
 
 export {
   deserializeComponentTemplate,
-  deserializeComponenTemplateList,
+  deserializeComponentTemplateList,
   serializeComponentTemplate,
 } from './component_template_serialization';

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

@@ -22,6 +22,7 @@ export interface ComponentTemplateDeserialized extends ComponentTemplateSerializ
   name: string;
   _kbnMeta: {
     usedBy: string[];
+    isManaged: boolean;
   };
 }
 
@@ -36,4 +37,5 @@ export interface ComponentTemplateListItem {
   hasMappings: boolean;
   hasAliases: boolean;
   hasSettings: boolean;
+  isManaged: boolean;
 }

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

@@ -185,7 +185,7 @@ describe('<ComponentTemplateCreate />', () => {
             },
             aliases: ALIASES,
           },
-          _kbnMeta: { usedBy: [] },
+          _kbnMeta: { usedBy: [], isManaged: false },
         };
 
         expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_details.test.ts

@@ -26,13 +26,13 @@ const COMPONENT_TEMPLATE: ComponentTemplateDeserialized = {
   },
   version: 1,
   _meta: { description: 'component template test' },
-  _kbnMeta: { usedBy: ['template_1'] },
+  _kbnMeta: { usedBy: ['template_1'], isManaged: false },
 };
 
 const COMPONENT_TEMPLATE_ONLY_REQUIRED_FIELDS: ComponentTemplateDeserialized = {
   name: 'comp-base',
   template: {},
-  _kbnMeta: { usedBy: [] },
+  _kbnMeta: { usedBy: [], isManaged: false },
 };
 
 describe('<ComponentTemplateDetails />', () => {

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

@@ -52,7 +52,7 @@ describe('<ComponentTemplateEdit />', () => {
     template: {
       settings: { number_of_shards: 1 },
     },
-    _kbnMeta: { usedBy: [] },
+    _kbnMeta: { usedBy: [], isManaged: false },
   };
 
   beforeEach(async () => {

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_list.test.ts

@@ -42,6 +42,7 @@ describe('<ComponentTemplateList />', () => {
       hasAliases: true,
       hasSettings: true,
       usedBy: [],
+      isManaged: false,
     };
 
     const componentTemplate2: ComponentTemplateListItem = {
@@ -50,6 +51,7 @@ describe('<ComponentTemplateList />', () => {
       hasAliases: true,
       hasSettings: true,
       usedBy: ['test_index_template_1'],
+      isManaged: false,
     };
 
     const componentTemplates = [componentTemplate1, componentTemplate2];

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/setup_environment.tsx

@@ -12,6 +12,7 @@ import { HttpSetup } from 'kibana/public';
 import {
   notificationServiceMock,
   docLinksServiceMock,
+  applicationServiceMock,
 } from '../../../../../../../../../../src/core/public/mocks';
 
 import { ComponentTemplatesProvider } from '../../../component_templates_context';
@@ -28,6 +29,7 @@ const appDependencies = {
   docLinks: docLinksServiceMock.createStartContract(),
   toasts: notificationServiceMock.createSetupContract().toasts,
   setBreadcrumbs: () => {},
+  getUrlForApp: applicationServiceMock.createStartContract().getUrlForApp,
 };
 
 export const setupEnvironment = () => {

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

@@ -6,6 +6,7 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
+
 import {
   EuiFlyout,
   EuiFlyoutHeader,
@@ -17,6 +18,7 @@ import {
   EuiButtonEmpty,
   EuiSpacer,
   EuiCallOut,
+  EuiBadge,
 } from '@elastic/eui';
 
 import { SectionLoading, TabSettings, TabAliases, TabMappings } from '../shared_imports';
@@ -29,14 +31,15 @@ import { attemptToDecodeURI } from '../lib';
 interface Props {
   componentTemplateName: string;
   onClose: () => void;
-  showFooter?: boolean;
   actions?: ManageAction[];
+  showSummaryCallToAction?: boolean;
 }
 
 export const ComponentTemplateDetailsFlyout: React.FunctionComponent<Props> = ({
   componentTemplateName,
   onClose,
   actions,
+  showSummaryCallToAction,
 }) => {
   const { api } = useComponentTemplatesContext();
 
@@ -81,7 +84,12 @@ export const ComponentTemplateDetailsFlyout: React.FunctionComponent<Props> = ({
     } = componentTemplateDetails;
 
     const tabToComponentMap: Record<TabType, React.ReactNode> = {
-      summary: <TabSummary componentTemplateDetails={componentTemplateDetails} />,
+      summary: (
+        <TabSummary
+          componentTemplateDetails={componentTemplateDetails}
+          showCallToAction={showSummaryCallToAction}
+        />
+      ),
       settings: <TabSettings settings={settings} />,
       mappings: <TabMappings mappings={mappings} />,
       aliases: <TabAliases aliases={aliases} />,
@@ -109,11 +117,27 @@ export const ComponentTemplateDetailsFlyout: React.FunctionComponent<Props> = ({
       maxWidth={500}
     >
       <EuiFlyoutHeader>
-        <EuiTitle size="m">
-          <h2 id="componentTemplateDetailsFlyoutTitle" data-test-subj="title">
-            {decodedComponentTemplateName}
-          </h2>
-        </EuiTitle>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="m">
+              <h2 id="componentTemplateDetailsFlyoutTitle" data-test-subj="title">
+                {decodedComponentTemplateName}
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+
+          {componentTemplateDetails?._kbnMeta.isManaged ? (
+            <EuiFlexItem grow={false}>
+              {' '}
+              <EuiBadge color="hollow">
+                <FormattedMessage
+                  id="xpack.idxMgmt.componentTemplateDetails.managedBadgeLabel"
+                  defaultMessage="Managed"
+                />
+              </EuiBadge>
+            </EuiFlexItem>
+          ) : null}
+        </EuiFlexGroup>
       </EuiFlyoutHeader>
 
       <EuiFlyoutBody data-test-subj="content">{content}</EuiFlyoutBody>