[Component templates] Address feedback (#70912) (#71476)

elastic · Jul 13, 2020 · 8c08c9a · 8c08c9a
1 parent 89dbe53
commit 8c08c9a
Show file tree

Hide file tree

Showing 23 changed files with 254 additions and 86 deletions.
diff --git a/x-pack/plugins/index_management/common/lib/component_template_serialization.test.ts b/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: {

diff --git a/x-pack/plugins/index_management/common/lib/component_template_serialization.ts b/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),

diff --git a/x-pack/plugins/index_management/common/lib/index.ts b/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';
diff --git a/x-pack/plugins/index_management/common/types/component_templates.ts b/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;
 }
diff --git a/...onents/component_templates/__jest__/client_integration/component_template_create.test.tsx b/...onents/component_templates/__jest__/client_integration/component_template_create.test.tsx
@@ -187,7 +187,7 @@ describe('<ComponentTemplateCreate />', () => {
             },
             aliases: ALIASES,
           },
-          _kbnMeta: { usedBy: [] },
+          _kbnMeta: { usedBy: [], isManaged: false },
         };
 
         expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);

diff --git a/...onents/component_templates/__jest__/client_integration/component_template_details.test.ts b/...onents/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 />', () => {

diff --git a/...mponents/component_templates/__jest__/client_integration/component_template_edit.test.tsx b/...mponents/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 () => {

diff --git a/...omponents/component_templates/__jest__/client_integration/component_template_list.test.ts b/...omponents/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];

