diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx index 0dad444ee6ece..4455bbf7e9db1 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx @@ -8,22 +8,15 @@ import React, { memo, useState, useCallback, useEffect } from 'react'; import { EuiButtonGroup, EuiSpacer } from '@elastic/eui'; import type { EuiButtonGroupOptionProps } from '@elastic/eui/src/components/button/button_group/button_group'; -import { useExpandableFlyoutApi, useExpandableFlyoutState } from '@kbn/expandable-flyout'; +import { useExpandableFlyoutState } from '@kbn/expandable-flyout'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { useDocumentDetailsContext } from '../../shared/context'; -import { useWhichFlyout } from '../../shared/hooks/use_which_flyout'; -import { DocumentDetailsAnalyzerPanelKey } from '../../shared/constants/panel_keys'; import { VISUALIZE_TAB_BUTTON_GROUP_TEST_ID, VISUALIZE_TAB_GRAPH_ANALYZER_BUTTON_TEST_ID, VISUALIZE_TAB_SESSION_VIEW_BUTTON_TEST_ID, } from './test_ids'; -import { - ANALYZE_GRAPH_ID, - AnalyzeGraph, - ANALYZER_PREVIEW_BANNER, -} from '../components/analyze_graph'; +import { ANALYZE_GRAPH_ID, AnalyzeGraph } from '../components/analyze_graph'; import { SESSION_VIEW_ID, SessionView } from '../components/session_view'; import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions'; import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction'; @@ -55,29 +48,19 @@ const visualizeButtons: EuiButtonGroupOptionProps[] = [ * Visualize view displayed in the document details expandable flyout left section */ export const VisualizeTab = memo(() => { - const { scopeId } = useDocumentDetailsContext(); - const { openPreviewPanel } = useExpandableFlyoutApi(); const panels = useExpandableFlyoutState(); const [activeVisualizationId, setActiveVisualizationId] = useState( panels.left?.path?.subTab ?? SESSION_VIEW_ID ); - const key = useWhichFlyout() ?? 'memory'; const { startTransaction } = useStartTransaction(); const onChangeCompressed = useCallback( (optionId: string) => { setActiveVisualizationId(optionId); if (optionId === ANALYZE_GRAPH_ID) { startTransaction({ name: ALERTS_ACTIONS.OPEN_ANALYZER }); - openPreviewPanel({ - id: DocumentDetailsAnalyzerPanelKey, - params: { - resolverComponentInstanceID: `${key}-${scopeId}`, - banner: ANALYZER_PREVIEW_BANNER, - }, - }); } }, - [startTransaction, openPreviewPanel, key, scopeId] + [startTransaction] ); useEffect(() => { diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.test.tsx index 334bf5f08721e..c1b1b57d90f22 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.test.tsx @@ -9,15 +9,10 @@ import { renderHook } from '@testing-library/react'; import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; import { useNavigateToAnalyzer } from './use_navigate_to_analyzer'; import { mockFlyoutApi } from '../mocks/mock_flyout_context'; -import { useWhichFlyout } from './use_which_flyout'; import { useKibana as mockUseKibana } from '../../../../common/lib/kibana/__mocks__'; import { useKibana } from '../../../../common/lib/kibana'; -import { - DocumentDetailsRightPanelKey, - DocumentDetailsLeftPanelKey, - DocumentDetailsAnalyzerPanelKey, -} from '../constants/panel_keys'; -import { ANALYZE_GRAPH_ID, ANALYZER_PREVIEW_BANNER } from '../../left/components/analyze_graph'; +import { DocumentDetailsRightPanelKey, DocumentDetailsLeftPanelKey } from '../constants/panel_keys'; +import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph'; jest.mock('@kbn/expandable-flyout'); jest.mock('../../../../common/lib/kibana'); @@ -26,10 +21,6 @@ jest.mock('./use_which_flyout'); const mockedUseKibana = mockUseKibana(); (useKibana as jest.Mock).mockReturnValue(mockedUseKibana); -const mockUseWhichFlyout = useWhichFlyout as jest.Mock; -const FLYOUT_KEY = 'SecuritySolution'; -const TIMELINE_FLYOUT_KEY = 'Timeline'; - const eventId = 'eventId1'; const indexName = 'index1'; const scopeId = 'scopeId1'; @@ -41,7 +32,6 @@ describe('useNavigateToAnalyzer', () => { }); it('when isFlyoutOpen is true, should return callback that opens left and preview panels', () => { - mockUseWhichFlyout.mockReturnValue(FLYOUT_KEY); const hookResult = renderHook(() => useNavigateToAnalyzer({ isFlyoutOpen: true, eventId, indexName, scopeId }) ); @@ -59,19 +49,9 @@ describe('useNavigateToAnalyzer', () => { scopeId, }, }); - - expect(mockFlyoutApi.openPreviewPanel).toHaveBeenCalledWith({ - id: DocumentDetailsAnalyzerPanelKey, - params: { - resolverComponentInstanceID: `${FLYOUT_KEY}-${scopeId}`, - banner: ANALYZER_PREVIEW_BANNER, - }, - }); }); it('when isFlyoutOpen is false and scopeId is not timeline, should return callback that opens a new flyout', () => { - mockUseWhichFlyout.mockReturnValue(null); - const hookResult = renderHook(() => useNavigateToAnalyzer({ isFlyoutOpen: false, eventId, indexName, scopeId }) ); @@ -97,18 +77,10 @@ describe('useNavigateToAnalyzer', () => { scopeId, }, }, - preview: { - id: DocumentDetailsAnalyzerPanelKey, - params: { - resolverComponentInstanceID: `${FLYOUT_KEY}-${scopeId}`, - banner: ANALYZER_PREVIEW_BANNER, - }, - }, }); }); it('when isFlyoutOpen is false and scopeId is current timeline, should return callback that opens a new flyout in timeline', () => { - mockUseWhichFlyout.mockReturnValue(null); const timelineId = 'timeline-1'; const hookResult = renderHook(() => useNavigateToAnalyzer({ isFlyoutOpen: false, eventId, indexName, scopeId: timelineId }) @@ -135,13 +107,6 @@ describe('useNavigateToAnalyzer', () => { scopeId: timelineId, }, }, - preview: { - id: DocumentDetailsAnalyzerPanelKey, - params: { - resolverComponentInstanceID: `${TIMELINE_FLYOUT_KEY}-${timelineId}`, - banner: ANALYZER_PREVIEW_BANNER, - }, - }, }); }); }); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.tsx index a4539ed7e6415..578f004608861 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.tsx @@ -10,15 +10,8 @@ import type { FlyoutPanelProps } from '@kbn/expandable-flyout'; import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; import type { Maybe } from '@kbn/timelines-plugin/common/search_strategy/common'; import { useKibana } from '../../../../common/lib/kibana'; -import { useWhichFlyout } from './use_which_flyout'; -import { ANALYZE_GRAPH_ID, ANALYZER_PREVIEW_BANNER } from '../../left/components/analyze_graph'; -import { - DocumentDetailsLeftPanelKey, - DocumentDetailsRightPanelKey, - DocumentDetailsAnalyzerPanelKey, -} from '../constants/panel_keys'; -import { Flyouts } from '../constants/flyouts'; -import { isTimelineScope } from '../../../../helpers'; +import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph'; +import { DocumentDetailsLeftPanelKey, DocumentDetailsRightPanelKey } from '../constants/panel_keys'; import { DocumentEventTypes } from '../../../../common/lib/telemetry'; export interface UseNavigateToAnalyzerParams { @@ -58,12 +51,7 @@ export const useNavigateToAnalyzer = ({ scopeId, }: UseNavigateToAnalyzerParams): UseNavigateToAnalyzerResult => { const { telemetry } = useKibana().services; - const { openLeftPanel, openPreviewPanel, openFlyout } = useExpandableFlyoutApi(); - let key = useWhichFlyout() ?? 'memory'; - - if (!isFlyoutOpen) { - key = isTimelineScope(scopeId) ? Flyouts.timeline : Flyouts.securitySolution; - } + const { openLeftPanel, openFlyout } = useExpandableFlyoutApi(); const right: FlyoutPanelProps = useMemo( () => ({ @@ -93,21 +81,9 @@ export const useNavigateToAnalyzer = ({ [eventId, indexName, scopeId] ); - const preview: FlyoutPanelProps = useMemo( - () => ({ - id: DocumentDetailsAnalyzerPanelKey, - params: { - resolverComponentInstanceID: `${key}-${scopeId}`, - banner: ANALYZER_PREVIEW_BANNER, - }, - }), - [key, scopeId] - ); - const navigateToAnalyzer = useCallback(() => { if (isFlyoutOpen) { openLeftPanel(left); - openPreviewPanel(preview); telemetry.reportEvent(DocumentEventTypes.DetailsFlyoutTabClicked, { location: scopeId, panel: 'left', @@ -117,24 +93,13 @@ export const useNavigateToAnalyzer = ({ openFlyout({ right, left, - preview, }); telemetry.reportEvent(DocumentEventTypes.DetailsFlyoutOpened, { location: scopeId, panel: 'left', }); } - }, [ - openFlyout, - openLeftPanel, - openPreviewPanel, - right, - left, - preview, - scopeId, - telemetry, - isFlyoutOpen, - ]); + }, [openFlyout, openLeftPanel, right, left, scopeId, telemetry, isFlyoutOpen]); return useMemo(() => ({ navigateToAnalyzer }), [navigateToAnalyzer]); };