From ad9024b040c3ccfd59ce531889b631049b67ea97 Mon Sep 17 00:00:00 2001
From: Jack <41238731+fisjac@users.noreply.github.com>
Date: Fri, 15 Mar 2024 13:10:00 -0500
Subject: [PATCH] fix(alerts/reports): implementing custom_width as an Antd
 number input (#27260)

---
 .../src/features/alerts/AlertReportModal.tsx       | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index bc6908cac..c297da2d7 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -36,7 +36,7 @@ import {
 import rison from 'rison';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 
-import { Input } from 'src/components/Input';
+import { InputNumber } from 'src/components/Input';
 import { Switch } from 'src/components/Switch';
 import Modal from 'src/components/Modal';
 import Collapse from 'src/components/Collapse';
@@ -873,6 +873,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     updateAlertState(name, parsedValue);
   };
 
+  const onCustomWidthChange = (value: number | null | undefined) => {
+    updateAlertState('custom_width', value);
+  };
+
   const onTimeoutVerifyChange = (
     event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
   ) => {
@@ -1542,12 +1546,14 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
             >
               <div className="control-label">{t('Screenshot width')}</div>
               <div className="input-container">
-                <Input
+                <InputNumber
                   type="number"
                   name="custom_width"
-                  value={currentAlert?.custom_width || ''}
+                  value={currentAlert?.custom_width || undefined}
+                  min={600}
+                  max={2400}
                   placeholder={t('Input custom width in pixels')}
-                  onChange={onInputChange}
+                  onChange={onCustomWidthChange}
                 />
               </div>
             </StyledInputContainer>