From 308f0a41fa2df5c52d26a1133e28a00c7d015cf2 Mon Sep 17 00:00:00 2001
From: Khristinin Nikita <nikita.khristinin@elastic.co>
Date: Tue, 11 Feb 2025 19:30:48 +0100
Subject: [PATCH] Change filter for rule monitoring gaps (#209983)

## Change filter for rule monitoring gaps

Keep only 1 button, and make selection more clear

https://github.com/user-attachments/assets/f720ce03-fc38-42ef-87aa-99e22accc646

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 0007203278ec42c8b490903f605bbd6117a764b1)
---
 .../rules_with_gaps_overview_panel/index.tsx       | 14 ++++----------
 .../translations.tsx                               | 10 +---------
 2 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/index.tsx
index ced56586f4f2f..0963fc0836471 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/index.tsx
@@ -64,9 +64,9 @@ export const RulesWithGapsOverviewPanel = () => {
     </EuiButton>
   );
 
-  const handleShowRulesWithGapsFilterButtonClick = (value: boolean) => {
+  const handleShowRulesWithGapsFilterButtonClick = () => {
     setFilterOptions({
-      showRulesWithGaps: value,
+      showRulesWithGaps: !showRulesWithGaps,
     });
   };
 
@@ -119,16 +119,10 @@ export const RulesWithGapsOverviewPanel = () => {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFilterGroup>
-            <EuiFilterButton
-              withNext
-              hasActiveFilters={!showRulesWithGaps}
-              onClick={() => handleShowRulesWithGapsFilterButtonClick(false)}
-            >
-              {i18n.RULE_GAPS_OVERVIEW_PANEL_SHOW_ALL_RULES_LABEL}
-            </EuiFilterButton>
             <EuiFilterButton
               hasActiveFilters={showRulesWithGaps}
-              onClick={() => handleShowRulesWithGapsFilterButtonClick(true)}
+              onClick={handleShowRulesWithGapsFilterButtonClick}
+              iconType={showRulesWithGaps ? `checkInCircleFilled` : undefined}
             >
               {i18n.RULE_GAPS_OVERVIEW_PANEL_SHOW_RULES_WITH_GAPS_LABEL}
             </EuiFilterButton>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/translations.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/translations.tsx
index fe9963eace3d1..04f29b2676917 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/translations.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/translations.tsx
@@ -13,18 +13,10 @@ export const RULE_GAPS_OVERVIEW_PANEL_LABEL = i18n.translate(
     defaultMessage: 'Total rules with gaps:',
   }
 );
-
-export const RULE_GAPS_OVERVIEW_PANEL_SHOW_ALL_RULES_LABEL = i18n.translate(
-  'xpack.securitySolution.ruleGapsOverviewPanel.showAllRulesLabel',
-  {
-    defaultMessage: 'Show all rules',
-  }
-);
-
 export const RULE_GAPS_OVERVIEW_PANEL_SHOW_RULES_WITH_GAPS_LABEL = i18n.translate(
   'xpack.securitySolution.ruleGapsOverviewPanel.showRulesWithGapsLabel',
   {
-    defaultMessage: 'Show rules with gaps',
+    defaultMessage: 'Only rules with gaps',
   }
 );