[Security Solution][Investigations] Fix alert details table overflow (#117824) (#118366)

* fix: Fix alert details table overflow

* fix: prevent table overflow

In 56a2e788ca the `FormattedFieldValue`'s `truncate` prop default value was changed to `true`. This resulted in overflowing rows in the alert table because it was not set up to allow for ellipsed content. After syncing with design, it became clear that we do not want to shorten the visible content of the cells in the first place. So instead of shortening the content, the table cells will now retain their original behaviour and display all of the content.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Jan Monschke <jan.monschke@elastic.co>

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

@@ -5,7 +5,13 @@
  * 2.0.
  */
 
-import { ALERT_FLYOUT, CELL_TEXT, JSON_TEXT, TABLE_ROWS } from '../../screens/alerts_details';
+import {
+  ALERT_FLYOUT,
+  CELL_TEXT,
+  JSON_TEXT,
+  TABLE_CONTAINER,
+  TABLE_ROWS,
+} from '../../screens/alerts_details';
 
 import {
   expandFirstAlert,
@@ -65,4 +71,20 @@ describe('Alert details with unmapped fields', () => {
         cy.get(CELL_TEXT).eq(4).should('have.text', expectedUnmmappedField.text);
       });
   });
+
+  // This test makes sure that the table does not overflow horizontally
+  it('Table does not scroll horizontally', () => {
+    openTable();
+
+    cy.get(ALERT_FLYOUT)
+      .find(TABLE_CONTAINER)
+      .within(($tableContainer) => {
+        expect($tableContainer[0].scrollLeft).to.equal(0);
+
+        // Try to scroll left and make sure that the table hasn't actually scrolled
+        $tableContainer[0].scroll({ left: 1000 });
+
+        expect($tableContainer[0].scrollLeft).to.equal(0);
+      });
+  });
 });

x-pack/plugins/security_solution/cypress/screens/alerts_details.ts

@@ -34,6 +34,8 @@ export const TABLE_CELL = '.euiTableRowCell';
 
 export const TABLE_TAB = '[data-test-subj="tableTab"]';
 
+export const TABLE_CONTAINER = '[data-test-subj="event-fields-browser"]';
+
 export const TABLE_ROWS = '.euiTableRow';
 
 export const THREAT_DETAILS_ACCORDION = '.euiAccordion__triggerWrapper';

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

@@ -281,6 +281,7 @@ export const EventFieldsBrowser = React.memo<Props>(
           rowProps={onSetRowProps}
           search={search}
           sorting={false}
+          data-test-subj="event-fields-browser"
         />
       </TableWrapper>
     );

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

@@ -72,6 +72,7 @@ export const FieldValueCell = React.memo(
                     isObjectArray={data.isObjectArray}
                     value={value}
                     linkValue={(getLinkValue && getLinkValue(data.field)) ?? linkValue}
+                    truncate={false}
                   />
                 )}
               </EuiFlexItem>