Skip to content

Commit

Permalink
disable auto open analyzer panels in flyout
Browse files Browse the repository at this point in the history
  • Loading branch information
@christineweng
christineweng committed Dec 9, 2024
1 parent 598d3de commit 399de9d
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 96 deletions.
23 changes: 3 additions & 20 deletions x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(() => {
Expand Down
39 changes: 2 additions & 37 deletions ...ty_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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';
Expand All @@ -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 })
);
Expand All @@ -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 })
);
Expand All @@ -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 })
Expand All @@ -135,13 +107,6 @@ describe('useNavigateToAnalyzer', () => {
scopeId: timelineId,
},
},
preview: {
id: DocumentDetailsAnalyzerPanelKey,
params: {
resolverComponentInstanceID: `${TIMELINE_FLYOUT_KEY}-${timelineId}`,
banner: ANALYZER_PREVIEW_BANNER,
},
},
});
});
});
43 changes: 4 additions & 39 deletions ...ecurity_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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(
() => ({
Expand Down Expand Up @@ -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',
Expand All @@ -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]);
};

0 comments on commit 399de9d

Please sign in to comment.