[9.0] [Security Solution][Alert details] do not open the SessionView detailed panel on first load (#210121)

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

@@ -6,15 +6,15 @@
  */
 
 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';
@@ -43,7 +43,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;
@@ -57,6 +57,7 @@ export interface ProcessDeps {
   loadNextButton?: ReactElement | null;
   loadPreviousButton?: ReactElement | null;
   handleCollapseProcessTree?: () => void;
+
   trackEvent(name: SessionViewTelemetryKey): void;
 }
 
@@ -187,7 +188,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);
       }
     },