[8.2.1] [Session View] Fix jump to alert can add extra space to the right of detail panel (#130935) (#131426)

* Fix jump to alert can add extra space to the right of detail panel

* Fix resizable panels initial size

* Fix alerts tab toggle view bottom gap

(cherry picked from commit 3f20878699)

Co-authored-by: Jack <zizhou.wang@elastic.co>

x-pack/plugins/session_view/public/components/detail_panel_alert_tab/styles.ts

@@ -24,12 +24,10 @@ export const useStyles = () => {
       top: 0,
       zIndex: 1,
       backgroundColor: colors.emptyShade,
-      paddingTop: size.base,
     };
 
     const viewMode: CSSObject = {
       margin: size.base,
-      marginBottom: 0,
     };
 
     return {

x-pack/plugins/session_view/public/components/session_view/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, useCallback, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   EuiEmptyPrompt,
   EuiButton,
@@ -78,6 +78,8 @@ export const SessionView = ({
 
   const styles = useStyles({ height, isFullScreen });
 
+  const detailPanelCollapseFn = useRef(() => {});
+
   // to give an indication to the user that there may be more search results if they turn on verbose mode.
   const showVerboseSearchTooltip = useMemo(() => {
     return !!(!displayOptions?.verboseMode && searchQuery && searchResults?.length === 0);
@@ -122,7 +124,6 @@ export const SessionView = ({
   const hasData = alerts && data && data.pages?.[0].events.length > 0;
   const hasError = error || alertsError;
   const renderIsLoading = (isFetching || alertsFetching) && !(data && alerts);
-  const renderDetails = isDetailOpen && selectedProcess;
   const { data: newUpdatedAlertsStatus } = useFetchAlertStatus(
     updatedAlertsStatus,
     fetchAlertStatus[0] ?? ''
@@ -141,6 +142,7 @@ export const SessionView = ({
   }, []);
 
   const toggleDetailPanel = useCallback(() => {
+    detailPanelCollapseFn.current();
     setIsDetailOpen(!isDetailOpen);
   }, [isDetailOpen]);
 
@@ -240,89 +242,83 @@ export const SessionView = ({
         </EuiPanel>
         <EuiHorizontalRule margin="none" />
         <EuiResizableContainer>
-          {(EuiResizablePanel, EuiResizableButton) => (
-            <>
-              <EuiResizablePanel
-                initialSize={isDetailOpen ? 75 : 100}
-                minSize="60%"
-                paddingSize="none"
-              >
-                {hasError && (
-                  <EuiEmptyPrompt
-                    iconType="alert"
-                    color="danger"
-                    title={
-                      <h2>
-                        <FormattedMessage
-                          id="xpack.sessionView.errorHeading"
-                          defaultMessage="Error loading Session View"
-                        />
-                      </h2>
-                    }
-                    body={
-                      <p>
-                        <FormattedMessage
-                          id="xpack.sessionView.errorMessage"
-                          defaultMessage="There was an error loading the Session View."
-                        />
-                      </p>
-                    }
+          {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
+            detailPanelCollapseFn.current = () => {
+              togglePanel?.('session-detail-panel', { direction: 'left' });
+            };
+
+            return (
+              <>
+                <EuiResizablePanel initialSize={100} minSize="60%" paddingSize="none">
+                  {hasError && (
+                    <EuiEmptyPrompt
+                      iconType="alert"
+                      color="danger"
+                      title={
+                        <h2>
+                          <FormattedMessage
+                            id="xpack.sessionView.errorHeading"
+                            defaultMessage="Error loading Session View"
+                          />
+                        </h2>
+                      }
+                      body={
+                        <p>
+                          <FormattedMessage
+                            id="xpack.sessionView.errorMessage"
+                            defaultMessage="There was an error loading the Session View."
+                          />
+                        </p>
+                      }
+                    />
+                  )}
+
+                  {hasData && (
+                    <div css={styles.processTree}>
+                      <ProcessTree
+                        key={sessionEntityId + currentJumpToCursor}
+                        sessionEntityId={sessionEntityId}
+                        data={data.pages}
+                        alerts={alerts}
+                        searchQuery={searchQuery}
+                        selectedProcess={selectedProcess}
+                        onProcessSelected={onProcessSelected}
+                        jumpToEntityId={currentJumpToEntityId}
+                        investigatedAlertId={investigatedAlertId}
+                        isFetching={isFetching}
+                        hasPreviousPage={hasPreviousPage}
+                        hasNextPage={hasNextPage}
+                        fetchNextPage={fetchNextPage}
+                        fetchPreviousPage={fetchPreviousPage}
+                        setSearchResults={setSearchResults}
+                        updatedAlertsStatus={updatedAlertsStatus}
+                        onShowAlertDetails={onShowAlertDetails}
+                        showTimestamp={displayOptions?.timestamp}
+                        verboseMode={displayOptions?.verboseMode}
+                      />
+                    </div>
+                  )}
+                </EuiResizablePanel>
+
+                <EuiResizableButton css={styles.resizeHandle} />
+                <EuiResizablePanel
+                  id="session-detail-panel"
+                  initialSize={30}
+                  minSize="320px"
+                  paddingSize="none"
+                  css={styles.detailPanel}
+                >
+                  <SessionViewDetailPanel
+                    alerts={alerts}
+                    investigatedAlertId={investigatedAlertId}
+                    selectedProcess={selectedProcess}
+                    onJumpToEvent={onJumpToEvent}
+                    onShowAlertDetails={onShowAlertDetails}
                   />
-                )}
-
-                {hasData && (
-                  <div css={styles.processTree}>
-                    <ProcessTree
-                      key={sessionEntityId + currentJumpToCursor}
-                      sessionEntityId={sessionEntityId}
-                      data={data.pages}
-                      alerts={alerts}
-                      searchQuery={searchQuery}
-                      selectedProcess={selectedProcess}
-                      onProcessSelected={onProcessSelected}
-                      jumpToEntityId={currentJumpToEntityId}
-                      investigatedAlertId={investigatedAlertId}
-                      isFetching={isFetching}
-                      hasPreviousPage={hasPreviousPage}
-                      hasNextPage={hasNextPage}
-                      fetchNextPage={fetchNextPage}
-                      fetchPreviousPage={fetchPreviousPage}
-                      setSearchResults={setSearchResults}
-                      updatedAlertsStatus={updatedAlertsStatus}
-                      onShowAlertDetails={onShowAlertDetails}
-                      showTimestamp={displayOptions?.timestamp}
-                      verboseMode={displayOptions?.verboseMode}
-                    />
-                  </div>
-                )}
-              </EuiResizablePanel>
-
-              {renderDetails ? (
-                <>
-                  <EuiResizableButton css={styles.resizeHandle} />
-                  <EuiResizablePanel
-                    id="session-detail-panel"
-                    initialSize={25}
-                    minSize="320px"
-                    paddingSize="none"
-                    css={styles.detailPanel}
-                  >
-                    <SessionViewDetailPanel
-                      alerts={alerts}
-                      investigatedAlertId={investigatedAlertId}
-                      selectedProcess={selectedProcess}
-                      onJumpToEvent={onJumpToEvent}
-                      onShowAlertDetails={onShowAlertDetails}
-                    />
-                  </EuiResizablePanel>
-                </>
-              ) : (
-                <>
-                  {/* Returning an empty element here (instead of false) to avoid a bug in EuiResizableContainer */}
-                </>
-              )}
-            </>
-          )}
+                </EuiResizablePanel>
+              </>
+            );
+          }}
         </EuiResizableContainer>
       </div>
     </>

x-pack/plugins/session_view/public/components/session_view_detail_panel/helpers.ts

@@ -37,7 +37,7 @@ const getDetailPanelProcessLeader = (leader: ProcessFields | undefined) => ({
   entryMetaSourceIp: leader?.entry_meta?.source?.ip ?? DEFAULT_PROCESS_DATA.entryMetaSourceIp,
 });
 
-export const getDetailPanelProcess = (process: Process | undefined) => {
+export const getDetailPanelProcess = (process: Process | null) => {
   const processData = {} as DetailPanelProcess;
   if (!process) {
     return {

x-pack/plugins/session_view/public/components/session_view_detail_panel/index.test.tsx

@@ -38,10 +38,10 @@ describe('SessionView component', () => {
       expect(renderResult.queryByText('8e4daeb2-4a4e-56c4-980e-f0dcfdbc3726')).toBeVisible();
     });
 
-    it('should should default state with selectedProcess undefined', async () => {
+    it('should should default state with selectedProcess null', async () => {
       renderResult = mockedContext.render(
         <SessionViewDetailPanel
-          selectedProcess={undefined}
+          selectedProcess={null}
           onJumpToEvent={mockOnJumpToEvent}
           onShowAlertDetails={mockShowAlertDetails}
         />

x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx

@@ -17,7 +17,7 @@ import { DetailPanelAlertTab } from '../detail_panel_alert_tab';
 import { ALERT_COUNT_THRESHOLD } from '../../../common/constants';
 
 interface SessionViewDetailPanelDeps {
-  selectedProcess: Process | undefined;
+  selectedProcess: Process | null;
   alerts?: ProcessEvent[];
   investigatedAlertId?: string;
   onJumpToEvent: (event: ProcessEvent) => void;