[Composable template] Create / Edit wizard

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

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 
 import {
@@ -13,44 +12,21 @@ import {
   TestBedConfig,
   findTestSubject,
 } from '../../../../../test_utils';
-// NOTE: We have to use the Home component instead of the TemplateList 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 { TemplateList } from '../../../public/application/sections/home/template_list'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { TemplateDeserialized } from '../../../common';
-import { WithAppDependencies, services, TestSubjects } from '../helpers';
+import { WithAppDependencies, TestSubjects } from '../helpers';
 
 const testBedConfig: TestBedConfig = {
-  store: () => indexManagementStore(services as any),
   memoryRouter: {
-    initialEntries: [`/indices`],
-    componentRoutePath: `/:section(indices|templates)`,
+    initialEntries: [`/templates`],
+    componentRoutePath: `/templates/:templateName?`,
   },
   doMountAsync: true,
 };
 
-const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig);
-
-export interface IndexTemplatesTabTestBed extends TestBed<TestSubjects> {
-  findAction: (action: 'edit' | 'clone' | 'delete') => ReactWrapper;
-  actions: {
-    goToTemplatesList: () => void;
-    selectDetailsTab: (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => void;
-    clickReloadButton: () => void;
-    clickTemplateAction: (
-      name: TemplateDeserialized['name'],
-      action: 'edit' | 'clone' | 'delete'
-    ) => void;
-    clickTemplateAt: (index: number) => void;
-    clickCloseDetailsButton: () => void;
-    clickActionMenu: (name: TemplateDeserialized['name']) => void;
-    toggleViewItem: (view: 'composable' | 'system') => void;
-  };
-}
-
-export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
-  const testBed = await initTestBed();
+const initTestBed = registerTestBed<TestSubjects>(WithAppDependencies(TemplateList), testBedConfig);
 
+const createActions = (testBed: TestBed<TestSubjects>) => {
   /**
    * Additional helpers
    */
@@ -64,11 +40,6 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
   /**
    * User Actions
    */
-
-  const goToTemplatesList = () => {
-    testBed.find('templatesTab').simulate('click');
-  };
-
   const selectDetailsTab = (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => {
     const tabs = ['summary', 'settings', 'mappings', 'aliases'];
 
@@ -136,10 +107,8 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
   };
 
   return {
-    ...testBed,
     findAction,
     actions: {
-      goToTemplatesList,
       selectDetailsTab,
       clickReloadButton,
       clickTemplateAction,
@@ -150,3 +119,14 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
     },
   };
 };
+
+export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
+  const testBed = await initTestBed();
+
+  return {
+    ...testBed,
+    ...createActions(testBed),
+  };
+};
+
+export type IndexTemplatesTabTestBed = TestBed<TestSubjects> & ReturnType<typeof createActions>;

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

@@ -30,28 +30,15 @@ describe('Index Templates tab', () => {
     server.restore();
   });
 
-  beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadIndicesResponse([]);
-
-    await act(async () => {
-      testBed = await setup();
-    });
-  });
-
   describe('when there are no index templates', () => {
-    beforeEach(async () => {
-      const { actions, component } = testBed;
-
+    test('should display an empty prompt', async () => {
       httpRequestsMockHelpers.setLoadTemplatesResponse({ templates: [], legacyTemplates: [] });
 
       await act(async () => {
-        actions.goToTemplatesList();
+        testBed = await setup();
       });
+      const { exists, component } = testBed;
       component.update();
-    });
-
-    test('should display an empty prompt', async () => {
-      const { exists } = testBed;
 
       expect(exists('sectionLoading')).toBe(false);
       expect(exists('emptyPrompt')).toBe(true);
@@ -119,14 +106,12 @@ describe('Index Templates tab', () => {
     const legacyTemplates = [template4, template5, template6];
 
     beforeEach(async () => {
-      const { actions, component } = testBed;
-
       httpRequestsMockHelpers.setLoadTemplatesResponse({ templates, legacyTemplates });
 
       await act(async () => {
-        actions.goToTemplatesList();
+        testBed = await setup();
       });
-      component.update();
+      testBed.component.update();
     });
 
     test('should list them in the table', async () => {
@@ -151,6 +136,7 @@ describe('Index Templates tab', () => {
           composedOfString,
           priorityFormatted,
           'M S A', // Mappings Settings Aliases badges
+          '', // Column of actions
         ]);
       });
 
@@ -192,8 +178,10 @@ describe('Index Templates tab', () => {
       );
     });
 
-    test('should have a button to create a new template', () => {
+    test('should have a button to create a template', () => {
       const { exists } = testBed;
+      // Both composable and legacy templates
+      expect(exists('createTemplateButton')).toBe(true);
       expect(exists('createLegacyTemplateButton')).toBe(true);
     });
 

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx

@@ -7,7 +7,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import { CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../common';
 import { setupEnvironment, nextTick } from '../helpers';
 
 import {
@@ -369,7 +368,7 @@ describe.skip('<TemplateCreate />', () => {
           aliases: ALIASES,
         },
         _kbnMeta: {
-          isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT,
+          isLegacy: false,
           isManaged: false,
         },
       };

x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx

@@ -46,7 +46,7 @@ import { TabSummary } from '../../template_details/tabs';
 interface Props {
   template: { name: string; isLegacy?: boolean };
   onClose: () => void;
-  editTemplate: (name: string, isLegacy?: boolean) => void;
+  editTemplate: (name: string, isLegacy: boolean) => void;
   cloneTemplate: (name: string, isLegacy?: boolean) => void;
   reload: () => Promise<SendRequestResponse>;
 }
@@ -290,7 +290,7 @@ export const LegacyTemplateDetails: React.FunctionComponent<Props> = ({
                               }
                             ),
                             icon: 'pencil',
-                            onClick: () => editTemplate(templateName, isLegacy),
+                            onClick: () => editTemplate(templateName, true),
                             disabled: isManaged,
                           },
                           {

x-pack/test_utils/router_helpers.tsx

@@ -16,9 +16,10 @@ export const WithMemoryRouter = (initialEntries: string[] = ['/'], initialIndex:
   </MemoryRouter>
 );
 
-export const WithRoute = (componentRoutePath = '/', onRouter = (router: any) => {}) => (
-  WrappedComponent: ComponentType
-) => {
+export const WithRoute = (
+  componentRoutePath: string | string[] = '/',
+  onRouter = (router: any) => {}
+) => (WrappedComponent: ComponentType) => {
   // Create a class component that will catch the router
   // and forward it to our "onRouter()" handler.
   const CatchRouter = withRouter(

x-pack/test_utils/testbed/types.ts

@@ -163,7 +163,7 @@ export interface MemoryRouterConfig {
   /** The React Router **initial index** setting ([see documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md)) */
   initialIndex?: number;
   /** The route **path** for the mounted component (defaults to `"/"`) */
-  componentRoutePath?: string;
+  componentRoutePath?: string | string[];
   /** A callBack that will be called with the React Router instance once mounted  */
   onRouter?: (router: any) => void;
 }