Extract the "customized" check into "isCustomizedPrebuiltRule", add a…

… feature flag check

x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/index.ts

@@ -7,6 +7,7 @@
 
 export * from './common_attributes.gen';
 export * from './rule_schemas.gen';
+export * from './utils';
 
 export * from './specific_attributes/eql_attributes.gen';
 export * from './specific_attributes/ml_attributes.gen';

x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/utils.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+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;
+}

x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx

@@ -9,7 +9,6 @@
 // TODO: Disabling complexity is temporary till this component is refactored as part of lists UI integration
 
 import {
-  EuiBadge,
   EuiButtonIcon,
   EuiConfirmModal,
   EuiFlexGroup,
@@ -50,6 +49,7 @@ 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,6 +127,7 @@ 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';
@@ -140,6 +141,7 @@ import { RuleSnoozeBadge } from '../../../rule_management/components/rule_snooze
 import { useBoolState } from '../../../../common/hooks/use_bool_state';
 import { RuleDefinitionSection } from '../../../rule_management/components/rule_details/rule_definition_section';
 import { RuleScheduleSection } from '../../../rule_management/components/rule_details/rule_schedule_section';
+import { CustomizedPrebuiltRuleBadge } from '../../../rule_management/components/rule_details/customized_prebuilt_rule_badge';
 import { ManualRuleRunModal } from '../../../rule_gaps/components/manual_rule_run';
 import { useManualRuleRunConfirmation } from '../../../rule_gaps/components/manual_rule_run/use_manual_rule_run_confirmation';
 // eslint-disable-next-line no-restricted-imports
@@ -182,6 +184,10 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
   clearEventsLoading,
   clearSelected,
 }) => {
+  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
+    'prebuiltRulesCustomizationEnabled'
+  );
+
   const {
     analytics,
     i18n: i18nStart,
@@ -594,8 +600,8 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
                 subtitle={subTitle}
                 subtitle2={
                   <EuiFlexGroup gutterSize="m" alignItems="center" justifyContent="flexStart">
-                    {rule?.rule_source?.type === 'external' && rule.rule_source.is_customized && (
-                      <EuiBadge color="hollow">{i18n.CUSTOMIZED_PREBUILT_RULE_LABEL}</EuiBadge>
+                    {isPrebuiltRulesCustomizationEnabled && isCustomizedPrebuiltRule(rule) && (
+                      <CustomizedPrebuiltRuleBadge />
                     )}
                     <EuiFlexGroup alignItems="center" gutterSize="xs">
                       <EuiFlexItem grow={false}>

x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/translations.ts

@@ -14,13 +14,6 @@ export const PAGE_TITLE = i18n.translate(
   }
 );
 
-export const CUSTOMIZED_PREBUILT_RULE_LABEL = i18n.translate(
-  'xpack.securitySolution.detectionEngine.ruleDetails.customizedPrebuiltRuleLabel',
-  {
-    defaultMessage: 'Customized Elastic rule',
-  }
-);
-
 export const BACK_TO_RULES = i18n.translate(
   'xpack.securitySolution.detectionEngine.ruleDetails.backToRulesButton',
   {

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/customized_prebuilt_rule_badge.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge } from '@elastic/eui';
+import * as i18n from './translations';
+
+export const CustomizedPrebuiltRuleBadge = () => (
+  <EuiBadge color="hollow">{i18n.CUSTOMIZED_PREBUILT_RULE_LABEL}</EuiBadge>
+);

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/translations.ts

@@ -349,3 +349,10 @@ export const MAX_SIGNALS_FIELD_LABEL = i18n.translate(
     defaultMessage: 'Max alerts per run',
   }
 );
+
+export const CUSTOMIZED_PREBUILT_RULE_LABEL = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.customizedPrebuiltRuleLabel',
+  {
+    defaultMessage: 'Customized Elastic rule',
+  }
+);