[Composable templates] Table to list templates (#67282)

Co-authored-by: Alison Goryachev <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

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

@@ -12,7 +12,7 @@ type HttpResponse = Record<string, any> | any[];
 // Register helpers to mock HTTP Requests
 const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
   const setLoadTemplatesResponse = (response: HttpResponse = []) => {
-    server.respondWith('GET', `${API_BASE_PATH}/templates`, [
+    server.respondWith('GET', `${API_BASE_PATH}/index-templates`, [
       200,
       { 'Content-Type': 'application/json' },
       JSON.stringify(response),
@@ -28,7 +28,7 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
   };
 
   const setDeleteTemplateResponse = (response: HttpResponse = []) => {
-    server.respondWith('DELETE', `${API_BASE_PATH}/templates`, [
+    server.respondWith('POST', `${API_BASE_PATH}/delete-index-templates`, [
       200,
       { 'Content-Type': 'application/json' },
       JSON.stringify(response),
@@ -39,7 +39,7 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     const status = error ? error.status || 400 : 200;
     const body = error ? error.body : response;
 
-    server.respondWith('GET', `${API_BASE_PATH}/templates/:id`, [
+    server.respondWith('GET', `${API_BASE_PATH}/index-templates/:id`, [
       status,
       { 'Content-Type': 'application/json' },
       JSON.stringify(body),
@@ -50,7 +50,7 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     const status = error ? error.body.status || 400 : 200;
     const body = error ? JSON.stringify(error.body) : JSON.stringify(response);
 
-    server.respondWith('PUT', `${API_BASE_PATH}/templates`, [
+    server.respondWith('POST', `${API_BASE_PATH}/index-templates`, [
       status,
       { 'Content-Type': 'application/json' },
       body,
@@ -61,7 +61,7 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     const status = error ? error.status || 400 : 200;
     const body = error ? JSON.stringify(error.body) : JSON.stringify(response);
 
-    server.respondWith('PUT', `${API_BASE_PATH}/templates/:name`, [
+    server.respondWith('PUT', `${API_BASE_PATH}/index-templates/:name`, [
       status,
       { 'Content-Type': 'application/json' },
       body,

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

@@ -16,6 +16,7 @@ export type TestSubjects =
   | 'cell'
   | 'closeDetailsButton'
   | 'createTemplateButton'
+  | 'createLegacyTemplateButton'
   | 'deleteSystemTemplateCallOut'
   | 'deleteTemplateButton'
   | 'deleteTemplatesConfirmation'
@@ -46,4 +47,7 @@ export type TestSubjects =
   | 'templateDetails.title'
   | 'templateList'
   | 'templateTable'
-  | 'templatesTab';
+  | 'templatesTab'
+  | 'legacyTemplateTable'
+  | 'viewButton'
+  | 'filterList.filterItem';

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

@@ -7,9 +7,17 @@
 import { act } from 'react-dom/test-utils';
 
 import { setupEnvironment, nextTick } from '../helpers';
-
 import { HomeTestBed, setup } from './home.helpers';
 
+/**
+ * The below import is required to avoid a console error warn from the "brace" package
+ * console.warn ../node_modules/brace/index.js:3999
+      Could not load worker ReferenceError: Worker is not defined
+          at createWorker (/<path-to-repo>/node_modules/brace/index.js:17992:5)
+ */
+import { stubWebWorker } from '../../../../../test_utils/stub_web_worker';
+stubWebWorker();
+
 describe('<IndexManagementHome />', () => {
   const { server, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: HomeTestBed;
@@ -62,7 +70,7 @@ describe('<IndexManagementHome />', () => {
         expect(exists('indicesList')).toBe(true);
         expect(exists('templateList')).toBe(false);
 
-        httpRequestsMockHelpers.setLoadTemplatesResponse([]);
+        httpRequestsMockHelpers.setLoadTemplatesResponse({ templates: [], legacyTemplates: [] });
 
         actions.selectHomeTab('templatesTab');
 

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

@@ -12,7 +12,6 @@ import {
   TestBed,
   TestBedConfig,
   findTestSubject,
-  nextTick,
 } 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.
@@ -45,6 +44,7 @@ export interface IndexTemplatesTabTestBed extends TestBed<TestSubjects> {
     clickTemplateAt: (index: number) => void;
     clickCloseDetailsButton: () => void;
     clickActionMenu: (name: TemplateDeserialized['name']) => void;
+    toggleViewItem: (view: 'composable' | 'system') => void;
   };
 }
 
@@ -102,15 +102,14 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
 
   const clickTemplateAt = async (index: number) => {
     const { component, table, router } = testBed;
-    const { rows } = table.getMetaData('templateTable');
+    const { rows } = table.getMetaData('legacyTemplateTable');
     const templateLink = findTestSubject(rows[index].reactWrapper, 'templateDetailsLink');
 
+    const { href } = templateLink.props();
     await act(async () => {
-      const { href } = templateLink.props();
       router.navigateTo(href!);
-      await nextTick();
-      component.update();
     });
+    component.update();
   };
 
   const clickCloseDetailsButton = () => {
@@ -119,6 +118,23 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
     find('closeDetailsButton').simulate('click');
   };
 
+  const toggleViewItem = (view: 'composable' | 'system') => {
+    const { find, component } = testBed;
+    const views = ['composable', 'system'];
+
+    // First open the pop over
+    act(() => {
+      find('viewButton').simulate('click');
+    });
+    component.update();
+
+    // Then click on a filter item
+    act(() => {
+      find('filterList.filterItem').at(views.indexOf(view)).simulate('click');
+    });
+    component.update();
+  };
+
   return {
     ...testBed,
     findAction,
@@ -130,6 +146,7 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
       clickTemplateAt,
       clickCloseDetailsButton,
       clickActionMenu,
+      toggleViewItem,
     },
   };
 };