Address Alison's feedback.

- Add link to Index Templates from Data Streams empty prompt and component integration test.
- Extend legacy ES client with index templates API and unskip API integration test.
- Add comment to unused detail panel file.

Author: cjcenizal

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

@@ -11,6 +11,7 @@ export type TestSubjects =
   | 'closeDetailsButton'
   | 'createLegacyTemplateButton'
   | 'createTemplateButton'
+  | 'dataStreamsEmptyPromptTemplateLink'
   | 'dataStreamTable'
   | 'dataStreamTable'
   | 'deleteSystemTemplateCallOut'

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

@@ -21,7 +21,7 @@ const testBedConfig: TestBedConfig = {
   store: () => indexManagementStore(services as any),
   memoryRouter: {
     initialEntries: [`/indices`],
-    componentRoutePath: `/:section(indices|data_streams)`,
+    componentRoutePath: `/:section(indices|data_streams|templates)`,
   },
   doMountAsync: true,
 };
@@ -31,6 +31,7 @@ const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), te
 export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
   actions: {
     goToDataStreamsList: () => void;
+    clickEmptyPromptIndexTemplateLink: () => void;
     clickReloadButton: () => void;
     clickIndicesAt: (index: number) => void;
   };
@@ -47,6 +48,18 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     testBed.find('data_streamsTab').simulate('click');
   };
 
