[Security Solution] expandable flyout - show deleted rule badge in ru…

…le preview (#164965)
elastic · Aug 28, 2023 · d94bd8d · d94bd8d
1 parent 4f81a37
commit d94bd8d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/x-pack/plugins/security_solution/public/flyout/preview/components/rule_preview.tsx b/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}

diff --git a/...ck/plugins/security_solution/public/flyout/preview/components/rule_preview_title.test.tsx b/...ck/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();
   });
 });
diff --git a/x-pack/plugins/security_solution/public/flyout/preview/components/rule_preview_title.tsx b/x-pack/plugins/security_solution/public/flyout/preview/components/rule_preview_title.tsx
@@ -4,32 +4,47 @@
  * 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 {
   /**
    * 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}>

diff --git a/x-pack/plugins/security_solution/public/flyout/preview/components/test_ids.ts b/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 =