[Security Solution] Default Risk score slide bar values are overlaid …

…on Rule Creation page (#161793) ## Summary Original ticket: #161456 These changes do workaround to display EuiRange component which is broken due to memoization (see more details in #160561 and elastic/eui#6846) Before the fix: <img width="435" alt="Screenshot 2023-07-12 at 19 06 01" src="https://github.com/elastic/kibana/assets/2700761/8deeb59a-712e-4990-9bda-cba31da8f23f"> After the fix: <img width="426" alt="Screenshot 2023-07-12 at 19 05 46" src="https://github.com/elastic/kibana/assets/2700761/7556cca0-d78b-453a-ac47-8a2cd3ef73d7"> --------- Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Vitalii Dmyterko <[email protected]>
elastic · Jul 18, 2023 · 731f587 · 731f587
1 parent c5763bf
commit 731f587
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 0 deletions.
diff --git a/.../security_solution/public/detection_engine/rule_creation_ui/pages/rule_creation/index.tsx b/.../security_solution/public/detection_engine/rule_creation_ui/pages/rule_creation/index.tsx
@@ -579,6 +579,7 @@ const CreateRulePageComponent: React.FC = () => {
             dataViewId={defineStepData.dataViewId}
             timestampOverride={aboutStepData.timestampOverride}
             isLoading={isCreateRuleLoading || loading}
+            isActive={activeStep === RuleStep.aboutRule}
             form={aboutStepForm}
           />
 

diff --git a/...s/security_solution/public/detection_engine/rule_creation_ui/pages/rule_editing/index.tsx b/...s/security_solution/public/detection_engine/rule_creation_ui/pages/rule_editing/index.tsx
@@ -269,6 +269,7 @@ const EditRulePageComponent: FC<{ rule: Rule }> = ({ rule }) => {
                 <StepAboutRule
                   isLoading={isLoading}
                   isUpdateView
+                  isActive={activeStep === RuleStep.aboutRule}
                   ruleType={defineStepData.ruleType}
                   machineLearningJobId={defineStepData.machineLearningJobId}
                   index={defineStepData.index}

diff --git a/...ugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx b/...ugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx
@@ -99,6 +99,7 @@ describe('StepAboutRuleComponent', () => {
         dataViewId={defineStepDefault.dataViewId}
         timestampOverride={stepAboutDefaultValue.timestampOverride}
         isLoading={false}
+        isActive={true}
         form={aboutStepForm}
       />
     );

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
@@ -43,6 +43,14 @@ interface StepAboutRuleProps extends RuleStepProps {
   dataViewId: string | undefined;
   timestampOverride: string;
   form: FormHook<AboutStepRule>;
+
+  // TODO: https://github.com/elastic/kibana/issues/161456
+  // The About step page contains EuiRange component which does not work properly within memoized parents.
+  // EUI team suggested not to memoize EuiRange/EuiDualRange: https://github.com/elastic/eui/issues/6846
+  // Workaround: We introduced this additional property to be able to do extra re-render on switching to/from the About step page.
+  // NOTE: We should remove this workaround once EUI team fixed EuiRange.
+  // Related ticket: https://github.com/elastic/kibana/issues/160561
+  isActive: boolean;
 }
 
 interface StepAboutRuleReadOnlyProps {
@@ -69,6 +77,7 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
   index,
   dataViewId,
   timestampOverride,
+  isActive = false,
   isUpdateView = false,
   isLoading,
   form,