Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[9.0] [Security Solution] Enable new flyout navigation flag (#211330) #211840

Merged
merged 2 commits into from
Feb 19, 2025
Merged

[9.0] [Security Solution] Enable new flyout navigation flag (#211330) #211840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
71fb1e8
[Security Solution] Enable new flyout navigation flag (#211330)
christineweng Feb 19, 2025
4fc74f9
Merge branch '9.0' into backport/9.0/pr-211330
christineweng Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions x-pack/solutions/security/plugins/security_solution/common/experimental_features.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,9 +252,9 @@ export const allowedExperimentalValues = Object.freeze({
defendInsights: true,

/**
* Enables flyout history and new preview navigation
* Disables flyout history and new preview navigation
*/
newExpandableFlyoutNavigationEnabled: false,
newExpandableFlyoutNavigationDisabled: false,

/**
* Enables CrowdStrike's RunScript RTR command
Expand Down
284 changes: 146 additions & 138 deletions ...ution/public/flyout/document_details/right/components/analyzer_preview_container.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,63 +82,13 @@ const renderAnalyzerPreview = (context = mockContextValue) =>
);

describe('AnalyzerPreviewContainer', () => {
beforeEach(() => {
jest.clearAllMocks();
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(false);
});

it('should render component and link in header', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

const { getByTestId } = renderAnalyzerPreview();

expect(getByTestId(ANALYZER_PREVIEW_TEST_ID)).toBeInTheDocument();
expect(
getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
screen.queryByTestId(EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
expect(
screen.getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
screen.getByTestId(EXPANDABLE_PANEL_CONTENT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
screen.queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
expect(
screen.getByTestId(EXPANDABLE_PANEL_CONTENT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toHaveTextContent(NO_ANALYZER_MESSAGE);
});

it('should render error message and text in header', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(false);
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
describe('when newExpandableFlyoutNavigationDisabled is true', () => {
beforeEach(() => {
jest.clearAllMocks();
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
});

const { getByTestId } = renderAnalyzerPreview();
expect(
getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
getByTestId(EXPANDABLE_PANEL_CONTENT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toHaveTextContent(NO_ANALYZER_MESSAGE);
});

describe('when visualizationInFlyoutEnabled is disabled', () => {
it('should navigate to analyzer in timeline when clicking on title', () => {
it('should render component and link in header', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
Expand All @@ -152,116 +102,174 @@ describe('AnalyzerPreviewContainer', () => {

const { getByTestId } = renderAnalyzerPreview();

const { investigateInTimelineAlertClick } = useInvestigateInTimeline({});

getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID)).click();
expect(investigateInTimelineAlertClick).toHaveBeenCalled();
});

it('should not navigate to analyzer when in preview and clicking on title', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

const { queryByTestId } = renderAnalyzerPreview({ ...mockContextValue, isPreview: true });
expect(getByTestId(ANALYZER_PREVIEW_TEST_ID)).toBeInTheDocument();
expect(
getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
screen.queryByTestId(EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
expect(
screen.getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
screen.getByTestId(EXPANDABLE_PANEL_CONTENT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
screen.queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
const { investigateInTimelineAlertClick } = useInvestigateInTimeline({});
expect(investigateInTimelineAlertClick).not.toHaveBeenCalled();
expect(
screen.getByTestId(EXPANDABLE_PANEL_CONTENT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toHaveTextContent(NO_ANALYZER_MESSAGE);
});

it('should not navigate to analyzer when in preview mode', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
it('should render error message and text in header', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(false);
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

const { queryByTestId } = renderAnalyzerPreview({ ...mockContextValue, isPreviewMode: true });
const { getByTestId } = renderAnalyzerPreview();
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
const { investigateInTimelineAlertClick } = useInvestigateInTimeline({});
expect(investigateInTimelineAlertClick).not.toHaveBeenCalled();
getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toBeInTheDocument();
expect(
getByTestId(EXPANDABLE_PANEL_CONTENT_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).toHaveTextContent(NO_ANALYZER_MESSAGE);
});
});

describe('when visualizationInFlyoutEnabled is enabled', () => {
it('should open left flyout visualization tab when clicking on title', () => {
mockUseUiSetting.mockReturnValue([true]);
describe('when visualizationInFlyoutEnabled is disabled', () => {
it('should navigate to analyzer in timeline when clicking on title', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
const { getByTestId } = renderAnalyzerPreview();

const { investigateInTimelineAlertClick } = useInvestigateInTimeline({});

getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID)).click();
expect(investigateInTimelineAlertClick).toHaveBeenCalled();
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),

it('should not navigate to analyzer when in preview and clicking on title', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

const { queryByTestId } = renderAnalyzerPreview({ ...mockContextValue, isPreview: true });
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
const { investigateInTimelineAlertClick } = useInvestigateInTimeline({});
expect(investigateInTimelineAlertClick).not.toHaveBeenCalled();
});

const { getByTestId } = renderAnalyzerPreview();
it('should not navigate to analyzer when in preview mode', () => {
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID)).click();
expect(mockNavigateToAnalyzer).toHaveBeenCalled();
const { queryByTestId } = renderAnalyzerPreview({
...mockContextValue,
isPreviewMode: true,
});
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
const { investigateInTimelineAlertClick } = useInvestigateInTimeline({});
expect(investigateInTimelineAlertClick).not.toHaveBeenCalled();
});
});

it('should disable link when in rule preview', () => {
mockUseUiSetting.mockReturnValue([true]);
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});
describe('when visualizationInFlyoutEnabled is enabled', () => {
it('should open left flyout visualization tab when clicking on title', () => {
mockUseUiSetting.mockReturnValue([true]);

const { queryByTestId } = renderAnalyzerPreview({ ...mockContextValue, isPreview: true });
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
});
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

it('should disable link when in preview mode', () => {
mockUseUiSetting.mockReturnValue([true]);
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
const { getByTestId } = renderAnalyzerPreview();

getByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID)).click();
expect(mockNavigateToAnalyzer).toHaveBeenCalled();
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),

it('should disable link when in rule preview', () => {
mockUseUiSetting.mockReturnValue([true]);
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

const { queryByTestId } = renderAnalyzerPreview({ ...mockContextValue, isPreview: true });
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
});

const { queryByTestId } = renderAnalyzerPreview({ ...mockContextValue, isPreviewMode: true });
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
it('should disable link when in preview mode', () => {
mockUseUiSetting.mockReturnValue([true]);
(useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
(useAlertPrevalenceFromProcessTree as jest.Mock).mockReturnValue({
loading: false,
error: false,
alertIds: ['alertid'],
statsNodes: mock.mockStatsNodes,
});
(useInvestigateInTimeline as jest.Mock).mockReturnValue({
investigateInTimelineAlertClick: jest.fn(),
});

const { queryByTestId } = renderAnalyzerPreview({
...mockContextValue,
isPreviewMode: true,
});
expect(
queryByTestId(EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(ANALYZER_PREVIEW_TEST_ID))
).not.toBeInTheDocument();
});
});
});

describe('when new navigation is enabled', () => {
describe('when newExpandableFlyoutNavigationDisabled is false', () => {
beforeEach(() => {
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(false);
});
describe('when visualizationInFlyoutEnabled is enabled', () => {
beforeEach(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...y_solution/public/flyout/document_details/right/components/analyzer_preview_container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export const AnalyzerPreviewContainer: React.FC = () => {
const [visualizationInFlyoutEnabled] = useUiSetting$<boolean>(
ENABLE_VISUALIZATIONS_IN_FLYOUT_SETTING
);
const isNewNavigationEnabled = useIsExperimentalFeatureEnabled(
'newExpandableFlyoutNavigationEnabled'
const isNewNavigationEnabled = !useIsExperimentalFeatureEnabled(
'newExpandableFlyoutNavigationDisabled'
);
// decide whether to show the analyzer preview or not
const isEnabled = useIsInvestigateInResolverActionEnabled(dataAsNestedObject);
Expand Down
6 changes: 3 additions & 3 deletions ...curity_solution/public/flyout/document_details/right/components/response_section.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const renderResponseSection = () =>

describe('<ResponseSection />', () => {
beforeEach(() => {
mockUseIsExperimentalFeatureEnabled.mockReturnValue(false);
mockUseIsExperimentalFeatureEnabled.mockReturnValue(true);
});

it('should render response component', () => {
Expand Down Expand Up @@ -155,9 +155,9 @@ describe('<ResponseSection />', () => {
expect(container).toBeEmptyDOMElement();
});

describe('newExpandableFlyoutNavigationEnabled', () => {
describe('newExpandableFlyoutNavigationDisabled is false', () => {
beforeEach(() => {
mockUseIsExperimentalFeatureEnabled.mockReturnValue(true);
mockUseIsExperimentalFeatureEnabled.mockReturnValue(false);
});

it('should render if isPreviewMode is true', () => {
Expand Down
4 changes: 2 additions & 2 deletions ...ns/security_solution/public/flyout/document_details/right/components/response_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export const ResponseSection = memo(() => {
const expanded = useExpandSection({ title: KEY, defaultValue: false });
const eventKind = getField(getFieldsData('event.kind'));

const isNewNavigationEnabled = useIsExperimentalFeatureEnabled(
'newExpandableFlyoutNavigationEnabled'
const isNewNavigationEnabled = !useIsExperimentalFeatureEnabled(
'newExpandableFlyoutNavigationDisabled'
);

const content = useMemo(() => {
Expand Down
Loading