[8.10] [Security Solution] expandable flyout - show deleted rule badge in rule preview (#164965) (#165017)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution] expandable flyout - show deleted rule badge in
rule preview (#164965)](https://github.com/elastic/kibana/pull/164965)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2023-08-28T16:37:15Z","message":"[Security
Solution] expandable flyout - show deleted rule badge in rule preview
(#164965)","sha":"d94bd8de0df116a7529453f945a1deaa1a7c011b","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Threat
Hunting:Investigations","v8.10.0","v8.11.0"],"number":164965,"url":"https://github.com/elastic/kibana/pull/164965","mergeCommit":{"message":"[Security
Solution] expandable flyout - show deleted rule badge in rule preview
(#164965)","sha":"d94bd8de0df116a7529453f945a1deaa1a7c011b"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164965","number":164965,"mergeCommit":{"message":"[Security
Solution] expandable flyout - show deleted rule badge in rule preview
(#164965)","sha":"d94bd8de0df116a7529453f945a1deaa1a7c011b"}}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>

x-pack/plugins/security_solution/public/flyout/preview/components/rule_preview.tsx

@@ -34,7 +34,11 @@ import * as i18n from './translations';
 export const RulePreview: React.FC = memo(() => {
   const { ruleId, indexPattern } = usePreviewPanelContext();
   const [rule, setRule] = useState<Rule | null>(null);
-  const { rule: maybeRule, loading: ruleLoading } = useRuleWithFallback(ruleId ?? '');
+  const {
+    rule: maybeRule,
+    loading: ruleLoading,
+    isExistingRule,
+  } = useRuleWithFallback(ruleId ?? '');
   const { data } = useKibana().services;
 
   // persist rule until refresh is complete
@@ -77,7 +81,7 @@ export const RulePreview: React.FC = memo(() => {
 
   return rule ? (
     <EuiPanel hasShadow={false} data-test-subj={RULE_PREVIEW_BODY_TEST_ID} className="eui-yScroll">
-      <RulePreviewTitle rule={rule} />
+      <RulePreviewTitle rule={rule} isSuppressed={!isExistingRule} />
       <EuiHorizontalRule margin="s" />
       <ExpandableSection
         title={i18n.RULE_PREVIEW_ABOUT_TEXT}

x-pack/plugins/security_solution/public/flyout/preview/components/rule_preview_title.test.tsx

@@ -16,15 +16,17 @@ import {
   RULE_PREVIEW_TITLE_TEST_ID,
   RULE_PREVIEW_RULE_CREATED_BY_TEST_ID,
   RULE_PREVIEW_RULE_UPDATED_BY_TEST_ID,
+  RULE_PREVIEW_RULE_TITLE_SUPPRESSED_TEST_ID,
 } from './test_ids';
 
 const defaultProps = {
   rule: { id: 'id' } as Rule,
+  isSuppressed: false,
 };
 
 describe('<RulePreviewTitle />', () => {
   it('should render title and its components', () => {
-    const { getByTestId } = render(
+    const { getByTestId, queryByTestId } = render(
       <TestProviders>
         <ExpandableFlyoutContext.Provider value={mockFlyoutContextValue}>
           <RulePreviewTitle {...defaultProps} />
@@ -34,5 +36,21 @@ describe('<RulePreviewTitle />', () => {
     expect(getByTestId(RULE_PREVIEW_TITLE_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(RULE_PREVIEW_RULE_CREATED_BY_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(RULE_PREVIEW_RULE_UPDATED_BY_TEST_ID)).toBeInTheDocument();
+    expect(queryByTestId(RULE_PREVIEW_RULE_TITLE_SUPPRESSED_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('should render deleted rule badge', () => {
+    const props = {
+      ...defaultProps,
+      isSuppressed: true,
+    };
+    const { getByTestId } = render(
+      <TestProviders>
+        <ExpandableFlyoutContext.Provider value={mockFlyoutContextValue}>
+          <RulePreviewTitle {...props} />
+        </ExpandableFlyoutContext.Provider>
+      </TestProviders>
+    );
+    expect(getByTestId(RULE_PREVIEW_RULE_TITLE_SUPPRESSED_TEST_ID)).toBeInTheDocument();
   });
 });

x-pack/plugins/security_solution/public/flyout/preview/components/rule_preview_title.tsx

@@ -4,14 +4,17 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
 import React from 'react';
-import { EuiTitle, EuiText, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiTitle, EuiText, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
+import { DELETED_RULE } from '../../../detection_engine/rule_details_ui/pages/rule_details/translations';
 import type { Rule } from '../../../detection_engine/rule_management/logic';
 import { CreatedBy, UpdatedBy } from '../../../detections/components/rules/rule_info';
 import {
   RULE_PREVIEW_TITLE_TEST_ID,
   RULE_PREVIEW_RULE_CREATED_BY_TEST_ID,
   RULE_PREVIEW_RULE_UPDATED_BY_TEST_ID,
+  RULE_PREVIEW_RULE_TITLE_SUPPRESSED_TEST_ID,
 } from './test_ids';
 
 interface RulePreviewTitleProps {
@@ -19,17 +22,29 @@ interface RulePreviewTitleProps {
    * Rule object that represents relevant information about a rule
    */
   rule: Rule;
+  /**
+   * Flag to indicate if rule is suppressed
+   */
+  isSuppressed: boolean;
 }
 
 /**
  * Title component that shows basic information of a rule. This is displayed above rule preview body in rule preview panel
  */
-export const RulePreviewTitle: React.FC<RulePreviewTitleProps> = ({ rule }) => {
+export const RulePreviewTitle: React.FC<RulePreviewTitleProps> = ({ rule, isSuppressed }) => {
   return (
     <div data-test-subj={RULE_PREVIEW_TITLE_TEST_ID}>
       <EuiTitle>
         <h6>{rule.name}</h6>
       </EuiTitle>
+      {isSuppressed && (
+        <>
+          <EuiSpacer size="s" />
+          <EuiBadge data-test-subj={RULE_PREVIEW_RULE_TITLE_SUPPRESSED_TEST_ID} title="">
+            {DELETED_RULE}
+          </EuiBadge>
+        </>
+      )}
       <EuiSpacer size="s" />
       <EuiFlexGroup gutterSize="xs" direction="column">
         <EuiFlexItem data-test-subj={RULE_PREVIEW_RULE_CREATED_BY_TEST_ID}>

x-pack/plugins/security_solution/public/flyout/preview/components/test_ids.ts

@@ -10,6 +10,8 @@ import { CONTENT_TEST_ID, HEADER_TEST_ID } from '../../right/components/expandab
 /* Rule preview */
 
 export const RULE_PREVIEW_TITLE_TEST_ID = 'securitySolutionDocumentDetailsFlyoutRulePreviewTitle';
+export const RULE_PREVIEW_RULE_TITLE_SUPPRESSED_TEST_ID =
+  'securitySolutionDocumentDetailsFlyoutRulePreviewTitleSuppressed';
 export const RULE_PREVIEW_RULE_CREATED_BY_TEST_ID =
   'securitySolutionDocumentDetailsFlyoutRulePreviewCreatedByText';
 export const RULE_PREVIEW_RULE_UPDATED_BY_TEST_ID =