fix: handling of input changes in CustomTimePicker to ensure value is applied on popover close (#10484)

* fix: enhance input handling to prevent popover closure on input click

* fix: handling of input changes in CustomTimePicker to ensure value is applied on popover close

* chore: add test cases

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.113.0
+    image: signoz/signoz:v0.114.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:v0.144.2
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:v0.144.2
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.113.0
+    image: signoz/signoz:v0.114.0
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:v0.144.2
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:v0.144.2
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.113.0}
+    image: signoz/signoz:${VERSION:-v0.114.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.113.0}
+    image: signoz/signoz:${VERSION:-v0.114.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -16,7 +16,7 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import { FilterDropdownProps } from 'antd/lib/table/interface';
+import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {
 	getQueueOverview,

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -0,0 +1,279 @@
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import dayjs from 'dayjs';
+import * as timeUtils from 'utils/timeUtils';
+
+import CustomTimePicker from './CustomTimePicker';
+
+jest.mock('react-router-dom', () => {
+	const actual = jest.requireActual('react-router-dom');
+
+	return {
+		...actual,
+		useLocation: jest.fn().mockReturnValue({
+			pathname: '/test-path',
+		}),
+	};
+});
+
+jest.mock('providers/Timezone', () => {
+	const actual = jest.requireActual('providers/Timezone');
+
+	return {
+		...actual,
+		useTimezone: jest.fn().mockReturnValue({
+			timezone: {
+				value: 'UTC',
+				offset: '+00:00',
+				name: 'UTC',
+			},
+			browserTimezone: {
+				value: 'UTC',
+				offset: '+00:00',
+				name: 'UTC',
+			},
+		}),
+	};
+});
+
+interface WrapperProps {
+	initialValue?: string;
+	showLiveLogs?: boolean;
+	onValidCustomDateChange?: () => void;
+	onError?: () => void;
+	onSelect?: (value: string) => void;
+	onCustomDateHandler?: () => void;
+	onCustomTimeStatusUpdate?: () => void;
+}
+
+function Wrapper({
+	initialValue = '2024-01-01 00:00:00 - 2024-01-01 01:00:00',
+	showLiveLogs = false,
+	onValidCustomDateChange = (): void => {},
+	onError = (): void => {},
+	onSelect = (): void => {},
+	onCustomDateHandler = (): void => {},
+	onCustomTimeStatusUpdate = (): void => {},
+}: WrapperProps): JSX.Element {
+	const [open, setOpen] = useState(false);
+	const [selectedTime, setSelectedTime] = useState('custom');
+	const [selectedValue, setSelectedValue] = useState(initialValue);
+
+	const handleSelect = (value: string): void => {
+		setSelectedTime(value);
+		onSelect(value);
+	};
+
+	return (
+		<CustomTimePicker
+			open={open}
+			setOpen={setOpen}
+			onSelect={handleSelect}
+			onError={onError}
+			selectedTime={selectedTime}
+			selectedValue={selectedValue}
+			onValidCustomDateChange={({ timeStr }): void => {
+				setSelectedValue(timeStr);
+				onValidCustomDateChange();
+			}}
+			onCustomDateHandler={(): void => {
+				onCustomDateHandler();
+			}}
+			onCustomTimeStatusUpdate={(): void => {
+				onCustomTimeStatusUpdate();
+			}}
+			items={[
+				{ label: 'Last 5 minutes', value: '5m' },
+				{ label: 'Custom', value: 'custom' },
+			]}
+			minTime={dayjs('2024-01-01 00:00:00').valueOf() * 1000_000}
+			maxTime={dayjs('2024-01-01 01:00:00').valueOf() * 1000_000}
+			showLiveLogs={showLiveLogs}
+		/>
+	);
+}
+
+describe('CustomTimePicker', () => {
+	it('does not close or reset when clicking input while open', () => {
+		render(<Wrapper />);
+
+		const input = screen.getByRole('textbox');
+
+		// Open popover
+		fireEvent.focus(input);
+
+		// Type some text
+		fireEvent.change(input, { target: { value: '5m' } });
+
+		// Click the input again while open
+		fireEvent.mouseDown(input);
+		fireEvent.click(input);
+
+		// Value should remain as typed
+		expect((input as HTMLInputElement).value).toBe('5m');
+	});
+
+	it('applies valid shorthand on Enter', () => {
+		const onValid = jest.fn();
+		const onError = jest.fn();
+
+		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
+
+		const input = screen.getByRole('textbox');
+
+		fireEvent.focus(input);
+		fireEvent.change(input, { target: { value: '5m' } });
+		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+		expect(onValid).toHaveBeenCalledTimes(1);
+		// onError(false) may be called by internal reset logic; we only assert that
+		// it was never called with a truthy error state
+		expect(onError).not.toHaveBeenCalledWith(true);
+	});
+
+	it('sets error and updates custom time status for invalid shorthand exceeding max allowed window', () => {
+		const onValid = jest.fn();
+		const onError = jest.fn();
+		const onCustomTimeStatusUpdate = jest.fn();
+
+		render(
+			<Wrapper
+				onValidCustomDateChange={onValid}
+				onError={onError}
+				onCustomTimeStatusUpdate={onCustomTimeStatusUpdate}
+			/>,
+		);
+
+		const input = screen.getByRole('textbox');
+
+		fireEvent.focus(input);
+		// large number of days to ensure it exceeds the 15 months allowed window
+		fireEvent.change(input, { target: { value: '9999d' } });
+		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+		expect(onError).toHaveBeenCalledWith(true);
+		expect(onCustomTimeStatusUpdate).toHaveBeenCalledWith();
+		expect(onValid).not.toHaveBeenCalled();
+	});
+
+	it('treats close after change like pressing Enter (blur + chevron)', () => {
+		const onValid = jest.fn();
+		const onError = jest.fn();
+
+		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
+
+		const input = screen.getByRole('textbox');
+
+		// Open and change value so "changed since open" is true
+		fireEvent.focus(input);
+		fireEvent.change(input, { target: { value: '5m' } });
+		fireEvent.blur(input);
+
+		// Click the chevron (which triggers handleClose)
+		const chevron = document.querySelector(
+			'.time-input-suffix-icon-badge',
+		) as HTMLElement;
+
+		fireEvent.click(chevron);
+
+		// Should have applied the value (same as Enter)
+		expect(onValid).toHaveBeenCalledTimes(1);
+		expect(onError).not.toHaveBeenCalledWith(true);
+	});
+
+	it('applies epoch start/end range on Enter via onCustomDateHandler', () => {
+		const onCustomDateHandler = jest.fn();
+		const onError = jest.fn();
+
+		render(
+			<Wrapper onCustomDateHandler={onCustomDateHandler} onError={onError} />,
+		);
+
+		const now = dayjs().valueOf();
+		const later = dayjs().add(1, 'hour').valueOf();
+		const input = screen.getByRole('textbox');
+
+		fireEvent.focus(input);
+		fireEvent.change(input, {
+			target: { value: `${now} - ${later}` },
+		});
+		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+		expect(onCustomDateHandler).toHaveBeenCalledTimes(1);
+		expect(onError).not.toHaveBeenCalledWith(true);
+	});
+
+	it('uses validateTimeRange result for generic formatted ranges (valid case)', () => {
+		const validateTimeRangeSpy = jest.spyOn(timeUtils, 'validateTimeRange');
+		const onCustomDateHandler = jest.fn();
+		const onError = jest.fn();
+
+		validateTimeRangeSpy.mockReturnValue({
+			isValid: true,
+			errorDetails: undefined,
+			startTimeMs: dayjs('2024-01-01 00:00:00').valueOf(),
+			endTimeMs: dayjs('2024-01-01 01:00:00').valueOf(),
+		});
+
+		render(
+			<Wrapper onCustomDateHandler={onCustomDateHandler} onError={onError} />,
+		);
+
+		const input = screen.getByRole('textbox');
+
+		fireEvent.focus(input);
+		fireEvent.change(input, {
+			target: { value: 'foo - bar' },
+		});
+		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+		expect(validateTimeRangeSpy).toHaveBeenCalled();
+		expect(onCustomDateHandler).toHaveBeenCalledTimes(1);
+		expect(onError).not.toHaveBeenCalledWith(true);
+
+		validateTimeRangeSpy.mockRestore();
+	});
+
+	it('uses validateTimeRange result for generic formatted ranges (invalid case)', () => {
+		const validateTimeRangeSpy = jest.spyOn(timeUtils, 'validateTimeRange');
+		const onValid = jest.fn();
+		const onError = jest.fn();
+
+		validateTimeRangeSpy.mockReturnValue({
+			isValid: false,
+			errorDetails: {
+				message: 'Invalid range',
+				code: 'INVALID_RANGE',
+				description: 'Start must be before end',
+			},
+			startTimeMs: 0,
+			endTimeMs: 0,
+		});
+
+		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
+
+		const input = screen.getByRole('textbox');
+
+		fireEvent.focus(input);
+		fireEvent.change(input, {
+			target: { value: 'foo - bar' },
+		});
+		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+		expect(validateTimeRangeSpy).toHaveBeenCalled();
+		expect(onError).toHaveBeenCalledWith(true);
+		expect(onValid).not.toHaveBeenCalled();
+
+		validateTimeRangeSpy.mockRestore();
+	});
+
+	it('opens live mode with correct label', () => {
+		render(<Wrapper showLiveLogs />);
+
+		const input = screen.getByRole('textbox');
+
+		fireEvent.focus(input);
+
+		expect((input as HTMLInputElement).value).toBe('Live');
+	});
+});

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -104,6 +104,10 @@ function CustomTimePicker({
 	const location = useLocation();
 
 	const inputRef = useRef<InputRef>(null);
+	const initialInputValueOnOpenRef = useRef<string>('');
+	const hasChangedSinceOpenRef = useRef<boolean>(false);
+	// Tracks if the last pointer down was on the input so we don't close the popover when user clicks the input again
+	const isClickFromInputRef = useRef(false);
 
 	const [activeView, setActiveView] = useState<ViewType>(DEFAULT_VIEW);
 
@@ -238,6 +242,21 @@ function CustomTimePicker({
 	};
 
 	const handleOpenChange = (newOpen: boolean): void => {
+		// Don't close when the user clicked the input (trigger); Ant Design treats trigger as "outside" overlay
+		if (!newOpen && isClickFromInputRef.current) {
+			isClickFromInputRef.current = false;
+			return;
+		}
+		isClickFromInputRef.current = false;
+
+		// If the popover is trying to close and the value changed since opening,
+		// treat it as if the user pressed Enter (attempt to apply the value)
+		if (!newOpen && hasChangedSinceOpenRef.current) {
+			hasChangedSinceOpenRef.current = false;
+			handleInputPressEnter();
+			return;
+		}
+
 		setOpen(newOpen);
 
 		if (!newOpen) {
@@ -406,10 +425,18 @@ function CustomTimePicker({
 	const handleOpen = (e?: React.SyntheticEvent): void => {
 		e?.stopPropagation?.();
 
+		// If the popover is already open, avoid resetting the input value
+		// so that any in-progress edits are preserved.
+		if (open) {
+			return;
+		}
+
 		if (showLiveLogs) {
 			setOpen(true);
 			setSelectedTimePlaceholderValue('Live');
 			setInputValue('Live');
+			initialInputValueOnOpenRef.current = 'Live';
+			hasChangedSinceOpenRef.current = false;
 			return;
 		}
 
@@ -424,11 +451,21 @@ function CustomTimePicker({
 			.tz(timezone.value)
 			.format(DATE_TIME_FORMATS.UK_DATETIME_SECONDS);
 
-		setInputValue(`${startTime} - ${endTime}`);
+		const nextValue = `${startTime} - ${endTime}`;
+		setInputValue(nextValue);
+		initialInputValueOnOpenRef.current = nextValue;
+		hasChangedSinceOpenRef.current = false;
 	};
 
 	const handleClose = (e: React.MouseEvent): void => {
 		e.stopPropagation();
+		// If the value changed since opening, treat this like pressing Enter
+		if (hasChangedSinceOpenRef.current) {
+			hasChangedSinceOpenRef.current = false;
+			handleInputPressEnter();
+			return;
+		}
+
 		setOpen(false);
 		setCustomDTPickerVisible?.(false);
 
@@ -450,6 +487,9 @@ function CustomTimePicker({
 	}, [location.pathname]);
 
 	const handleInputBlur = (): void => {
+		// Track whether the value was changed since the input was opened for editing
+		hasChangedSinceOpenRef.current =
+			inputValue !== initialInputValueOnOpenRef.current;
 		resetErrorStatus();
 	};
 
@@ -552,6 +592,12 @@ function CustomTimePicker({
 						readOnly={!open || showLiveLogs}
 						placeholder={selectedTimePlaceholderValue}
 						value={inputValue}
+						onMouseDown={(e): void => {
+							// Only treat as "click from input" when the actual input element is clicked (not suffix/chevron)
+							if (e.target === inputRef.current?.input) {
+								isClickFromInputRef.current = true;
+							}
+						}}
 						onFocus={handleOpen}
 						onClick={handleOpen}
 						onChange={handleInputChange}

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -13,7 +13,8 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('antd/es/form/Form', () => ({
+jest.mock('antd', () => ({
+	...jest.requireActual('antd'),
 	useForm: jest.fn().mockReturnValue({
 		onFinish: jest.fn(),
 	}),

frontend/src/components/ExplorerCard/types.ts

@@ -1,6 +1,6 @@
 import { UseMutateAsyncFunction } from 'react-query';
 import { FormInstance } from 'antd';
-import { NotificationInstance } from 'antd/es/notification/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 import { AxiosResponse } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { OptionsQuery } from 'container/OptionsMenu/types';

frontend/src/components/ExplorerCard/utils.ts

@@ -1,4 +1,4 @@
-import { NotificationInstance } from 'antd/es/notification/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 import axios from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';

frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx

@@ -1,5 +1,4 @@
-import { Tag, Typography } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import { TableColumnsType as ColumnsType, Tag, Typography } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import {

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -12,7 +12,7 @@ import {
 	Tag,
 	Typography,
 } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';

frontend/src/components/LogDetail/index.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';

frontend/src/components/Logs/TableView/types.ts

@@ -1,4 +1,7 @@
-import { ColumnsType, ColumnType } from 'antd/es/table';
+import {
+	TableColumnsType as ColumnsType,
+	TableColumnType as ColumnType,
+} from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Typography } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import { TableColumnsType as ColumnsType, Typography } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';

frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import { Info } from 'lucide-react';
 
 import './MQCommon.styles.scss';

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -1,7 +1,10 @@
 import { memo, useEffect, useState } from 'react';
+import type {
+	TableColumnGroupType as ColumnGroupType,
+	TableColumnsType as ColumnsType,
+	TableColumnType as ColumnType,
+} from 'antd';
 import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
-import { ColumnGroupType, ColumnType } from 'antd/es/table';
-import { ColumnsType } from 'antd/lib/table';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -9,7 +9,7 @@ import {
 import ReactDragListView from 'react-drag-listview';
 import { ResizeCallbackData } from 'react-resizable';
 import { Table } from 'antd';
-import { ColumnsType } from 'antd/lib/table';
+import type { ColumnsType } from 'antd/lib/table';
 import cx from 'classnames';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
 import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';

frontend/src/components/ResizeTable/types.ts

@@ -1,7 +1,7 @@
 import { TableProps } from 'antd';
-import { ColumnsType } from 'antd/es/table';
-import { PaginationProps } from 'antd/lib';
-import { ColumnGroupType, ColumnType } from 'antd/lib/table';
+import type { ColumnsType } from 'antd/es/table';
+import type { PaginationProps } from 'antd/lib';
+import type { ColumnGroupType, ColumnType } from 'antd/lib/table';
 import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatSupport';
 
 import { TableDataSource } from './contants';

frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx

@@ -1,5 +1,4 @@
-import { Radio } from 'antd';
-import { RadioChangeEvent } from 'antd/es/radio';
+import { Radio, RadioChangeEvent } from 'antd';
 
 import './SignozRadioGroup.styles.scss';
 

frontend/src/components/Styled/index.ts

@@ -13,8 +13,8 @@ import {
 	TabsProps,
 	Typography,
 } from 'antd';
-import { TextProps } from 'antd/lib/typography/Text';
-import { TitleProps } from 'antd/lib/typography/Title';
+import type { TextProps } from 'antd/lib/typography/Text';
+import type { TitleProps } from 'antd/lib/typography/Title';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';

frontend/src/components/TableRenderer/utils.ts

@@ -1,5 +1,7 @@
-import { ColumnType } from 'antd/es/table';
-import { ColumnsType } from 'antd/lib/table';
+import type {
+	TableColumnsType as ColumnsType,
+	TableColumnType as ColumnType,
+} from 'antd';
 
 export const generatorResizeTableColumns = <T>({
 	baseColumnOptions,

frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Radio } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import { History, Table } from 'lucide-react';
 
 import { ALERT_TABS } from '../constants';

frontend/src/components/Tags/Tags.tsx

@@ -1,7 +1,6 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-import { Tag } from 'antd/lib';
+import { Button, Tag } from 'antd';
 import Input from 'components/Input';
 import { Check, X } from 'lucide-react';
 

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { WarningFilled } from '@ant-design/icons';
 import { Select, Tooltip } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import classNames from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';

frontend/src/container/APIKeys/APIKeys.tsx

@@ -8,6 +8,7 @@ import {
 	Button,
 	Col,
 	Collapse,
+	CollapseProps,
 	Flex,
 	Form,
 	Input,
@@ -20,8 +21,7 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import { NotificationInstance } from 'antd/es/notification/interface';
-import { CollapseProps } from 'antd/lib';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 import createAPIKeyApi from 'api/v1/pats/create';
 import deleteAPIKeyApi from 'api/v1/pats/delete';
 import updateAPIKeyApi from 'api/v1/pats/update';

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Table } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import { Progress, Table, TableColumnsType as ColumnsType } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
 import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import { Button, TableColumnsType as ColumnsType } from 'antd';
 import ClientSideQBSearch, {
 	AttributeKey,
 } from 'components/ClientSideQBSearch/ClientSideQBSearch';

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { Button } from 'antd';
-import { ColumnsType } from 'antd/lib/table';
+import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { Button } from 'antd';
-import { NotificationInstance } from 'antd/es/notification/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 import deleteChannel from 'api/channels/delete';
 import APIError from 'types/api/error';
 

frontend/src/container/AllError/index.tsx

@@ -14,9 +14,9 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import { ColumnType, TablePaginationConfig } from 'antd/es/table';
-import { FilterValue, SorterResult } from 'antd/es/table/interface';
-import { ColumnsType } from 'antd/lib/table';
+import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
+import type { FilterValue, SorterResult } from 'antd/es/table/interface';
+import type { ColumnsType } from 'antd/lib/table';
 import { FilterConfirmProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import getAll from 'api/errors/getAll';

frontend/src/container/AllError/types.ts

@@ -1,4 +1,4 @@
-import { FilterDropdownProps } from 'antd/es/table/interface';
+import type { FilterDropdownProps } from 'antd/es/table/interface';
 
 export interface FilterDropdownExtendsProps {
 	placeholder: string;

frontend/src/container/AllError/utils.ts

@@ -1,4 +1,4 @@
-import { FilterValue, SortOrder } from 'antd/lib/table/interface';
+import type { FilterValue, SortOrder } from 'antd/lib/table/interface';
 import Timestamp from 'timestamp-nano';
 import { Order, OrderBy } from 'types/api/errors/getAll';
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
 	CustomTimeType,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Table, TablePaginationConfig, Typography } from 'antd';
-import Skeleton from 'antd/lib/skeleton';
+import { Skeleton, Table, TablePaginationConfig, Typography } from 'antd';
 import { QueryParams } from 'constants/query';
 import {
 	dependentServicesColumns,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ExpandedRow.tsx

@@ -4,7 +4,7 @@ import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table } from 'antd';
-import { ColumnType } from 'antd/lib/table';
+import type { ColumnType } from 'antd/lib/table';
 import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';

frontend/src/container/ApiMonitoring/__tests__/DependentServices.test.tsx

@@ -69,9 +69,6 @@ jest.mock('antd', () => {
 					))}
 				</div>
 			)),
-		Skeleton: jest
-			.fn()
-			.mockImplementation(() => <div data-testid="skeleton-mock" />),
 		Typography: {
 			Text: jest
 				.fn()

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { Progress, TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -12,10 +12,10 @@ import {
 	Row,
 	Skeleton,
 	Table,
+	TableColumnsType as ColumnsType,
 	Tag,
 	Typography,
 } from 'antd';
-import { ColumnsType } from 'antd/es/table';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';

frontend/src/container/CloudIntegrationPage/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import Breadcrumb from 'antd/es/breadcrumb';
+import { Breadcrumb } from 'antd';
 import ROUTES from 'constants/routes';
 import { Blocks, LifeBuoy } from 'lucide-react';
 

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Select, Skeleton } from 'antd';
-import { SelectProps } from 'antd/lib';
+import type { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/ThresholdItem.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as appHooks from 'providers/App/App';

frontend/src/container/CreateAlertV2/AlertCondition/types.ts

@@ -1,4 +1,4 @@
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import { Channels } from 'types/api/channels/getAll';
 
 import {

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,5 +1,5 @@
-import { Button, Flex, Switch, Typography } from 'antd';
-import { BaseOptionType, DefaultOptionType, SelectProps } from 'antd/es/select';
+import { Button, Flex, SelectProps, Switch, Typography } from 'antd';
+import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, DatePicker, Select, Typography } from 'antd';
-import TextArea from 'antd/lib/input/TextArea';
+import { Button, DatePicker, Input, Select, Typography } from 'antd';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';
@@ -206,7 +205,7 @@ function EvaluationCadenceDetails({
 					}
 				/>
 			</div>
-			<TextArea
+			<Input.TextArea
 				value={evaluationCadence.rrule.rrule}
 				placeholder="Enter RRule"
 				onChange={(value): void =>

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx

@@ -1,5 +1,4 @@
-import { Tooltip, Typography } from 'antd';
-import TextArea from 'antd/lib/input/TextArea';
+import { Input, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../context';
@@ -76,7 +75,7 @@ function NotificationMessage(): JSX.Element {
 					</Popover> */}
 				</div>
 			</div>
-			<TextArea
+			<Input.TextArea
 				value={notificationSettings.description}
 				onChange={(e): void =>
 					setNotificationSettings({

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -11,8 +11,7 @@ import {
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal, Row, Space, Table, Typography } from 'antd';
-import { RowProps } from 'antd/lib';
+import { Button, Modal, Row, RowProps, Space, Table, Typography } from 'antd';
 import { VariablesSettingsTabHandle } from 'container/DashboardContainer/DashboardDescription/types';
 import { convertVariablesToDbFormat } from 'container/DashboardContainer/DashboardVariablesSelection/util';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';

frontend/src/container/DashboardContainer/visualization/components/ChartManager/getChartMangerColumns.tsx

@@ -1,4 +1,4 @@
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import CustomCheckBox from 'container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox';
 

frontend/src/container/ExplorerOptions/types.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UseMutateAsyncFunction } from 'react-query';
-import { NotificationInstance } from 'antd/es/notification/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 import { AxiosResponse } from 'axios';
 import { SaveViewWithNameProps } from 'components/ExplorerCard/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, FormInstance, Input, Select, Switch, Typography } from 'antd';
-import { Store } from 'antd/lib/form/interface';
+import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
 import {
 	ChannelType,

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -10,7 +10,7 @@ import {
 	Space,
 	Typography,
 } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
+import type { DefaultOptionType } from 'antd/es/select';
 import {
 	getCategoryByOptionId,
 	getCategorySelectOptionByName,

frontend/src/container/GridCardLayout/GridCard/FullView/GraphManager.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useEffect, useState } from 'react';
 import { Button, Input } from 'antd';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';
 import { useDashboard } from 'providers/Dashboard/Dashboard';

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox.tsx

@@ -1,6 +1,6 @@
 import { grey } from '@ant-design/colors';
 import { Checkbox, ConfigProvider } from 'antd';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 import { CheckBoxProps } from '../types';
 

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx

@@ -1,4 +1,4 @@
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 
 import { DataSetProps } from '../types';
 import Label from './Label';

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx

@@ -1,5 +1,5 @@
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 import { ColumnsKeyAndDataIndex, ColumnsTitle } from '../contants';
 import { DataSetProps, ExtendedChartDataset } from '../types';

frontend/src/container/GridCardLayout/GridCard/FullView/types.ts

@@ -1,5 +1,5 @@
 import { Dispatch, MutableRefObject, RefObject, SetStateAction } from 'react';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { UplotProps } from 'components/Uplot/Uplot';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/GridCardLayout/GridCard/utils.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { NotificationInstance } from 'antd/es/notification/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 import { NavigateToExplorerProps } from 'components/CeleryTask/useNavigateToExplorer';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -7,7 +7,6 @@ import { useLocation } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Form, Input, Modal, Typography } from 'antd';
-import { useForm } from 'antd/es/form/Form';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -106,7 +105,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		setCurrentPanelMap(panelMap);
 	}, [panelMap]);
 
-	const [form] = useForm<{
+	const [form] = Form.useForm<{
 		title: string;
 	}>();
 

frontend/src/container/GridCardLayout/WidgetHeader/utils.ts

@@ -1,4 +1,4 @@
-import { MenuItemType } from 'antd/es/menu/hooks/useItems';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 
 import { MenuItemKeys } from './contants';
 import { MenuItem } from './types';

frontend/src/container/GridTableComponent/index.tsx

@@ -2,7 +2,7 @@ import { memo, ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Space, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Events } from 'constants/events';
 import { QueryTable } from 'container/QueryTable';

frontend/src/container/GridTableComponent/utils.ts

@@ -1,4 +1,4 @@
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import { convertUnit } from 'container/NewWidget/RightContainer/dataFormatCategories';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { QUERY_TABLE_CONFIG } from 'container/QueryTable/config';

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -8,7 +8,7 @@ import {
 	TableProps,
 	Typography,
 } from 'antd';
-import { SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { InfraMonitoringEvents } from 'constants/events';
 

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import { Progress, TabsProps, Tag, Tooltip, Typography } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	HostData,
 	HostListPayload,

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { K8sClustersData } from 'api/infraMonitoring/getK8sClustersList';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sClustersListPayload } from 'api/infraMonitoring/getK8sClustersList';
 import { InfraMonitoringEvents } from 'constants/events';

frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sClustersData,
 	K8sClustersListPayload,

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';
 import { InfraMonitoringEvents } from 'constants/events';

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sDaemonSetsListPayload } from 'api/infraMonitoring/getK8sDaemonSetsList';
 import classNames from 'classnames';

frontend/src/container/InfraMonitoringK8s/DaemonSets/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sDaemonSetsData,
 	K8sDaemonSetsListPayload,

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { K8sDeploymentsData } from 'api/infraMonitoring/getK8sDeploymentsList';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sDeploymentsListPayload } from 'api/infraMonitoring/getK8sDeploymentsList';
 import classNames from 'classnames';

frontend/src/container/InfraMonitoringK8s/Deployments/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sDeploymentsData,
 	K8sDeploymentsListPayload,

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';
 import { InfraMonitoringEvents } from 'constants/events';

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sJobsListPayload } from 'api/infraMonitoring/getK8sJobsList';
 import classNames from 'classnames';

frontend/src/container/InfraMonitoringK8s/Jobs/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sJobsData,
 	K8sJobsListPayload,

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sNamespacesListPayload } from 'api/infraMonitoring/getK8sNamespacesList';
 import { InfraMonitoringEvents } from 'constants/events';

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { K8sNamespacesData } from 'api/infraMonitoring/getK8sNamespacesList';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';

frontend/src/container/InfraMonitoringK8s/Namespaces/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sNamespacesData,
 	K8sNamespacesListPayload,

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sNodesListPayload } from 'api/infraMonitoring/getK8sNodesList';
 import { InfraMonitoringEvents } from 'constants/events';

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { K8sNodesData } from 'api/infraMonitoring/getK8sNodesList';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';

frontend/src/container/InfraMonitoringK8s/Nodes/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sNodesData,
 	K8sNodesListPayload,

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import get from 'api/browser/localstorage/get';
 import set from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { K8sPodsData } from 'api/infraMonitoring/getK8sPodsList';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sStatefulSetsListPayload } from 'api/infraMonitoring/getsK8sStatefulSetsList';
 import classNames from 'classnames';

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';
 import { InfraMonitoringEvents } from 'constants/events';

frontend/src/container/InfraMonitoringK8s/StatefulSets/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sStatefulSetsData,
 	K8sStatefulSetsListPayload,

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -7,11 +7,12 @@ import {
 	Button,
 	Spin,
 	Table,
+	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
 	Typography,
 } from 'antd';
-import { ColumnType, SorterResult } from 'antd/es/table/interface';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { K8sVolumesListPayload } from 'api/infraMonitoring/getK8sVolumesList';
 import classNames from 'classnames';

frontend/src/container/InfraMonitoringK8s/Volumes/utils.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	K8sVolumesData,
 	K8sVolumesListPayload,

frontend/src/container/InfraMonitoringK8s/commonUtils.tsx

@@ -2,9 +2,8 @@
 
 import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Table, Tooltip, Typography } from 'antd';
-import { Progress } from 'antd/lib';
-import { ColumnsType } from 'antd/lib/table';
+import { Progress, Table, Tooltip, Typography } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
 import { DataType } from 'container/LogDetailedView/TableView';

frontend/src/container/InfraMonitoringK8s/utils.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { TableColumnType as ColumnType } from 'antd';
 import get from 'api/browser/localstorage/get';
 import set from 'api/browser/localstorage/set';
 import {

frontend/src/container/IngestionSettings/IngestionSettings.tsx

@@ -1,6 +1,10 @@
 import { useQuery } from 'react-query';
-import { Skeleton, Table, Typography } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import {
+	Skeleton,
+	Table,
+	TableColumnsType as ColumnsType,
+	Typography,
+} from 'antd';
 import getIngestionData from 'api/settings/getIngestionData';
 import { useAppContext } from 'providers/App/App';
 import { IngestionDataType } from 'types/api/settings/ingestion';

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -22,8 +22,8 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import { NotificationInstance } from 'antd/es/notification/interface';
-import { CollapseProps } from 'antd/lib';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import type { CollapseProps } from 'antd/lib';
 import {
 	useCreateIngestionKey,
 	useCreateIngestionKeyLimit,

frontend/src/container/ListAlertRules/DeleteAlert.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useState } from 'react';
-import { NotificationInstance } from 'antd/es/notification/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 import deleteAlerts from 'api/alerts/delete';
 import { State } from 'hooks/useFetch';
 import { PayloadProps as DeleteAlertPayloadProps } from 'types/api/alerts/delete';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -27,7 +27,7 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import { TableProps } from 'antd/lib';
+import type { TableProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import createDashboard from 'api/v1/dashboards/create';
 import { AxiosError } from 'axios';

frontend/src/container/ListOfDashboard/SearchFilter/index.tsx

@@ -8,8 +8,7 @@ import {
 import { CloseCircleFilled } from '@ant-design/icons';
 // eslint-disable-next-line no-restricted-imports
 import { useMachine } from '@xstate/react';
-import { Button, Select } from 'antd';
-import { RefSelectProps } from 'antd/lib/select';
+import { Button, RefSelectProps, Select } from 'antd';
 import history from 'lib/history';
 import { filter, map } from 'lodash-es';
 import { Dashboard } from 'types/api/dashboard/getAll';

frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Empty } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
+import type { RadioChangeEvent } from 'antd/lib';
 import SignozRadioGroup from 'components/SignozRadioGroup/SignozRadioGroup';
 import { History, Table } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/container/LogDetailedView/TableView.tsx

@@ -4,8 +4,13 @@ import { useDispatch } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { LinkOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Space, Tooltip, Typography } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import {
+	Button,
+	Space,
+	TableColumnsType as ColumnsType,
+	Tooltip,
+	Typography,
+} from 'antd';
 import cx from 'classnames';
 import AddToQueryHOC, {
 	AddToQueryHOCProps,