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

…on Rule Creation page (elastic#161456) (elastic#172677) ## Summary Addresses elastic#161456 These changes do workaround to display EuiRange component which is broken due to memoization (see more details in elastic#160561 and elastic/eui#6846) The fix is to forcibly remove/add EuiRange component on About step activation. 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"> (cherry picked from commit 28d18e8)
kibanamachine · Dec 12, 2023 · 03f4508 · 03f4508
1 parent 5f7be13
commit 03f4508
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/...plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx b/...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

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