[ML] Fixes enabled state of detector rule scope options (#21263)

* [ML] Fixes enabled state of detector rule scope options

* [ML] Edit to rule scope enabled check following review

x-pack/plugins/ml/public/components/rule_editor/rule_editor_flyout.js

@@ -153,6 +153,12 @@ export class RuleEditorFlyout extends Component {
     const isConditionsEnabled = (this.partitioningFieldNames.length === 0) ||
       (rule.conditions !== undefined && rule.conditions.length > 0);
     const isScopeEnabled = (rule.scope !== undefined) && (Object.keys(rule.scope).length > 0);
+    if (isScopeEnabled === true) {
+      // Add 'enabled:true' to mark them as selected in the UI.
+      Object.keys(rule.scope).forEach((field) => {
+        rule.scope[field].enabled = true;
+      });
+    }
 
     this.setState({
       ruleIndex,
@@ -275,21 +281,16 @@ export class RuleEditorFlyout extends Component {
   updateScope = (fieldName, filterId, filterType, enabled) => {
     this.setState((prevState) => {
       let scope = { ...prevState.rule.scope };
-      if (enabled === true) {
-        if (scope === undefined) {
-          scope = {};
-        }
-
-        scope[fieldName] = {
-          filter_id: filterId,
-          filter_type: filterType
-        };
-      } else {
-        if (scope !== undefined) {
-          delete scope[fieldName];
-        }
+      if (scope === undefined) {
+        scope = {};
       }
 
+      scope[fieldName] = {
+        filter_id: filterId,
+        filter_type: filterType,
+        enabled,
+      };
+
       return {
         rule: { ...prevState.rule, scope }
       };

x-pack/plugins/ml/public/components/rule_editor/scope_expression.js

@@ -142,7 +142,7 @@ export class ScopeExpression extends Component {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiExpressionButton
-            className={enabled ? 'scope-field-button' : 'scope-field-button disabled'}
+            className="scope-field-button"
             description="when"
             buttonValue={fieldName}
             isActive={false}
@@ -156,7 +156,6 @@ export class ScopeExpression extends Component {
               id="operatorValuePopover"
               button={(
                 <EuiExpressionButton
-                  className={enabled ? '' : 'disabled'}
                   description={`is ${filterTypeToText(filterType)}`}
                   buttonValue={filterId}
                   isActive={this.state.isFilterListOpen}

x-pack/plugins/ml/public/components/rule_editor/scope_section.js

@@ -77,10 +77,8 @@ export function ScopeSection({
   if (filterListIds.length > 0) {
     content = partitioningFieldNames.map((fieldName, index) => {
       let filterValues;
-      let enabled = false;
       if (scope !== undefined && scope[fieldName] !== undefined) {
         filterValues = scope[fieldName];
-        enabled = true;
       } else {
         filterValues = getScopeFieldDefaults(filterListIds);
       }
@@ -91,7 +89,7 @@ export function ScopeSection({
           fieldName={fieldName}
           filterId={filterValues.filter_id}
           filterType={filterValues.filter_type}
-          enabled={enabled}
+          enabled={filterValues.enabled}
           filterListIds={filterListIds}
           updateScope={updateScope}
         />

x-pack/plugins/ml/public/components/rule_editor/utils.js

@@ -32,6 +32,7 @@ export function getNewRuleDefaults() {
 export function getScopeFieldDefaults(filterListIds) {
   const defaults = {
     filter_type: FILTER_TYPE.INCLUDE,
+    enabled: false,   // UI-only property to show field as enabled in Scope section.
   };
 
   if (filterListIds !== undefined && filterListIds.length > 0) {
@@ -55,8 +56,8 @@ export function isValidRule(rule) {
       isValid = true;
     } else {
       const scope = rule.scope;
-      if (scope !== undefined && Object.keys(scope).length > 0) {
-        isValid = true;
+      if (scope !== undefined) {
+        isValid = Object.keys(scope).some(field => (scope[field].enabled === true));
       }
     }
   }
@@ -67,17 +68,33 @@ export function isValidRule(rule) {
 export function saveJobRule(job, detectorIndex, ruleIndex, editedRule) {
   const detector = job.analysis_config.detectors[detectorIndex];
 
+  // Filter out any scope expression where the UI=specific 'enabled'
+  // property is set to false.
+  const clonedRule = cloneDeep(editedRule);
+  const scope = clonedRule.scope;
+  if (scope !== undefined) {
+    Object.keys(scope).forEach((field) => {
+      if (scope[field].enabled === false) {
+        delete scope[field];
+      } else {
+        // Remove the UI-only property as it is rejected by the endpoint.
+        delete scope[field].enabled;
+      }
+    });
+  }
+
   let rules = [];
   if (detector.custom_rules === undefined) {
-    rules = [editedRule];
+    rules = [clonedRule];
   } else {
     rules = cloneDeep(detector.custom_rules);
+
     if (ruleIndex < rules.length) {
       // Edit to an existing rule.
-      rules[ruleIndex] = editedRule;
+      rules[ruleIndex] = clonedRule;
     } else {
       // Add a new rule.
-      rules.push(editedRule);
+      rules.push(clonedRule);
     }
   }