+  const clickEmptyPromptIndexTemplateLink = async () => {
+    const { find, component, router } = testBed;
+
+    const templateLink = find('dataStreamsEmptyPromptTemplateLink');
+
+    await act(async () => {
+      router.navigateTo(templateLink.props().href!);
+    });
+
+    component.update();
+  };
+
   const clickReloadButton = () => {
     const { find } = testBed;
     find('reloadButton').simulate('click');
@@ -68,6 +81,7 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     ...testBed,
     actions: {
       goToDataStreamsList,
+      clickEmptyPromptIndexTemplateLink,
       clickReloadButton,
       clickIndicesAt,
     },

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

@@ -56,6 +56,7 @@ describe('Data Streams tab', () => {
       const { actions, component } = testBed;
 
       httpRequestsMockHelpers.setLoadDataStreamsResponse([]);
+      httpRequestsMockHelpers.setLoadTemplatesResponse({ templates: [], legacyTemplates: [] });
 
       await act(async () => {
         actions.goToDataStreamsList();
@@ -70,6 +71,16 @@ describe('Data Streams tab', () => {
       expect(exists('sectionLoading')).toBe(false);
       expect(exists('emptyPrompt')).toBe(true);
     });
+
+    test('goes to index templates tab when "Get started" link is clicked', async () => {
+      const { actions, exists, component } = testBed;
+
+      await act(async () => {
+        actions.clickEmptyPromptIndexTemplateLink();
+      });
+
+      expect(exists('templateList')).toBe(true);
+    });
   });
 
   describe('when there are data streams', () => {

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

@@ -25,6 +25,11 @@ interface Props {
   onClose: () => void;
 }
 
+/**
+ * NOTE: This currently isn't in use by data_stream_list.tsx because it doesn't contain any
+ * information that doesn't already exist in the table. We'll use it once we add additional
+ * info, e.g. storage size, docs count.
+ */
 export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
   dataStreamName,
   onClose,

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

@@ -7,9 +7,11 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiTitle, EuiText, EuiSpacer, EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiTitle, EuiText, EuiSpacer, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import { ScopedHistory } from 'kibana/public';
 
+import { reactRouterNavigate } from '../../../../shared_imports';
 import { SectionError, SectionLoading, Error } from '../../../components';
 import { useLoadDataStreams } from '../../../services/api';
 import { DataStreamTable } from './data_stream_table';
@@ -32,7 +34,7 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
     content = (
       <SectionLoading>
         <FormattedMessage
-          id="xpack.idxMgmt.dataStreamList.loadingIndexTemplatesDescription"
+          id="xpack.idxMgmt.dataStreamList.loadingDataStreamsDescription"
           defaultMessage="Loading data streams…"
         />
       </SectionLoading>
@@ -42,7 +44,7 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
       <SectionError
         title={
           <FormattedMessage
-            id="xpack.idxMgmt.dataStreamList.loadingIndexTemplatesErrorMessage"
+            id="xpack.idxMgmt.dataStreamList.loadingDataStreamsErrorMessage"
             defaultMessage="Error loading data streams"
           />
         }
@@ -56,11 +58,33 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
         title={
           <h1 data-test-subj="title">
             <FormattedMessage
-              id="xpack.idxMgmt.dataStreamList.emptyPrompt.noIndexTemplatesTitle"
+              id="xpack.idxMgmt.dataStreamList.emptyPrompt.noDataStreamsTitle"
               defaultMessage="You don't have any data streams yet"
             />
           </h1>
         }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.idxMgmt.dataStreamList.emptyPrompt.noDataStreamsDescription"
+              defaultMessage="Data streams represent the latest data in a rollover series. Get started with data streams by creating a {link}."
+              values={{
+                link: (
+                  <EuiLink
+                    data-test-subj="dataStreamsEmptyPromptTemplateLink"
+                    {...reactRouterNavigate(history, {
+                      pathname: '/templates',
+                    })}
+                  >
+                    {i18n.translate('xpack.idxMgmt.dataStreamList.emptyPrompt.getStartedLink', {
+                      defaultMessage: 'composable index template',
+                    })}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        }
         data-test-subj="emptyPrompt"
       />
     );

x-pack/plugins/index_management/server/client/elasticsearch.ts

@@ -99,4 +99,34 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any)
     ],
     method: 'DELETE',
   });
+
+  // Index templates v2
+  dataManagement.saveComposableIndexTemplate = ca({
+    urls: [
+      {
+        fmt: '/_index_template/<%=name%>',
+        req: {
+          name: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+    needBody: true,
+    method: 'PUT',
+  });
+
+  dataManagement.deleteComposableIndexTemplate = ca({
+    urls: [
+      {
+        fmt: '/_index_template/<%=name%>',
+        req: {
+          name: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+    method: 'DELETE',
+  });
 };

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

@@ -21,14 +21,17 @@ export default function ({ getService }: FtrProviderContext) {
 
   const createDataStream = (name: string) => {
     // A data stream requires an index template before it can be created.
-    return supertest
-      .post(`${API_BASE_PATH}/index-templates`)
-      .set('kbn-xsrf', 'xxx')
-      .send({
+    return es.dataManagement
+      .saveComposableIndexTemplate({
         name,
-        indexPatterns: ['*'],
-        _kbnMeta: {
-          isLegacy: false,
+        body: {
+          index_patterns: ['*'],
+          template: {
+            settings: {},
+          },
+          data_stream: {
+            timestamp_field: '@timestamp',
+          },
         },
       })
       .then(() =>
@@ -39,11 +42,9 @@ export default function ({ getService }: FtrProviderContext) {
   };
 
   const deleteDataStream = (name: string) => {
-    return supertest
-      .post(`${API_BASE_PATH}/delete-index-templates`)
-      .set('kbn-xsrf', 'xxx')
-      .send({
-        templates: [{ name, isLegacy: false }],
+    return es.dataManagement
+      .deleteComposableIndexTemplate({
+        name,
       })
       .then(() =>
         es.dataManagement.deleteDataStream({
@@ -53,10 +54,11 @@ export default function ({ getService }: FtrProviderContext) {
   };
 
   describe('Data streams', function () {
-    // TODO: Implement this test once the API supports creating composable index templates.
-    describe.skip('Get', () => {
-      before(() => createDataStream('test-data-stream'));
-      after(() => deleteDataStream('test-data-stream'));
+    const testDataStreamName = 'test-data-stream';
+
+    describe('Get', () => {
+      before(() => createDataStream(testDataStreamName));
+      after(() => deleteDataStream(testDataStreamName));
 
       describe('all data streams', () => {
         it('returns an array of data streams', async () => {
@@ -65,9 +67,19 @@ export default function ({ getService }: FtrProviderContext) {
             .set('kbn-xsrf', 'xxx')
             .expect(200);
 
+          // ES determines this value so we'll just echo it back.
+          const { uuid } = dataStreams[0].indices[0];
           expect(dataStreams).to.eql([
             {
-              name: 'test-data-stream',
+              name: testDataStreamName,
+              timeStampField: '@timestamp',
+              indices: [
+                {
+                  name: `${testDataStreamName}-000001`,
+                  uuid,
+                },
+              ],
+              generation: 1,
             },
           ]);
         });