diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.test.tsx index 211593652fc6d..90152016a030f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.test.tsx @@ -37,6 +37,30 @@ describe('ScheduleItemField', () => { expect(mockField.setValue).toHaveBeenCalledWith('5000000s'); }); + it(`uses the "units" prop when it's passed`, async () => { + const mockField = useFormFieldMock({ value: '7d' }); + const wrapper = mount( + + + + ); + + expect(wrapper.find('[data-test-subj="interval"]').last().prop('value')).toEqual(7); + expect(wrapper.find('[data-test-subj="timeType"]').last().prop('value')).toEqual('d'); + + wrapper + .find('[data-test-subj="interval"]') + .last() + .simulate('change', { target: { value: '8' } }); + + expect(mockField.setValue).toHaveBeenCalledWith('8d'); + }); + it.each([ [-10, -5], [-5, 0], diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.tsx index 2e0f3739ff59a..680501724dd6c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.tsx @@ -29,7 +29,7 @@ interface ScheduleItemProps { isDisabled?: boolean; minValue?: number; maxValue?: number; - timeTypes?: string[]; + units?: string[]; fullWidth?: boolean; } @@ -74,10 +74,10 @@ export function ScheduleItemField({ idAria, minValue = Number.MIN_SAFE_INTEGER, maxValue = Number.MAX_SAFE_INTEGER, - timeTypes = DEFAULT_TIME_DURATION_UNITS, + units = DEFAULT_TIME_DURATION_UNITS, fullWidth = false, }: ScheduleItemProps): JSX.Element { - const [timeType, setTimeType] = useState(timeTypes[0]); + const [timeType, setTimeType] = useState(units[0]); const [timeVal, setTimeVal] = useState(0); const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field); const { value, setValue } = field; @@ -92,7 +92,7 @@ export function ScheduleItemField({ const onChangeTimeVal = useCallback>( (e) => { - const number = parseInt(e.target.value, 10); + const number = e.target.value === '' ? minValue : parseInt(e.target.value, 10); if (Number.isNaN(number)) { return; @@ -112,7 +112,7 @@ export function ScheduleItemField({ } const isNegative = value.startsWith('-'); - const durationRegexp = new RegExp(`^\\-?(\\d+)(${timeTypes.join('|')})$`); + const durationRegexp = new RegExp(`^\\-?(\\d+)(${units.join('|')})$`); const durationMatchArray = value.match(durationRegexp); if (!durationMatchArray) { @@ -124,7 +124,7 @@ export function ScheduleItemField({ setTimeVal(time); setTimeType(unit); - }, [timeType, timeTypes, timeVal, value]); + }, [timeType, units, timeVal, value]); const label = useMemo( () => ( @@ -154,7 +154,7 @@ export function ScheduleItemField({ append={ timeTypes.includes(type.value))} + options={timeTypeOptions.filter((type) => units.includes(type.value))} value={timeType} onChange={onChangeTimeType} disabled={isDisabled}