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

…erlaid on Rule Creation page (#161456) (#172677) (#173140)

# Backport

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

<!--- 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-12-12T10:29:50Z","message":"[Security
Solution] Default Risk score slide bar values are overlaid on Rule
Creation page (#161456) (#172677)\n\n## Summary\r\n\r\nAddresses
https://github.com/elastic/kibana/issues/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\nThe fix is to
forcibly remove/add EuiRange component on About
step\r\nactivation.\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\">","sha":"28d18e89fba53cc1ca5d46bd0b5d0964d0a7c75a","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:
SecuritySolution","backport:prev-minor","Team:Detection
Engine","v8.13.0"],"number":172677,"url":"https://github.com/elastic/kibana/pull/172677","mergeCommit":{"message":"[Security
Solution] Default Risk score slide bar values are overlaid on Rule
Creation page (#161456) (#172677)\n\n## Summary\r\n\r\nAddresses
https://github.com/elastic/kibana/issues/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\nThe fix is to
forcibly remove/add EuiRange component on About
step\r\nactivation.\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\">","sha":"28d18e89fba53cc1ca5d46bd0b5d0964d0a7c75a"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172677","number":172677,"mergeCommit":{"message":"[Security
Solution] Default Risk score slide bar values are overlaid on Rule
Creation page (#161456) (#172677)\n\n## Summary\r\n\r\nAddresses
https://github.com/elastic/kibana/issues/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\nThe fix is to
forcibly remove/add EuiRange component on About
step\r\nactivation.\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\">","sha":"28d18e89fba53cc1ca5d46bd0b5d0964d0a7c75a"}}]}]
BACKPORT-->

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

x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx

@@ -51,6 +51,7 @@ interface RiskScoreFieldProps {
   idAria: string;
   indices: DataViewBase;
   isDisabled: boolean;
+  isActive: boolean;
   placeholder?: string;
 }
 
@@ -60,6 +61,7 @@ export const RiskScoreField = ({
   idAria,
   indices,
   isDisabled,
+  isActive,
   placeholder,
 }: RiskScoreFieldProps) => {
   const { value, isMappingChecked, mapping } = field.value;
@@ -147,29 +149,39 @@ export const RiskScoreField = ({
   return (
     <EuiFlexGroup direction={'column'}>
       <EuiFlexItem>
-        <EuiFormRow
-          label={riskScoreLabel}
-          labelAppend={field.labelAppend}
-          helpText={field.helpText}
-          error={'errorMessage'}
-          isInvalid={false}
-          fullWidth
-          data-test-subj={`${dataTestSubj}-defaultRisk`}
-          describedByIds={idAria ? [idAria] : undefined}
-        >
-          <EuiRange
-            value={value}
-            onChange={handleDefaultRiskScoreChange}
-            max={100}
-            min={0}
-            showRange
-            showInput
-            fullWidth={false}
-            showTicks
-            tickInterval={25}
-            data-test-subj={`${dataTestSubj}-defaultRiskRange`}
-          />
-        </EuiFormRow>
+        {
+          // 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 force EuiRange re-rendering by removing/adding it into the DOM.
+          // NOTE: We should remove this workaround once EUI team fixed EuiRange.
+          // Related ticket: https://github.com/elastic/kibana/issues/160561
+        }
+        {isActive && (
+          <EuiFormRow
+            label={riskScoreLabel}
+            labelAppend={field.labelAppend}
+            helpText={field.helpText}
+            error={'errorMessage'}
+            isInvalid={false}
+            fullWidth
+            data-test-subj={`${dataTestSubj}-defaultRisk`}
+            describedByIds={idAria ? [idAria] : undefined}
+          >
+            <EuiRange
+              value={value}
+              onChange={handleDefaultRiskScoreChange}
+              max={100}
+              min={0}
+              showRange
+              showInput
+              fullWidth={false}
+              showTicks
+              tickInterval={25}
+              data-test-subj={`${dataTestSubj}-defaultRiskRange`}
+            />
+          </EuiFormRow>
+        )}
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFormRow

x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx

@@ -185,6 +185,7 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
                 dataTestSubj: 'detectionEngineStepAboutRuleRiskScore',
                 idAria: 'detectionEngineStepAboutRuleRiskScore',
                 isDisabled: isLoading || indexPatternLoading,
+                isActive,
                 indices: indexPattern,
               }}
             />