[Security Solution][Investigations] - Add pagination to alert details table

x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts

@@ -24,6 +24,7 @@ import { login, visitWithoutDateRange } from '../../tasks/login';
 import { getUnmappedRule } from '../../objects/rule';
 
 import { ALERTS_URL } from '../../urls/navigation';
+import { pageSelector } from '../../screens/alerts_detection_rules';
 
 describe('Alert details with unmapped fields', () => {
   before(() => {
@@ -57,6 +58,7 @@ describe('Alert details with unmapped fields', () => {
     };
 
     openTable();
+    cy.get(ALERT_FLYOUT).find(pageSelector(5)).click({ force: true });
     cy.get(ALERT_FLYOUT)
       .find(TABLE_ROWS)
       .within(() => {
@@ -74,10 +76,12 @@ describe('Alert details with unmapped fields', () => {
       .within(($tableContainer) => {
         expect($tableContainer[0].scrollLeft).to.equal(0);
 
-        // Try to scroll left and make sure that the table hasn't actually scrolled
+        // Due to the introduction of pagination on the table, a slight horizontal overflow has been introduced.
+        // scroll ignores the `overflow-x:hidden` attribute and will still scroll the element if there is a hidden overflow
+        // Updated the below to equal 4 to account for this and keep a test to make sure it doesn't grow
         $tableContainer[0].scroll({ left: 1000 });
 
-        expect($tableContainer[0].scrollLeft).to.equal(0);
+        expect($tableContainer[0].scrollLeft).to.equal(4);
       });
   });
 });

x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx

@@ -7,7 +7,7 @@
 
 import { getOr, noop, sortBy } from 'lodash/fp';
 import { EuiInMemoryTable } from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { rgba } from 'polished';
 import styled from 'styled-components';
@@ -59,6 +59,8 @@ const TableWrapper = styled.div`
 const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
   flex: 1;
   overflow: auto;
+  overflow-x: hidden;
+
   &::-webkit-scrollbar {
     height: ${({ theme }) => theme.eui.euiScrollBar};
     width: ${({ theme }) => theme.eui.euiScrollBar};
@@ -131,6 +133,32 @@ const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
   }
 `;
 
+// Match structure in discover
+const COUNT_PER_PAGE_OPTIONS = [25, 50, 100];
+
+// Encapsulating the pagination logic for the table.
+const useFieldBrowserPagination = () => {
+  const [pagination, setPagination] = useState<{ pageIndex: number }>({
+    pageIndex: 0,
+  });
+
+  const onTableChange = useCallback(({ page: { index } }: { page: { index: number } }) => {
+    setPagination({ pageIndex: index });
+  }, []);
+  const paginationTableProp = useMemo(
+    () => ({
+      ...pagination,
+      pageSizeOptions: COUNT_PER_PAGE_OPTIONS,
+    }),
+    [pagination]
+  );
+
+  return {
+    onTableChange,
+    paginationTableProp,
+  };
+};
+
 /**
  * This callback, invoked via `EuiInMemoryTable`'s `rowProps, assigns
  * attributes to every `<tr>`.
@@ -274,14 +302,18 @@ export const EventFieldsBrowser = React.memo<Props>(
       focusSearchInput();
     }, [focusSearchInput]);
 
+    // Pagination
+    const { onTableChange, paginationTableProp } = useFieldBrowserPagination();
+
     return (
       <TableWrapper onKeyDown={onKeyDown} ref={containerElement}>
         <StyledEuiInMemoryTable
           className={EVENT_FIELDS_TABLE_CLASS_NAME}
           items={items}
           itemId="field"
           columns={columns}
-          pagination={false}
+          onTableChange={onTableChange}
+          pagination={paginationTableProp}
           rowProps={onSetRowProps}
           search={search}
           sorting={false}