[Security Solution] [Rules] Fixes bug where editing a rule with a dat…

…a view throws an unhandled exception (#145658)

## Summary

Ref: #145078

x-pack/plugins/security_solution/cypress/e2e/detection_rules/custom_query_rule_data_view.cy.ts

@@ -20,6 +20,11 @@ import {
   RULE_SWITCH,
   SEVERITY,
 } from '../../screens/alerts_detection_rules';
+import {
+  ABOUT_CONTINUE_BTN,
+  RULE_DESCRIPTION_INPUT,
+  RULE_NAME_INPUT,
+} from '../../screens/create_new_rule';
 
 import {
   ADDITIONAL_LOOK_BACK_DETAILS,
@@ -44,13 +49,15 @@ import {
   TAGS_DETAILS,
   TIMELINE_TEMPLATE_DETAILS,
   DATA_VIEW_DETAILS,
+  EDIT_RULE_SETTINGS_LINK,
 } from '../../screens/rule_details';
 
 import { goToRuleDetails } from '../../tasks/alerts_detection_rules';
 import { createTimeline } from '../../tasks/api_calls/timelines';
 import { postDataView } from '../../tasks/common';
 import {
   createAndEnableRule,
+  createRuleWithoutEnabling,
   fillAboutRuleAndContinue,
   fillDefineCustomRuleAndContinue,
   fillScheduleRuleAndContinue,
@@ -158,5 +165,24 @@ describe('Custom query rules', () => {
         .should('match', /^[1-9].+$/);
       cy.get(ALERT_GRID_CELL).contains(this.rule.name);
     });
+    it('Creates and edits a new rule with a data view', function () {
+      visit(RULE_CREATION);
+      fillDefineCustomRuleAndContinue(this.rule);
+      cy.get(RULE_NAME_INPUT).clear({ force: true }).type(this.rule.name, { force: true });
+      cy.get(RULE_DESCRIPTION_INPUT)
+        .clear({ force: true })
+        .type(this.rule.description, { force: true });
+
+      cy.get(ABOUT_CONTINUE_BTN).should('exist').click({ force: true });
+
+      fillScheduleRuleAndContinue(this.rule);
+      createRuleWithoutEnabling();
+
+      goToRuleDetails();
+
+      cy.get(EDIT_RULE_SETTINGS_LINK).click({ force: true });
+
+      cy.get(RULE_NAME_HEADER).should('contain', 'Edit rule settings');
+    });
   });
 });

x-pack/plugins/security_solution/cypress/screens/create_new_rule.ts

@@ -32,6 +32,8 @@ export const COMBO_BOX_CLEAR_BTN = '[data-test-subj="comboBoxClearButton"]';
 
 export const CREATE_AND_ENABLE_BTN = '[data-test-subj="create-enable"]';
 
+export const CREATE_WITHOUT_ENABLING_BTN = '[data-test-subj="create-enabled-false"]';
+
 export const CUSTOM_QUERY_INPUT = '[data-test-subj="queryInput"]';
 
 export const CUSTOM_QUERY_BAR = '[data-test-subj="detectionEngineStepDefineRuleQueryBar"]';

x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts

@@ -104,6 +104,7 @@ import {
   NEW_TERMS_INPUT_AREA,
   ACTIONS_THROTTLE_INPUT,
   CONTINUE_BUTTON,
+  CREATE_WITHOUT_ENABLING_BTN,
 } from '../screens/create_new_rule';
 import {
   INDEX_SELECTOR,
@@ -125,6 +126,13 @@ export const createAndEnableRule = () => {
   cy.get(BACK_TO_ALL_RULES_LINK).should('not.exist');
 };
 
+export const createRuleWithoutEnabling = () => {
+  cy.get(CREATE_WITHOUT_ENABLING_BTN).click({ force: true });
+  cy.get(CREATE_WITHOUT_ENABLING_BTN).should('not.exist');
+  cy.get(BACK_TO_ALL_RULES_LINK).click({ force: true });
+  cy.get(BACK_TO_ALL_RULES_LINK).should('not.exist');
+};
+
 export const fillAboutRule = (
   rule: CustomRule | MachineLearningRule | ThresholdRule | ThreatIndicatorRule
 ) => {

x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx

@@ -11,6 +11,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiLoadingSpinner,
   EuiSpacer,
   EuiButtonGroup,
   EuiText,
@@ -502,7 +503,9 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   );
 
   const DataViewSelectorMemo = useMemo(() => {
-    return (
+    return kibanaDataViews == null || Object.keys(kibanaDataViews).length === 0 ? (
+      <EuiLoadingSpinner size="l" />
+    ) : (
       <UseField
         key="DataViewSelector"
         path="dataViewId"

x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/index.tsx

@@ -292,6 +292,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
                 isDisabled={isLoading}
                 isLoading={isLoading}
                 onClick={() => handleSubmit(false)}
+                data-test-subj="create-enabled-false"
               >
                 {I18n.COMPLETE_WITHOUT_ENABLING}
               </EuiButton>