[Security Solution][Alert details] do not open the SessionView detail…

…ed panel on first load (elastic#210121)

## Summary

We [recently improved](elastic#200270)
the SessionView experience when visualized within the alert details
expandable flyout. One downside was that the SessionView detailed panel
was opening in the flyout preview section on first load. This was
intended at the time, to mimic the behavior of the SessionView rendered
in place of the alerts table.
This behavior is not desired in the flyout though. This PR is making a
very small code change, to ensure that the detailed panel is NOT
rendered on first load, but will be when users click on a row in the
SessionView tree (which is a behavior that exists today).

#### Previous behavior

https://github.com/user-attachments/assets/ac6c0493-5d57-4dd1-bd43-bec6b025e768

#### New behavior

https://github.com/user-attachments/assets/4ce48f4d-f04d-46f8-a6b1-693fe8983d20

The amount of code change was kept to a minimum. I basically added one
prop to the `onSelectedProcess` callback that will differentiate user
actions from automated actions. The value is `false` by default, to not
change any existing logic, except on the user click event happening in
the tree.

#### Logic not changed when displayed in place of the alerts table

https://github.com/user-attachments/assets/b54ec319-baf5-4318-a45f-405178f92888

## How to test

- turn on the `securitySolution:enableVisualizationsInFlyout` Advanced
Settings
![Screenshot 2024-12-16 at 5 05
05 PM](https://github.com/user-attachments/assets/e5a937fa-7eaf-46b3-be11-d56224daf821)
- generate alerts with data for session view (`yarn test:generate -n
http://elastic:changeme@localhost:9200 -k
http://elastic:changeme@localhost:5601`)

(cherry picked from commit ee61373)

x-pack/solutions/security/plugins/session_view/public/components/process_tree/index.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { ProcessTreeNode } from '../process_tree_node';
 import { BackToInvestigatedAlert } from '../back_to_investigated_alert';
@@ -52,7 +52,7 @@ export interface ProcessTreeDeps {
 
   // currently selected process
   selectedProcess?: Process | null;
-  onProcessSelected: (process: Process | null) => void;
+  onProcessSelected: (process: Process | null, isManualSelection?: boolean) => void;
   setSearchResults?: (results: Process[]) => void;
 
   // a map for alerts with updated status and process.entity_id

x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx

@@ -12,15 +12,15 @@
  * 2.0.
  */
 import React, {
-  useState,
-  useEffect,
   MouseEvent,
+  ReactElement,
+  RefObject,
   useCallback,
+  useEffect,
   useMemo,
-  RefObject,
-  ReactElement,
+  useState,
 } from 'react';
-import { EuiButton, EuiIcon, EuiToolTip, formatDate, EuiButtonIcon } from '@elastic/eui';
+import { EuiButton, EuiButtonIcon, EuiIcon, EuiToolTip, formatDate } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { chain } from 'lodash';
@@ -49,7 +49,7 @@ export interface ProcessDeps {
   process: Process;
   isSessionLeader?: boolean;
   depth?: number;
-  onProcessSelected?: (process: Process) => void;
+  onProcessSelected?: (process: Process, isManualSelection?: boolean) => void;
   jumpToEntityId?: string;
   investigatedAlertId?: string;
   selectedProcess?: Process | null;
@@ -63,6 +63,7 @@ export interface ProcessDeps {
   loadNextButton?: ReactElement | null;
   loadPreviousButton?: ReactElement | null;
   handleCollapseProcessTree?: () => void;
+
   trackEvent(name: SessionViewTelemetryKey): void;
 }
 
@@ -193,7 +194,9 @@ export function ProcessTreeNode({
         return;
       }
 
-      onProcessSelected?.(process);
+      // we pass true here to let the parent SessionView component that the process was selected
+      // by a user clicking on a row in the tree
+      onProcessSelected?.(process, true);
 
       if (isSessionLeader && scrollerRef.current) {
         scrollerRef.current.scrollTop = 0;

x-pack/solutions/security/plugins/session_view/public/components/session_view/index.tsx

@@ -5,16 +5,16 @@
  * 2.0.
  */
 import { v4 as uuidv4 } from 'uuid';
-import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  EuiEmptyPrompt,
   EuiButton,
+  EuiButtonIcon,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
   EuiFlexItem,
-  EuiResizableContainer,
-  EuiPanel,
   EuiHorizontalRule,
-  EuiFlexGroup,
-  EuiButtonIcon,
+  EuiPanel,
+  EuiResizableContainer,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -24,17 +24,17 @@ import { SectionLoading } from '../../shared_imports';
 import { ProcessTree } from '../process_tree';
 import type { AlertStatusEventEntityIdMap, Process, ProcessEvent } from '../../../common';
 import type { DisplayOptionsState } from '../session_view_display_options';
+import { SessionViewDisplayOptions } from '../session_view_display_options';
 import type { SessionViewDeps, SessionViewIndices, SessionViewTelemetryKey } from '../../types';
 import { SessionViewDetailPanel } from '../session_view_detail_panel';
 import { SessionViewSearchBar } from '../session_view_search_bar';
-import { SessionViewDisplayOptions } from '../session_view_display_options';
 import { TTYPlayer } from '../tty_player';
 import { useStyles } from './styles';
 import {
   useFetchAlertStatus,
-  useFetchSessionViewProcessEvents,
-  useFetchSessionViewAlerts,
   useFetchGetTotalIOBytes,
+  useFetchSessionViewAlerts,
+  useFetchSessionViewProcessEvents,
 } from './hooks';
 import { LOCAL_STORAGE_DISPLAY_OPTIONS_KEY } from '../../../common/constants';
 import {
@@ -45,7 +45,7 @@ import {
   ELASTIC_DEFEND_DATA_SOURCE,
   ENDPOINT_INDEX,
 } from '../../methods';
-import { REFRESH_SESSION, TOGGLE_TTY_PLAYER, DETAIL_PANEL } from './translations';
+import { DETAIL_PANEL, REFRESH_SESSION, TOGGLE_TTY_PLAYER } from './translations';
 
 /**
  * The main wrapper component for the session view.
@@ -119,12 +119,13 @@ export const SessionView = ({
   }, [displayOptions?.verboseMode, searchResults, searchQuery]);
 
   const onProcessSelected = useCallback(
-    (process: Process | null) => {
+    (process: Process | null, isManualSelection = false) => {
       setSelectedProcess(process);
 
       // used when SessionView is displayed in the expandable flyout
       // This refreshes the detailed panel rendered in the flyout preview panel
-      if (openDetailsInExpandableFlyout) {
+      // the isManualSelection prevents the detailed panel to render on first load of the SessionView component
+      if (openDetailsInExpandableFlyout && isManualSelection) {
         openDetailsInExpandableFlyout(process);
       }
     },