[Enterprise Search] Engines pagination fix (#148947)

## Summary

Fixing calculation for the pagination on the Engines list page. 
Fixing the rendering of engine index source on the engine indices page.

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_indices.tsx

@@ -92,15 +92,15 @@ export const EngineIndices: React.FC = () => {
       width: '15%',
     },
     {
-      field: 'ingestionMethod',
+      field: 'source',
       name: i18n.translate(
         'xpack.enterpriseSearch.content.engine.indices.ingestionMethod.columnTitle',
         {
           defaultMessage: 'Ingestion method',
         }
       ),
-      render: (ingestionMethod: IngestionMethod) => (
-        <EuiText size="s">{ingestionMethodToText(ingestionMethod)}</EuiText>
+      render: (source: IngestionMethod) => (
+        <EuiText size="s">{ingestionMethodToText(source)}</EuiText>
       ),
       truncateText: true,
       width: '15%',

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engine_list_logic.test.ts

@@ -71,21 +71,39 @@ describe('EnginesListLogic', () => {
     describe('onPaginate', () => {
       it('updates meta with newPageIndex', () => {
         expect(EnginesListLogic.values).toEqual(DEFAULT_VALUES);
-        // test below code when pagination is ready
-        // EnginesListLogic.actions.onPaginate(1);
-        // expect(EnginesListLogic.values).toEqual({
-        //   ...DEFAULT_VALUES,
-        //   meta: {
-        //     ...DEFAULT_META,
-        //     from: 1,
-        //   },
-        //   parameters: {
-        //     meta: {
-        //       ...DEFAULT_META,
-        //       from: 1,
-        //     },
-        //   },
-        // });
+
+        EnginesListLogic.actions.onPaginate({ page: { index: 1 } });
+        expect(EnginesListLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          meta: {
+            ...DEFAULT_META,
+            from: 10,
+          },
+          parameters: {
+            meta: {
+              ...DEFAULT_META,
+              from: 10,
+            },
+          },
+        });
+
+        EnginesListLogic.actions.onPaginate({ page: { index: 0 } });
+        expect(EnginesListLogic.values).toEqual(DEFAULT_VALUES);
+
+        EnginesListLogic.actions.onPaginate({ page: { index: 3 } });
+        expect(EnginesListLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          meta: {
+            ...DEFAULT_META,
+            from: 30,
+          },
+          parameters: {
+            meta: {
+              ...DEFAULT_META,
+              from: 30,
+            },
+          },
+        });
       });
     });
     describe('closeDeleteEngineModal', () => {

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx

@@ -16,8 +16,6 @@ import { FormattedMessage, FormattedNumber } from '@kbn/i18n-react';
 
 import { DataPanel } from '../../../shared/data_panel/data_panel';
 
-import { handlePageChange } from '../../../shared/table_pagination';
-
 import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
 
 import { EnginesListTable } from './components/tables/engines_table';
@@ -121,16 +119,16 @@ export const EnginesList: React.FC = () => {
         <EuiText size="s">
           <FormattedMessage
             id="xpack.enterpriseSearch.content.engines.enginesList.description"
-            defaultMessage="Showing {currentPage}-{size} of {total}"
+            defaultMessage="Showing {from}-{to} of {total}"
             values={{
-              currentPage: (
+              from: (
                 <strong>
-                  <FormattedNumber value={meta.from} />
+                  <FormattedNumber value={meta.from + 1} />
                 </strong>
               ),
-              size: (
+              to: (
                 <strong>
-                  <FormattedNumber value={meta.size} />
+                  <FormattedNumber value={meta.from + (results?.length ?? 0)} />
                 </strong>
               ),
               total: <FormattedNumber value={meta.total} />,
@@ -149,7 +147,7 @@ export const EnginesList: React.FC = () => {
           <EnginesListTable
             enginesList={results}
             meta={meta}
-            onChange={handlePageChange(onPaginate)}
+            onChange={onPaginate}
             onDelete={openDeleteEngineModal}
             loading={false}
           />

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list_logic.ts

@@ -28,13 +28,17 @@ import {
 
 import { DEFAULT_META, Meta, updateMetaPageIndex } from './types';
 
+interface EuiBasicTableOnChange {
+  page: { index: number };
+}
+
 type EnginesListActions = Pick<
   Actions<EnginesListAPIArguments, EnterpriseSearchEnginesResponse>,
   'apiError' | 'apiSuccess' | 'makeRequest'
 > & {
   closeDeleteEngineModal(): void;
-  deleteError: DeleteEnginesApiLogicActions['apiError'];
   deleteEngine: DeleteEnginesApiLogicActions['makeRequest'];
+  deleteError: DeleteEnginesApiLogicActions['apiError'];
   deleteSuccess: DeleteEnginesApiLogicActions['apiSuccess'];
 
   fetchEngines({ meta, searchQuery }: { meta: Meta; searchQuery?: string }): {
@@ -42,17 +46,17 @@ type EnginesListActions = Pick<
     searchQuery?: string;
   };
 
+  onPaginate(args: EuiBasicTableOnChange): { pageNumber: number };
   openDeleteEngineModal: (engine: EnterpriseSearchEngine) => { engine: EnterpriseSearchEngine };
-  onPaginate(pageNumber: number): { pageNumber: number };
 };
 interface EngineListValues {
   data: typeof FetchEnginesAPILogic.values.data;
   deleteModalEngine: EnterpriseSearchEngine | null;
   deleteModalEngineName: string;
   deleteStatus: typeof DeleteEngineAPILogic.values.status;
-  isLoading: boolean;
   isDeleteLoading: boolean;
   isDeleteModalVisible: boolean;
+  isLoading: boolean;
   meta: Meta;
   parameters: { meta: Meta; searchQuery?: string }; // Added this variable to store to the search Query value as well
   results: EnterpriseSearchEngine[]; // stores engine list value from data
@@ -80,8 +84,8 @@ export const EnginesListLogic = kea<MakeLogicType<EngineListValues, EnginesListA
       meta,
       searchQuery,
     }),
+    onPaginate: (args: EuiBasicTableOnChange) => ({ pageNumber: args.page.index }),
     openDeleteEngineModal: (engine) => ({ engine }),
-    onPaginate: (pageNumber) => ({ pageNumber }),
   },
   path: ['enterprise_search', 'content', 'engine_list_logic'],
   reducers: ({}) => ({

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/types.ts

@@ -17,11 +17,13 @@ export const DEFAULT_META = {
   total: 0,
 };
 
-export const convertMetaToPagination = (meta: Meta) => ({
-  pageIndex: meta.from - 1,
-  pageSize: meta.size,
-  totalItemCount: meta.total,
-});
-export const updateMetaPageIndex = (oldState: Meta, newPageIndex: number) => {
-  return { ...oldState, from: newPageIndex };
+export const convertMetaToPagination = (meta: Meta) => {
+  return {
+    pageIndex: meta.from / meta.size,
+    pageSize: meta.size,
+    totalItemCount: meta.total,
+  };
+};
+export const updateMetaPageIndex = (oldState: Meta, newPageIndex: number) => {
+  return { ...oldState, from: newPageIndex * oldState.size };
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/utils/indices.ts

@@ -129,20 +129,26 @@ export function indexToViewIndex(index: ElasticsearchIndex): ApiViewIndex {
 }
 
 export function ingestionMethodToText(ingestionMethod: IngestionMethod) {
-  if (ingestionMethod === IngestionMethod.CONNECTOR) {
-    return i18n.translate(
-      'xpack.enterpriseSearch.content.searchIndices.ingestionMethod.connector',
-      {
-        defaultMessage: 'Connector',
-      }
-    );
+  switch (ingestionMethod) {
+    case IngestionMethod.CONNECTOR:
+      return i18n.translate(
+        'xpack.enterpriseSearch.content.searchIndices.ingestionMethod.connector',
+        {
+          defaultMessage: 'Connector',
+        }
+      );
+    case IngestionMethod.CRAWLER:
+      return i18n.translate(
+        'xpack.enterpriseSearch.content.searchIndices.ingestionMethod.crawler',
+        {
+          defaultMessage: 'Crawler',
+        }
+      );
+    case IngestionMethod.API:
+      return i18n.translate('xpack.enterpriseSearch.content.searchIndices.ingestionMethod.api', {
+        defaultMessage: 'API',
+      });
+    default:
+      return ingestionMethod;
   }
-  if (ingestionMethod === IngestionMethod.CRAWLER) {
-    return i18n.translate('xpack.enterpriseSearch.content.searchIndices.ingestionMethod.crawler', {
-      defaultMessage: 'Crawler',
-    });
-  }
-  return i18n.translate('xpack.enterpriseSearch.content.searchIndices.ingestionMethod.api', {
-    defaultMessage: 'API',
-  });
 }