[Index Management] Add an index template link to data stream details (#82592)

* Add index template link to data stream details

* Fixed ILM policy link and added a check for index template name after navigation

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts

@@ -51,4 +51,5 @@ export type TestSubjects =
   | 'templateList'
   | 'templatesTab'
   | 'templateTable'
+  | 'title'
   | 'viewButton';

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

@@ -30,6 +30,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
     clickDeleteActionAt: (index: number) => void;
     clickConfirmDelete: () => void;
     clickDeleteDataStreamButton: () => void;
+    clickDetailPanelIndexTemplateLink: () => void;
   };
   findDeleteActionAt: (index: number) => ReactWrapper;
   findDeleteConfirmationModal: () => ReactWrapper;
@@ -38,6 +39,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
   findEmptyPromptIndexTemplateLink: () => ReactWrapper;
   findDetailPanelIlmPolicyLink: () => ReactWrapper;
   findDetailPanelIlmPolicyName: () => ReactWrapper;
+  findDetailPanelIndexTemplateLink: () => ReactWrapper;
 }
 
 export const setup = async (overridingDependencies: any = {}): Promise<DataStreamsTabTestBed> => {
@@ -143,6 +145,17 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     find('deleteDataStreamButton').simulate('click');
   };
 
+  const clickDetailPanelIndexTemplateLink = async () => {
+    const { component, router, find } = testBed;
+    const indexTemplateLink = find('indexTemplateLink');
+
+    await act(async () => {
+      router.navigateTo(indexTemplateLink.props().href!);
+    });
+
+    component.update();
+  };
+
   const findDetailPanel = () => {
     const { find } = testBed;
     return find('dataStreamDetailPanel');
@@ -158,6 +171,11 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     return find('ilmPolicyLink');
   };
 
+  const findDetailPanelIndexTemplateLink = () => {
+    const { find } = testBed;
+    return find('indexTemplateLink');
+  };
+
   const findDetailPanelIlmPolicyName = () => {
     const descriptionList = testBed.component.find(EuiDescriptionListDescription);
     // ilm policy is the last in the details list
@@ -176,6 +194,7 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
       clickDeleteActionAt,
       clickConfirmDelete,
       clickDeleteDataStreamButton,
+      clickDetailPanelIndexTemplateLink,
     },
     findDeleteActionAt,
     findDeleteConfirmationModal,
@@ -184,6 +203,7 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     findEmptyPromptIndexTemplateLink,
     findDetailPanelIlmPolicyLink,
     findDetailPanelIlmPolicyName,
+    findDetailPanelIndexTemplateLink,
   };
 };
 

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

@@ -8,6 +8,7 @@ import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 
 import { API_BASE_PATH } from '../../../common/constants';
+import * as fixtures from '../../../test/fixtures';
 import { setupEnvironment } from '../helpers';
 
 import {
@@ -89,6 +90,8 @@ describe('Data Streams tab', () => {
         setLoadIndicesResponse,
         setLoadDataStreamsResponse,
         setLoadDataStreamResponse,
+        setLoadTemplateResponse,
+        setLoadTemplatesResponse,
       } = httpRequestsMockHelpers;
 
       setLoadIndicesResponse([
@@ -103,6 +106,10 @@ describe('Data Streams tab', () => {
       ]);
       setLoadDataStreamResponse(dataStreamForDetailPanel);
 
+      const indexTemplate = fixtures.getTemplate({ name: 'indexTemplate' });
+      setLoadTemplatesResponse({ templates: [indexTemplate], legacyTemplates: [] });
+      setLoadTemplateResponse(indexTemplate);
+
       testBed = await setup({ history: createMemoryHistory() });
       await act(async () => {
         testBed.actions.goToDataStreamsList();
@@ -244,6 +251,26 @@ describe('Data Streams tab', () => {
           dataStreams: ['dataStream1'],
         });
       });
+
+      test('clicking index template name navigates to the index template details', async () => {
+        const {
+          actions: { clickNameAt, clickDetailPanelIndexTemplateLink },
+          findDetailPanelIndexTemplateLink,
+          component,
+          find,
+        } = testBed;
+
+        await clickNameAt(0);
+
+        const indexTemplateLink = findDetailPanelIndexTemplateLink();
+        expect(indexTemplateLink.text()).toBe('indexTemplate');
+
+        await clickDetailPanelIndexTemplateLink();
+
+        component.update();
+        expect(find('summaryTab').exists()).toBeTruthy();
+        expect(find('title').text().trim()).toBe('indexTemplate');
+      });
     });
   });
 

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx

@@ -29,9 +29,9 @@ import { useLoadDataStream } from '../../../../services/api';
 import { DeleteDataStreamConfirmationModal } from '../delete_data_stream_confirmation_modal';
 import { humanizeTimeStamp } from '../humanize_time_stamp';
 import { useUrlGenerator } from '../../../../services/use_url_generator';
+import { getIndexListUri, getTemplateDetailsLink } from '../../../../services/routing';
 import { ILM_PAGES_POLICY_EDIT, ILM_URL_GENERATOR_ID } from '../../../../constants';
 import { useAppContext } from '../../../../app_context';
-import { getIndexListUri } from '../../../../..';
 
 interface DetailsListProps {
   details: Array<{
@@ -207,7 +207,14 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
           defaultMessage:
             'The index template that configured the data stream and configures its backing indices',
         }),
-        content: indexTemplateName,
+        content: (
+          <EuiLink
+            data-test-subj={'indexTemplateLink'}
+            {...reactRouterNavigate(history, getTemplateDetailsLink(indexTemplateName))}
+          >
+            {indexTemplateName}
+          </EuiLink>
+        ),
       },
       {
         name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.ilmPolicyTitle', {
@@ -218,10 +225,7 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
         }),
         content:
           ilmPolicyName && ilmPolicyLink ? (
-            <EuiLink
-              data-test-subj={'ilmPolicyLink'}
-              {...reactRouterNavigate(history, ilmPolicyLink)}
-            >
+            <EuiLink data-test-subj={'ilmPolicyLink'} href={ilmPolicyLink}>
               {ilmPolicyName}
             </EuiLink>
           ) : (