From b9c5d867a87817417948336ebac94bc9c3a85bca Mon Sep 17 00:00:00 2001
From: Nikita Indik <nikita.indik@elastic.co>
Date: Wed, 26 Jun 2024 14:04:39 +0200
Subject: [PATCH] Refactor

---
 .../model/rule_schema/utils.ts                |  4 +--
 .../pages/rule_details/index.tsx              | 10 +------
 .../customized_prebuilt_rule_badge.tsx        | 27 ++++++++++++++++---
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/utils.ts b/x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/utils.ts
index ed3c4c3165c97..d7e51d5b7d091 100644
--- a/x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/utils.ts
+++ b/x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/utils.ts
@@ -7,6 +7,6 @@
 
 import type { RuleResponse } from './rule_schemas.gen';
 
-export function isCustomizedPrebuiltRule(rule?: RuleResponse | null): boolean {
-  return rule?.rule_source?.type === 'external' && rule.rule_source.is_customized;
+export function isCustomizedPrebuiltRule(rule: RuleResponse): boolean {
+  return rule.rule_source?.type === 'external' && rule.rule_source.is_customized;
 }
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx
index 04f613068de3f..71ae7791fab0d 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx
@@ -49,7 +49,6 @@ import {
   useDeepEqualSelector,
   useShallowEqualSelector,
 } from '../../../../common/hooks/use_selector';
-import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { useKibana } from '../../../../common/lib/kibana';
 import type { UpdateDateRange } from '../../../../common/components/charts/common';
 import { FiltersGlobal } from '../../../../common/components/filters_global';
@@ -127,7 +126,6 @@ import { useRuleWithFallback } from '../../../rule_management/logic/use_rule_wit
 import type { BadgeOptions } from '../../../../common/components/header_page/types';
 import type { AlertsStackByField } from '../../../../detections/components/alerts_kpis/common/types';
 import type { RuleResponse, Status } from '../../../../../common/api/detection_engine';
-import { isCustomizedPrebuiltRule } from '../../../../../common/api/detection_engine';
 import { AlertsTableFilterGroup } from '../../../../detections/components/alerts_table/alerts_filter_group';
 import { useSignalHelpers } from '../../../../sourcerer/containers/use_signal_helpers';
 import { HeaderPage } from '../../../../common/components/header_page';
@@ -184,10 +182,6 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
   clearEventsLoading,
   clearSelected,
 }) => {
-  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
-    'prebuiltRulesCustomizationEnabled'
-  );
-
   const {
     analytics,
     i18n: i18nStart,
@@ -600,9 +594,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
                 subtitle={subTitle}
                 subtitle2={
                   <EuiFlexGroup gutterSize="m" alignItems="center" justifyContent="flexStart">
-                    {isPrebuiltRulesCustomizationEnabled && isCustomizedPrebuiltRule(rule) && (
-                      <CustomizedPrebuiltRuleBadge />
-                    )}
+                    <CustomizedPrebuiltRuleBadge rule={rule} />
                     <EuiFlexGroup alignItems="center" gutterSize="xs">
                       <EuiFlexItem grow={false}>
                         {ruleStatusI18n.STATUS}
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/customized_prebuilt_rule_badge.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/customized_prebuilt_rule_badge.tsx
index 572d87ddc6795..ceb06d9f2a3e9 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/customized_prebuilt_rule_badge.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/customized_prebuilt_rule_badge.tsx
@@ -8,7 +8,28 @@
 import React from 'react';
 import { EuiBadge } from '@elastic/eui';
 import * as i18n from './translations';
+import { isCustomizedPrebuiltRule } from '../../../../../common/api/detection_engine/model/rule_schema/utils';
+import type { RuleResponse } from '../../../../../common/api/detection_engine/model';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 
-export const CustomizedPrebuiltRuleBadge = () => (
-  <EuiBadge color="hollow">{i18n.CUSTOMIZED_PREBUILT_RULE_LABEL}</EuiBadge>
-);
+interface CustomizedPrebuiltRuleBadgeProps {
+  rule: RuleResponse | null;
+}
+
+export const CustomizedPrebuiltRuleBadge: React.FC<CustomizedPrebuiltRuleBadgeProps> = ({
+  rule,
+}) => {
+  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
+    'prebuiltRulesCustomizationEnabled'
+  );
+
+  if (!isPrebuiltRulesCustomizationEnabled) {
+    return null;
+  }
+
+  if (rule === null || !isCustomizedPrebuiltRule(rule)) {
+    return null;
+  }
+
+  return <EuiBadge color="hollow">{i18n.CUSTOMIZED_PREBUILT_RULE_LABEL}</EuiBadge>;
+};