Add component integration tests for cross-linking between Indices and…

… Data Streams tabs. Fix TS error with API integration test.

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

@@ -9,23 +9,27 @@ export type TestSubjects =
   | 'appTitle'
   | 'cell'
   | 'closeDetailsButton'
-  | 'createTemplateButton'
   | 'createLegacyTemplateButton'
+  | 'createTemplateButton'
+  | 'dataStreamTable'
   | 'dataStreamTable'
   | 'deleteSystemTemplateCallOut'
   | 'deleteTemplateButton'
   | 'deleteTemplatesConfirmation'
   | 'documentationLink'
   | 'emptyPrompt'
+  | 'filterList.filterItem'
+  | 'indexTable'
+  | 'indexTableIncludeHiddenIndicesToggle'
+  | 'indexTableIndexNameLink'
+  | 'indicesList'
+  | 'indicesTab'
+  | 'legacyTemplateTable'
   | 'manageTemplateButton'
   | 'mappingsTab'
   | 'noAliasesCallout'
   | 'noMappingsCallout'
   | 'noSettingsCallout'
-  | 'indicesList'
-  | 'indicesTab'
-  | 'indexTableIncludeHiddenIndicesToggle'
-  | 'indexTableIndexNameLink'
   | 'reloadButton'
   | 'reloadIndicesButton'
   | 'row'
@@ -41,8 +45,6 @@ export type TestSubjects =
   | 'templateDetails.tab'
   | 'templateDetails.title'
   | 'templateList'
-  | 'templateTable'
   | 'templatesTab'
-  | 'legacyTemplateTable'
-  | 'viewButton'
-  | 'filterList.filterItem';
+  | 'templateTable'
+  | 'viewButton';

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

@@ -4,10 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { registerTestBed, TestBed, TestBedConfig } from '../../../../../test_utils';
+import { act } from 'react-dom/test-utils';
+
+import {
+  registerTestBed,
+  TestBed,
+  TestBedConfig,
+  findTestSubject,
+} from '../../../../../test_utils';
 import { DataStream } from '../../../common';
-// NOTE: We have to use the Home component instead of the DataStreamList component because we depend
-// upon react router to provide the name of the template to load in the detail panel.
 import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { WithAppDependencies, services, TestSubjects } from '../helpers';
@@ -27,6 +32,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
   actions: {
     goToDataStreamsList: () => void;
     clickReloadButton: () => void;
+    clickIndicesAt: (index: number) => void;
   };
 }
 
@@ -46,11 +52,24 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     find('reloadButton').simulate('click');
   };
 
+  const clickIndicesAt = async (index: number) => {
+    const { component, table, router } = testBed;
+    const { rows } = table.getMetaData('dataStreamTable');
+    const indicesLink = findTestSubject(rows[index].reactWrapper, 'indicesLink');
+
+    await act(async () => {
+      router.navigateTo(indicesLink.props().href!);
+    });
+
+    component.update();
+  };
+
   return {
     ...testBed,
     actions: {
       goToDataStreamsList,
       clickReloadButton,
+      clickIndicesAt,
     },
   };
 };

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

@@ -20,7 +20,31 @@ describe('Data Streams tab', () => {
   });
 
   beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadIndicesResponse([]);
