From 222d714f451e126ffbe77b5f1f22f65e0b3107a6 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Wed, 11 May 2022 15:48:46 -0400
Subject: [PATCH] [Security Solution][Investigations] - Add pagination to alert
 details table (#131358)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit c0e03c894bb7a5d41c0301b07215920098f73cf1)
---
 .../detection_alerts/alerts_details.spec.ts   |  8 +++--
 .../event_details/event_fields_browser.tsx    | 36 +++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts
index eb93bddcf3847..5d9ea1d608dd6 100644
--- a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts
@@ -25,6 +25,7 @@ import { refreshPage } from '../../tasks/security_header';
 import { getUnmappedRule } from '../../objects/rule';
 
 import { ALERTS_URL } from '../../urls/navigation';
+import { pageSelector } from '../../screens/alerts_detection_rules';
 
 describe('Alert details with unmapped fields', () => {
   beforeEach(() => {
@@ -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)
       .eq(expectedUnmmappedField.row)
@@ -75,10 +77,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);
       });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx
index e7547a8259514..b37a560800c74 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx
+++ b/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,6 +302,9 @@ export const EventFieldsBrowser = React.memo<Props>(
       focusSearchInput();
     }, [focusSearchInput]);
 
+    // Pagination
+    const { onTableChange, paginationTableProp } = useFieldBrowserPagination();
+
     return (
       <TableWrapper onKeyDown={onKeyDown} ref={containerElement}>
         <StyledEuiInMemoryTable
@@ -281,7 +312,8 @@ export const EventFieldsBrowser = React.memo<Props>(
           items={items}
           itemId="field"
           columns={columns}
-          pagination={false}
+          onTableChange={onTableChange}
+          pagination={paginationTableProp}
           rowProps={onSetRowProps}
           search={search}
           sorting={false}