[Security Solution] Alerts details

x-pack/plugins/security_solution/common/search_strategy/timeline/events/details/index.ts

@@ -9,6 +9,7 @@ import { Inspect, Maybe } from '../../../common';
 import { TimelineRequestOptionsPaginated } from '../..';
 
 export interface TimelineEventsDetailsItem {
+  category?: string;
   field: string;
   values?: Maybe<string[]>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

x-pack/plugins/security_solution/cypress/integration/alerts_timeline.spec.ts

@@ -4,14 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ALERT_ID } from '../screens/alerts';
 import { PROVIDER_BADGE } from '../screens/timeline';
 
-import {
-  expandFirstAlert,
-  investigateFirstAlertInTimeline,
-  waitForAlertsPanelToBeLoaded,
-} from '../tasks/alerts';
+import { investigateFirstAlertInTimeline, waitForAlertsPanelToBeLoaded } from '../tasks/alerts';
 import { esArchiverLoad, esArchiverUnload } from '../tasks/es_archiver';
 import { loginAndWaitForPage } from '../tasks/login';
 
@@ -29,13 +24,13 @@ describe('Alerts timeline', () => {
 
   it('Investigate alert in default timeline', () => {
     waitForAlertsPanelToBeLoaded();
-    expandFirstAlert();
-    cy.get(ALERT_ID)
+    investigateFirstAlertInTimeline();
+    cy.get(PROVIDER_BADGE)
       .first()
       .invoke('text')
       .then((eventId) => {
         investigateFirstAlertInTimeline();
-        cy.get(PROVIDER_BADGE).filter(':visible').should('have.text', `_id: "${eventId}"`);
+        cy.get(PROVIDER_BADGE).filter(':visible').should('have.text', eventId);
       });
   });
 });

x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx

@@ -360,6 +360,15 @@ export const CaseComponent = React.memo<CaseProps>(
       [dispatch]
     );
 
+    const handleCloseExpandedEvent = useCallback(() => {
+      dispatch(
+        timelineActions.toggleExpandedEvent({
+          timelineId: TimelineId.casePage,
+          event: {},
+        })
+      );
+    }, [dispatch]);
+
     // useEffect used for component's initialization
     useEffect(() => {
       if (init.current) {
@@ -483,6 +492,7 @@ export const CaseComponent = React.memo<CaseProps>(
           browserFields={browserFields}
           docValueFields={docValueFields}
           timelineId={TimelineId.casePage}
+          handleCloseExpandedEvent={handleCloseExpandedEvent}
         />
         <SpyRoute state={spyState} pageName={SecurityPageName.case} />
       </>