[Security Solution][Document Details] Refactor document details conte…

…xts (#186220)

## Summary

Renaming and consolidating the contexts in document details. No
functionality change in this PR.

This PR is part 2 of refactoring document details code for alert
preview:

1️⃣ separating the alert reason and rule overview into their own panels
#186218
2️⃣ ➡️ refactor left and right context to share
`DocumentDetailsPanelContext`, which will reduce code duplication and
allow component sharing for alert/event preview
3️⃣ set up preview context for the actual alert/event details preview


### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)

x-pack/plugins/security_solution/public/flyout/document_details/left/components/analyze_graph.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { TestProviders } from '../../../../common/mock';
 import { AnalyzeGraph } from './analyze_graph';
 import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
@@ -34,13 +34,13 @@ describe('<AnalyzeGraph />', () => {
   it('renders analyzer graph correctly', () => {
     const contextValue = {
       eventId: 'eventId',
-    } as unknown as LeftPanelContext;
+    } as unknown as DocumentDetailsContext;
 
     const wrapper = render(
       <TestProviders>
-        <LeftPanelContext.Provider value={contextValue}>
+        <DocumentDetailsContext.Provider value={contextValue}>
           <AnalyzeGraph />
-        </LeftPanelContext.Provider>
+        </DocumentDetailsContext.Provider>
       </TestProviders>
     );
     expect(wrapper.getByTestId(ANALYZER_GRAPH_TEST_ID)).toBeInTheDocument();

x-pack/plugins/security_solution/public/flyout/document_details/left/components/analyze_graph.tsx

@@ -8,7 +8,7 @@
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 
-import { useLeftPanelContext } from '../context';
+import { useDocumentDetailsContext } from '../../shared/context';
 import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
 import { Resolver } from '../../../../resolver/view';
 import { useTimelineDataFilters } from '../../../../timelines/containers/use_timeline_data_filters';
@@ -20,7 +20,7 @@ export const ANALYZE_GRAPH_ID = 'analyze_graph';
  * Analyzer graph view displayed in the document details expandable flyout left section under the Visualize tab
  */
 export const AnalyzeGraph: FC = () => {
-  const { eventId } = useLeftPanelContext();
+  const { eventId } = useDocumentDetailsContext();
   const scopeId = 'flyout'; // Different scope Id to distinguish flyout and data table analyzers
   const { from, to, shouldUpdate, selectedPatterns } = useTimelineDataFilters(
     isActiveTimeline(scopeId)

x-pack/plugins/security_solution/public/flyout/document_details/left/components/cell_actions.tsx

@@ -7,7 +7,7 @@
 
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import { useLeftPanelContext } from '../context';
+import { useDocumentDetailsContext } from '../../shared/context';
 import { getSourcererScopeId } from '../../../../helpers';
 import { useBasicDataFromDetailsData } from '../../../../timelines/components/side_panel/event_details/helpers';
 import { SecurityCellActionType } from '../../../../app/actions/constants';
@@ -40,7 +40,7 @@ interface CellActionsProps {
  * Security cell action wrapper for document details flyout
  */
 export const CellActions: FC<CellActionsProps> = ({ field, value, isObjectArray, children }) => {
-  const { dataFormattedForFieldBrowser, scopeId, isPreview } = useLeftPanelContext();
+  const { dataFormattedForFieldBrowser, scopeId, isPreview } = useDocumentDetailsContext();
   const { isAlert } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
 
   const triggerId = isAlert

x-pack/plugins/security_solution/public/flyout/document_details/left/components/correlations_details.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { CorrelationsDetails } from './correlations_details';
 import { TestProviders } from '../../../../common/mock';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { useShowRelatedAlertsByAncestry } from '../../shared/hooks/use_show_related_alerts_by_ancestry';
 import { useShowRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_show_related_alerts_by_same_source_event';
 import { useShowRelatedAlertsBySession } from '../../shared/hooks/use_show_related_alerts_by_session';
@@ -26,7 +26,7 @@ import { useFetchRelatedAlertsBySession } from '../../shared/hooks/use_fetch_rel
 import { useFetchRelatedAlertsByAncestry } from '../../shared/hooks/use_fetch_related_alerts_by_ancestry';
 import { useFetchRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_fetch_related_alerts_by_same_source_event';
 import { useFetchRelatedCases } from '../../shared/hooks/use_fetch_related_cases';
-import { mockContextValue } from '../mocks/mock_context';
+import { mockContextValue } from '../../shared/mocks/mock_context';
 import { useTimelineDataFilters } from '../../../../timelines/containers/use_timeline_data_filters';
 import { EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID } from '../../../shared/components/test_ids';
 
@@ -52,9 +52,9 @@ const mockUseTimelineDataFilters = useTimelineDataFilters as jest.Mock;
 const renderCorrelationDetails = () => {
   return render(
     <TestProviders>
-      <LeftPanelContext.Provider value={mockContextValue}>
+      <DocumentDetailsContext.Provider value={mockContextValue}>
         <CorrelationsDetails />
-      </LeftPanelContext.Provider>
+      </DocumentDetailsContext.Provider>
     </TestProviders>
   );
 };

x-pack/plugins/security_solution/public/flyout/document_details/left/components/correlations_details.tsx

@@ -15,7 +15,7 @@ import { RelatedCases } from './related_cases';
 import { useShowRelatedCases } from '../../shared/hooks/use_show_related_cases';
 import { useShowRelatedAlertsByAncestry } from '../../shared/hooks/use_show_related_alerts_by_ancestry';
 import { useShowSuppressedAlerts } from '../../shared/hooks/use_show_suppressed_alerts';
-import { useLeftPanelContext } from '../context';
+import { useDocumentDetailsContext } from '../../shared/context';
 import { useShowRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_show_related_alerts_by_same_source_event';
 import { useShowRelatedAlertsBySession } from '../../shared/hooks/use_show_related_alerts_by_session';
 import { RelatedAlertsByAncestry } from './related_alerts_by_ancestry';
@@ -29,7 +29,8 @@ export const CORRELATIONS_TAB_ID = 'correlations';
  * Correlations displayed in the document details expandable flyout left section under the Insights tab
  */
 export const CorrelationsDetails: React.FC = () => {
-  const { dataAsNestedObject, eventId, getFieldsData, scopeId, isPreview } = useLeftPanelContext();
+  const { dataAsNestedObject, eventId, getFieldsData, scopeId, isPreview } =
+    useDocumentDetailsContext();
 
   const { selectedPatterns } = useTimelineDataFilters(isActiveTimeline(scopeId));
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/entities_details.test.tsx

@@ -8,11 +8,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { TestProviders } from '../../../../common/mock';
 import { EntitiesDetails } from './entities_details';
 import { ENTITIES_DETAILS_TEST_ID, HOST_DETAILS_TEST_ID, USER_DETAILS_TEST_ID } from './test_ids';
-import { mockContextValue } from '../mocks/mock_context';
+import { mockContextValue } from '../../shared/mocks/mock_context';
 import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../../shared/components/test_ids';
 import type { Anomalies } from '../../../../common/components/ml/types';
 import { useMlCapabilities } from '../../../../common/components/ml/hooks/use_ml_capabilities';
@@ -100,12 +100,12 @@ const HOST_TEST_ID = EXPANDABLE_PANEL_CONTENT_TEST_ID(HOST_DETAILS_TEST_ID);
 
 const NO_DATA_MESSAGE = 'Host and user information are unavailable for this alert.';
 
-const renderEntitiesDetails = (contextValue: LeftPanelContext) =>
+const renderEntitiesDetails = (contextValue: DocumentDetailsContext) =>
   render(
     <TestProviders>
-      <LeftPanelContext.Provider value={contextValue}>
+      <DocumentDetailsContext.Provider value={contextValue}>
         <EntitiesDetails />
-      </LeftPanelContext.Provider>
+      </DocumentDetailsContext.Provider>
     </TestProviders>
   );
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/entities_details.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useLeftPanelContext } from '../context';
+import { useDocumentDetailsContext } from '../../shared/context';
 import { getField } from '../../shared/utils';
 import { UserDetails } from './user_details';
 import { HostDetails } from './host_details';
@@ -20,7 +20,7 @@ export const ENTITIES_TAB_ID = 'entity';
  * Entities displayed in the document details expandable flyout left section under the Insights tab
  */
 export const EntitiesDetails: React.FC = () => {
-  const { getFieldsData, scopeId } = useLeftPanelContext();
+  const { getFieldsData, scopeId } = useDocumentDetailsContext();
   const hostName = getField(getFieldsData('host.name'));
   const userName = getField(getFieldsData('user.name'));
   const timestamp = getField(getFieldsData('@timestamp'));

x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import type { Anomalies } from '../../../../common/components/ml/types';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { TestProviders } from '../../../../common/mock';
 import { HostDetails } from './host_details';
 import { useMlCapabilities } from '../../../../common/components/ml/hooks/use_ml_capabilities';
@@ -23,7 +23,7 @@ import {
 } from './test_ids';
 import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../../shared/components/test_ids';
 import { useRiskScore } from '../../../../entity_analytics/api/hooks/use_risk_score';
-import { mockContextValue } from '../mocks/mock_context';
+import { mockContextValue } from '../../shared/mocks/mock_context';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -124,12 +124,12 @@ const mockRelatedUsersResponse = {
   loading: false,
 };
 
-const renderHostDetails = (contextValue: LeftPanelContext) =>
+const renderHostDetails = (contextValue: DocumentDetailsContext) =>
   render(
     <TestProviders>
-      <LeftPanelContext.Provider value={contextValue}>
+      <DocumentDetailsContext.Provider value={contextValue}>
         <HostDetails {...defaultProps} />
-      </LeftPanelContext.Provider>
+      </DocumentDetailsContext.Provider>
     </TestProviders>
   );
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/investigation_guide.test.tsx

@@ -8,10 +8,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { InvestigationGuide } from './investigation_guide';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { TestProviders } from '../../../../common/mock';
 import { INVESTIGATION_GUIDE_TEST_ID, INVESTIGATION_GUIDE_LOADING_TEST_ID } from './test_ids';
-import { mockContextValue } from '../mocks/mock_context';
+import { mockContextValue } from '../../shared/mocks/mock_context';
 import { useInvestigationGuide } from '../../shared/hooks/use_investigation_guide';
 
 jest.mock('../../shared/hooks/use_investigation_guide');
@@ -20,11 +20,11 @@ const NO_DATA_TEXT =
   "There's no investigation guide for this rule. Edit the rule's settingsExternal link(opens in a new tab or window) to add one.";
 const PREVIEW_MESSAGE = 'Investigation guide is not available in alert preview.';
 
-const renderInvestigationGuide = (context: LeftPanelContext = mockContextValue) => (
+const renderInvestigationGuide = (context: DocumentDetailsContext = mockContextValue) => (
   <TestProviders>
-    <LeftPanelContext.Provider value={context}>
+    <DocumentDetailsContext.Provider value={context}>
       <InvestigationGuide />
-    </LeftPanelContext.Provider>
+    </DocumentDetailsContext.Provider>
   </TestProviders>
 );
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/investigation_guide.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useInvestigationGuide } from '../../shared/hooks/use_investigation_guide';
-import { useLeftPanelContext } from '../context';
+import { useDocumentDetailsContext } from '../../shared/context';
 import { INVESTIGATION_GUIDE_TEST_ID, INVESTIGATION_GUIDE_LOADING_TEST_ID } from './test_ids';
 import { InvestigationGuideView } from '../../../../common/components/event_details/investigation_guide_view';
 import { FlyoutLoading } from '../../../shared/components/flyout_loading';
@@ -18,7 +18,7 @@ import { FlyoutLoading } from '../../../shared/components/flyout_loading';
  * Renders a message saying the guide hasn't been set up or the full investigation guide.
  */
 export const InvestigationGuide: React.FC = () => {
-  const { dataFormattedForFieldBrowser, isPreview } = useLeftPanelContext();
+  const { dataFormattedForFieldBrowser, isPreview } = useDocumentDetailsContext();
 
   const { loading, error, basicAlertData, ruleNote } = useInvestigationGuide({
     dataFormattedForFieldBrowser,

x-pack/plugins/security_solution/public/flyout/document_details/left/components/notes_details.test.tsx

@@ -7,7 +7,7 @@
 
 import { render } from '@testing-library/react';
 import React from 'react';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { TestProviders } from '../../../../common/mock';
 import { NotesDetails } from './notes_details';
 
@@ -22,14 +22,14 @@ jest.mock('react-redux', () => {
 
 const panelContextValue = {
   eventId: 'event id',
-} as unknown as LeftPanelContext;
+} as unknown as DocumentDetailsContext;
 
 const renderNotesDetails = () =>
   render(
     <TestProviders>
-      <LeftPanelContext.Provider value={panelContextValue}>
+      <DocumentDetailsContext.Provider value={panelContextValue}>
         <NotesDetails />
-      </LeftPanelContext.Provider>
+      </DocumentDetailsContext.Provider>
     </TestProviders>
   );
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/notes_details.tsx

@@ -9,15 +9,15 @@ import React, { memo, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { NotesList } from './notes_list';
 import { fetchNotesByDocumentId } from '../../../../notes/store/notes.slice';
-import { useLeftPanelContext } from '../context';
+import { useDocumentDetailsContext } from '../../shared/context';
 
 /**
  * List all the notes for a document id and allows to create new notes associated with that document.
  * Displayed in the document details expandable flyout left section.
  */
 export const NotesDetails = memo(() => {
   const dispatch = useDispatch();
-  const { eventId } = useLeftPanelContext();
+  const { eventId } = useDocumentDetailsContext();
 
   useEffect(() => {
     dispatch(fetchNotesByDocumentId({ documentId: eventId }));

x-pack/plugins/security_solution/public/flyout/document_details/left/components/prevalence_details.test.tsx

@@ -7,7 +7,7 @@
 
 import { render } from '@testing-library/react';
 import React from 'react';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { PrevalenceDetails } from './prevalence_details';
 import {
   PREVALENCE_DETAILS_TABLE_ALERT_COUNT_CELL_TEST_ID,
@@ -53,16 +53,16 @@ const panelContextValue = {
   indexName: 'indexName',
   browserFields: {},
   dataFormattedForFieldBrowser: [],
-} as unknown as LeftPanelContext;
+} as unknown as DocumentDetailsContext;
 
 const UPSELL_MESSAGE = 'Host and user prevalence are only available with a';
 
 const renderPrevalenceDetails = () =>
   render(
     <TestProviders>
-      <LeftPanelContext.Provider value={panelContextValue}>
+      <DocumentDetailsContext.Provider value={panelContextValue}>
         <PrevalenceDetails />
-      </LeftPanelContext.Provider>
+      </DocumentDetailsContext.Provider>
     </TestProviders>
   );
 
@@ -170,9 +170,9 @@ describe('PrevalenceDetails', () => {
 
     const { getByTestId } = render(
       <TestProviders>
-        <LeftPanelContext.Provider value={panelContextValue}>
+        <DocumentDetailsContext.Provider value={panelContextValue}>
           <PrevalenceDetails />
-        </LeftPanelContext.Provider>
+        </DocumentDetailsContext.Provider>
       </TestProviders>
     );
 
@@ -207,9 +207,9 @@ describe('PrevalenceDetails', () => {
 
     const { getByTestId } = render(
       <TestProviders>
-        <LeftPanelContext.Provider value={panelContextValue}>
+        <DocumentDetailsContext.Provider value={panelContextValue}>
           <PrevalenceDetails />
-        </LeftPanelContext.Provider>
+        </DocumentDetailsContext.Provider>
       </TestProviders>
     );
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/prevalence_details.tsx

@@ -39,7 +39,7 @@ import {
   PREVALENCE_DETAILS_UPSELL_TEST_ID,
   PREVALENCE_DETAILS_TABLE_UPSELL_CELL_TEST_ID,
 } from './test_ids';
-import { useLeftPanelContext } from '../context';
+import { useDocumentDetailsContext } from '../../shared/context';
 import {
   getDataProvider,
   getDataProviderAnd,
@@ -296,7 +296,7 @@ const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
  * Prevalence table displayed in the document details expandable flyout left section under the Insights tab
  */
 export const PrevalenceDetails: React.FC = () => {
-  const { dataFormattedForFieldBrowser, investigationFields } = useLeftPanelContext();
+  const { dataFormattedForFieldBrowser, investigationFields } = useDocumentDetailsContext();
 
   const isPlatinumPlus = useLicense().isPlatinumPlus();
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/response_details.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { LeftPanelContext } from '../context';
+import { DocumentDetailsContext } from '../../shared/context';
 import { rawEventData, TestProviders } from '../../../../common/mock';
 import { RESPONSE_DETAILS_TEST_ID } from './test_ids';
 import { ResponseDetails } from './response_details';
@@ -68,7 +68,7 @@ const defaultContextValue = {
     _id: 'test',
   },
   searchHit: rawEventData,
-} as unknown as LeftPanelContext;
+} as unknown as DocumentDetailsContext;
 
 const contextWithResponseActions = {
   ...defaultContextValue,
@@ -88,12 +88,12 @@ const contextWithResponseActions = {
 };
 
 // Renders System Under Test
-const renderResponseDetails = (contextValue: LeftPanelContext) =>
+const renderResponseDetails = (contextValue: DocumentDetailsContext) =>
   render(
     <TestProviders>
-      <LeftPanelContext.Provider value={contextValue}>
+      <DocumentDetailsContext.Provider value={contextValue}>
         <ResponseDetails />
-      </LeftPanelContext.Provider>
+      </DocumentDetailsContext.Provider>
     </TestProviders>
   );