Replace FormDataProvider on About step

* This fixes a bug where changing the default severity no longer updated the default risk score. It looks like this was broken when the severity/riskScore overrides were added, and the values of these fields changed from primitives to objects.
elastic · Sep 1, 2020 · 0972e16 · 0972e16
1 parent 8cacf35
commit 0972e16
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 deletions.
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/data.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/data.tsx
@@ -8,10 +8,9 @@ import styled from 'styled-components';
 import { EuiHealth } from '@elastic/eui';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
+import { SeverityValue } from '../../../pages/detection_engine/rules/types';
 import * as I18n from './translations';
 
-export type SeverityValue = 'low' | 'medium' | 'high' | 'critical';
-
 export interface SeverityOptionItem {
   value: SeverityValue;
   inputDisplay: React.ReactElement;

diff --git a/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx b/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx
@@ -22,13 +22,14 @@ import { AddMitreThreat } from '../mitre';
 import {
   Field,
   Form,
-  FormDataProvider,
   getUseField,
   UseField,
   useForm,
+  useFormData,
+  FieldHook,
 } from '../../../../shared_imports';
 
-import { defaultRiskScoreBySeverity, severityOptions, SeverityValue } from './data';
+import { defaultRiskScoreBySeverity, severityOptions } from './data';
 import { stepAboutDefaultValue } from './default_value';
 import { isUrlInvalid } from '../../../../common/utils/validators';
 import { schema } from './schema';
@@ -74,7 +75,7 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
   const initialState = defaultValues ?? stepAboutDefaultValue;
   const [{ isLoading: indexPatternLoading, indexPatterns }] = useFetchIndexPatterns(
     defineRuleData?.index ?? [],
-    'step_about_rule'
+    RuleStep.aboutRule
   );
   const canUseExceptions =
     defineRuleData?.ruleType &&
@@ -87,6 +88,18 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
     schema,
   });
   const { getFields, submit } = form;
+  const [{ severity }] = (useFormData<AboutStepRule>({
+    form,
+    watch: ['severity'],
+  }) as unknown) as [AboutStepRule];
+
+  useEffect(() => {
+    const newRiskScore = defaultRiskScoreBySeverity[severity?.value];
+    if (newRiskScore != null) {
+      const riskScoreField = getFields().riskScore as FieldHook<AboutStepRule['riskScore']>;
+      riskScoreField.setValue({ ...riskScoreField.value, value: newRiskScore });
+    }
+  }, [getFields, severity?.value]);
 
   const handleSubmit = useCallback(() => {
     if (onSubmit) {
@@ -299,21 +312,6 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
               }}
             />
           </EuiAccordion>
-          <FormDataProvider pathsToWatch="severity">
-            {({ severity }) => {
-              const newRiskScore = defaultRiskScoreBySeverity[severity as SeverityValue];
-              const severityField = getFields().severity;
-              const riskScoreField = getFields().riskScore;
-              if (
-                severityField.value !== severity &&
-                newRiskScore != null &&
-                riskScoreField.value !== newRiskScore
-              ) {
-                riskScoreField.setValue(newRiskScore);
-              }
-              return null;
-            }}
-          </FormDataProvider>
         </Form>
       </StepContentWrapper>
 

diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/types.ts b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/types.ts
@@ -7,7 +7,6 @@
 import { RuleAlertAction, RuleType } from '../../../../../common/detection_engine/types';
 import { AlertAction } from '../../../../../../alerts/common';
 import { Filter } from '../../../../../../../../src/plugins/data/common';
-import { FormHook } from '../../../../shared_imports';
 import { FieldValueQueryBar } from '../../../components/rules/query_bar';
 import { FieldValueTimeline } from '../../../components/rules/pick_timeline';
 import { FieldValueThreshold } from '../../../components/rules/threshold_input';
@@ -95,8 +94,10 @@ export interface AboutStepRuleDetails {
   description: string;
 }
 
+export type SeverityValue = 'low' | 'medium' | 'high' | 'critical';
+
 export interface AboutStepSeverity {
-  value: string;
+  value: SeverityValue;
   mapping: SeverityMapping;
   isMappingChecked: boolean;
 }

diff --git a/x-pack/plugins/security_solution/public/shared_imports.ts b/x-pack/plugins/security_solution/public/shared_imports.ts
@@ -21,6 +21,7 @@ export {
   UseMultiFields,
   useForm,
   useFormContext,
+  useFormData,
   ValidationFunc,
   VALIDATION_TYPES,
 } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';