[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
https://github.com/elastic/kibana/issues/160561 and
https://github.com/elastic/eui/issues/6846)

Before the fix:

<img width="435" alt="Screenshot 2023-07-12 at 19 06 01"
src="8deeb59a-712e-4990-9bda-cba31da8f23f">

After the fix:

<img width="426" alt="Screenshot 2023-07-12 at 19 05 46"
src="7556cca0-d78b-453a-ac47-8a2cd3ef73d7">

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com>
This commit is contained in:
Ievgen Sorokopud 2023-07-18 14:36:07 +02:00 committed by GitHub
parent c5763bfe1a
commit 731f587979
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 0 deletions

View file

@ -579,6 +579,7 @@ const CreateRulePageComponent: React.FC = () => {
dataViewId={defineStepData.dataViewId}
timestampOverride={aboutStepData.timestampOverride}
isLoading={isCreateRuleLoading || loading}
isActive={activeStep === RuleStep.aboutRule}
form={aboutStepForm}
/>

View file

@ -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}

View file

@ -99,6 +99,7 @@ describe('StepAboutRuleComponent', () => {
dataViewId={defineStepDefault.dataViewId}
timestampOverride={stepAboutDefaultValue.timestampOverride}
isLoading={false}
isActive={true}
form={aboutStepForm}
/>
);

View file

@ -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,