[7.x] [IM] Index Templates UI details view (#41602)

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

@@ -10,6 +10,7 @@ import {
   TestBed,
   TestBedConfig,
   findTestSubject,
+  nextTick,
 } from '../../../../../../test_utils';
 import { IndexManagementHome } from '../../../public/sections/home';
 import { BASE_PATH } from '../../../common/constants';
@@ -28,9 +29,12 @@ const initTestBed = registerTestBed(IndexManagementHome, testBedConfig);
 
 export interface IdxMgmtHomeTestBed extends TestBed<IdxMgmtTestSubjects> {
   actions: {
-    selectTab: (tab: 'indices' | 'index templates') => void;
+    selectHomeTab: (tab: 'indices' | 'index templates') => void;
+    selectDetailsTab: (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => void;
     clickReloadButton: () => void;
     clickTemplateActionAt: (index: number, action: 'delete') => void;
+    clickTemplateAt: (index: number) => void;
+    clickCloseDetailsButton: () => void;
   };
 }
 
@@ -41,7 +45,7 @@ export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
    * User Actions
    */
 
-  const selectTab = (tab: 'indices' | 'index templates') => {
+  const selectHomeTab = (tab: 'indices' | 'index templates') => {
     const tabs = ['indices', 'index templates'];
 
     testBed
@@ -50,6 +54,15 @@ export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
       .simulate('click');
   };
 
+  const selectDetailsTab = (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => {
+    const tabs = ['summary', 'settings', 'mappings', 'aliases'];
+
+    testBed
+      .find('templateDetails.tab')
+      .at(tabs.indexOf(tab))
+      .simulate('click');
+  };
+
   const clickReloadButton = () => {
     const { find } = testBed;
     find('reloadButton').simulate('click');
@@ -69,32 +82,67 @@ export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
     });
   };
 
+  const clickTemplateAt = async (index: number) => {
+    const { component, table, router } = testBed;
+    const { rows } = table.getMetaData('templatesTable');
+    const templateLink = findTestSubject(rows[index].reactWrapper, 'templateDetailsLink');
+
+    // @ts-ignore (remove when react 16.9.0 is released)
+    await act(async () => {
+      const { href } = templateLink.props();
+      router.navigateTo(href!);
+      await nextTick();
+      component.update();
+    });
+  };
+
+  const clickCloseDetailsButton = () => {
+    const { find } = testBed;
+
+    find('closeDetailsButton').simulate('click');
+  };
+
   return {
     ...testBed,
     actions: {
-      selectTab,
+      selectHomeTab,
+      selectDetailsTab,
       clickReloadButton,
       clickTemplateActionAt,
+      clickTemplateAt,
+      clickCloseDetailsButton,
     },
   };
 };
 
 type IdxMgmtTestSubjects = TestSubjects;
 
 export type TestSubjects =
+  | 'aliasesTab'
   | 'appTitle'
   | 'cell'
+  | 'closeDetailsButton'
   | 'deleteSystemTemplateCallOut'
   | 'deleteTemplateButton'
   | 'deleteTemplatesButton'
   | 'deleteTemplatesConfirmation'
   | 'documentationLink'
   | 'emptyPrompt'
+  | 'mappingsTab'
   | 'indicesList'
   | 'reloadButton'
   | 'row'
+  | 'sectionError'
   | 'sectionLoading'
+  | 'settingsTab'
+  | 'summaryTab'
+  | 'summaryTitle'
   | 'systemTemplatesSwitch'
   | 'tab'
+  | 'templateDetails'
+  | 'templateDetails.deleteTemplateButton'
+  | 'templateDetails.sectionLoading'
+  | 'templateDetails.tab'
+  | 'templateDetails.title'
   | 'templatesList'
   | 'templatesTable';

x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts

@@ -36,10 +36,22 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     ]);
   };
 
+  const setLoadTemplateResponse = (response?: HttpResponse, error?: any) => {
+    const status = error ? error.status || 400 : 200;
+    const body = error ? error.body : response;
+
+    server.respondWith('GET', `${API_PATH}/templates/:id`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(body),
+    ]);
+  };
+
   return {
     setLoadTemplatesResponse,
     setLoadIndicesResponse,
     setDeleteTemplateResponse,
+    setLoadTemplateResponse,
   };
 };