diff --git a/.../components/component_templates/__jest__/client_integration/helpers/setup_environment.tsx b/.../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 = () => {

diff --git a/.../components/component_templates/component_template_details/component_template_details.tsx b/.../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>

diff --git a/...lic/application/components/component_templates/component_template_details/tab_summary.tsx b/...lic/application/components/component_templates/component_template_details/tab_summary.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
+
 import {
   EuiDescriptionList,
   EuiDescriptionListTitle,
@@ -14,15 +15,23 @@ import {
   EuiTitle,
   EuiCallOut,
   EuiSpacer,
+  EuiLink,
 } from '@elastic/eui';
 
 import { ComponentTemplateDeserialized } from '../shared_imports';
+import { useComponentTemplatesContext } from '../component_templates_context';
 
 interface Props {
   componentTemplateDetails: ComponentTemplateDeserialized;
+  showCallToAction?: boolean;
 }
 
-export const TabSummary: React.FunctionComponent<Props> = ({ componentTemplateDetails }) => {
+export const TabSummary: React.FunctionComponent<Props> = ({
+  componentTemplateDetails,
+  showCallToAction,
+}) => {
+  const { getUrlForApp } = useComponentTemplatesContext();
+
   const { version, _meta, _kbnMeta } = componentTemplateDetails;
 
   const { usedBy } = _kbnMeta;
@@ -43,7 +52,42 @@ export const TabSummary: React.FunctionComponent<Props> = ({ componentTemplateDe
             iconType="pin"
             data-test-subj="notInUseCallout"
             size="s"
-          />
+          >
+            {showCallToAction && (
+              <p>
+                <FormattedMessage
+                  id="xpack.idxMgmt.componentTemplateDetails.summaryTab.notInUseDescription"
+                  defaultMessage="{createLink} an index template or {editLink} an existing one."
+                  values={{
+                    createLink: (
+                      <EuiLink
+                        href={getUrlForApp('management', {
+                          path: '/data/index_management/create_template',
+                        })}
+                      >
+                        <FormattedMessage
+                          id="xpack.idxMgmt.componentTemplateDetails.summaryTab.createTemplateLink"
+                          defaultMessage="Create"
+                        />
+                      </EuiLink>
+                    ),
+                    editLink: (
+                      <EuiLink
+                        href={getUrlForApp('management', {
+                          path: '/data/index_management/templates',
+                        })}
+                      >
+                        <FormattedMessage
+                          id="xpack.idxMgmt.componentTemplateDetails.summaryTab.updateTemplateLink"
+                          defaultMessage="update"
+                        />
+                      </EuiLink>
+                    ),
+                  }}
+                />
+              </p>
+            )}
+          </EuiCallOut>
           <EuiSpacer />
         </>
       )}

diff --git a/...cation/components/component_templates/component_template_list/component_template_list.tsx b/...cation/components/component_templates/component_template_list/component_template_list.tsx
@@ -9,6 +9,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ScopedHistory } from 'kibana/public';
+import { EuiLink, EuiText, EuiSpacer } from '@elastic/eui';
 
 import { SectionLoading, ComponentTemplateDeserialized } from '../shared_imports';
 import { UIM_COMPONENT_TEMPLATE_LIST_LOAD } from '../constants';
@@ -29,7 +30,7 @@ export const ComponentTemplateList: React.FunctionComponent<Props> = ({
   componentTemplateName,
   history,
 }) => {
-  const { api, trackMetric } = useComponentTemplatesContext();
+  const { api, trackMetric, documentation } = useComponentTemplatesContext();
 
   const { data, isLoading, error, sendRequest } = api.useLoadComponentTemplates();
 
@@ -65,20 +66,40 @@ export const ComponentTemplateList: React.FunctionComponent<Props> = ({
       <SectionLoading data-test-subj="sectionLoading">
         <FormattedMessage
           id="xpack.idxMgmt.home.componentTemplates.list.loadingMessage"
-          defaultMessage="Loading component templates..."
+          defaultMessage="Loading component templates…"
         />
       </SectionLoading>
     );
   } else if (data?.length) {
     content = (
-      <ComponentTable
-        componentTemplates={data}
-        onReloadClick={sendRequest}
-        onDeleteClick={setComponentTemplatesToDelete}
-        onEditClick={goToEditComponentTemplate}
-        onCloneClick={goToCloneComponentTemplate}
-        history={history as ScopedHistory}
-      />
+      <>
+        <EuiText color="subdued">
+          <FormattedMessage
+            id="xpack.idxMgmt.home.componentTemplates.list.componentTemplatesDescription"
+            defaultMessage="Use component templates to reuse settings, mappings, and aliases configurations in multiple index templates. {learnMoreLink}"
+            values={{
+              learnMoreLink: (
+                <EuiLink href={documentation.componentTemplates} target="_blank" external>
+                  {i18n.translate('xpack.idxMgmt.componentTemplates.list.learnMoreLinkText', {
+                    defaultMessage: 'Learn more.',
+                  })}
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+
+        <EuiSpacer />
+
+        <ComponentTable
+          componentTemplates={data}
+          onReloadClick={sendRequest}
+          onDeleteClick={setComponentTemplatesToDelete}
+          onEditClick={goToEditComponentTemplate}
+          onCloneClick={goToCloneComponentTemplate}
+          history={history as ScopedHistory}
+        />
+      </>
     );
   } else if (data && data.length === 0) {
     content = <EmptyPrompt history={history} />;
@@ -111,6 +132,7 @@ export const ComponentTemplateList: React.FunctionComponent<Props> = ({
         <ComponentTemplateDetailsFlyout
           onClose={goToComponentTemplateList}
           componentTemplateName={componentTemplateName}
+          showSummaryCallToAction={true}
           actions={[
             {
               name: i18n.translate('xpack.idxMgmt.componentTemplateDetails.editButtonLabel', {

diff --git a/...ublic/application/components/component_templates/component_template_list/empty_prompt.tsx b/...ublic/application/components/component_templates/component_template_list/empty_prompt.tsx
@@ -9,7 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { RouteComponentProps } from 'react-router-dom';
 import { EuiEmptyPrompt, EuiLink, EuiButton } from '@elastic/eui';
 
-import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
+import { reactRouterNavigate } from '../shared_imports';
 import { useComponentTemplatesContext } from '../component_templates_context';
 
 interface Props {
@@ -34,12 +34,12 @@ export const EmptyPrompt: FunctionComponent<Props> = ({ history }) => {
         <p>
           <FormattedMessage
             id="xpack.idxMgmt.home.componentTemplates.emptyPromptDescription"
-            defaultMessage="For example, you might create a component template that defines index settings that can be reused across index templates."
+            defaultMessage="For example, you can create a component template for index settings that can be reused across index templates."
           />
           <br />
           <EuiLink href={documentation.componentTemplates} target="_blank" external>
             {i18n.translate('xpack.idxMgmt.home.componentTemplates.emptyPromptDocumentionLink', {
-              defaultMessage: 'Learn more',
+              defaultMessage: 'Learn more.',
             })}
           </EuiLink>
         </p>