fix(alerts/reports): implementing custom_width as an Antd number input (#27260)

This commit is contained in:
Jack
2024-03-15 13:10:00 -05:00
committed by Michael S. Molina
parent f1f20e436c
commit ea83e9f9a7

View File

@@ -36,7 +36,7 @@ import rison from 'rison';
import { useSingleViewResource } from 'src/views/CRUD/hooks'; import { useSingleViewResource } from 'src/views/CRUD/hooks';
import Icons from 'src/components/Icons'; import Icons from 'src/components/Icons';
import { Input } from 'src/components/Input'; import { Input, InputNumber } from 'src/components/Input';
import { Switch } from 'src/components/Switch'; import { Switch } from 'src/components/Switch';
import Modal from 'src/components/Modal'; import Modal from 'src/components/Modal';
import TimezoneSelector from 'src/components/TimezoneSelector'; import TimezoneSelector from 'src/components/TimezoneSelector';
@@ -890,6 +890,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
updateAlertState(name, parsedValue); updateAlertState(name, parsedValue);
}; };
const onCustomWidthChange = (value: number | null | undefined) => {
updateAlertState('custom_width', value);
};
const onTimeoutVerifyChange = ( const onTimeoutVerifyChange = (
event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>, event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
) => { ) => {
@@ -1504,14 +1508,16 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
{TRANSLATIONS.CUSTOM_SCREENSHOT_WIDTH_TEXT} {TRANSLATIONS.CUSTOM_SCREENSHOT_WIDTH_TEXT}
</div> </div>
<div className="input-container"> <div className="input-container">
<Input <InputNumber
type="number" type="number"
name="custom_width" name="custom_width"
value={currentAlert?.custom_width || ''} value={currentAlert?.custom_width || undefined}
min={600}
max={2400}
placeholder={ placeholder={
TRANSLATIONS.CUSTOM_SCREENSHOT_WIDTH_PLACEHOLDER_TEXT TRANSLATIONS.CUSTOM_SCREENSHOT_WIDTH_PLACEHOLDER_TEXT
} }
onChange={onInputChange} onChange={onCustomWidthChange}
/> />
</div> </div>
</StyledInputContainer> </StyledInputContainer>