+    httpRequestsMockHelpers.setLoadIndicesResponse([
+      {
+        health: '',
+        status: '',
+        primary: '',
+        replica: '',
+        documents: '',
+        documents_deleted: '',
+        size: '',
+        primary_size: '',
+        name: 'data-stream-index',
+        data_stream: 'dataStream1',
+      },
+      {
+        health: 'green',
+        status: 'open',
+        primary: 1,
+        replica: 1,
+        documents: 10000,
+        documents_deleted: 100,
+        size: '156kb',
+        primary_size: '156kb',
+        name: 'non-data-stream-index',
+      },
+    ]);
 
     await act(async () => {
       testBed = await setup();
@@ -40,7 +64,7 @@ describe('Data Streams tab', () => {
       component.update();
     });
 
-    test('should display an empty prompt', async () => {
+    test('displays an empty prompt', async () => {
       const { exists } = testBed;
 
       expect(exists('sectionLoading')).toBe(false);
@@ -64,7 +88,7 @@ describe('Data Streams tab', () => {
       component.update();
     });
 
-    test('should list them in the table', async () => {
+    test('lists them in the table', async () => {
       const { table } = testBed;
 
       const { tableCellsValues } = table.getMetaData('dataStreamTable');
@@ -75,7 +99,7 @@ describe('Data Streams tab', () => {
       ]);
     });
 
-    test('should have a button to reload the data streams', async () => {
+    test('has a button to reload the data streams', async () => {
       const { exists, actions } = testBed;
       const totalRequests = server.requests.length;
 
@@ -88,5 +112,15 @@ describe('Data Streams tab', () => {
       expect(server.requests.length).toBe(totalRequests + 1);
       expect(server.requests[server.requests.length - 1].url).toBe(`${API_BASE_PATH}/data_streams`);
     });
+
+    test('clicking the indices count navigates to the backing indices', async () => {
+      const { table, actions } = testBed;
+
+      await actions.clickIndicesAt(0);
+
+      expect(table.getMetaData('indexTable').tableCellsValues).toEqual([
+        ['', '', '', '', '', '', '', 'dataStream1'],
+      ]);
+    });
   });
 });

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

@@ -6,27 +6,33 @@
 
 import { act } from 'react-dom/test-utils';
 
-import { registerTestBed, TestBed, TestBedConfig } from '../../../../../test_utils';
-import { IndexList } from '../../../public/application/sections/home/index_list'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import {
+  registerTestBed,
+  TestBed,
+  TestBedConfig,
+  findTestSubject,
+} from '../../../../../test_utils';
+import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { WithAppDependencies, services, TestSubjects } from '../helpers';
 
 const testBedConfig: TestBedConfig = {
   store: () => indexManagementStore(services as any),
   memoryRouter: {
     initialEntries: [`/indices?includeHiddenIndices=true`],
-    componentRoutePath: `/:section(indices|templates)`,
+    componentRoutePath: `/:section(indices|data_streams)`,
   },
   doMountAsync: true,
 };
 
-const initTestBed = registerTestBed(WithAppDependencies(IndexList), testBedConfig);
+const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig);
 
 export interface IndicesTestBed extends TestBed<TestSubjects> {
   actions: {
     selectIndexDetailsTab: (tab: 'settings' | 'mappings' | 'stats' | 'edit_settings') => void;
     getIncludeHiddenIndicesToggleStatus: () => boolean;
     clickIncludeHiddenIndicesToggle: () => void;
+    clickDataStreamAt: (index: number) => void;
   };
 }
 
@@ -59,12 +65,25 @@ export const setup = async (): Promise<IndicesTestBed> => {
     component.update();
   };
 
+  const clickDataStreamAt = async (index: number) => {
+    const { component, table, router } = testBed;
+    const { rows } = table.getMetaData('indexTable');
+    const dataStreamLink = findTestSubject(rows[index].reactWrapper, 'dataStreamLink');
+
+    await act(async () => {
+      router.navigateTo(dataStreamLink.props().href!);
+    });
+
+    component.update();
+  };
+
   return {
     ...testBed,
     actions: {
       selectIndexDetailsTab,
       getIncludeHiddenIndicesToggleStatus,
       clickIncludeHiddenIndicesToggle,
+      clickDataStreamAt,
     },
   };
 };

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

@@ -9,6 +9,7 @@ import { act } from 'react-dom/test-utils';
 import { API_BASE_PATH } from '../../../common/constants';
 import { setupEnvironment, nextTick } from '../helpers';
 import { IndicesTestBed, setup } from './indices_tab.helpers';
+import { createDataStreamPayload } from './data_streams_tab.helpers';
 
 /**
  * The below import is required to avoid a console error warn from the "brace" package
@@ -52,6 +53,49 @@ describe('<IndexManagementHome />', () => {
     });
   });
 
+  describe('data stream column', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadIndicesResponse([
+        {
+          health: '',
+          status: '',
+          primary: '',
+          replica: '',
+          documents: '',
+          documents_deleted: '',
+          size: '',
+          primary_size: '',
+          name: 'data-stream-index',
+          data_stream: 'dataStream1',
+        },
+      ]);
+
+      httpRequestsMockHelpers.setLoadDataStreamsResponse([
+        createDataStreamPayload('dataStream1'),
+        createDataStreamPayload('dataStream2'),
+      ]);
+
+      testBed = await setup();
+
+      await act(async () => {
+        const { component } = testBed;
+
+        await nextTick();
+        component.update();
+      });
+    });
+
+    test('navigates to the data stream in the Data Streams tab', async () => {
+      const { table, actions } = testBed;
+
+      await actions.clickDataStreamAt(0);
+
+      expect(table.getMetaData('dataStreamTable').tableCellsValues).toEqual([
+        ['dataStream1', '1', '@timestamp', '1'],
+      ]);
+    });
+  });
+
   describe('index detail panel with % character in index name', () => {
     const indexName = 'test%';
     beforeEach(async () => {

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

@@ -46,6 +46,7 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
       sortable: true,
       render: (indices: DataStream['indices'], dataStream) => (
         <EuiLink
+          data-test-subj="indicesLink"
           {...reactRouterNavigate(history, {
             pathname: '/indices',
             search: `includeHiddenIndices=true&filter=data_stream=${encodePathForReactRouter(

x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js

@@ -274,6 +274,7 @@ export class IndexTable extends Component {
     } else if (fieldName === 'data_stream') {
       return (
         <EuiLink
+          data-test-subj="dataStreamLink"
           {...reactRouterNavigate(history, {
             pathname: `/data_streams/${encodePathForReactRouter(value)}`,
           })}
@@ -607,7 +608,7 @@ export class IndexTable extends Component {
 
               {indices.length > 0 ? (
                 <div style={{ maxWidth: '100%', overflow: 'auto' }}>
-                  <EuiTable className="indTable">
+                  <EuiTable className="indTable" data-test-subj="indexTable">
                     <EuiScreenReaderOnly>
                       <caption role="status" aria-relevant="text" aria-live="polite">
                         <FormattedMessage

x-pack/test/api_integration/apis/management/index_management/data_streams.ts

@@ -19,7 +19,7 @@ export default function ({ getService }: FtrProviderContext) {
   const supertest = getService('supertest');
   const es = getService('legacyEs');
 
-  const createDataStream = (name) => {
+  const createDataStream = (name: string) => {
     // A data stream requires an index template before it can be created.
     return supertest
       .post(`${API_BASE_PATH}/index-templates`)
@@ -38,7 +38,7 @@ export default function ({ getService }: FtrProviderContext) {
       );
   };
 
-  const deleteDataStream = (name) => {
+  const deleteDataStream = (name: string) => {
     return supertest
       .post(`${API_BASE_PATH}/delete-index-templates`)
       .set('kbn-xsrf', 'xxx')