[Security Solution] Add support for editing prebuilt rules to the Rul…

…e Editing page (elastic#199550)

**Resolves: elastic#180172

## Summary

> [!NOTE]
> Feature is behind the `prebuiltRulesCustomizationEnabled` feature
flag.

Removes the logic gates preventing prebuilt rules from being edited via
the Rule Edit page behind the `prebuiltRulesCustomizationEnabled`
feature flag. This allows all rules types to be fully editable via the
UI.

Also removes the muting logic we had in place for `Definition` tab
warnings ([implemented
here](elastic#191487))

### Screenshots

#### _Before_

**Prebuilt rule only has the "Actions" tab enabled, users cannot
customize anything else in the form**
![Screenshot 2024-11-08 at 3 08
15 PM](https://github.com/user-attachments/assets/b83836e6-f78f-4b3a-9fbc-55a5208250dd)

#### _After_

**Prebuilt rule now has all tabs/fields available for editing and rule
info is populated into the form**
![Screenshot 2024-11-08 at 3 02
43 PM](https://github.com/user-attachments/assets/184f6fc4-b64c-4e20-a987-76e460c61786)

### Checklist

Delete any items that are not applicable to this PR.

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
- [ ] This will appear in the **Release Notes** and follow the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit d6e6145)

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/pages/rule_editing/index.tsx

@@ -69,6 +69,7 @@ import { useRuleForms, useRuleFormsErrors, useRuleIndexPattern } from '../form';
 import { useEsqlIndex, useEsqlQueryForAboutStep } from '../../hooks';
 import { CustomHeaderPageMemo } from '..';
 import { SaveWithErrorsModal } from '../../components/save_with_errors_confirmation';
+import { useIsPrebuiltRulesCustomizationEnabled } from '../../../rule_management/hooks/use_is_prebuilt_rules_customization_enabled';
 import { ALERT_SUPPRESSION_FIELDS_FIELD_NAME } from '../../../rule_creation/components/alert_suppression_edit';
 
 const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
@@ -86,11 +87,14 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
     useListsConfig();
   const { application, triggersActionsUi } = useKibana().services;
   const { navigateToApp } = application;
+  const isPrebuiltRulesCustomizationEnabled = useIsPrebuiltRulesCustomizationEnabled();
 
   const { detailName: ruleId } = useParams<{ detailName: string }>();
 
   const [activeStep, setActiveStep] = useState<RuleStep>(
-    rule.immutable ? RuleStep.ruleActions : RuleStep.defineRule
+    !isPrebuiltRulesCustomizationEnabled && rule.immutable
+      ? RuleStep.ruleActions
+      : RuleStep.defineRule
   );
   const { mutateAsync: updateRule, isLoading } = useUpdateRule();
   const [isRulePreviewVisible, setIsRulePreviewVisible] = useState(true);
@@ -211,7 +215,7 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
         'data-test-subj': 'edit-rule-define-tab',
         id: RuleStep.defineRule,
         name: ruleI18n.DEFINITION,
-        disabled: rule?.immutable,
+        disabled: !isPrebuiltRulesCustomizationEnabled && rule?.immutable,
         content: (
           <div
             style={{
@@ -256,7 +260,7 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
         'data-test-subj': 'edit-rule-about-tab',
         id: RuleStep.aboutRule,
         name: ruleI18n.ABOUT,
-        disabled: rule?.immutable,
+        disabled: !isPrebuiltRulesCustomizationEnabled && rule?.immutable,
         content: (
           <div
             style={{
@@ -288,7 +292,7 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
         'data-test-subj': 'edit-rule-schedule-tab',
         id: RuleStep.scheduleRule,
         name: ruleI18n.SCHEDULE,
-        disabled: rule?.immutable,
+        disabled: !isPrebuiltRulesCustomizationEnabled && rule?.immutable,
         content: (
           <div
             style={{
@@ -340,6 +344,7 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
       },
     ],
     [
+      isPrebuiltRulesCustomizationEnabled,
       rule?.immutable,
       rule?.id,
       activeStep,
@@ -356,15 +361,15 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
       isIndexPatternLoading,
       isQueryBarValid,
       defineStepData,
+      memoizedIndex,
       aboutStepData,
       aboutStepForm,
+      esqlQueryForAboutStep,
       scheduleStepData,
       scheduleStepForm,
       actionsStepData,
       actionMessageParams,
       actionsStepForm,
-      memoizedIndex,
-      esqlQueryForAboutStep,
     ]
   );
 
@@ -414,7 +419,7 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
     setNonBlockingRuleErrors([]);
 
     const actionsStepFormValid = await actionsStepForm.validate();
-    if (rule.immutable) {
+    if (!isPrebuiltRulesCustomizationEnabled && rule.immutable) {
       // Since users cannot edit Define, About and Schedule tabs of the rule, we skip validation of those to avoid
       // user confusion of seeing that those tabs have error and not being able to see or do anything about that.
       // We will need to remove this condition once rule customization work is done.
@@ -451,11 +456,12 @@ const EditRulePageComponent: FC<{ rule: RuleResponse }> = ({ rule }) => {
       showSaveWithErrorsModal();
     }
   }, [
+    actionsStepForm,
+    isPrebuiltRulesCustomizationEnabled,
     rule.immutable,
     defineStepForm,
     aboutStepForm,
     scheduleStepForm,
-    actionsStepForm,
     getRuleFormsErrors,
     saveChanges,
     showSaveWithErrorsModal,