test(alerts): add tests for list alerts & triggered alerts (#11554)

* test(alerts): add tests for triggered and list alerts page

* test(alerts): add tests for list alerts and triggered alerts

* test(fireEvent): replace by userEvent

conf/example.yaml

@@ -432,7 +432,7 @@ cloudintegration:
     version: v0.0.8
 
 ##################### Trace Detail #####################
-tracedetail:
+traces:
   waterfall:
     # Number of spans returned per request when the trace is too large to show all at once.
     span_page_size: 500

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.126.1
+    image: signoz/signoz:v0.127.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.4
+    image: signoz/signoz-otel-collector:v0.144.5
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     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.126.1
+    image: signoz/signoz:v0.127.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.4
+    image: signoz/signoz-otel-collector:v0.144.5
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     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.126.1}
+    image: signoz/signoz:${VERSION:-v0.127.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.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     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.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     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.126.1}
+    image: signoz/signoz:${VERSION:-v0.127.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.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     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.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

frontend/__mocks__/useSafeNavigate.ts

@@ -1,28 +0,0 @@
-// Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
-interface SafeNavigateOptions {
-	replace?: boolean;
-	state?: unknown;
-	newTab?: boolean;
-}
-
-interface SafeNavigateTo {
-	pathname?: string;
-	search?: string;
-	hash?: string;
-}
-
-type SafeNavigateToType = string | SafeNavigateTo;
-
-interface UseSafeNavigateReturn {
-	safeNavigate: jest.MockedFunction<
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-	>;
-}
-
-export const useSafeNavigate = (): UseSafeNavigateReturn => ({
-	safeNavigate: jest.fn(
-		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
-	) as jest.MockedFunction<
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-	>,
-});

frontend/jest.config.ts

@@ -1,6 +1,8 @@
 import type { Config } from '@jest/types';
 
-const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
+const USE_SAFE_NAVIGATE_MOCK_PATH =
+	'<rootDir>/src/__tests__/safeNavigateMock.ts';
+const LOG_EVENT_MOCK_PATH = '<rootDir>/src/__tests__/logEventMock.ts';
 
 const config: Config.InitialOptions = {
 	silent: true,
@@ -22,6 +24,8 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^api/common/logEvent$': LOG_EVENT_MOCK_PATH,
+		'^src/api/common/logEvent$': LOG_EVENT_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',

frontend/src/__tests__/logEventMock.ts

@@ -0,0 +1,11 @@
+// Shared mock for `api/common/logEvent`.
+// Wired into jest.config.ts moduleNameMapper, so any import of
+// `api/common/logEvent` in test code resolves to this file.
+// Tests can import `logEventMock` to assert analytics calls — Jest's
+// `clearMocks: true` resets call history between tests.
+
+export const logEventMock: jest.MockedFunction<
+	(eventName: string, attributes?: Record<string, unknown>) => void
+> = jest.fn();
+
+export default logEventMock;

frontend/src/__tests__/safeNavigateMock.ts

@@ -0,0 +1,29 @@
+// Shared mock for `hooks/useSafeNavigate`.
+// Wired into jest.config.ts moduleNameMapper, so any import of
+// `hooks/useSafeNavigate` in test code resolves to this file.
+// Tests can import `safeNavigateMock` to assert navigation calls — Jest's
+// `clearMocks: true` resets call history between tests.
+
+interface SafeNavigateOptions {
+	replace?: boolean;
+	state?: unknown;
+	newTab?: boolean;
+}
+
+interface SafeNavigateTo {
+	pathname?: string;
+	search?: string;
+	hash?: string;
+}
+
+type SafeNavigateToType = string | SafeNavigateTo;
+
+export const safeNavigateMock: jest.MockedFunction<
+	(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+> = jest.fn();
+
+export const useSafeNavigate = (): {
+	safeNavigate: typeof safeNavigateMock;
+} => ({
+	safeNavigate: safeNavigateMock,
+});

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -349,7 +349,7 @@ function convertV5DataByType(
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5>,
+	v5Response: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
 ): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
@@ -357,7 +357,7 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		(params as QueryRangeRequestV5)?.compositeQuery?.queries
+		params?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
 			.reduce(
 				(acc, query) => {

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -41,14 +41,22 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
+		border-radius: 0;
+		box-shadow: none;
 		outline: none;
+		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-		&.ant-input:focus {
+
+		&:focus,
+		&:focus-visible,
+		&:hover {
+			border: none;
 			box-shadow: none;
+			outline: none;
 		}
 
 		&::placeholder {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Card, Form } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -3,17 +3,12 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -35,7 +30,6 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
-const mockLogEvent = logEvent as jest.MockedFunction<typeof logEvent>;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
@@ -50,6 +44,7 @@ const mockLocation = {
 describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		logEventMock.mockReturnValue(Promise.resolve() as never);
 		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
@@ -116,7 +111,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'feedback',
 			page: mockLocation.pathname,
@@ -149,7 +144,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'reportBug',
 			page: mockLocation.pathname,
@@ -182,7 +177,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'featureRequest',
 			page: mockLocation.pathname,

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -2,16 +2,11 @@
 import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -50,7 +45,6 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
-const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
@@ -120,7 +114,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(feedbackButton!);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
@@ -133,7 +127,7 @@ describe('HeaderRightSection', () => {
 		const shareButton = screen.getByRole('button', { name: /share/i });
 		await user.click(shareButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Share: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Share: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
@@ -150,7 +144,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(announcementsButton!);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Announcements: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Announcements: Clicked', {
 			page: mockLocation.pathname,
 		});
 	});

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -5,18 +5,13 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -53,7 +48,6 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
-const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
@@ -125,7 +119,7 @@ describe('ShareURLModal', () => {
 		await user.click(copyButton);
 
 		expect(mockHandleCopyToClipboard).toHaveBeenCalled();
-		expect(mockLogEvent).toHaveBeenCalledWith('Share: Copy link clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Share: Copy link clicked', {
 			page: TEST_PATH,
 			URL: expect.any(String),
 		});

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -266,6 +266,14 @@
 			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
+
+			&:focus:not(:focus-visible),
+			&.ant-btn:focus:not(:focus-visible) {
+				border-color: var(--l2-border);
+				border-left-color: transparent;
+				outline: none;
+				box-shadow: none;
+			}
 		}
 	}
 }
@@ -291,5 +299,21 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
+
+		$add-on-row-height: 38px;
+
+		.periscope-input-with-label {
+			.input {
+				.ant-select {
+					height: $add-on-row-height;
+				}
+			}
+		}
+
+		.input-with-label {
+			.input {
+				height: $add-on-row-height;
+			}
+		}
 	}
 }

frontend/src/components/QueryBuilderV2/utils.ts

@@ -721,6 +721,53 @@ export const removeKeysFromExpression = (
 	return result?.text ?? '';
 };
 
+const escapeRegExp = (value: string): string =>
+	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+export const createVariablePlaceholderRegExp = (
+	variableName: string,
+): RegExp => {
+	const escapedName = escapeRegExp(variableName);
+	// (?![\w.]) prevents $env from matching inside $environment or $env.attr
+	return new RegExp(
+		`(\\$${escapedName}(?![\\w.])|\\{\\{\\s*\\.?${escapedName}\\s*\\}\\}|\\[\\[\\s*${escapedName}\\s*\\]\\])`,
+		'g',
+	);
+};
+
+const matchesVariablePlaceholder = (
+	text: string,
+	variableName: string,
+): boolean => createVariablePlaceholderRegExp(variableName).test(text);
+
+export const removeVariableFromExpression = (
+	expression: string | undefined,
+	variableName: string,
+): string => {
+	if (!expression) {
+		return '';
+	}
+
+	const queryPairs = extractQueryPairs(expression);
+
+	const keysToRemove = queryPairs
+		.filter((pair) => {
+			const singleValue = pair.value?.toString() ?? '';
+			const listValues = (pair.valueList ?? []).join(' ');
+			return (
+				matchesVariablePlaceholder(singleValue, variableName) ||
+				matchesVariablePlaceholder(listValues, variableName)
+			);
+		})
+		.map((pair) => pair.key);
+
+	if (keysToRemove.length === 0) {
+		return expression;
+	}
+
+	return removeKeysFromExpression(expression, keysToRemove, `$${variableName}`);
+};
+
 /**
  * Convert old having format to new having format
  * @param having - Array of old having objects with columnName, op, and value

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -4,6 +4,23 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
+
+	.search {
+		input {
+			--input-background: var(--l2-background);
+			--input-hover-background: var(--l2-background);
+			--input-focus-background: var(--l2-background);
+			&::placeholder {
+				color: var(--l3-foreground);
+			}
+			--input-font-size: 14px;
+			--input-border-color: var(--l1-border);
+			--input-focus-border-color: var(--primary-background);
+			--input-focus-outline-width: 0;
+			--input-focus-outline-offset: 0;
+		}
+	}
+
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -139,7 +139,6 @@ jest.mock('react-query', (): unknown => {
 });
 
 // mock other side-effecty modules
-jest.mock('api/common/logEvent', () => jest.fn());
 jest.mock('api/browser/localstorage/set', () => jest.fn());
 jest.mock('utils/error', () => ({ showErrorNotification: jest.fn() }));
 

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import {
@@ -24,8 +24,6 @@ jest.mock('providers/cmdKProvider', () => ({
 	}),
 }));
 
-jest.mock('api/common/logEvent', () => jest.fn());
-
 // Mock the AppContext
 const mockUpdateUserPreferenceInContext = jest.fn();
 
@@ -139,7 +137,7 @@ describe('Sidebar Toggle Shortcut', () => {
 		it('should log the toggle event with correct parameters', async () => {
 			const user = userEvent.setup();
 			const mockHandleShortcut = jest.fn(() => {
-				logEvent('Global Shortcut: Sidebar Toggle', {
+				logEventMock('Global Shortcut: Sidebar Toggle', {
 					previousState: false,
 					newState: true,
 				});
@@ -155,10 +153,13 @@ describe('Sidebar Toggle Shortcut', () => {
 
 			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
 
-			expect(logEvent).toHaveBeenCalledWith('Global Shortcut: Sidebar Toggle', {
-				previousState: false,
-				newState: true,
-			});
+			expect(logEventMock).toHaveBeenCalledWith(
+				'Global Shortcut: Sidebar Toggle',
+				{
+					previousState: false,
+					newState: true,
+				},
+			);
 		});
 
 		it('should update user preference in context', async () => {

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

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,4 +1,5 @@
-import { Collapse, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
 import './TimeInput.scss';
 
 export interface TimeInputProps {

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

@@ -1,4 +1,5 @@
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,9 +16,10 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tooltip } from 'antd';
+import { Button, Card, Modal, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.test.tsx

@@ -0,0 +1,328 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
+
+// ---------------------------------------------------------------------------
+// Shared fixture helpers
+// ---------------------------------------------------------------------------
+
+const EMPTY_BUILDER = {
+	queryData: [] as any,
+	queryFormulas: [],
+	queryTraceOperator: [],
+};
+
+const BASE_WIDGET = {
+	opacity: '1',
+	nullZeroValues: 'null',
+	timePreferance: 'GLOBAL_TIME' as const,
+	softMin: null,
+	softMax: null,
+	selectedLogFields: null,
+	selectedTracesFields: null,
+};
+
+const DEFAULT_QUERY_DATA = {
+	queryName: 'q1',
+	// In QB v5, expression holds the query label (A/B/C), not a filter expression
+	expression: 'A',
+	dataSource: DataSource.METRICS,
+	functions: [],
+	groupBy: [],
+	filters: { items: [] as any[], op: 'AND' as const },
+	legend: '',
+	disabled: false,
+	having: [],
+	limit: null,
+	stepInterval: null,
+	orderBy: [],
+	selectColumns: [],
+	source: '' as const,
+};
+
+/**
+ * Build a dashboard with a single builder widget.
+ * Only supply the fields your test actually cares about.
+ */
+const buildBuilderDashboard = (
+	filterExpression: string,
+	queryDataOverrides: Record<string, any> = {},
+): Dashboard => ({
+	id: 'dash1',
+	createdAt: '',
+	updatedAt: '',
+	createdBy: '',
+	updatedBy: '',
+	data: {
+		title: 'Test Dashboard',
+		widgets: [
+			{
+				...BASE_WIDGET,
+				id: 'widget-1',
+				panelTypes: PANEL_TYPES.TIME_SERIES,
+				title: 'Widget 1',
+				description: '',
+				query: {
+					id: 'query1',
+					queryType: EQueryType.QUERY_BUILDER,
+					promql: [],
+					clickhouse_sql: [],
+					builder: {
+						queryData: [
+							{
+								...DEFAULT_QUERY_DATA,
+								...queryDataOverrides,
+								filter: { expression: filterExpression },
+							},
+						],
+						queryFormulas: [],
+						queryTraceOperator: [],
+					},
+					unit: '',
+				},
+			},
+		],
+		variables: {},
+	},
+});
+
+const buildClickhouseDashboard = (query: string): Dashboard => ({
+	id: 'dash-ch',
+	createdAt: '',
+	updatedAt: '',
+	createdBy: '',
+	updatedBy: '',
+	data: {
+		title: 'CH',
+		widgets: [
+			{
+				...BASE_WIDGET,
+				id: 'w1',
+				panelTypes: PANEL_TYPES.TIME_SERIES,
+				title: '',
+				description: '',
+				query: {
+					id: 'q1',
+					queryType: EQueryType.CLICKHOUSE,
+					promql: [],
+					clickhouse_sql: [{ name: 'A', query, legend: '', disabled: false }],
+					builder: EMPTY_BUILDER,
+					unit: '',
+				},
+			},
+		],
+		variables: {},
+	},
+});
+
+const buildPromqlDashboard = (query: string): Dashboard => ({
+	id: 'dash-prom',
+	createdAt: '',
+	updatedAt: '',
+	createdBy: '',
+	updatedBy: '',
+	data: {
+		title: 'PromQL Dashboard',
+		widgets: [
+			{
+				...BASE_WIDGET,
+				id: 'widget-prom',
+				panelTypes: PANEL_TYPES.TIME_SERIES,
+				title: 'PromQL Widget',
+				description: '',
+				query: {
+					id: 'query-prom',
+					queryType: EQueryType.PROM,
+					promql: [{ name: 'A', query, legend: '', disabled: false }],
+					clickhouse_sql: [],
+					builder: EMPTY_BUILDER,
+					unit: '',
+				},
+			},
+		],
+		variables: {},
+	},
+});
+
+/** Run removeVariableReferencesFromDashboard on a single-widget clickhouse dashboard and return the cleaned SQL. */
+const chQuery = (sql: string, varName: string): string => {
+	const result = removeVariableReferencesFromDashboard(
+		buildClickhouseDashboard(sql),
+		varName,
+	);
+	return (result!.data.widgets![0] as any).query.clickhouse_sql[0].query;
+};
+
+/** Extract the first builder queryData from a cleaned dashboard. */
+const firstBuilderQueryData = (dashboard: Dashboard | undefined): any =>
+	(dashboard!.data.widgets![0] as any).query.builder.queryData[0];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('removeVariableReferencesFromDashboard', () => {
+	describe('builder filter expression cleanup', () => {
+		it('removes a variable clause from filter.expression', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND env = 'prod'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
+		});
+
+		it('leaves no dangling AND/OR after removing a variable clause', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND env = 'prod'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+			const { expression } = firstBuilderQueryData(result).filter;
+
+			expect(expression).toBe("env = 'prod'");
+			expect(expression).not.toMatch(/^\s*(AND|OR)/i);
+			expect(expression).not.toMatch(/(AND|OR)\s*$/i);
+		});
+
+		it('does not remove $environment clause when deleting $env', () => {
+			const dashboard = buildBuilderDashboard(
+				'env = $env AND deployment.environment = $environment',
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'env');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe(
+				'deployment.environment = $environment',
+			);
+		});
+
+		it('leaves literal filter expressions untouched when removing a variable', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name = 'api-gateway' AND env = 'prod'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe(
+				"service.name = 'api-gateway' AND env = 'prod'",
+			);
+		});
+
+		it('removes only the variable clause, preserving a literal clause on the same key', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND service.name = 'api-gateway'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe(
+				"service.name = 'api-gateway'",
+			);
+		});
+
+		it('returns filter.expression unchanged when the variable has no clauses in it', () => {
+			const dashboard = buildBuilderDashboard("env = 'prod'");
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
+		});
+	});
+
+	describe('PromQL query cleanup', () => {
+		it('removes variable placeholder from a promql query', () => {
+			const result = removeVariableReferencesFromDashboard(
+				buildPromqlDashboard('sum(rate(http_requests_total{$service}[5m]))'),
+				'service',
+			);
+
+			const widget = result!.data.widgets![0] as any;
+			expect(widget.query.promql[0].query).toBe(
+				'sum(rate(http_requests_total{}[5m]))',
+			);
+		});
+
+		it('strips only the variable token inside a PromQL label matcher (token-only path)', () => {
+			const result = removeVariableReferencesFromDashboard(
+				buildPromqlDashboard('up{env="$env", job="api"}'),
+				'env',
+			);
+
+			const widget = result!.data.widgets![0] as any;
+			expect(widget.query.promql[0].query).toBe('up{env="", job="api"}');
+		});
+	});
+
+	describe('ClickHouse SQL query cleanup', () => {
+		it('removes a quoted variable clause and its WHERE keyword', () => {
+			expect(
+				chQuery(
+					"SELECT count() FROM signoz_logs WHERE service_name = '$service'",
+					'service',
+				),
+			).toBe('SELECT count() FROM signoz_logs');
+		});
+
+		it('removes a middle clause: AND env={{.env}} AND', () => {
+			expect(
+				chQuery('SELECT count() FROM t WHERE a=1 AND env={{.env}} AND b=2', 'env'),
+			).toBe('SELECT count() FROM t WHERE a=1 AND b=2');
+		});
+
+		it('removes the first clause: env={{.env}} AND rest', () => {
+			expect(
+				chQuery('SELECT count() FROM t WHERE env={{.env}} AND b=2', 'env'),
+			).toBe('SELECT count() FROM t WHERE b=2');
+		});
+
+		it('removes the last clause: rest AND env=$env', () => {
+			expect(chQuery('SELECT count() FROM t WHERE a=1 AND env=$env', 'env')).toBe(
+				'SELECT count() FROM t WHERE a=1',
+			);
+		});
+
+		it('removes a clause with double-bracket syntax: service=[[svc]]', () => {
+			expect(chQuery('SELECT count() FROM t WHERE service=[[svc]]', 'svc')).toBe(
+				'SELECT count() FROM t',
+			);
+		});
+
+		it('falls back to token-only strip for a bare variable in SELECT', () => {
+			expect(chQuery('SELECT $metric FROM table', 'metric')).toBe(
+				'SELECT FROM table',
+			);
+		});
+	});
+
+	describe('edge cases', () => {
+		it('is idempotent — calling twice produces the same result', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND env = 'prod'",
+			);
+
+			const once = removeVariableReferencesFromDashboard(dashboard, 'service');
+			const twice = removeVariableReferencesFromDashboard(once, 'service');
+
+			expect(twice).toStrictEqual(once);
+		});
+
+		it('handles a dashboard with no widgets without throwing', () => {
+			const dashboard: Dashboard = {
+				id: 'dash-empty',
+				createdAt: '',
+				updatedAt: '',
+				createdBy: '',
+				updatedBy: '',
+				data: { title: 'Empty Dashboard', widgets: undefined, variables: {} },
+			};
+
+			expect(() =>
+				removeVariableReferencesFromDashboard(dashboard, 'service'),
+			).not.toThrow();
+		});
+	});
+});

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

