From fbe7a9c1730761523aa24b1874391a7d60386309 Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 28 Oct 2024 15:32:36 +0300
Subject: [PATCH 1/7] refactor(input): Migrate Input component to Ant Design 5

---
 .../src/components/Input/Input.stories.tsx    | 138 ++++++++++++++++++
 .../src/components/Input/Input.test.tsx       |  35 +++++
 .../src/components/Input/index.tsx            |  19 +--
 superset-frontend/src/theme/index.ts          |  14 ++
 4 files changed, 192 insertions(+), 14 deletions(-)
 create mode 100644 superset-frontend/src/components/Input/Input.stories.tsx
 create mode 100644 superset-frontend/src/components/Input/Input.test.tsx

diff --git a/superset-frontend/src/components/Input/Input.stories.tsx b/superset-frontend/src/components/Input/Input.stories.tsx
new file mode 100644
index 0000000000000..4023c53d97e0f
--- /dev/null
+++ b/superset-frontend/src/components/Input/Input.stories.tsx
@@ -0,0 +1,138 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { InputProps, TextAreaProps } from 'antd-v5/lib/input';
+import { InputNumberProps } from 'antd-v5/lib/input-number';
+import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
+import { Input, TextArea, InputNumber } from '.';
+
+export default {
+  title: 'Input',
+  component: Input,
+};
+
+export const InteractiveInput = (args: InputProps) => (
+  <AntdThemeProvider>
+    <Input {...args} />
+  </AntdThemeProvider>
+);
+
+export const InteractiveInputNumber = (args: InputNumberProps) => (
+  <AntdThemeProvider>
+    <InputNumber {...args} />
+  </AntdThemeProvider>
+);
+
+export const InteractiveTextArea = (args: TextAreaProps) => (
+  <AntdThemeProvider>
+    <TextArea {...args} />
+  </AntdThemeProvider>
+);
+
+InteractiveInput.args = {
+  allowClear: false,
+  disabled: false,
+  showCount: false,
+  type: 'text',
+  variant: 'outlined',
+};
+
+InteractiveInput.argTypes = {
+  defaultValue: {
+    control: {
+      type: 'text',
+    },
+  },
+
+  id: {
+    control: {
+      type: 'text',
+    },
+  },
+
+  maxLength: {
+    control: {
+      type: 'number',
+    },
+  },
+
+  status: {
+    control: {
+      type: 'select',
+    },
+    options: ['error', 'warning'],
+  },
+
+  size: {
+    control: {
+      type: 'select',
+    },
+    options: ['large', 'middle', 'small'],
+  },
+  variant: {
+    control: {
+      type: 'select',
+    },
+    options: ['outlined', 'borderless', 'filled'],
+  },
+};
+
+InteractiveTextArea.args = {
+  ...InteractiveInput.args,
+  autoSize: false,
+};
+
+InteractiveTextArea.argTypes = InteractiveInput.argTypes;
+
+InteractiveInputNumber.args = {
+  autoFocus: false,
+  disabled: false,
+  keyboard: true,
+  max: Number.MAX_SAFE_INTEGER,
+  min: Number.MIN_SAFE_INTEGER,
+  readonly: false,
+  step: 1,
+  stringMode: false,
+};
+
+InteractiveInputNumber.argTypes = {
+  controls: {
+    control: { type: 'boolean' },
+  },
+
+  decimalSeperator: {
+    control: { type: 'text' },
+  },
+
+  placeholder: {
+    control: { type: 'text' },
+  },
+
+  defaultValue: {
+    control: { type: 'number' },
+  },
+
+  precision: {
+    control: { type: 'number' },
+  },
+
+  status: InteractiveInput.argTypes.status,
+  size: InteractiveInput.argTypes.size,
+  variant: InteractiveInput.argTypes.variant,
+};
diff --git a/superset-frontend/src/components/Input/Input.test.tsx b/superset-frontend/src/components/Input/Input.test.tsx
new file mode 100644
index 0000000000000..2fdfcc9eca7d1
--- /dev/null
+++ b/superset-frontend/src/components/Input/Input.test.tsx
@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render } from 'spec/helpers/testing-library';
+import { Input, InputNumber, TextArea } from '.';
+
+test('should render Input', () => {
+  const { container } = render(<Input />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render InputNumber', () => {
+  const { container } = render(<InputNumber />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render TextArea', () => {
+  const { container } = render(<TextArea />);
+  expect(container).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/components/Input/index.tsx b/superset-frontend/src/components/Input/index.tsx
index c1855f97aa781..1fcb4a53696ab 100644
--- a/superset-frontend/src/components/Input/index.tsx
+++ b/superset-frontend/src/components/Input/index.tsx
@@ -16,20 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
-import { Input as AntdInput, InputNumber as AntdInputNumber } from 'antd';
 
-export const Input = styled(AntdInput)`
-  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
-  border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
+import { Input as AntdInput, InputNumber as AntdInputNumber } from 'antd-v5';
 
-export const InputNumber = styled(AntdInputNumber)`
-  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
-  border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
+export const Input = AntdInput;
 
-export const TextArea = styled(AntdInput.TextArea)`
-  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
-  border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
+export const InputNumber = AntdInputNumber;
+
+export const { TextArea } = AntdInput;
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
index 857e95888f935..816197c077a59 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/superset-frontend/src/theme/index.ts
@@ -60,6 +60,20 @@ const baseConfig: ThemeConfig = {
       paddingLG: supersetTheme.gridUnit * 6,
       fontWeightStrong: supersetTheme.typography.weights.medium,
     },
+    Input: {
+      colorBorder: supersetTheme.colors.secondary.light3,
+      colorBgContainer: supersetTheme.colors.grayscale.light5,
+      activeShadow: `0 0 0 ${supersetTheme.gridUnit / 2}px ${
+        supersetTheme.colors.primary.light3
+      }`,
+    },
+    InputNumber: {
+      colorBorder: supersetTheme.colors.secondary.light3,
+      colorBgContainer: supersetTheme.colors.grayscale.light5,
+      activeShadow: `0 0 0 ${supersetTheme.gridUnit / 2}px ${
+        supersetTheme.colors.primary.light3
+      }`,
+    },
     Tag: {
       borderRadiusSM: 2,
       defaultBg: supersetTheme.colors.grayscale.light4,

From 84144ae662b46be009e2781b45a41c001ab203f6 Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 28 Oct 2024 19:46:32 +0300
Subject: [PATCH 2/7] fix(DrillBy): fix typings for Input in DrillByMenuItems

---
 .../src/components/Chart/DrillBy/DrillByMenuItems.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
index b80417a130079..c8df46692401f 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -45,7 +45,6 @@ import {
 import rison from 'rison';
 import { debounce } from 'lodash';
 import { FixedSizeList as List } from 'react-window';
-import { AntdInput } from 'src/components';
 import Icons from 'src/components/Icons';
 import { Input } from 'src/components/Input';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
@@ -55,6 +54,7 @@ import {
   supersetGetCache,
 } from 'src/utils/cachedSupersetGet';
 import { useVerboseMap } from 'src/hooks/apiResources/datasets';
+import { InputRef } from 'antd-v5';
 import { MenuItemTooltip } from '../DisabledMenuItemTooltip';
 import DrillByModal from './DrillByModal';
 import { getSubmenuYOffset } from '../utils';
@@ -118,7 +118,7 @@ export const DrillByMenuItems = ({
   const [columns, setColumns] = useState<Column[]>([]);
   const [showModal, setShowModal] = useState(false);
   const [currentColumn, setCurrentColumn] = useState();
-  const ref = useRef<AntdInput>(null);
+  const ref = useRef<InputRef>(null);
   const showSearch =
     loadDrillByOptions || columns.length > SHOW_COLUMNS_SEARCH_THRESHOLD;
   const handleSelection = useCallback(
@@ -138,10 +138,9 @@ export const DrillByMenuItems = ({
 
   useEffect(() => {
     if (open) {
-      ref.current?.input.focus({ preventScroll: true });
+      ref.current?.input?.focus({ preventScroll: true });
     } else {
       // Reset search input when menu is closed
-      ref.current?.setValue('');
       setSearchInput('');
     }
   }, [open]);
@@ -311,6 +310,7 @@ export const DrillByMenuItems = ({
                 margin: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px;
                 box-shadow: none;
               `}
+              value={searchInput}
             />
           )}
           {isLoadingColumns ? (

From 9612d071ed410495be3ddfb082abb8e8d43ce2df Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 28 Oct 2024 20:37:29 +0300
Subject: [PATCH 3/7] fix(types): fix typings for useRef hooks

---
 .../components/Datasource/ChangeDatasourceModal.tsx |  4 ++--
 .../explore/components/controls/BoundsControl.tsx   |  8 ++++----
 .../src/features/alerts/AlertReportModal.tsx        | 11 +++++++++--
 .../alerts/components/AlertReportCronScheduler.tsx  | 13 +++++--------
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx b/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx
index ed39a362229b6..e02ad68a7f145 100644
--- a/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx
@@ -41,13 +41,13 @@ import Dataset from 'src/types/Dataset';
 import { useDebouncedEffect } from 'src/explore/exploreUtils';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import Loading from 'src/components/Loading';
-import { AntdInput } from 'src/components';
 import { Input } from 'src/components/Input';
 import {
   PAGE_SIZE as DATASET_PAGE_SIZE,
   SORT_BY as DATASET_SORT_BY,
 } from 'src/features/datasets/constants';
 import withToasts from 'src/components/MessageToasts/withToasts';
+import { InputRef } from 'antd-v5';
 import FacePile from '../FacePile';
 
 const CONFIRM_WARNING_MESSAGE = t(
@@ -115,7 +115,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
   const [sortBy, setSortBy] = useState<SortByType>(DATASET_SORT_BY);
   const [confirmChange, setConfirmChange] = useState(false);
   const [confirmedDataset, setConfirmedDataset] = useState<Datasource>();
-  const searchRef = useRef<AntdInput>(null);
+  const searchRef = useRef<InputRef>(null);
 
   const {
     state: { loading, resourceCollection, resourceCount },
diff --git a/superset-frontend/src/explore/components/controls/BoundsControl.tsx b/superset-frontend/src/explore/components/controls/BoundsControl.tsx
index 7a12183d02c03..10b355d176e09 100644
--- a/superset-frontend/src/explore/components/controls/BoundsControl.tsx
+++ b/superset-frontend/src/explore/components/controls/BoundsControl.tsx
@@ -79,11 +79,11 @@ export default function BoundsControl({
     setMinMax([parseNumber(min), parseNumber(max)]);
   }, [min, max]);
 
-  const onMinChange = (value: number | string | undefined) => {
+  const onMinChange = (value: number | string | undefined | null) => {
     update([parseNumber(value), minMax[1]]);
   };
 
-  const onMaxChange = (value: number | string | undefined) => {
+  const onMaxChange = (value: number | string | undefined | null) => {
     update([minMax[0], parseNumber(value)]);
   };
 
@@ -94,7 +94,7 @@ export default function BoundsControl({
         <MinInput
           data-test="min-bound"
           placeholder={t('Min')}
-          // emit (string | number | undefined)
+          // emit (string | number | undefined | null)
           onChange={onMinChange}
           // accept (number | undefined)
           value={minMax[0] === null ? undefined : minMax[0]}
@@ -102,7 +102,7 @@ export default function BoundsControl({
         <MaxInput
           data-test="max-bound"
           placeholder={t('Max')}
-          // emit (number | string | undefined)
+          // emit (number | string | undefined | null)
           onChange={onMaxChange}
           // accept (number | undefined)
           value={minMax[1] === null ? undefined : minMax[1]}
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index e136675e35a49..c06f3b676b66a 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -983,8 +983,15 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     }
   };
 
-  const onCustomWidthChange = (value: number | null | undefined) => {
-    updateAlertState('custom_width', value);
+  const onCustomWidthChange = (value: number | string | null | undefined) => {
+    // Convert string to number if needed and handle empty/invalid values
+    const numValue =
+      value === undefined || value === ''
+        ? undefined
+        : typeof value === 'string'
+          ? Number(value) || null
+          : value;
+    updateAlertState('custom_width', numValue);
   };
 
   const onTimeoutVerifyChange = (
diff --git a/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx b/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx
index 055327f834dfd..7a6cd995042dc 100644
--- a/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx
+++ b/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useCallback, useRef, FocusEvent, FC } from 'react';
+import { useState, useCallback, FocusEvent, FC } from 'react';
 
 import { t, useTheme } from '@superset-ui/core';
 
-import { AntdInput, Select } from 'src/components';
+import { Select } from 'src/components';
 import { Input } from 'src/components/Input';
 import { CronPicker, CronError } from 'src/components/CronPicker';
 import { StyledInputContainer } from '../AlertReportModal';
@@ -51,7 +51,6 @@ export const AlertReportCronScheduler: FC<AlertReportCronSchedulerProps> = ({
   onChange,
 }) => {
   const theme = useTheme();
-  const inputRef = useRef<AntdInput>(null);
   const [scheduleFormat, setScheduleFormat] = useState<ScheduleType>(
     ScheduleType.Picker,
   );
@@ -59,9 +58,8 @@ export const AlertReportCronScheduler: FC<AlertReportCronSchedulerProps> = ({
   const customSetValue = useCallback(
     (newValue: string) => {
       onChange(newValue);
-      inputRef.current?.setValue(newValue);
     },
-    [inputRef, onChange],
+    [onChange],
   );
 
   const handleBlur = useCallback(
@@ -72,8 +70,8 @@ export const AlertReportCronScheduler: FC<AlertReportCronSchedulerProps> = ({
   );
 
   const handlePressEnter = useCallback(() => {
-    onChange(inputRef.current?.input.value || '');
-  }, [onChange]);
+    onChange(value || '');
+  }, [onChange, value]);
 
   const [error, onError] = useState<CronError>();
 
@@ -106,7 +104,6 @@ export const AlertReportCronScheduler: FC<AlertReportCronSchedulerProps> = ({
           <Input
             type="text"
             name="crontab"
-            ref={inputRef}
             style={error ? { borderColor: theme.colors.error.base } : {}}
             placeholder={t('CRON expression')}
             value={value}

From 898d829dc1ee2a622f6a3c0f7ce669bd9595cfdb Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 28 Oct 2024 20:57:10 +0300
Subject: [PATCH 4/7] test(BoundsControl): fix the test since v5 of InputNumber
 doesn't allow strings by default

---
 .../src/explore/components/controls/BoundsControl.test.jsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/BoundsControl.test.jsx b/superset-frontend/src/explore/components/controls/BoundsControl.test.jsx
index 13477dec4c749..a3a9d453af6ce 100644
--- a/superset-frontend/src/explore/components/controls/BoundsControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/BoundsControl.test.jsx
@@ -34,7 +34,8 @@ test('renders two inputs', () => {
 test('receives null on non-numeric', async () => {
   render(<BoundsControl {...defaultProps} />);
   const minInput = screen.getAllByRole('spinbutton')[0];
-  userEvent.type(minInput, 'text');
+  userEvent.type(minInput, '1');
+  userEvent.clear(minInput);
   await waitFor(() =>
     expect(defaultProps.onChange).toHaveBeenCalledWith([null, null]),
   );

From 88d915925ac62784b95d422e34d2bee9a426f053 Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 28 Oct 2024 21:38:51 +0300
Subject: [PATCH 5/7] refactor(classes): update classnames to antd5

---
 .../cypress-base/cypress/e2e/explore/control.test.ts            | 2 +-
 superset-frontend/src/GlobalStyles.tsx                          | 2 +-
 .../components/controls/DateFilterControl/DateFilterLabel.tsx   | 2 +-
 .../components/controls/VizTypeControl/VizTypeGallery.tsx       | 2 +-
 superset-frontend/src/features/rls/RowLevelSecurityModal.tsx    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts b/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
index ccdfcd4512c7d..5fd49efa01908 100644
--- a/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
@@ -234,7 +234,7 @@ describe('Time range filter', () => {
 
     cy.get('[data-test=time-range-trigger]').click();
     cy.get('[data-test=custom-frame]').then(() => {
-      cy.get('.ant-input-number-input-wrap > input')
+      cy.get('.antd5-input-number-input-wrap > input')
         .invoke('attr', 'value')
         .should('eq', '7');
     });
diff --git a/superset-frontend/src/GlobalStyles.tsx b/superset-frontend/src/GlobalStyles.tsx
index b9cb0e55013e0..b0b57133dac15 100644
--- a/superset-frontend/src/GlobalStyles.tsx
+++ b/superset-frontend/src/GlobalStyles.tsx
@@ -70,7 +70,7 @@ export const GlobalStyles = () => (
         }
       }
       .column-config-popover {
-        & .ant-input-number {
+        & .antd5-input-number {
           width: 100%;
         }
         && .btn-group svg {
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index ebdd716b91496..e527c689162c3 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -65,7 +65,7 @@ const ContentStyleWrapper = styled.div`
       margin-top: 8px;
     }
 
-    .ant-input-number {
+    .antd5-input-number {
       width: 100%;
     }
 
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index 49e5c8cedc343..0c850f89de48c 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -143,7 +143,7 @@ const SearchWrapper = styled.div`
     margin-bottom: ${theme.gridUnit}px;
     margin-left: ${theme.gridUnit * 3}px;
     margin-right: ${theme.gridUnit * 3}px;
-    .ant-input-affix-wrapper {
+    .antd5-input-affix-wrapper {
       padding-left: ${theme.gridUnit * 2}px;
     }
   `}
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
index 2b3ef730c938d..6467869665969 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
@@ -40,7 +40,7 @@ import { FilterType, RLSObject, RoleObject, TableObject } from './types';
 const noMargins = css`
   margin: 0;
 
-  .ant-input {
+  .antd5-input {
     margin: 0;
   }
 `;

From 9613ca67c584e81adfd1878d30404e614d38ab9d Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Tue, 29 Oct 2024 18:45:45 +0300
Subject: [PATCH 6/7] fix(alert report modal): parse '0' correctly

---
 .../src/features/alerts/AlertReportModal.tsx          | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index c06f3b676b66a..81690f68fe50a 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -984,13 +984,12 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   };
 
   const onCustomWidthChange = (value: number | string | null | undefined) => {
-    // Convert string to number if needed and handle empty/invalid values
     const numValue =
-      value === undefined || value === ''
-        ? undefined
-        : typeof value === 'string'
-          ? Number(value) || null
-          : value;
+      value === null ||
+      value === undefined ||
+      (typeof value === 'string' && Number.isNaN(Number(value)))
+        ? null
+        : Number(value);
     updateAlertState('custom_width', numValue);
   };
 

From d8f6b4580aa94546f5731ebfb710f0ff9ed8f53c Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Thu, 31 Oct 2024 21:12:31 +0300
Subject: [PATCH 7/7] fix(debounce): ugly solution

---
 .../Chart/DrillBy/DrillByMenuItems.tsx        | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
index c8df46692401f..47666db7802f0 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -114,6 +114,7 @@ export const DrillByMenuItems = ({
   const { addDangerToast } = useToasts();
   const [isLoadingColumns, setIsLoadingColumns] = useState(true);
   const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearchInput, setDebouncedSearchInput] = useState('');
   const [dataset, setDataset] = useState<Dataset>();
   const [columns, setColumns] = useState<Column[]>([]);
   const [showModal, setShowModal] = useState(false);
@@ -142,6 +143,7 @@ export const DrillByMenuItems = ({
     } else {
       // Reset search input when menu is closed
       setSearchInput('');
+      setDebouncedSearchInput('');
     }
   }, [open]);
 
@@ -206,19 +208,27 @@ export const DrillByMenuItems = ({
     hasDrillBy,
   ]);
 
-  const handleInput = debounce(
-    (value: string) => setSearchInput(value),
-    FAST_DEBOUNCE,
+  const debouncedSetSearchInput = useMemo(
+    () =>
+      debounce((value: string) => {
+        setDebouncedSearchInput(value);
+      }, FAST_DEBOUNCE),
+    [],
   );
 
+  const handleInput = (value: string) => {
+    setSearchInput(value);
+    debouncedSetSearchInput(value);
+  };
+
   const filteredColumns = useMemo(
     () =>
       columns.filter(column =>
         (column.verbose_name || column.column_name)
           .toLowerCase()
-          .includes(searchInput.toLowerCase()),
+          .includes(debouncedSearchInput.toLowerCase()),
       ),
-    [columns, searchInput],
+    [columns, debouncedSearchInput],
   );
 
   const submenuYOffset = useMemo(