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

…on Rule Creation page (elastic#161456)
e40pud · Jul 12, 2023 · 92f97b4 · 92f97b4
1 parent ea1e6ed
commit 92f97b4
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 45 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
@@ -567,27 +567,38 @@ const CreateRulePageComponent: React.FC = () => {
     () => (
       <>
         <EuiHorizontalRule margin="m" />
-        <div
-          style={{
-            display: activeStep === RuleStep.aboutRule ? undefined : 'none',
-          }}
-        >
-          <StepAboutRule
-            ruleType={defineStepData.ruleType}
-            machineLearningJobId={defineStepData.machineLearningJobId}
-            index={defineStepData.index}
-            dataViewId={defineStepData.dataViewId}
-            timestampOverride={aboutStepData.timestampOverride}
-            isLoading={isCreateRuleLoading || loading}
-            form={aboutStepForm}
-          />
-
-          <NextStep
-            dataTestSubj="about-continue"
-            onClick={aboutRuleNextStep}
-            isDisabled={isCreateRuleLoading}
-          />
-        </div>
+        {
+          // TODO: https://github.com/elastic/kibana/issues/161456
+          // The About step page contains EuiRnage component which does not work properly within memoized parents.
+          // In this case we memoize the StepAboutRule and initially this component is offscreen since the Define step page is default.
+          // The About step page is not displayed due to `style.display ='none'` and this breaks EuiRange.
+          // EUI team suggested not to memoize EuiRange/EuiDualRange: https://github.com/elastic/eui/issues/6846
+          // Related ticket: https://github.com/elastic/kibana/issues/160561
+          // NOTE: We should remove this workaround once EUI team fixed EuiRange.
+          activeStep !== RuleStep.aboutRule ? null : (
+            <div
+              style={{
+                display: activeStep === RuleStep.aboutRule ? undefined : 'none',
+              }}
+            >
+              <StepAboutRule
+                ruleType={defineStepData.ruleType}
+                machineLearningJobId={defineStepData.machineLearningJobId}
+                index={defineStepData.index}
+                dataViewId={defineStepData.dataViewId}
+                timestampOverride={aboutStepData.timestampOverride}
+                isLoading={isCreateRuleLoading || loading}
+                form={aboutStepForm}
+              />
+
+              <NextStep
+                dataTestSubj="about-continue"
+                onClick={aboutRuleNextStep}
+                isDisabled={isCreateRuleLoading}
+              />
+            </div>
+          )
+        }
         {memoAboutStepReadOnly}
       </>
     ),

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
@@ -257,31 +257,39 @@ const EditRulePageComponent: FC<{ rule: Rule }> = ({ rule }) => {
         id: RuleStep.aboutRule,
         name: ruleI18n.ABOUT,
         disabled: rule?.immutable,
-        content: (
-          <div
-            style={{
-              display: activeStep === RuleStep.aboutRule ? undefined : 'none',
-            }}
-          >
-            <EuiSpacer />
-            <StepPanel loading={loading} title={ruleI18n.ABOUT}>
-              {aboutStepData != null && defineStepData != null && (
-                <StepAboutRule
-                  isLoading={isLoading}
-                  isUpdateView
-                  ruleType={defineStepData.ruleType}
-                  machineLearningJobId={defineStepData.machineLearningJobId}
-                  index={defineStepData.index}
-                  dataViewId={defineStepData.dataViewId}
-                  timestampOverride={aboutStepData.timestampOverride}
-                  form={aboutStepForm}
-                  key="aboutStep"
-                />
-              )}
+        content:
+          // TODO: https://github.com/elastic/kibana/issues/161456
+          // The About step page contains EuiRnage component which does not work properly within memoized parents.
+          // In this case we memoize the StepAboutRule and initially this component is offscreen since the Define step page is default.
+          // The About step page is not displayed due to `style.display ='none'` and this breaks EuiRange.
+          // EUI team suggested not to memoize EuiRange/EuiDualRange: https://github.com/elastic/eui/issues/6846
+          // Related ticket: https://github.com/elastic/kibana/issues/160561
+          // NOTE: We should remove this workaround once EUI team fixed EuiRange.
+          activeStep !== RuleStep.aboutRule ? null : (
+            <div
+              style={{
+                display: activeStep === RuleStep.aboutRule ? undefined : 'none',
+              }}
+            >
               <EuiSpacer />
-            </StepPanel>
-          </div>
-        ),
+              <StepPanel loading={loading} title={ruleI18n.ABOUT}>
+                {aboutStepData != null && defineStepData != null && (
+                  <StepAboutRule
+                    isLoading={isLoading}
+                    isUpdateView
+                    ruleType={defineStepData.ruleType}
+                    machineLearningJobId={defineStepData.machineLearningJobId}
+                    index={defineStepData.index}
+                    dataViewId={defineStepData.dataViewId}
+                    timestampOverride={aboutStepData.timestampOverride}
+                    form={aboutStepForm}
+                    key="aboutStep"
+                  />
+                )}
+                <EuiSpacer />
+              </StepPanel>
+            </div>
+          ),
       },
       {
         'data-test-subj': 'edit-rule-schedule-tab',