@@ -1,6 +1,8 @@
 import {
 	convertFiltersToExpressionWithExistingQuery,
+	createVariablePlaceholderRegExp,
 	removeKeysFromExpression,
+	removeVariableFromExpression,
 } from 'components/QueryBuilderV2/utils';
 import { cloneDeep, isArray, isEmpty } from 'lodash-es';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
@@ -157,6 +159,139 @@ const updateAfterRemoval = (
 	};
 };
 
+const removeVariablePlaceholders = (
+	text: string | undefined,
+	variableName: string,
+): string => {
+	if (!text) {
+		return '';
+	}
+
+	const tokenPattern = createVariablePlaceholderRegExp(variableName);
+
+	// Step 1: attempt clause-aware removal for SQL WHERE patterns.
+	// Strips the entire `key op $var` unit plus its adjacent AND/OR so we
+	// never leave a dangling `key = ` in unquoted ClickHouse SQL clauses.
+	// Handles three shapes:
+	//   (a) preceding conjunction:  AND key = $var
+	//   (b) following conjunction:  key = $var AND
+	//   (c) standalone clause:      key = $var  (end of expression)
+	const escapedToken = tokenPattern.source;
+	const clausePattern = new RegExp(
+		// (a) conjunction before the clause
+		`\\s*\\b(?:AND|OR)\\b\\s+[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?` +
+			// (b)+(c) clause first, optional conjunction after
+			`|[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?(?:\\s*\\b(?:AND|OR)\\b)?`,
+		'gi',
+	);
+
+	const withClauseRemoval = text.replace(clausePattern, '');
+	if (withClauseRemoval !== text) {
+		return withClauseRemoval
+			.replace(/\s{2,}/g, ' ')
+			.replace(/\bWHERE\s*$/i, '')
+			.trim();
+	}
+
+	// Step 2: fallback — bare variable usage outside a key-op-value pattern
+	// (e.g. SELECT $metric, LIMIT $n). Token-only removal is correct here.
+	return text
+		.replace(tokenPattern, '')
+		.replace(/\s{2,}/g, ' ')
+		.trim();
+};
+
+const removeVariableReferencesFromQueryData = (
+	queryData: IBuilderQuery,
+	variableName: string,
+): IBuilderQuery => {
+	const updatedFilter = queryData.filter?.expression
+		? {
+				...queryData.filter,
+				expression: removeVariableFromExpression(
+					queryData.filter.expression,
+					variableName,
+				),
+			}
+		: queryData.filter;
+
+	return { ...queryData, filter: updatedFilter };
+};
+
+const removeVariableReferencesFromWidget = (
+	widget: Widgets,
+	variableName: string,
+): Widgets => {
+	let updatedWidget = { ...widget };
+
+	if (updatedWidget.query?.builder?.queryData) {
+		updatedWidget = {
+			...updatedWidget,
+			query: {
+				...updatedWidget.query,
+				builder: {
+					...updatedWidget.query.builder,
+					queryData: updatedWidget.query.builder.queryData.map((queryData) =>
+						removeVariableReferencesFromQueryData(queryData, variableName),
+					),
+				},
+			},
+		};
+	}
+
+	if (updatedWidget.query?.promql) {
+		updatedWidget = {
+			...updatedWidget,
+			query: {
+				...updatedWidget.query,
+				promql: updatedWidget.query.promql.map((promqlQuery) => ({
+					...promqlQuery,
+					query: removeVariablePlaceholders(promqlQuery.query, variableName),
+				})),
+			},
+		};
+	}
+
+	if (updatedWidget.query?.clickhouse_sql) {
+		updatedWidget = {
+			...updatedWidget,
+			query: {
+				...updatedWidget.query,
+				clickhouse_sql: updatedWidget.query.clickhouse_sql.map((sqlQuery) => ({
+					...sqlQuery,
+					query: removeVariablePlaceholders(sqlQuery.query, variableName),
+				})),
+			},
+		};
+	}
+
+	return updatedWidget;
+};
+
+export const removeVariableReferencesFromDashboard = (
+	dashboard: Dashboard | undefined,
+	variableName: string,
+): Dashboard | undefined => {
+	if (!dashboard || !variableName) {
+		return dashboard;
+	}
+
+	const updatedDashboard = cloneDeep(dashboard);
+
+	if (updatedDashboard.data.widgets) {
+		updatedDashboard.data.widgets = updatedDashboard.data.widgets.map(
+			(widget) => {
+				if ('query' in widget) {
+					return removeVariableReferencesFromWidget(widget as Widgets, variableName);
+				}
+				return widget;
+			},
+		);
+	}
+
+	return updatedDashboard;
+};
+
 /**
  * A function that takes a dashboard configuration and a list of tag filters
  * and returns an updated dashboard with the filters appended to widget queries.

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

@@ -18,10 +18,11 @@ import { convertVariablesToDbFormat } from 'container/DashboardContainer/Dashboa
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useNotifications } from 'hooks/useNotifications';
+import { toast } from '@signozhq/ui/sonner';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
 
 import { TVariableMode } from './types';
 import VariableItem from './VariableItem/VariableItem';
@@ -92,8 +93,6 @@ function VariablesSettings({
 	const { dashboardData, setDashboardData } = useDashboardStore();
 	const { dashboardVariables } = useDashboardVariables();
 
-	const { notifications } = useNotifications();
-
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
 	const [existingVariableNamesMap, setExistingVariableNamesMap] = useState<
@@ -201,9 +200,7 @@ function VariablesSettings({
 				onSuccess: (updatedDashboard) => {
 					if (updatedDashboard.data) {
 						setDashboardData(updatedDashboard.data);
-						notifications.success({
-							message: t('variable_updated_successfully'),
-						});
+						toast.success(t('variable_updated_successfully'));
 					}
 				},
 			},
@@ -256,6 +253,11 @@ function VariablesSettings({
 	};
 
 	const handleDeleteConfirm = (): void => {
+		if (!dashboardData || !variableToDelete.current) {
+			setDeleteVariableModal(false);
+			return;
+		}
+
 		const newVariablesArr = variablesTableData.filter(
 			(variable: IDashboardVariable) =>
 				variable.id !== variableToDelete?.current?.id,
@@ -263,7 +265,31 @@ function VariablesSettings({
 
 		const updatedVariables = convertVariablesToDbFormat(newVariablesArr);
 
-		updateVariables(updatedVariables);
+		const cleanedDashboard =
+			removeVariableReferencesFromDashboard(
+				dashboardData,
+				variableToDelete.current.name || '',
+			) || dashboardData;
+
+		updateMutation.mutateAsync(
+			{
+				id: dashboardData.id,
+
+				data: {
+					...cleanedDashboard.data,
+					variables: updatedVariables,
+				},
+			},
+			{
+				onSuccess: (updatedDashboard) => {
+					if (updatedDashboard.data) {
+						setDashboardData(updatedDashboard.data);
+						toast.success(t('variable_updated_successfully'));
+					}
+				},
+			},
+		);
+
 		variableToDelete.current = null;
 		setDeleteVariableModal(false);
 	};
@@ -476,6 +502,7 @@ function VariablesSettings({
 				open={deleteVariableModal}
 				onOk={handleDeleteConfirm}
 				onCancel={handleDeleteCancel}
+				okButtonProps={{ loading: updateMutation.isLoading }}
 			>
 				<Typography.Text>
 					Are you sure you want to delete variable{' '}

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -1,8 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 
 import { usePanelContextMenu } from '../usePanelContextMenu';
 
@@ -47,10 +46,7 @@ const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
 const mockQueryResponse = {
 	data: undefined,
 	isLoading: false,
-} as unknown as UseQueryResult<
-	SuccessResponse<MetricRangePayloadProps, unknown>,
-	Error
->;
+} as unknown as UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 
 describe('usePanelContextMenu', () => {
 	beforeEach(() => {

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -10,17 +10,13 @@ import {
 	PopoverPosition,
 	useCoordinates,
 } from 'periscope/components/ContextMenu';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 interface UseTimeSeriesContextMenuParams {
 	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	enableDrillDown?: boolean;
 }
 

frontend/src/container/DashboardContainer/visualization/panels/components/__tests__/TooltipFooter.test.tsx

@@ -1,16 +1,10 @@
+import { logEventMock } from '__tests__/logEventMock';
 import { Events } from 'constants/events';
 import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import TooltipFooter from '../TooltipFooter';
 
-const mockLogEvent = jest.fn();
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: (...args: unknown[]): unknown => mockLogEvent(...args),
-}));
-
 describe('TooltipFooter', () => {
 	const defaultProps = {
 		id: 'panel-123',
@@ -84,7 +78,7 @@ describe('TooltipFooter', () => {
 
 			await user.click(screen.getByTestId('uplot-tooltip-unpin'));
 
-			expect(mockLogEvent).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
+			expect(logEventMock).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
 				id: 'panel-123',
 			});
 			expect(dismiss).toHaveBeenCalledTimes(1);

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -22,7 +22,6 @@ import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	ColorPicker,
-	Input,
 	Modal,
 	RefSelectProps,
 	Select,
@@ -30,6 +29,7 @@ import {
 } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from '@signozhq/ui/input';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

frontend/src/container/FormAlertChannels/index.tsx

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

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -1,7 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -67,20 +66,6 @@ function GridCardGraph({
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const [isInternalServerError, setIsInternalServerError] =
 		useState<boolean>(false);
-	const queryRangeCalledRef = useRef(false);
-
-	useEffect(() => {
-		const timeoutId = setTimeout(() => {
-			if (!queryRangeCalledRef.current) {
-				Sentry.captureEvent({
-					message: `Dashboard query range not called within expected timeframe for widget ${widget?.id}`,
-					level: 'warning',
-				});
-			}
-		}, 120000);
-		return (): void => clearTimeout(timeoutId);
-	}, [widget?.id]);
-
 	const {
 		minTime,
 		maxTime,
@@ -271,14 +256,12 @@ function GridCardGraph({
 						});
 					}
 				}
-				queryRangeCalledRef.current = true;
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
 				getGraphData?.(data?.payload?.data);
-				queryRangeCalledRef.current = true;
 			},
 		},
 	);

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

@@ -5,9 +5,11 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import {
+	MetricQueryRangeSuccessResponse,
+	MetricRangePayloadProps,
+} from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import uPlot from 'uplot';
 
@@ -21,10 +23,7 @@ export interface GraphVisibilityLegendEntryProps {
 
 export interface WidgetGraphComponentProps {
 	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	errorMessage: string | undefined;
 	version?: string;
 	threshold?: ReactNode;

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,7 +6,8 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Form, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/GridValueComponent/types.ts

@@ -1,8 +1,7 @@
 import { UseQueryResult } from 'react-query';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { SuccessResponse } from 'types/api';
 import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 export type GridValueComponentProps = {
@@ -13,10 +12,7 @@ export type GridValueComponentProps = {
 	thresholds?: ThresholdProps[];
 	// Context menu related props
 	widget?: Widgets;
-	queryResponse?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	contextLinks?: ContextLinksData;
 	enableDrillDown?: boolean;
 };

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
-	Input,
 	InputNumber,
 	Modal,
 	Row,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -89,7 +89,7 @@ export function AlertsEmptyState({
 									onClick={onClickNewAlertHandler}
 									disabled={!addNewAlert}
 									loading={loading}
-									data-testid="add-alert"
+									testId="add-alert"
 								>
 									<span className={styles.buttonContent}>
 										<Plus size="md" />
@@ -97,7 +97,12 @@ export function AlertsEmptyState({
 									</span>
 								</Button>
 								{onRefresh && (
-									<Button onClick={onRefresh} prefix={<RefreshCw />} color="secondary">
+									<Button
+										onClick={onRefresh}
+										prefix={<RefreshCw />}
+										color="secondary"
+										testId="list-alerts-empty-refresh-button"
+									>
 										Refresh
 									</Button>
 								)}

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.actions.test.tsx

@@ -0,0 +1,215 @@
+import userEvent from '@testing-library/user-event';
+import { logEventMock } from '__tests__/logEventMock';
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { findAlertRow, renderListAlertRules } from './_helpers';
+
+async function openActionsMenu(row: HTMLElement): Promise<void> {
+	const trigger = row.querySelector(
+		'[data-testid="alert-actions"]',
+	) as HTMLElement | null;
+	expect(trigger).not.toBeNull();
+	const user = userEvent.setup({ delay: null });
+	await user.click(trigger as HTMLElement);
+	// Radix renders the menu items in a portal once the trigger is activated.
+	await screen.findByRole('menu');
+}
+
+async function clickMenuItem(label: string): Promise<void> {
+	const user = userEvent.setup({ delay: null });
+	const item = await screen.findByRole('menuitem', { name: label });
+	await user.click(item);
+}
+
+describe('ListAlertRules — actions menu', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('renders Enable/Disable/Edit/Edit in New Tab/Clone/Delete items after opening the menu', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+
+		expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+
+		await openActionsMenu(row);
+
+		const items = screen.getAllByRole('menuitem');
+		const labels = items.map((it) => it.textContent);
+		expect(labels).toStrictEqual(
+			expect.arrayContaining([
+				'Edit',
+				'Edit in New Tab',
+				'Clone',
+				'Delete',
+				'Disable',
+			]),
+		);
+	});
+
+	it('disabled rule (rule-4) shows "Enable" instead of "Disable"', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('Disabled Alert');
+		await openActionsMenu(row);
+
+		const items = screen.getAllByRole('menuitem');
+		const labels = items.map((it) => it.textContent);
+		expect(labels).toContain('Enable');
+		expect(labels).not.toContain('Disable');
+	});
+
+	it('toggle action: clicking Disable sends PATCH with disabled:true', async () => {
+		let capturedBody: unknown = null;
+		let capturedPath: string | null = null;
+		server.use(
+			rest.patch('http://localhost/api/v2/rules/:id', async (req, res, ctx) => {
+				capturedBody = await req.json();
+				capturedPath = req.params.id as string;
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Disable');
+
+		await waitFor(() => {
+			expect(capturedBody).toStrictEqual(
+				expect.objectContaining({ disabled: true }),
+			);
+		});
+		expect(capturedPath).toBe('rule-1');
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('edit action: clicking Edit navigates via safeNavigate and logs event', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Edit');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock.mock.calls[0][0]).toContain('ruleId=rule-1');
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Edit', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('edit in new tab action: clicking opens with newTab:true', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Edit in New Tab');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		const [url, options] = safeNavigateMock.mock.calls[0];
+		expect(url).toContain('ruleId=rule-1');
+		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
+	});
+
+	it('clone action: sends POST with " - Copy" suffix and opens the cloned rule returned by the API', async () => {
+		let capturedPostBody: unknown = null;
+		server.use(
+			rest.post('http://localhost/api/v2/rules', async (req, res, ctx) => {
+				capturedPostBody = await req.json();
+				return res(
+					ctx.status(201),
+					ctx.json({
+						data: {
+							...(capturedPostBody as Record<string, unknown>),
+							id: 'cloned-from-server',
+						},
+						status: 'success',
+					}),
+				);
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Clone');
+
+		await waitFor(() => {
+			expect(capturedPostBody).toStrictEqual(
+				expect.objectContaining({ alert: 'High CPU Alert - Copy' }),
+			);
+		});
+
+		// The id from the server response round-trips into the navigate URL — this
+		// protects against a regression where the code hardcodes the id.
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock.mock.calls[0][0]).toContain(
+			'ruleId=cloned-from-server',
+		);
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Clone', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('delete action: sends DELETE for the rule id', async () => {
+		let deletedId: string | null = null;
+		server.use(
+			rest.delete('http://localhost/api/v2/rules/:id', (req, res, ctx) => {
+				deletedId = req.params.id as string;
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Delete');
+
+		await waitFor(() => {
+			expect(deletedId).toBe('rule-1');
+		});
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Delete', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('error path: PATCH is still attempted when server returns 500', async () => {
+		let patchAttempted = false;
+		server.use(
+			rest.patch('http://localhost/api/v2/rules/:id', (_, res, ctx) => {
+				patchAttempted = true;
+				return res(ctx.status(500), ctx.json({ status: 'error' }));
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Disable');
+
+		await waitFor(() => {
+			expect(patchAttempted).toBe(true);
+		});
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
+		);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.columns.test.tsx

@@ -0,0 +1,79 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+const COLUMN_STORAGE_KEY = '@signoz/table-columns/alert-rules-columns';
+
+describe('ListAlertRules — columns selector', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		localStorage.clear();
+	});
+
+	it('opens columns popover and lists toggleable columns', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.click(screen.getByTestId('alert-columns-button'));
+
+		// Popover should reveal "Toggle Columns" heading + per-column labels.
+		await screen.findByText('Toggle Columns');
+		expect(screen.getByText('Created At')).toBeInTheDocument();
+		expect(screen.getByText('Created By')).toBeInTheDocument();
+		expect(screen.getByText('Updated At')).toBeInTheDocument();
+		expect(screen.getByText('Updated By')).toBeInTheDocument();
+	});
+
+	it('default-hidden columns (Created At/By, Updated At/By) are not in the table header', async () => {
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		const headers = document.querySelectorAll('th');
+		const headerTexts = Array.from(headers).map((h) => h.textContent || '');
+		expect(headerTexts.some((t) => t.includes('Created At'))).toBe(false);
+		expect(headerTexts.some((t) => t.includes('Created By'))).toBe(false);
+		expect(headerTexts.some((t) => t.includes('Updated At'))).toBe(false);
+		expect(headerTexts.some((t) => t.includes('Updated By'))).toBe(false);
+	});
+
+	it('toggling Created At on writes to localStorage and adds the header', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		const headersBefore = Array.from(document.querySelectorAll('th')).map(
+			(h) => h.textContent ?? '',
+		);
+		expect(headersBefore.some((t) => t.includes('Created At'))).toBe(false);
+
+		await user.click(screen.getByTestId('alert-columns-button'));
+		await screen.findByText('Toggle Columns');
+
+		const checkbox = document.getElementById('col-createdAt');
+		expect(checkbox).not.toBeNull();
+		await user.click(checkbox as HTMLElement);
+
+		await waitFor(() => {
+			const stored = window.localStorage.getItem(COLUMN_STORAGE_KEY);
+			expect(stored).not.toBeNull();
+			const parsed = JSON.parse(stored as string);
+			expect(parsed.hiddenColumnIds).not.toContain('createdAt');
+		});
+
+		await waitFor(() => {
+			const headersAfter = Array.from(document.querySelectorAll('th')).map(
+				(h) => h.textContent ?? '',
+			);
+			expect(headersAfter.some((t) => t.includes('Created At'))).toBe(true);
+		});
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.empty.test.tsx

@@ -0,0 +1,91 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import userEvent from '@testing-library/user-event';
+import ROUTES from 'constants/routes';
+import { alertRulesFixture } from 'mocks-server/__mockdata__/alert_rules';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — empty states', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('renders AlertsEmptyState when API returns no rules', async () => {
+		const user = userEvent.setup({ delay: null });
+
+		server.use(
+			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [], status: 'success' })),
+			),
+		);
+
+		renderListAlertRules();
+
+		await screen.findByText('No Alert rules yet.');
+		expect(
+			screen.getByText('Create an Alert Rule to get started'),
+		).toBeInTheDocument();
+
+		// New Alert Rule button is visible and triggers safeNavigate to ALERTS_NEW.
+		await user.click(screen.getByTestId('add-alert'));
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.ALERTS_NEW,
+			expect.objectContaining({ newTab: false }),
+		);
+	});
+
+	it('renders ErrorEmptyState when API returns 500; refresh triggers a refetch', async () => {
+		const user = userEvent.setup({ delay: null });
+
+		let callCount = 0;
+		server.use(
+			rest.get('http://localhost/api/v2/rules', (_, res, ctx) => {
+				callCount += 1;
+				if (callCount === 1) {
+					return res(ctx.status(500), ctx.json({ status: 'error' }));
+				}
+				return res(
+					ctx.status(200),
+					ctx.json({ data: alertRulesFixture, status: 'success' }),
+				);
+			}),
+		);
+
+		renderListAlertRules();
+
+		await screen.findByTestId('error-empty-state');
+
+		await user.click(screen.getByTestId('error-refresh-button'));
+
+		const rule = await screen.findByText('High CPU Alert');
+		expect(rule).toBeInTheDocument();
+	});
+
+	it('renders NoResultsEmptyState when search yields no match; Clear Search resets', async () => {
+		const user = userEvent.setup({ delay: null });
+
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		const searchInput = screen.getByTestId('list-alerts-search-input');
+		await user.clear(searchInput);
+		await user.type(searchInput, 'totally-not-found');
+
+		await screen.findByTestId('no-results-empty-state');
+		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
+			'No matching alert rules',
+		);
+		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
+			'No alert rules match your search. Try adjusting your search criteria.',
+		);
+
+		await user.click(screen.getByTestId('no-results-clear-button'));
+
+		const rule = await screen.findByText('High CPU Alert');
+		expect(rule).toBeInTheDocument();
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.list.test.tsx

@@ -0,0 +1,123 @@
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — list rendering', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('renders alert rules from API', async () => {
+		renderListAlertRules();
+
+		await expect(
+			screen.findByTestId('alert-row-rule-1-name'),
+		).resolves.toHaveTextContent('High CPU Alert');
+		expect(screen.getByTestId('alert-row-rule-2-name')).toHaveTextContent(
+			'Memory Pending Alert',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-name')).toHaveTextContent(
+			'Healthy Alert',
+		);
+		expect(screen.getByTestId('alert-row-rule-4-name')).toHaveTextContent(
+			'Disabled Alert',
+		);
+	});
+
+	it('renders state badges via STATE_CONFIG mapping', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveTextContent(
+			'Firing',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveTextContent(
+			'Pending',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveTextContent('OK');
+		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveTextContent(
+			'Disabled',
+		);
+		expect(screen.getByTestId('alert-row-rule-5-state')).toHaveTextContent('OK');
+	});
+
+	it('renders state badges with semantic colors', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveAttribute(
+			'data-color',
+			'cherry',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveAttribute(
+			'data-color',
+			'amber',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveAttribute(
+			'data-color',
+			'forest',
+		);
+		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveAttribute(
+			'data-color',
+			'vanilla',
+		);
+	});
+
+	it('renders severity badges for rules with severity', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-severity')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveTextContent(
+			'critical',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveTextContent(
+			'warning',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-severity')).toHaveTextContent(
+			'info',
+		);
+		expect(screen.getByTestId('alert-row-rule-4-severity')).toHaveTextContent(
+			'critical',
+		);
+		expect(screen.getByTestId('alert-row-rule-5-severity')).toHaveTextContent(
+			'-',
+		);
+		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveAttribute(
+			'data-color',
+			'cherry',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveAttribute(
+			'data-color',
+			'amber',
+		);
+	});
+
+	it('renders header controls (search, columns, new alert)', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-name')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('list-alerts-search-input')).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText('Search by Alert Name, Severity and Labels'),
+		).toBeInTheDocument();
+		expect(screen.getByTestId('alert-columns-button')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('list-alerts-new-alert-button'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /new alert/i }),
+		).toBeInTheDocument();
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.newAlert.test.tsx

@@ -0,0 +1,65 @@
+import { logEventMock } from '__tests__/logEventMock';
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import userEvent from '@testing-library/user-event';
+import ROUTES from 'constants/routes';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — new alert button', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('plain click navigates to ALERTS_NEW with newTab:false', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.click(screen.getByRole('button', { name: /new alert/i }));
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.ALERTS_NEW,
+			expect.objectContaining({ newTab: false }),
+		);
+	});
+
+	it('logs Alert: New alert button clicked', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.click(screen.getByRole('button', { name: /new alert/i }));
+
+		await waitFor(() => {
+			expect(logEventMock).toHaveBeenCalledWith(
+				'Alert: New alert button clicked',
+				expect.objectContaining({ layout: 'new' }),
+			);
+		});
+	});
+
+	it('ctrl+click on New Alert opens in a new tab (newTab:true)', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.keyboard('{Control>}');
+		await user.click(screen.getByRole('button', { name: /new alert/i }));
+		await user.keyboard('{/Control}');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.ALERTS_NEW,
+			expect.objectContaining({ newTab: true }),
+		);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.pagination.test.tsx

@@ -0,0 +1,64 @@
+import userEvent from '@testing-library/user-event';
+import { alertRulesPaginationFixture } from 'mocks-server/__mockdata__/alert_rules';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, waitFor } from 'tests/test-utils';
+import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — pagination', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+		server.use(
+			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ data: alertRulesPaginationFixture, status: 'success' }),
+				),
+			),
+		);
+	});
+
+	it('shows first 10 rows on page 1 (default limit)', async () => {
+		renderListAlertRules();
+
+		await screen.findByText('Pag Rule 0');
+
+		for (let i = 0; i < 10; i += 1) {
+			expect(screen.getByText(`Pag Rule ${i}`)).toBeInTheDocument();
+		}
+		expect(screen.queryByText('Pag Rule 10')).not.toBeInTheDocument();
+		expect(screen.queryByText('Pag Rule 14')).not.toBeInTheDocument();
+	});
+
+	it('shows total count when showTotalCount is enabled', async () => {
+		renderListAlertRules();
+
+		await screen.findByText('Pag Rule 0');
+
+		const totalCount = await screen.findByTestId('pagination-total-count');
+		expect(totalCount.textContent).toContain('Showing');
+		expect(totalCount.textContent).toContain('of 15');
+	});
+
+	it('navigates to page 2 and shows remaining rows', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('Pag Rule 0');
+
+		const nextBtn = screen.getByLabelText('Go to next page');
+		await user.click(nextBtn);
+
+		await waitFor(() => {
+			expect(screen.getByText('Pag Rule 10')).toBeInTheDocument();
+			expect(screen.getByText('Pag Rule 14')).toBeInTheDocument();
+			expect(screen.queryByText('Pag Rule 0')).not.toBeInTheDocument();
+		});
+
+		await waitFor(() => {
+			expect(getCurrentNuqsQueryString()).toContain('page=2');
+		});
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.permissions.test.tsx

@@ -0,0 +1,71 @@
+import { screen, waitFor } from 'tests/test-utils';
+import { USER_ROLES } from 'types/roles';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — permissions', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('VIEWER role hides "New Alert" button and "Actions" column', async () => {
+		renderListAlertRules({ role: USER_ROLES.VIEWER });
+
+		await screen.findByText('High CPU Alert');
+
+		expect(
+			screen.queryByTestId('list-alerts-new-alert-button'),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /new alert/i }),
+		).not.toBeInTheDocument();
+
+		const headers = Array.from(document.querySelectorAll('th')).map(
+			(h) => h.textContent ?? '',
+		);
+		expect(headers.some((t) => t.includes('Actions'))).toBe(false);
+		expect(screen.queryByTestId('alert-actions')).not.toBeInTheDocument();
+	});
+
+	it('ADMIN role shows "New Alert" button and "Actions" column', async () => {
+		renderListAlertRules({ role: USER_ROLES.ADMIN });
+
+		await screen.findByText('High CPU Alert');
+
+		expect(
+			screen.getByTestId('list-alerts-new-alert-button'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /new alert/i }),
+		).toBeInTheDocument();
+
+		await waitFor(() => {
+			const headers = Array.from(document.querySelectorAll('th')).map(
+				(h) => h.textContent ?? '',
+			);
+			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
+		});
+		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
+	});
+
+	it('EDITOR role behaves like ADMIN (New Alert + Actions visible)', async () => {
+		renderListAlertRules({ role: USER_ROLES.EDITOR });
+
+		await screen.findByText('High CPU Alert');
+
+		expect(
+			screen.getByTestId('list-alerts-new-alert-button'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /new alert/i }),
+		).toBeInTheDocument();
+
+		await waitFor(() => {
+			const headers = Array.from(document.querySelectorAll('th')).map(
+				(h) => h.textContent ?? '',
+			);
+			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
+		});
+		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.rowClick.test.tsx

@@ -0,0 +1,52 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — row click navigation', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('clicking a row calls safeNavigate to alerts/overview with composite query + ruleId', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		const ruleCell = await screen.findByText('High CPU Alert');
+
+		const td = ruleCell.closest('td');
+		expect(td).not.toBeNull();
+		await user.click(td as HTMLElement);
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+
+		const [url] = safeNavigateMock.mock.calls[0];
+		expect(url).toContain('/alerts/overview?');
+		expect(url).toContain('ruleId=rule-1');
+		expect(url).toContain('panelTypes=graph');
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('ctrl+click on a row navigates with newTab option', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		const ruleCell = await screen.findByText('High CPU Alert');
+
+		const td = ruleCell.closest('td');
+		await user.keyboard('{Control>}');
+		await user.click(td as HTMLElement);
+		await user.keyboard('{/Control}');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+
+		const [url, options] = safeNavigateMock.mock.calls[0];
+		expect(url).toContain('ruleId=rule-1');
+		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.search.test.tsx

@@ -0,0 +1,99 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
+
+import { renderListAlertRules } from './_helpers';
+
+function getSearchInput(): HTMLInputElement {
+	return screen.getByTestId('list-alerts-search-input') as HTMLInputElement;
+}
+
+describe('ListAlertRules — search', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('filters rows by alert name with debounce', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'CPU');
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
+			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
+		});
+	});
+
+	it('filters rows by label values (severity)', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'warning');
+
+		await waitFor(() => {
+			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
+			expect(screen.queryByText('High CPU Alert')).not.toBeInTheDocument();
+		});
+	});
+
+	it('restores all rows when search is cleared', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'CPU');
+
+		await waitFor(() => {
+			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
+		});
+
+		await user.clear(getSearchInput());
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
+			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
+			expect(screen.getByText('Healthy Alert')).toBeInTheDocument();
+		});
+	});
+
+	it('shows no-results state when no match', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'zzzzzz-no-match');
+
+		await waitFor(() => {
+			expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
+			expect(screen.getByTestId('no-results-title')).toHaveTextContent(
+				'No matching alert rules',
+			);
+		});
+	});
+
+	it('resets page to 1 when search debounce fires', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules({ initialRoute: '/?page=2' });
+
+		// Page 2 of the 4-rule fixture has no rows; we only need the search input
+		// to be mounted, which happens before data is fetched.
+		const input = await screen.findByTestId('list-alerts-search-input');
+		await user.clear(input);
+		await user.type(input, 'CPU');
+
+		await waitFor(() => {
+			expect(getCurrentNuqsQueryString()).not.toContain('page=2');
+		});
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.utils.test.ts

@@ -0,0 +1,232 @@
+import { logEventMock } from '__tests__/logEventMock';
+import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
+import type { SortState } from 'components/TanStackTableView/types';
+
+import type { AlertRule } from '../types';
+import {
+	ALERT_ACTIONS,
+	alertActionLogEvent,
+	filterRulesByFilters,
+	getAlertSortValue,
+	sortRules,
+} from '../utils';
+
+const baseRule = {
+	id: 'r1',
+	alert: 'Rule 1',
+	alertType: 'METRIC_BASED_ALERT',
+	state: 'inactive',
+	labels: { severity: 'info' },
+	condition: {},
+	createdAt: '2023-10-15T10:00:00Z',
+	updatedAt: '2023-10-19T10:00:00Z',
+} as unknown as AlertRule;
+
+const makeRule = (overrides: Partial<AlertRule>): AlertRule => ({
+	...baseRule,
+	...overrides,
+});
+
+describe('getAlertSortValue', () => {
+	it('returns state for "state"', () => {
+		expect(
+			getAlertSortValue(
+				makeRule({ state: RuletypesAlertStateDTO.firing }),
+				'state',
+			),
+		).toBe('firing');
+	});
+
+	it('returns alert name for "name"', () => {
+		expect(getAlertSortValue(makeRule({ alert: 'My Rule' }), 'name')).toBe(
+			'My Rule',
+		);
+	});
+
+	it('returns severity label for "severity"', () => {
+		expect(
+			getAlertSortValue(
+				makeRule({ labels: { severity: 'critical' } }),
+				'severity',
+			),
+		).toBe('critical');
+	});
+
+	it('returns createdAt as ms', () => {
+		const rule = makeRule({ createdAt: '2023-10-15T10:00:00Z' });
+		const result = getAlertSortValue(rule, 'createdAt');
+		expect(result).toBe(new Date('2023-10-15T10:00:00Z').getTime());
+	});
+
+	it('returns updatedAt as ms', () => {
+		const rule = makeRule({ updatedAt: '2023-10-19T10:00:00Z' });
+		const result = getAlertSortValue(rule, 'updatedAt');
+		expect(result).toBe(new Date('2023-10-19T10:00:00Z').getTime());
+	});
+
+	it('returns 0 when createdAt missing', () => {
+		expect(
+			getAlertSortValue(makeRule({ createdAt: undefined }), 'createdAt'),
+		).toBe(0);
+	});
+
+	it('returns empty for unknown column', () => {
+		expect(getAlertSortValue(baseRule, 'xxx')).toBe('');
+	});
+
+	it('returns empty for missing fields', () => {
+		expect(
+			getAlertSortValue(
+				makeRule({ state: undefined, labels: undefined }),
+				'state',
+			),
+		).toBe('');
+		expect(
+			getAlertSortValue(
+				makeRule({ state: undefined, labels: undefined }),
+				'severity',
+			),
+		).toBe('');
+	});
+});
+
+describe('sortRules', () => {
+	const r1 = makeRule({ id: '1', alert: 'A' });
+	const r2 = makeRule({ id: '2', alert: 'B' });
+	const r3 = makeRule({ id: '3', alert: 'C' });
+
+	it('sorts ascending by name', () => {
+		const order: SortState = { columnName: 'name', order: 'asc' };
+		const result = sortRules([r3, r1, r2], order);
+		expect(result.map((r) => r.alert)).toStrictEqual(['A', 'B', 'C']);
+	});
+
+	it('sorts descending by name', () => {
+		const order: SortState = { columnName: 'name', order: 'desc' };
+		const result = sortRules([r1, r2, r3], order);
+		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'B', 'A']);
+	});
+
+	it('returns unsorted when orderBy is null', () => {
+		const result = sortRules([r3, r1, r2], null);
+		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'A', 'B']);
+	});
+});
+
+describe('filterRulesByFilters', () => {
+	const r1 = makeRule({
+		id: '1',
+		alert: 'R1',
+		state: RuletypesAlertStateDTO.firing,
+		labels: { severity: 'critical' },
+	});
+	const r2 = makeRule({
+		id: '2',
+		alert: 'R2',
+		state: RuletypesAlertStateDTO.inactive,
+		labels: { severity: 'warning' },
+	});
+	const r3 = makeRule({
+		id: '3',
+		alert: 'R3',
+		state: RuletypesAlertStateDTO.firing,
+		labels: { severity: 'warning' },
+	});
+	const rules = [r1, r2, r3];
+
+	it('returns input when filters empty', () => {
+		expect(filterRulesByFilters(rules, [])).toStrictEqual(rules);
+	});
+
+	it('filters by state', () => {
+		const result = filterRulesByFilters(rules, ['state:firing']);
+		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
+	});
+
+	it('filters by severity', () => {
+		const result = filterRulesByFilters(rules, ['severity:warning']);
+		expect(result.map((r) => r.id)).toStrictEqual(['2', '3']);
+	});
+
+	it('combines state AND severity', () => {
+		const result = filterRulesByFilters(rules, [
+			'state:firing',
+			'severity:warning',
+		]);
+		expect(result.map((r) => r.id)).toStrictEqual(['3']);
+	});
+
+	it('OR within same key (state)', () => {
+		const result = filterRulesByFilters(rules, [
+			'state:firing',
+			'state:inactive',
+		]);
+		expect(result.map((r) => r.id)).toStrictEqual(['1', '2', '3']);
+	});
+
+	it('matches values case-insensitively', () => {
+		const result = filterRulesByFilters(rules, ['state:FIRING']);
+		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
+	});
+
+	it('ignores prefixes with wrong case (state: is required lowercase)', () => {
+		const result = filterRulesByFilters(rules, ['STATE:FIRING']);
+		expect(result).toStrictEqual(rules);
+	});
+
+	it('returns empty when no rule matches', () => {
+		expect(filterRulesByFilters(rules, ['state:nonexistent'])).toStrictEqual([]);
+	});
+
+	it('ignores unknown prefix', () => {
+		expect(filterRulesByFilters(rules, ['foo:bar'])).toStrictEqual(rules);
+	});
+});
+
+describe('alertActionLogEvent', () => {
+	it('logs with mapped action label', () => {
+		const rule = makeRule({
+			id: 'rule-1',
+			alert: 'My Rule',
+			alertType: 'METRIC_BASED_ALERT' as AlertRule['alertType'],
+		});
+		alertActionLogEvent(ALERT_ACTIONS.EDIT, rule);
+		expect(logEventMock).toHaveBeenCalledWith('Alert: Action', {
+			ruleId: 'rule-1',
+			dataSource: expect.any(String),
+			name: 'My Rule',
+			action: 'Edit',
+		});
+	});
+
+	it('falls back to raw action when unmapped', () => {
+		alertActionLogEvent('custom', baseRule);
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'custom' }),
+		);
+	});
+
+	it('maps TOGGLE action', () => {
+		alertActionLogEvent(ALERT_ACTIONS.TOGGLE, baseRule);
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Enable/Disable' }),
+		);
+	});
+
+	it('maps DELETE and CLONE', () => {
+		alertActionLogEvent(ALERT_ACTIONS.DELETE, baseRule);
+		alertActionLogEvent(ALERT_ACTIONS.CLONE, baseRule);
+		expect(logEventMock).toHaveBeenNthCalledWith(
+			1,
+			'Alert: Action',
+			expect.objectContaining({ action: 'Delete' }),
+		);
+		expect(logEventMock).toHaveBeenNthCalledWith(
+			2,
+			'Alert: Action',
+			expect.objectContaining({ action: 'Clone' }),
+		);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/_helpers.tsx

@@ -0,0 +1,65 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, RenderResult, screen } from '@testing-library/react';
+import ListAlertRules from 'container/ListAlertRules';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { AppContext } from 'providers/App/App';
+import TimezoneProvider from 'providers/Timezone';
+import { onNuqsUrlUpdate, resetNuqsState } from 'tests/nuqs-helpers';
+import { getAppContextMock } from 'tests/test-utils';
+
+interface RenderOptions {
+	role?: string;
+	initialRoute?: string;
+}
+
+export function renderListAlertRules(
+	options: RenderOptions = {},
+): RenderResult {
+	const { role = 'ADMIN', initialRoute = '/' } = options;
+
+	const initialSearch = initialRoute.includes('?')
+		? initialRoute.slice(initialRoute.indexOf('?'))
+		: '';
+	resetNuqsState(initialSearch);
+
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { refetchOnWindowFocus: false, retry: false },
+			mutations: { retry: false },
+		},
+	});
+
+	return render(
+		<MemoryRouter initialEntries={[initialRoute]}>
+			<NuqsTestingAdapter
+				searchParams={initialSearch}
+				onUrlUpdate={onNuqsUrlUpdate}
+				rateLimitFactor={0}
+				hasMemory
+			>
+				<QueryClientProvider client={queryClient}>
+					<AppContext.Provider value={getAppContextMock(role)}>
+						<TimezoneProvider>
+							<VirtuosoMockContext.Provider
+								value={{ viewportHeight: 800, itemHeight: 46 }}
+							>
+								<ListAlertRules />
+							</VirtuosoMockContext.Provider>
+						</TimezoneProvider>
+					</AppContext.Provider>
+				</QueryClientProvider>
+			</NuqsTestingAdapter>
+		</MemoryRouter>,
+	);
+}
+
+export async function findAlertRow(alertName: string): Promise<HTMLElement> {
+	const cell = await screen.findByText(alertName, {}, { timeout: 5000 });
+	const row = cell.closest('tr');
+	if (!row) {
+		throw new Error(`Row not found for alert "${alertName}"`);
+	}
+	return row as HTMLElement;
+}

frontend/src/container/ListAlertRules/components/ColumnSelector.tsx

@@ -47,6 +47,7 @@ function ColumnSelector<TData>({
 					size="sm"
 					color="secondary"
 					prefix={<Columns3 size={14} />}
+					data-testid="alert-columns-button"
 				>
 					Columns
 				</Button>

frontend/src/container/ListAlertRules/index.tsx

@@ -136,6 +136,7 @@ function ListAlertRules(): JSX.Element {
 								prefix={<Plus size={14} />}
 								onClick={handleNewAlert}
 								color="primary"
+								testId="list-alerts-new-alert-button"
 							>
 								New Alert
 							</Button>
@@ -157,6 +158,7 @@ function ListAlertRules(): JSX.Element {
 						value={searchText}
 						onChange={handleSearchChange}
 						suffix={<Search size={14} className={styles.searchIcon} />}
+						testId="list-alerts-search-input"
 					/>
 				</div>
 			)}

frontend/src/container/ListAlertRules/table.config.tsx

@@ -26,14 +26,18 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => {
+			cell: ({ row, value }): JSX.Element => {
 				const state = String(value ?? '').toLowerCase();
 				const config = STATE_CONFIG[state] ?? {
 					color: 'secondary' as BadgeColor,
 					label: 'Unknown',
 				};
 				return (
-					<Badge color={config.color} variant="outline">
+					<Badge
+						color={config.color}
+						variant="outline"
+						testId={`alert-row-${row.id ?? ''}-state`}
+					>
 						{config.label}
 					</Badge>
 				);
@@ -47,8 +51,11 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text title={value}>
+			cell: ({ row, value }): JSX.Element => (
+				<TanStackTable.Text
+					title={value}
+					data-testid={`alert-row-${row.id ?? ''}-name`}
+				>
 					{String(value ?? '-')}
 				</TanStackTable.Text>
 			),
@@ -60,15 +67,20 @@ export function getAlertRuleColumns(
 			width: { fixed: '120px' },
 			enableSort: true,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => {
+			cell: ({ row, value }): JSX.Element => {
 				const severity = String(value ?? '').toLowerCase();
 				if (!severity) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
+					return (
+						<TanStackTable.Text data-testid={`alert-row-${row.id ?? ''}-severity`}>
+							-
+						</TanStackTable.Text>
+					);
 				}
 				return (
 					<Badge
 						color={SEVERITY_BADGE_COLORS[severity] ?? 'secondary'}
 						variant="outline"
+						testId={`alert-row-${row.id ?? ''}-severity`}
 					>
 						{severity}
 					</Badge>

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Button, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,17 +12,9 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
+import { Input } from '@signozhq/ui/input';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import {
-	Button,
-	Flex,
-	Input,
-	Modal,
-	Popover,
-	Skeleton,
-	Table,
-	Tooltip,
-} from 'antd';
+import { Button, Flex, Modal, Popover, Skeleton, Table, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
@@ -240,7 +232,7 @@ function DashboardsList(): JSX.Element {
 		isLocked: !!e.locked || false,
 		lastUpdatedBy: e.updatedBy,
 		image: e.data.image || Base64Icons[0],
-		variables: e.data.variables,
+		variables: e.data.variables ?? {},
 		widgets: e.data.widgets,
 		layout: e.data.layout,
 		panelMap: e.data.panelMap,

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Button, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,8 +2,9 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Input } from 'antd';
+import { Collapse } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';

frontend/src/container/LogsFilters/index.tsx

@@ -2,7 +2,8 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Col, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Col } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,7 +2,8 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Button, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

frontend/src/container/MCPServerSettings/MCPServerSettings.test.tsx

@@ -1,8 +1,8 @@
+import { logEventMock } from '__tests__/logEventMock';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import MCPServerSettings from './MCPServerSettings';
 
-const mockLogEvent = jest.fn();
 const mockCopyToClipboard = jest.fn();
 const mockHistoryPush = jest.fn();
 const mockUseGetGlobalConfig = jest.fn();
@@ -11,11 +11,6 @@ const mockUseGetTenantLicense = jest.fn();
 const mockToastSuccess = jest.fn();
 const mockToastWarning = jest.fn();
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: (...args: unknown[]): unknown => mockLogEvent(...args),
-}));
-
 jest.mock('api/generated/services/global', () => ({
 	useGetGlobalConfig: (...args: unknown[]): unknown =>
 		mockUseGetGlobalConfig(...args),
@@ -148,7 +143,7 @@ describe('MCPServerSettings', () => {
 
 		render(<MCPServerSettings />, undefined, { role: 'ADMIN' });
 
-		expect(mockLogEvent).toHaveBeenCalledWith('MCP Settings: Page viewed', {
+		expect(logEventMock).toHaveBeenCalledWith('MCP Settings: Page viewed', {
 			role: 'ADMIN',
 		});
 	});

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,6 +1,7 @@
-import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Select } from 'antd';
+// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
+// supports the `onWheel` handler (used to blur on scroll for number inputs).
+import { Input, Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Button, Collapse, Input, Select, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Collapse, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/container/MySettings/__tests__/MySettings.test.tsx

@@ -1,5 +1,6 @@
 import userEvent from '@testing-library/user-event';
 import MySettingsContainer from 'container/MySettings';
+import { logEventMock } from '__tests__/logEventMock';
 import {
 	act,
 	fireEvent,
@@ -12,7 +13,6 @@ import APIError from 'types/api/error';
 import { toast } from '@signozhq/ui/sonner';
 
 const toggleThemeFunction = jest.fn();
-const logEventFunction = jest.fn();
 const copyToClipboardFn = jest.fn();
 const editUserFn = jest.fn();
 const updateMyPasswordFn = jest.fn();
@@ -62,11 +62,6 @@ jest.mock('hooks/useDarkMode', () => ({
 	})),
 }));
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn((eventName, data) => logEventFunction(eventName, data)),
-}));
-
 const errorNotification = jest.fn();
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
@@ -135,7 +130,7 @@ describe('MySettings Flows', () => {
 
 			await waitFor(() => {
 				expect(toggleThemeFunction).toHaveBeenCalled();
-				expect(logEventFunction).toHaveBeenCalledWith(
+				expect(logEventMock).toHaveBeenCalledWith(
 					'Account Settings: Theme Changed',
 					{
 						theme: 'light',

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,7 +7,8 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Tooltip } from 'antd';
 import {
 	DropdownMenu,
 	DropdownMenuContent,

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -28,9 +28,8 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import { UpdateTimeInterval } from 'store/actions';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 function WidgetGraph({
@@ -202,10 +201,7 @@ function WidgetGraph({
 
 interface WidgetGraphProps {
 	selectedWidget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	enableDrillDown?: boolean;

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/util.ts

@@ -1,11 +1,12 @@
+import { QueryRangeRequestV5 } from 'api/v5/v5';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Column, QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function populateMultipleResults(
-	responseData: SuccessResponse<MetricRangePayloadProps, unknown>,
-): SuccessResponse<MetricRangePayloadProps, unknown> {
+	responseData: SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5>,
+): SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5> {
 	const queryResults = responseData?.payload?.data?.newResult?.data?.result;
 	const allFormattedResults: QueryData[] = [];
 
@@ -66,17 +67,19 @@ export function populateMultipleResults(
 	}
 
 	// Create a copy instead of mutating the original
-	const updatedResponseData: SuccessResponse<MetricRangePayloadProps, unknown> =
-		{
-			...responseData,
-			payload: {
-				...responseData.payload,
-				data: {
-					...responseData.payload.data,
-					result: allFormattedResults,
-				},
+	const updatedResponseData: SuccessResponse<
+		MetricRangePayloadProps,
+		QueryRangeRequestV5
+	> = {
+		...responseData,
+		payload: {
+			...responseData.payload,
+			data: {
+				...responseData.payload.data,
+				result: allFormattedResults,
 			},
-		};
+		},
+	};
 
 	return updatedResponseData;
 }

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
+// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
+// supports the `spellCheck` prop on the URL input below.
+import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {

frontend/src/container/NewWidget/index.tsx

@@ -52,7 +52,6 @@ import {
 	getSelectedWidgetIndex,
 } from 'providers/Dashboard/util';
 import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
 	ContextLinksData,
@@ -61,7 +60,7 @@ import {
 } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { IField } from 'types/api/logs/fields';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -398,7 +397,7 @@ function NewWidget({
 
 	// State to hold query response for sharing between left and right containers
 	const [queryResponse, setQueryResponse] = useState<
-		UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
+		UseQueryResult<MetricQueryRangeSuccessResponse, Error>
 	>(null as any);
 
 	// request data should be handled by the parent and the child components should consume the same

frontend/src/container/NewWidget/types.ts

@@ -2,9 +2,8 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { SuccessResponse, Warning } from 'types/api';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 
 import { timePreferance } from './RightContainer/timeItems';
 
@@ -29,9 +28,7 @@ export interface WidgetGraphProps {
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	isLoadingPanelData: boolean;
 	setQueryResponse?: Dispatch<
-		SetStateAction<
-			UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
-		>
+		SetStateAction<UseQueryResult<MetricQueryRangeSuccessResponse, Error>>
 	>;
 	enableDrillDown?: boolean;
 	dashboardData: Dashboard | undefined;
@@ -39,12 +36,7 @@ export interface WidgetGraphProps {
 }
 
 export type WidgetGraphContainerProps = {
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown> & {
-			warning?: Warning;
-		},
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	selectedWidget: Widgets;

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/__tests__/InviteTeamMembers.test.tsx

@@ -9,11 +9,6 @@ import {
 
 import InviteTeamMembers from '../InviteTeamMembers';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 const mockNotificationSuccess = jest.fn() as jest.MockedFunction<
 	(args: { message: string }) => void
 >;

frontend/src/container/OnboardingQuestionaire/__tests__/OnboardingQuestionaire.test.tsx

@@ -4,11 +4,6 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import OnboardingQuestionaire from '../index';
 
 // Mock dependencies
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('lib/history', () => ({
 	__esModule: true,
 	default: {

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, FormInstance, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -1,7 +1,6 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridTableComponent from 'container/GridTableComponent';
 import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config';
-import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 
 import { PanelWrapperProps } from './panelWrapper.types';
 
@@ -20,7 +19,7 @@ function TablePanelWrapper({
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
 	const { thresholds } = widget;
 
-	const queryRangeRequest = queryResponse.data?.params as QueryRangeRequestV5;
+	const queryRangeRequest = queryResponse.data?.params;
 
 	return (
 		<GridTableComponent

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx

@@ -1,4 +1,6 @@
 import { ChangeEventHandler, useState } from 'react';
+// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
+// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Flex, Form, Input, Space, Tooltip } from 'antd';
+import { Flex, Form, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
+import { Form, Select, Space } from 'antd';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 

frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx

@@ -4,15 +4,13 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import i18n from 'ReactI18';
 import store from 'store';
 
 import CreatePipelineButton from '../Layouts/Pipeline/CreatePipelineButton';
 import { pipelineApiResponseMockData } from '../mocks/pipeline';
 
-jest.mock('api/common/logEvent');
-
 describe('PipelinePage container test', () => {
 	it('should render CreatePipelineButton section', async () => {
 		const { asFragment } = render(
@@ -53,9 +51,12 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(logEvent).toHaveBeenCalledWith('Logs: Pipelines: Entered Edit Mode', {
-			source: 'signoz-ui',
-		});
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Logs: Pipelines: Entered Edit Mode',
+			{
+				source: 'signoz-ui',
+			},
+		);
 	});
 
 	it('CreatePipelineButton - add new mode & tracking', async () => {
@@ -78,7 +79,7 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(logEvent).toHaveBeenCalledWith(
+		expect(logEventMock).toHaveBeenCalledWith(
 			'Logs: Pipelines: Clicked Add New Pipeline',
 			{
 				source: 'signoz-ui',

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -2,7 +2,8 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Form, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Form, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useDeleteDowntimeScheduleByID,

frontend/src/container/QueryBuilder/components/Formula/Formula.styles.scss

@@ -8,4 +8,16 @@
 	grid-template-columns: 60% 35%;
 	justify-content: space-between;
 	gap: 16px;
+
+	.input-with-label {
+		.label {
+			box-sizing: border-box;
+			height: 36px;
+		}
+
+		.input {
+			box-sizing: border-box;
+			height: 36px;
+		}
+	}
 }

frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';

frontend/src/container/QueryTable/Drilldown/useAggregateDrilldown.tsx

@@ -2,9 +2,8 @@ import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import useDashboardVarConfig from 'container/QueryTable/Drilldown/useDashboardVarConfig';
-import { SuccessResponse } from 'types/api';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -44,10 +43,7 @@ const useAggregateDrilldown = ({
 	aggregateData: AggregateData | null;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;
-	queryRange?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryRange?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 }): {
 	aggregateDrilldownConfig: {
 		header?: string | React.ReactNode;

frontend/src/container/QueryTable/Drilldown/useGraphContextMenu.tsx

@@ -2,9 +2,8 @@ import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { SuccessResponse } from 'types/api';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { isValidQueryName } from './drilldownUtils';
@@ -20,10 +19,7 @@ interface UseGraphContextMenuProps {
 	setSubMenu: (subMenu: string) => void;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;
-	queryRange?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryRange?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 }
 
 export function useGraphContextMenu({

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent, useMemo } from 'react';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Collapse, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Diamond } from '@signozhq/icons';

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -9,10 +9,10 @@ import {
 	useState,
 } from 'react';
 import { useMutation, useQuery } from 'react-query';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Checkbox,
-	Input,
 	Modal,
 	Select,
 	Skeleton,

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts

@@ -1,5 +1,7 @@
-import { Input } from 'antd';
+// TODO(@signozhq/ui-input): migrate this styled(Input) once @signozhq/ui
+// Input supports `addonAfter` (the consumer renders `<InputComponent addonAfter="ms">`).
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
 import styled from 'styled-components';
 
 export const DurationText = styled.div`