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

…details page (elastic#195806)

## Summary

Currently, the rule preview footer will open the rule flyout. Although
this behavior is consistent with other previews (host, user, alert
etc.), the rule flyout does not provide additional information for
users. This PR updates the footer go to rule details page instead.



https://github.com/user-attachments/assets/6de03775-b1a4-41b9-b233-7817d6cca8ec


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Jan Monschke <[email protected]>

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();
   });
 });

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';

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();
-    // });
   });
 });