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

…rlaid on Rule Creation page (#161793) (#162138)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[Security Solution] Default Risk score slide bar values are overlaid
on Rule Creation page
(#161793)](#161793)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Ievgen
Sorokopud","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-07-18T12:36:07Z","message":"[Security
Solution] Default Risk score slide bar values are overlaid on Rule
Creation page (#161793)\n\n## Summary\r\n\r\nOriginal ticket:
#161456\r\n\r\nThese changes do workaround to display EuiRange component
which is\r\nbroken due to memoization (see more details
in\r\nhttps://github.com//issues/160561
and\r\nhttps://github.com/elastic/eui/issues/6846)\r\n\r\nBefore the
fix:\r\n\r\n<img width=\"435\" alt=\"Screenshot 2023-07-12 at 19 06
01\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2700761/8deeb59a-712e-4990-9bda-cba31da8f23f\">\r\n\r\nAfter
the fix:\r\n\r\n<img width=\"426\" alt=\"Screenshot 2023-07-12 at 19 05
46\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2700761/7556cca0-d78b-453a-ac47-8a2cd3ef73d7\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>\r\nCo-authored-by:
Vitalii Dmyterko
<[email protected]>","sha":"731f5879799b6d2e1e35a4c24cf6440fc60a631a","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","ci:cloud-deploy","Team:Detection
Engine","v8.10.0","v8.9.1"],"number":161793,"url":"https://github.com/elastic/kibana/pull/161793","mergeCommit":{"message":"[Security
Solution] Default Risk score slide bar values are overlaid on Rule
Creation page (#161793)\n\n## Summary\r\n\r\nOriginal ticket:
#161456\r\n\r\nThese changes do workaround to display EuiRange component
which is\r\nbroken due to memoization (see more details
in\r\nhttps://github.com//issues/160561
and\r\nhttps://github.com/elastic/eui/issues/6846)\r\n\r\nBefore the
fix:\r\n\r\n<img width=\"435\" alt=\"Screenshot 2023-07-12 at 19 06
01\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2700761/8deeb59a-712e-4990-9bda-cba31da8f23f\">\r\n\r\nAfter
the fix:\r\n\r\n<img width=\"426\" alt=\"Screenshot 2023-07-12 at 19 05
46\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2700761/7556cca0-d78b-453a-ac47-8a2cd3ef73d7\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>\r\nCo-authored-by:
Vitalii Dmyterko
<[email protected]>","sha":"731f5879799b6d2e1e35a4c24cf6440fc60a631a"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/161793","number":161793,"mergeCommit":{"message":"[Security
Solution] Default Risk score slide bar values are overlaid on Rule
Creation page (#161793)\n\n## Summary\r\n\r\nOriginal ticket:
#161456\r\n\r\nThese changes do workaround to display EuiRange component
which is\r\nbroken due to memoization (see more details
in\r\nhttps://github.com//issues/160561
and\r\nhttps://github.com/elastic/eui/issues/6846)\r\n\r\nBefore the
fix:\r\n\r\n<img width=\"435\" alt=\"Screenshot 2023-07-12 at 19 06
01\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2700761/8deeb59a-712e-4990-9bda-cba31da8f23f\">\r\n\r\nAfter
the fix:\r\n\r\n<img width=\"426\" alt=\"Screenshot 2023-07-12 at 19 05
46\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2700761/7556cca0-d78b-453a-ac47-8a2cd3ef73d7\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>\r\nCo-authored-by:
Vitalii Dmyterko
<[email protected]>","sha":"731f5879799b6d2e1e35a4c24cf6440fc60a631a"}},{"branch":"8.9","label":"v8.9.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Ievgen Sorokopud <[email protected]>

x-pack/plugins/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}
           />
 

x-pack/plugins/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}

x-pack/plugins/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}
       />
     );

x-pack/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,