[8.x] [Security Solution] Update footer link in rule preview to go to…

… rule details page (#195806) (#195833) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Update footer link in rule preview to go to rule details page (#195806)](#195806)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: christineweng <[email protected]>
elastic · Oct 10, 2024 · 7f4fd42 · 7f4fd42
1 parent afebfae
commit 7f4fd42
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 38 deletions.
diff --git a/x-pack/plugins/security_solution/public/flyout/rule_details/preview/footer.test.tsx b/x-pack/plugins/security_solution/public/flyout/rule_details/preview/footer.test.tsx
@@ -9,20 +9,21 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { RULE_PREVIEW_FOOTER_TEST_ID, RULE_PREVIEW_OPEN_RULE_FLYOUT_TEST_ID } from './test_ids';
 import { PreviewFooter } from './footer';
-import { mockFlyoutApi } from '../../document_details/shared/mocks/mock_flyout_context';
-import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
-import { RulePanelKey } from '../right';
+import { useRuleDetailsLink } from '../../document_details/shared/hooks/use_rule_details_link';
+import { TestProviders } from '../../../common/mock';
 
-jest.mock('@kbn/expandable-flyout');
+jest.mock('../../document_details/shared/hooks/use_rule_details_link');
 
-const renderRulePreviewFooter = () => render(<PreviewFooter ruleId="ruleid" />);
+const renderRulePreviewFooter = () =>
+  render(
+    <TestProviders>
+      <PreviewFooter ruleId="ruleid" />
+    </TestProviders>
+  );
 
 describe('<RulePreviewFooter />', () => {
-  beforeAll(() => {
-    jest.mocked(useExpandableFlyoutApi).mockReturnValue(mockFlyoutApi);
-  });
-
   it('should render rule details link correctly when ruleId is available', () => {
+    (useRuleDetailsLink as jest.Mock).mockReturnValue('rule_details_link');
     const { getByTestId } = renderRulePreviewFooter();
 
     expect(getByTestId(RULE_PREVIEW_FOOTER_TEST_ID)).toBeInTheDocument();
@@ -32,13 +33,9 @@ describe('<RulePreviewFooter />', () => {
     );
   });
 
-  it('should open rule flyout when clicked', () => {
-    const { getByTestId } = renderRulePreviewFooter();
-
-    getByTestId(RULE_PREVIEW_OPEN_RULE_FLYOUT_TEST_ID).click();
-
-    expect(mockFlyoutApi.openFlyout).toHaveBeenCalledWith({
-      right: { id: RulePanelKey, params: { ruleId: 'ruleid' } },
-    });
+  it('should not render the footer if rule link is not available', () => {
+    (useRuleDetailsLink as jest.Mock).mockReturnValue(null);
+    const { container } = renderRulePreviewFooter();
+    expect(container).toBeEmptyDOMElement();
   });
 });
diff --git a/x-pack/plugins/security_solution/public/flyout/rule_details/preview/footer.tsx b/x-pack/plugins/security_solution/public/flyout/rule_details/preview/footer.tsx
@@ -5,38 +5,27 @@
  * 2.0.
  */
 
-import React, { memo, useCallback } from 'react';
+import React, { memo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FlyoutFooter } from '@kbn/security-solution-common';
-import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { RULE_PREVIEW_FOOTER_TEST_ID, RULE_PREVIEW_OPEN_RULE_FLYOUT_TEST_ID } from './test_ids';
-import { RulePanelKey } from '../right';
+import { useRuleDetailsLink } from '../../document_details/shared/hooks/use_rule_details_link';
 
 /**
  * Footer in rule preview panel
  */
 export const PreviewFooter = memo(({ ruleId }: { ruleId: string }) => {
-  const { openFlyout } = useExpandableFlyoutApi();
+  const href = useRuleDetailsLink({ ruleId });
 
-  const openRuleFlyout = useCallback(() => {
-    openFlyout({
-      right: {
-        id: RulePanelKey,
-        params: {
-          ruleId,
-        },
-      },
-    });
-  }, [openFlyout, ruleId]);
-
-  return (
+  return href ? (
     <FlyoutFooter data-test-subj={RULE_PREVIEW_FOOTER_TEST_ID}>
       <EuiFlexGroup justifyContent="center">
         <EuiFlexItem grow={false}>
           <EuiLink
-            onClick={openRuleFlyout}
+            href={href}
             target="_blank"
+            external={false}
             data-test-subj={RULE_PREVIEW_OPEN_RULE_FLYOUT_TEST_ID}
           >
             {i18n.translate('xpack.securitySolution.flyout.preview.rule.viewDetailsLabel', {
@@ -46,7 +35,7 @@ export const PreviewFooter = memo(({ ruleId }: { ruleId: string }) => {
         </EuiFlexItem>
       </EuiFlexGroup>
     </FlyoutFooter>
-  );
+  ) : null;
 });
 
 PreviewFooter.displayName = 'PreviewFooter';
diff --git a/x-pack/plugins/security_solution/public/flyout/rule_details/right/index.test.tsx b/x-pack/plugins/security_solution/public/flyout/rule_details/right/index.test.tsx
@@ -10,7 +10,7 @@ import { render } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
 import { getMockTheme } from '../../../common/lib/kibana/kibana_react.mock';
 import { TestProviders } from '../../../common/mock';
-// import { TestProvider } from '@kbn/expandable-flyout/src/test/provider';
+import { useRuleDetailsLink } from '../../document_details/shared/hooks/use_rule_details_link';
 import { RulePanel } from '.';
 import { getStepsData } from '../../../detections/pages/detection_engine/rules/helpers';
 import { useRuleDetails } from '../hooks/use_rule_details';
@@ -23,6 +23,8 @@ import type { RuleResponse } from '../../../../common/api/detection_engine';
 import { BODY_TEST_ID, LOADING_TEST_ID } from './test_ids';
 import { RULE_PREVIEW_FOOTER_TEST_ID } from '../preview/test_ids';
 
+jest.mock('../../document_details/shared/hooks/use_rule_details_link');
+
 const mockUseRuleDetails = useRuleDetails as jest.Mock;
 jest.mock('../hooks/use_rule_details');
 
@@ -89,6 +91,7 @@ describe('<RulePanel />', () => {
   });
 
   it('should render preview footer when isPreviewMode is true', () => {
+    (useRuleDetailsLink as jest.Mock).mockReturnValue('rule_details_link');
     mockUseRuleDetails.mockReturnValue({
       rule,
       loading: false,
@@ -97,8 +100,6 @@ describe('<RulePanel />', () => {
     mockGetStepsData.mockReturnValue({});
     const { getByTestId } = renderRulePanel(true);
 
-    // await act(async () => {
     expect(getByTestId(RULE_PREVIEW_FOOTER_TEST_ID)).toBeInTheDocument();
-    // });
   });
 });