[Security solution] Fixes old alert flyout bug on Attack Discovery (e…

…lastic#183184)

x-pack/plugins/security_solution/public/common/components/control_columns/row_action/index.test.tsx

@@ -6,18 +6,15 @@
  */
 
 import { TableId } from '@kbn/securitysolution-data-table';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { RowAction } from '.';
 import { defaultHeaders, TestProviders } from '../../../mock';
 import { getDefaultControlColumn } from '../../../../timelines/components/timeline/body/control_columns';
-import { useIsExperimentalFeatureEnabled } from '../../../hooks/use_experimental_features';
-
-jest.mock('../../../hooks/use_experimental_features', () => ({
-  useIsExperimentalFeatureEnabled: jest.fn().mockReturnValue(false),
-}));
-const useIsExperimentalFeatureEnabledMock = useIsExperimentalFeatureEnabled as jest.Mock;
-useIsExperimentalFeatureEnabledMock.mockReturnValue(false);
+import { useRouteSpy } from '../../../utils/route/use_route_spy';
+import type { RouteSpyState } from '../../../utils/route/types';
+import { SecurityPageName } from '@kbn/deeplinks-security';
+import { createTelemetryServiceMock } from '../../../lib/telemetry/telemetry_service.mock';
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => {
@@ -28,7 +25,44 @@ jest.mock('react-redux', () => {
     useDispatch: () => mockDispatch,
   };
 });
+const mockOpenFlyout = jest.fn();
+
+jest.mock('../../../utils/route/use_route_spy');
+
+jest.mock('@kbn/expandable-flyout', () => {
+  return {
+    useExpandableFlyoutApi: () => ({ openFlyout: mockOpenFlyout }),
+  };
+});
+
+const mockedTelemetry = createTelemetryServiceMock();
+jest.mock('../../../lib/kibana', () => {
+  const original = jest.requireActual('../../../lib/kibana');
+  return {
+    ...original,
+    useKibana: () => ({
+      ...original.useKibana(),
+      services: {
+        ...original.useKibana().services,
+        telemetry: mockedTelemetry,
+      },
+    }),
+  };
+});
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+  };
+});
 
+const mockRouteSpy: RouteSpyState = {
+  pageName: SecurityPageName.overview,
+  detailName: undefined,
+  tabName: undefined,
+  search: '',
+  pathName: '/',
+};
 describe('RowAction', () => {
   const sampleData = {
     _id: '1',
@@ -63,6 +97,12 @@ describe('RowAction', () => {
     tabType: 'query',
     showCheckboxes: false,
   };
+
+  beforeEach(() => {
+    (useRouteSpy as jest.Mock).mockReturnValue([mockRouteSpy]);
+    jest.clearAllMocks();
+  });
+
   test('displays expand events button', () => {
     const wrapper = render(
       <TestProviders>
@@ -71,4 +111,29 @@ describe('RowAction', () => {
     );
     expect(wrapper.getAllByTestId('expand-event')).not.toBeNull();
   });
+
+  test('Uses the old flyout when the experimental feature returns false', () => {
+    const wrapper = render(
+      <TestProviders>
+        <RowAction {...defaultProps} />
+      </TestProviders>
+    );
+    fireEvent.click(wrapper.getByTestId('expand-event'));
+    expect(mockDispatch).toHaveBeenCalled();
+    expect(mockOpenFlyout).not.toHaveBeenCalled();
+  });
+
+  test('Uses the new flyout when the experimental feature returns false but the page is attackDiscovery', () => {
+    (useRouteSpy as jest.Mock).mockReturnValue([
+      { ...mockRouteSpy, pageName: SecurityPageName.attackDiscovery },
+    ]);
+    const wrapper = render(
+      <TestProviders>
+        <RowAction {...defaultProps} />
+      </TestProviders>
+    );
+    fireEvent.click(wrapper.getByTestId('expand-event'));
+    expect(mockDispatch).not.toHaveBeenCalled();
+    expect(mockOpenFlyout).toHaveBeenCalled();
+  });
 });

x-pack/plugins/security_solution/public/common/components/control_columns/row_action/index.tsx

@@ -11,9 +11,13 @@ import { useDispatch } from 'react-redux';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { dataTableActions, TableId } from '@kbn/securitysolution-data-table';
 import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
+import { useRouteSpy } from '../../../utils/route/use_route_spy';
 import { useKibana } from '../../../lib/kibana';
 import { timelineActions } from '../../../../timelines/store';
-import { ENABLE_EXPANDABLE_FLYOUT_SETTING } from '../../../../../common/constants';
+import {
+  ENABLE_EXPANDABLE_FLYOUT_SETTING,
+  SecurityPageName,
+} from '../../../../../common/constants';
 import { DocumentDetailsRightPanelKey } from '../../../../flyout/document_details/shared/constants/panel_keys';
 import type {
   SetEventsDeleted,
@@ -74,6 +78,7 @@ const RowActionComponent = ({
   const { openFlyout } = useExpandableFlyoutApi();
 
   const dispatch = useDispatch();
+  const [{ pageName }] = useRouteSpy();
   const [isSecurityFlyoutEnabled] = useUiSetting$<boolean>(ENABLE_EXPANDABLE_FLYOUT_SETTING);
   const isExpandableFlyoutInCreateRuleEnabled = useIsExperimentalFeatureEnabled(
     'expandableFlyoutInCreateRuleEnabled'
@@ -95,7 +100,11 @@ const RowActionComponent = ({
   );
 
   let showExpandableFlyout: boolean;
-  if (tableId === TableId.rulePreview) {
+
+  // disable the old flyout on attack discovery page
+  if (pageName === SecurityPageName.attackDiscovery) {
+    showExpandableFlyout = true;
+  } else if (tableId === TableId.rulePreview) {
     showExpandableFlyout = isSecurityFlyoutEnabled && isExpandableFlyoutInCreateRuleEnabled;
   } else {
     showExpandableFlyout = isSecurityFlyoutEnabled;