[Security Sollution][Alerts] fixes rule preview issue for new terms f…

…ield (elastic#145707) ## Summary - fixes elastic#144322 - details on underlying [issue](elastic#144322 (comment)) within form-lib ### Before https://user-images.githubusercontent.com/92328789/202687215-e9606bd0-5cfd-4a92-9abf-edaf90868505.mov ### After https://user-images.githubusercontent.com/92328789/202688418-7cb7d250-02f3-4020-bfa0-65191b8a529b.mov (cherry picked from commit c086220)
kibanamachine · Nov 28, 2022 · aec6384 · aec6384
1 parent 0cd9b32
commit aec6384
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/helpers.ts b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/helpers.ts
@@ -15,6 +15,7 @@ import type { ChartSeriesConfigs } from '../../../../common/components/charts/co
 import type { FieldValueQueryBar } from '../query_bar';
 import type { TimeframePreviewOptions } from '../../../pages/detection_engine/rules/types';
 import { DataSourceType } from '../../../pages/detection_engine/rules/types';
+import { MAX_NUMBER_OF_NEW_TERMS_FIELDS } from '../../../../../common/constants';
 
 /**
  * Determines whether or not to display noise warning.
@@ -108,6 +109,10 @@ export const getHistogramConfig = (
   };
 };
 
+const isNewTermsPreviewDisabled = (newTermsFields: string[]): boolean => {
+  return newTermsFields.length === 0 || newTermsFields.length > MAX_NUMBER_OF_NEW_TERMS_FIELDS;
+};
+
 export const getIsRulePreviewDisabled = ({
   ruleType,
   isQueryBarValid,
@@ -157,7 +162,7 @@ export const getIsRulePreviewDisabled = ({
     return isEmpty(queryBar.query.query) && isEmpty(queryBar.filters);
   }
   if (ruleType === 'new_terms') {
-    return newTermsFields.length === 0;
+    return isNewTermsPreviewDisabled(newTermsFields);
   }
   return false;
 };
diff --git a/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
@@ -146,7 +146,7 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
     schema,
   });
 
-  const { getFields, getFormData, reset, submit } = form;
+  const { getFields, getFormData, reset, validate } = form;
   const [formData] = useFormData<DefineStepRule>({
     form,
     watch: [
@@ -392,21 +392,23 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   }, [onSubmit]);
 
   const getData = useCallback(async () => {
-    const result = await submit();
-    result.data = {
-      ...result.data,
-      eqlOptions: optionsSelected,
+    // validate doesn't return actual state of form
+    // more details here: https://github.com/elastic/kibana/issues/144322#issuecomment-1321838136
+    // wrapping in setTimeout is a workaround until solution within forms-lib can be found
+    const isValid = await new Promise<boolean>((resolve) => {
+      setTimeout(async () => {
+        const valid = await validate();
+        resolve(valid);
+      }, 0);
+    });
+    return {
+      isValid,
+      data: {
+        ...getFormData(),
+        eqlOptions: optionsSelected,
+      },
     };
-    return result.isValid
-      ? result
-      : {
-          isValid: false,
-          data: {
-            ...getFormData(),
-            eqlOptions: optionsSelected,
-          },
-        };
-  }, [getFormData, optionsSelected, submit]);
+  }, [getFormData, optionsSelected, validate]);
 
   useEffect(() => {
     let didCancel = false;