Merge branch 'main' into sso-mapping

frontend/__mocks__/useSafeNavigate.ts

@@ -2,8 +2,6 @@
 interface SafeNavigateOptions {
 	replace?: boolean;
 	state?: unknown;
-	newTab?: boolean;
-	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateTo {
@@ -22,7 +20,9 @@ interface UseSafeNavigateReturn {
 
 export const useSafeNavigate = (): UseSafeNavigateReturn => ({
 	safeNavigate: jest.fn(
-		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => {
+			console.log(`Mock safeNavigate called with:`, to, options);
+		},
 	) as jest.MockedFunction<
 		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
 	>,

frontend/package.json

@@ -58,6 +58,7 @@
 		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
+		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",

frontend/src/api/v1/domains/id/delete.ts

@@ -1,19 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-
-const deleteDomain = async (id: string): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.delete<null>(`/domains/${id}`);
-
-		return {
-			httpStatusCode: response.status,
-			data: null,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default deleteDomain;

frontend/src/api/v1/domains/id/put.ts

@@ -1,25 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
-import { UpdatableAuthDomain } from 'types/api/v1/domains/put';
-
-const put = async (
-	props: UpdatableAuthDomain,
-): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.put<RawSuccessResponse<null>>(
-			`/domains/${props.id}`,
-			{ config: props.config },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default put;

frontend/src/api/v1/domains/list.ts

@@ -1,24 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
-
-const listAllDomain = async (): Promise<
-	SuccessResponseV2<GettableAuthDomain[]>
-> => {
-	try {
-		const response = await axios.get<RawSuccessResponse<GettableAuthDomain[]>>(
-			`/domains`,
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default listAllDomain;

frontend/src/api/v1/domains/post.ts

@@ -1,26 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
-import { PostableAuthDomain } from 'types/api/v1/domains/post';
-
-const post = async (
-	props: PostableAuthDomain,
-): Promise<SuccessResponseV2<GettableAuthDomain>> => {
-	try {
-		const response = await axios.post<RawSuccessResponse<GettableAuthDomain>>(
-			`/domains`,
-			props,
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default post;

frontend/src/auto-import-registry.d.ts

@@ -24,5 +24,6 @@ import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
+import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/tooltip';

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -214,7 +214,7 @@ function LogDetailInner({
 	};
 
 	// Go to logs explorer page with the log data
-	const handleOpenInExplorer = (e?: React.MouseEvent): void => {
+	const handleOpenInExplorer = (): void => {
 		const queryParams = {
 			[QueryParams.activeLogId]: `"${log?.id}"`,
 			[QueryParams.startTime]: minTime?.toString() || '',
@@ -227,9 +227,7 @@ function LogDetailInner({
 				),
 			),
 		};
-		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
-			event: e,
-		});
+		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
 	};
 
 	const handleQueryExpressionChange = useCallback(

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -70,8 +70,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 								</Tag>
 							) : undefined
 						}
-						onClick={(e): void => {
-							onSelect(option.selection, e);
+						onClick={(): void => {
+							onSelect(option.selection);
 						}}
 						data-testid={`alert-type-card-${option.selection}`}
 					>
@@ -108,7 +108,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 }
 
 interface SelectAlertTypeProps {
-	onSelect: (type: AlertTypes, event?: React.MouseEvent) => void;
+	onSelect: (typ: AlertTypes) => void;
 }
 
 export default SelectAlertType;

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -33,9 +33,9 @@ function Footer(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
 
-	const handleDiscard = (e: React.MouseEvent): void => {
+	const handleDiscard = (): void => {
 		discardAlertRule();
-		safeNavigate('/alerts', { event: e });
+		safeNavigate('/alerts');
 	};
 
 	const alertValidationMessage = useMemo(

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -161,7 +161,6 @@ describe('Dashboard landing page actions header tests', () => {
 		// Verify navigation was called with correct URL
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			'/dashboard?columnKey=updatedAt&order=descend&page=1&search=',
-			expect.objectContaining({ event: expect.any(Object) }),
 		);
 
 		// Ensure the URL contains only essential dashboard list params

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { Button } from 'antd';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -23,19 +23,16 @@ function DashboardBreadcrumbs(): JSX.Element {
 
 	const { title = '', image = Base64Icons[0] } = selectedData || {};
 
-	const goToListPage = useCallback(
-		(e?: React.MouseEvent) => {
-			const urlParams = new URLSearchParams();
-			urlParams.set('columnKey', listSortOrder.columnKey as string);
-			urlParams.set('order', listSortOrder.order as string);
-			urlParams.set('page', listSortOrder.pagination as string);
-			urlParams.set('search', listSortOrder.search as string);
+	const goToListPage = useCallback(() => {
+		const urlParams = new URLSearchParams();
+		urlParams.set('columnKey', listSortOrder.columnKey as string);
+		urlParams.set('order', listSortOrder.order as string);
+		urlParams.set('page', listSortOrder.pagination as string);
+		urlParams.set('search', listSortOrder.search as string);
 
-			const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-			safeNavigate(generatedUrl, { event: e });
-		},
-		[listSortOrder, safeNavigate],
-	);
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+		safeNavigate(generatedUrl);
+	}, [listSortOrder, safeNavigate]);
 
 	return (
 		<div className="dashboard-breadcrumbs">

frontend/src/container/ErrorDetails/index.tsx

@@ -16,7 +16,6 @@ import { isUndefined } from 'lodash-es';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useTimezone } from 'providers/Timezone';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { keyToExclude } from './config';
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
@@ -112,19 +111,14 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			value: errorDetail[key as keyof GetByErrorTypeAndServicePayload],
 		}));
 
-	const onClickTraceHandler = (event: React.MouseEvent): void => {
+	const onClickTraceHandler = (): void => {
 		logEvent('Exception: Navigate to trace detail page', {
 			groupId: errorDetail?.groupID,
 			spanId: errorDetail.spanID,
 			traceId: errorDetail.traceID,
 			exceptionId: errorDetail?.errorId,
 		});
-		const path = `/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`;
-		if (isModifierKeyPressed(event)) {
-			openInNewTab(path);
-		} else {
-			history.push(path);
-		}
+		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
 	};
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/FormAlertRules/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
@@ -329,18 +329,13 @@ function FormAlertRules({
 		}
 	}, [alertDef, currentQuery?.queryType, queryOptions]);
 
-	const onCancelHandler = useCallback(
-		(e?: React.MouseEvent) => {
-			urlQuery.delete(QueryParams.compositeQuery);
-			urlQuery.delete(QueryParams.panelTypes);
-			urlQuery.delete(QueryParams.ruleId);
-			urlQuery.delete(QueryParams.relativeTime);
-			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`, {
-				event: e,
-			});
-		},
-		[safeNavigate, urlQuery],
-	);
+	const onCancelHandler = useCallback(() => {
+		urlQuery.delete(QueryParams.compositeQuery);
+		urlQuery.delete(QueryParams.panelTypes);
+		urlQuery.delete(QueryParams.ruleId);
+		urlQuery.delete(QueryParams.relativeTime);
+		safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
+	}, [safeNavigate, urlQuery]);
 
 	// onQueryCategoryChange handles changes to query category
 	// in state as well as sets additional defaults

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

@@ -1,11 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
 	LoadingOutlined,
@@ -285,9 +279,9 @@ function FullView({
 											<Button
 												className="switch-edit-btn"
 												disabled={response.isFetching || response.isLoading}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													if (dashboardEditView) {
-														safeNavigate(dashboardEditView, { event: e });
+														safeNavigate(dashboardEditView);
 													}
 												}}
 											>

frontend/src/container/Home/Home.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover } from 'antd';
@@ -28,7 +28,6 @@ import { UserPreference } from 'types/api/preferences/preference';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { isIngestionActive } from 'utils/app';
-import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import AlertRules from './AlertRules/AlertRules';
@@ -414,12 +413,12 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											className="active-ingestion-card-actions"
-											onClick={(e: React.MouseEvent): void => {
+											onClick={(): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
-												navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
+												history.push(ROUTES.LOGS_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -456,11 +455,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(e: React.MouseEvent): void => {
+											onClick={(): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
-												navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
+												history.push(ROUTES.TRACES_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -497,11 +496,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(e: React.MouseEvent): void => {
+											onClick={(): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
-												navigateToPage(ROUTES.METRICS_EXPLORER, history.push, e);
+												history.push(ROUTES.METRICS_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -551,11 +550,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
+													history.push(ROUTES.LOGS_EXPLORER);
 												}}
 											>
 												Open Logs Explorer
@@ -565,11 +564,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
+													history.push(ROUTES.TRACES_EXPLORER);
 												}}
 											>
 												Open Traces Explorer
@@ -579,11 +578,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
-													navigateToPage(ROUTES.METRICS_EXPLORER_EXPLORER, history.push, e);
+													history.push(ROUTES.METRICS_EXPLORER_EXPLORER);
 												}}
 											>
 												Open Metrics Explorer
@@ -620,11 +619,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													navigateToPage(ROUTES.ALL_DASHBOARD, history.push, e);
+													history.push(ROUTES.ALL_DASHBOARD);
 												}}
 											>
 												Create dashboard
@@ -662,11 +661,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													navigateToPage(ROUTES.ALERTS_NEW, history.push, e);
+													history.push(ROUTES.ALERTS_NEW);
 												}}
 											>
 												Create an alert

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { QueryKey } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -116,7 +116,7 @@ const ServicesListTable = memo(
 		onRowClick,
 	}: {
 		services: ServicesList[];
-		onRowClick: (record: ServicesList, event: React.MouseEvent) => void;
+		onRowClick: (record: ServicesList) => void;
 	}): JSX.Element => (
 		<div className="services-list-container home-data-item-container metrics-services-list">
 			<div className="services-list">
@@ -125,8 +125,8 @@ const ServicesListTable = memo(
 					dataSource={services}
 					pagination={false}
 					className="services-table"
-					onRow={(record: ServicesList): Record<string, unknown> => ({
-						onClick: (event: React.MouseEvent): void => onRowClick(record, event),
+					onRow={(record): { onClick: () => void } => ({
+						onClick: (): void => onRowClick(record),
 					})}
 				/>
 			</div>
@@ -284,11 +284,11 @@ function ServiceMetrics({
 	}, [onUpdateChecklistDoneItem, loadingUserPreferences, servicesExist]);
 
 	const handleRowClick = useCallback(
-		(record: ServicesList, event: React.MouseEvent) => {
+		(record: ServicesList) => {
 			logEvent('Homepage: Service clicked', {
 				serviceName: record.serviceName,
 			});
-			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, { event });
+			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
 		},
 		[safeNavigate],
 	);

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button, Select, Skeleton, Table } from 'antd';
@@ -172,13 +172,13 @@ export default function ServiceTraces({
 						dataSource={top5Services}
 						pagination={false}
 						className="services-table"
-						onRow={(record: ServicesList): Record<string, unknown> => ({
-							onClick: (event: React.MouseEvent): void => {
+						onRow={(record): { onClick: () => void } => ({
+							onClick: (): void => {
 								logEvent('Homepage: Service clicked', {
 									serviceName: record.serviceName,
 								});
 
-								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, { event });
+								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
 							},
 						})}
 					/>

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Skeleton,
@@ -11,7 +11,6 @@ import {
 import { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { InfraMonitoringEvents } from 'constants/events';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
@@ -77,16 +76,7 @@ export default function HostsListTable({
 		[],
 	);
 
-	const handleRowClick = (
-		record: HostRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (isModifierKeyPressed(event)) {
-			const params = new URLSearchParams(window.location.search);
-			params.set('hostName', record.hostName);
-			openInNewTab(`${window.location.pathname}?${params.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: HostRowData): void => {
 		onHostClick(record.hostName);
 		logEvent(InfraMonitoringEvents.ItemClicked, {
 			entity: InfraMonitoringEvents.HostEntity,
@@ -190,8 +180,8 @@ export default function HostsListTable({
 			tableLayout="fixed"
 			rowKey={(record): string => record.hostName}
 			onChange={handleTableChange}
-			onRow={(record: HostRowData): Record<string, unknown> => ({
-				onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+			onRow={(record): { onClick: () => void; className: string } => ({
+				onClick: (): void => handleRowClick(record),
 				className: 'clickable-row',
 			})}
 		/>

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,7 +24,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -452,19 +451,7 @@ function K8sClustersList({
 		);
 	}, [selectedClusterName, groupBy.length, clustersData, nestedClustersData]);
 
-	const handleRowClick = (
-		record: K8sClustersRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
-				record.clusterUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sClustersRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedClusterName(record.clusterUID);
@@ -528,19 +515,8 @@ function K8sClustersList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
-										record.clusterUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedClusterName(record.clusterUID);
 							},
 							className: 'expanded-clickable-row',
@@ -731,10 +707,8 @@ function K8sClustersList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -458,19 +457,7 @@ function K8sDaemonSetsList({
 		nestedDaemonSetsData,
 	]);
 
-	const handleRowClick = (
-		record: K8sDaemonSetsRowData,
-		event?: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
-				record.daemonsetUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedDaemonSetUID(record.daemonsetUID);
@@ -534,19 +521,8 @@ function K8sDaemonSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
-										record.daemonsetUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setSelectedDaemonSetUID(record.daemonsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -739,10 +715,8 @@ function K8sDaemonSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -464,19 +463,7 @@ function K8sDeploymentsList({
 		nestedDeploymentsData,
 	]);
 
-	const handleRowClick = (
-		record: K8sDeploymentsRowData,
-		event?: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
-				record.deploymentUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sDeploymentsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedDeploymentUID(record.deploymentUID);
@@ -540,19 +527,8 @@ function K8sDeploymentsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
-										record.deploymentUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedDeploymentUID(record.deploymentUID);
 							},
 							className: 'expanded-clickable-row',
@@ -746,10 +722,8 @@ function K8sDeploymentsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -429,16 +428,7 @@ function K8sJobsList({
 		return jobsData.find((job) => job.jobName === selectedJobUID) || null;
 	}, [selectedJobUID, groupBy.length, jobsData, nestedJobsData]);
 
-	const handleRowClick = (
-		record: K8sJobsRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sJobsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedJobUID(record.jobUID);
@@ -502,16 +492,8 @@ function K8sJobsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedJobUID(record.jobUID);
 							},
 							className: 'expanded-clickable-row',
@@ -702,10 +684,8 @@ function K8sJobsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,7 +24,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -460,19 +459,7 @@ function K8sNamespacesList({
 		nestedNamespacesData,
 	]);
 
-	const handleRowClick = (
-		record: K8sNamespacesRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
-				record.namespaceUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sNamespacesRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedNamespaceUID(record.namespaceUID);
@@ -536,19 +523,8 @@ function K8sNamespacesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
-										record.namespaceUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedNamespaceUID(record.namespaceUID);
 							},
 							className: 'expanded-clickable-row',
@@ -740,10 +716,8 @@ function K8sNamespacesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,7 +24,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -439,16 +438,7 @@ function K8sNodesList({
 		return nodesData.find((node) => node.nodeUID === selectedNodeUID) || null;
 	}, [selectedNodeUID, groupBy.length, nodesData, nestedNodesData]);
 
-	const handleRowClick = (
-		record: K8sNodesRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID, record.nodeUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sNodesRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedNodeUID(record.nodeUID);
@@ -513,19 +503,8 @@ function K8sNodesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID,
-										record.nodeUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setSelectedNodeUID(record.nodeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -716,10 +695,8 @@ function K8sNodesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-syntax */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -26,7 +26,6 @@ import { ChevronDown, ChevronRight, CornerDownRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -496,16 +495,7 @@ function K8sPodsList({
 		}
 	}, [selectedRowData, fetchGroupedByRowData]);
 
-	const handleRowClick = (
-		record: K8sPodsRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sPodsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedPodUID(record.podUID);
 			setSearchParams({
@@ -625,14 +615,8 @@ function K8sPodsList({
 							spinning: isFetchingGroupedByRowData || isLoadingGroupedByRowData,
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
-						onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setSelectedPodUID(record.podUID);
 							},
 							className: 'expanded-clickable-row',
@@ -768,8 +752,8 @@ function K8sPodsList({
 				scroll={{ x: true }}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -461,19 +460,7 @@ function K8sStatefulSetsList({
 		nestedStatefulSetsData,
 	]);
 
-	const handleRowClick = (
-		record: K8sStatefulSetsRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
-				record.statefulsetUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sStatefulSetsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedStatefulSetUID(record.statefulsetUID);
@@ -537,19 +524,8 @@ function K8sStatefulSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
-										record.statefulsetUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedStatefulSetUID(record.statefulsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -742,8 +718,8 @@ function K8sStatefulSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record) => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -391,16 +390,7 @@ function K8sVolumesList({
 		);
 	}, [selectedVolumeUID, volumesData, groupBy.length, nestedVolumesData]);
 
-	const handleRowClick = (
-		record: K8sVolumesRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID, record.volumeUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sVolumesRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedVolumeUID(record.volumeUID);
@@ -464,19 +454,8 @@ function K8sVolumesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID,
-										record.volumeUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedVolumeUID(record.volumeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -662,10 +641,8 @@ function K8sVolumesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,7 +7,6 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { DataSource } from 'types/common/queryBuilder';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import AlertInfoCard from './AlertInfoCard';
 import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
@@ -37,13 +36,9 @@ export function AlertsEmptyState(): JSX.Element {
 
 	const [loading, setLoading] = useState(false);
 
-	const onClickNewAlertHandler = useCallback((e: React.MouseEvent) => {
+	const onClickNewAlertHandler = useCallback(() => {
 		setLoading(false);
-		if (isModifierKeyPressed(e)) {
-			openInNewTab(ROUTES.ALERTS_NEW);
-		} else {
-			history.push(ROUTES.ALERTS_NEW);
-		}
+		history.push(ROUTES.ALERTS_NEW);
 	}, []);
 
 	return (

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
@@ -100,22 +100,16 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		});
 	}, [notificationsApi, t]);
 
-	const onClickNewAlertHandler = useCallback(
-		(e: React.MouseEvent): void => {
-			logEvent('Alert: New alert button clicked', {
-				number: allAlertRules?.length,
-				layout: 'new',
-			});
-			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, { event: e });
-		},
+	const onClickNewAlertHandler = useCallback(() => {
+		logEvent('Alert: New alert button clicked', {
+			number: allAlertRules?.length,
+			layout: 'new',
+		});
+		safeNavigate(ROUTES.ALERT_TYPE_SELECTION);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
+	}, []);
 
-	const onEditHandler = (
-		record: GettableAlert,
-		options?: { event?: React.MouseEvent; newTab?: boolean },
-	): void => {
+	const onEditHandler = (record: GettableAlert, openInNewTab: boolean): void => {
 		const compositeQuery = sanitizeDefaultAlertQuery(
 			mapQueryDataFromApi(record.condition.compositeQuery),
 			record.alertType as AlertTypes,
@@ -131,10 +125,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 
 		setEditLoader(false);
 
-		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, {
-			event: options?.event,
-			newTab: options?.newTab,
-		});
+		if (openInNewTab) {
+			window.open(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, '_blank');
+		} else {
+			safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		}
 	};
 
 	const onCloneHandler = (
@@ -271,7 +266,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				const onClickHandler = (e: React.MouseEvent<HTMLElement>): void => {
 					e.stopPropagation();
 					e.preventDefault();
-					onEditHandler(record, { event: e });
+					onEditHandler(record, e.metaKey || e.ctrlKey);
 				};
 
 				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
@@ -336,9 +331,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							/>,
 							<ColumnButton
 								key="2"
-								onClick={(e: React.MouseEvent): void =>
-									onEditHandler(record, { event: e })
-								}
+								onClick={(): void => onEditHandler(record, false)}
 								type="link"
 								loading={editLoader}
 							>
@@ -346,7 +339,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							</ColumnButton>,
 							<ColumnButton
 								key="3"
-								onClick={(): void => onEditHandler(record, { newTab: true })}
+								onClick={(): void => onEditHandler(record, true)}
 								type="link"
 								loading={editLoader}
 							>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -416,7 +416,11 @@ function DashboardsList(): JSX.Element {
 
 				const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 					event.stopPropagation();
-					safeNavigate(getLink(), { event });
+					if (event.metaKey || event.ctrlKey) {
+						window.open(getLink(), '_blank');
+					} else {
+						safeNavigate(getLink());
+					}
 					logEvent('Dashboard List: Clicked on dashboard', {
 						dashboardId: dashboard.id,
 						dashboardName: dashboard.name,

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -31,7 +31,6 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 import { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -236,7 +235,7 @@ function Application(): JSX.Element {
 			timestamp: number,
 			apmToTraceQuery: Query,
 			isViewLogsClicked?: boolean,
-		): ((e: React.MouseEvent) => void) => (e: React.MouseEvent): void => {
+		): (() => void) => (): void => {
 			const endTime = secondsToMilliseconds(timestamp);
 			const startTime = secondsToMilliseconds(timestamp - stepInterval);
 
@@ -260,11 +259,7 @@ function Application(): JSX.Element {
 				queryString,
 			);
 
-			if (isModifierKeyPressed(e)) {
-				openInNewTab(newPath);
-			} else {
-				history.push(newPath);
-			}
+			history.push(newPath);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[stepInterval],

frontend/src/container/MetricsApplication/Tabs/Overview/GraphControlsPanel/GraphControlsPanel.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { Binoculars, DraftingCompass, ScrollText } from 'lucide-react';
@@ -7,9 +6,9 @@ import './GraphControlsPanel.styles.scss';
 
 interface GraphControlsPanelProps {
 	id: string;
-	onViewLogsClick?: (e: React.MouseEvent) => void;
-	onViewTracesClick: (e: React.MouseEvent) => void;
-	onViewAPIMonitoringClick?: (e: React.MouseEvent) => void;
+	onViewLogsClick?: () => void;
+	onViewTracesClick: () => void;
+	onViewAPIMonitoringClick?: () => void;
 }
 
 function GraphControlsPanel({

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useMemo, useRef } from 'react';
+import { Dispatch, SetStateAction, useMemo, useRef } from 'react';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -42,10 +42,7 @@ interface OnViewTracePopupClickProps {
 	apmToTraceQuery: Query;
 	isViewLogsClicked?: boolean;
 	stepInterval?: number;
-	safeNavigate: (
-		url: string,
-		options?: { event?: React.MouseEvent | MouseEvent },
-	) => void;
+	safeNavigate: (url: string) => void;
 }
 
 interface OnViewAPIMonitoringPopupClickProps {
@@ -54,10 +51,8 @@ interface OnViewAPIMonitoringPopupClickProps {
 	stepInterval?: number;
 	domainName: string;
 	isError: boolean;
-	safeNavigate: (
-		url: string,
-		options?: { event?: React.MouseEvent | MouseEvent },
-	) => void;
+
+	safeNavigate: (url: string) => void;
 }
 
 export function generateExplorerPath(
@@ -98,8 +93,8 @@ export function onViewTracePopupClick({
 	isViewLogsClicked,
 	stepInterval,
 	safeNavigate,
-}: OnViewTracePopupClickProps): (e?: React.MouseEvent) => void {
-	return (e?: React.MouseEvent): void => {
+}: OnViewTracePopupClickProps): VoidFunction {
+	return (): void => {
 		const endTime = secondsToMilliseconds(timestamp);
 		const startTime = secondsToMilliseconds(timestamp - (stepInterval || 60));
 
@@ -123,7 +118,7 @@ export function onViewTracePopupClick({
 			queryString,
 		);
 
-		safeNavigate(newPath, { event: e });
+		safeNavigate(newPath);
 	};
 }
 
@@ -154,8 +149,8 @@ export function onViewAPIMonitoringPopupClick({
 	isError,
 	stepInterval,
 	safeNavigate,
-}: OnViewAPIMonitoringPopupClickProps): (e?: React.MouseEvent) => void {
-	return (e?: React.MouseEvent): void => {
+}: OnViewAPIMonitoringPopupClickProps): VoidFunction {
+	return (): void => {
 		const endTime = timestamp + (stepInterval || 60);
 		const startTime = timestamp - (stepInterval || 60);
 		const filters = {
@@ -195,7 +190,7 @@ export function onViewAPIMonitoringPopupClick({
 			filters,
 		);
 
-		safeNavigate(newPath, { event: e });
+		safeNavigate(newPath);
 	};
 }
 

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

@@ -8,7 +8,6 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
 
@@ -26,10 +25,9 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={alert.alert_id}
-						onClick={(e): void => {
+						onClick={(): void => {
 							params.set(QueryParams.ruleId, alert.alert_id);
-							const path = `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;
-							navigateToPage(path, history.push, e);
+							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
@@ -57,12 +55,11 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={dashboard.dashboard_id}
-						onClick={(e): void => {
+						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboard_id,
 								}),
-								{ event: e },
 							);
 						}}
 						className="dashboards-popover-content-item"

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -118,7 +118,6 @@ describe('DashboardsAndAlertsPopover', () => {
 		// Should navigate to the dashboard
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			`/dashboard/${mockDashboard1.dashboard_id}`,
-			expect.objectContaining({ event: expect.any(Object) }),
 		);
 	});
 

frontend/src/container/MetricsExplorer/Summary/MetricsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Spin,
@@ -107,9 +107,8 @@ function MetricsTable({
 					onChange: onPaginationChange,
 					total: totalCount,
 				}}
-				onRow={(record: MetricsListItemRowData): Record<string, unknown> => ({
-					onClick: (event: React.MouseEvent): void =>
-						openMetricDetails(record.key, 'list', event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => openMetricDetails(record.key, 'list'),
 					className: 'clickable-row',
 				})}
 			/>

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
@@ -14,7 +14,6 @@ import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import InspectModal from '../Inspect';
@@ -210,15 +209,7 @@ function Summary(): JSX.Element {
 	const openMetricDetails = (
 		metricName: string,
 		view: 'list' | 'treemap',
-		event?: React.MouseEvent,
 	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(IS_METRIC_DETAILS_OPEN_KEY, 'true');
-			newParams.set(SELECTED_METRIC_NAME_KEY, metricName);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
 		setSelectedMetricName(metricName);
 		setIsMetricDetailsOpen(true);
 		setSearchParams({

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTable.test.tsx

@@ -194,11 +194,7 @@ describe('MetricsTable', () => {
 		);
 
 		fireEvent.click(screen.getByText('Metric 1'));
-		expect(mockOpenMetricDetails).toHaveBeenCalledWith(
-			'metric1',
-			'list',
-			expect.any(Object),
-		);
+		expect(mockOpenMetricDetails).toHaveBeenCalledWith('metric1', 'list');
 	});
 
 	it('calls setOrderBy when column header is clicked', () => {

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -14,11 +14,7 @@ export interface MetricsTableProps {
 	onPaginationChange: (page: number, pageSize: number) => void;
 	setOrderBy: (orderBy: OrderByPayload) => void;
 	totalCount: number;
-	openMetricDetails: (
-		metricName: string,
-		view: 'list' | 'treemap',
-		event?: React.MouseEvent,
-	) => void;
+	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
 	queryFilters: TagFilter;
 }
 
@@ -32,11 +28,7 @@ export interface MetricsTreemapProps {
 	isLoading: boolean;
 	isError: boolean;
 	viewType: TreemapViewType;
-	openMetricDetails: (
-		metricName: string,
-		view: 'list' | 'treemap',
-		event?: React.MouseEvent,
-	) => void;
+	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
 	setHeatmapView: (value: TreemapViewType) => void;
 }
 

frontend/src/container/NewExplorerCTA/index.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Badge, Button } from 'antd';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Undo } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 
 import { buttonText, RIBBON_STYLES } from './config';
 
@@ -22,30 +21,23 @@ function NewExplorerCTA(): JSX.Element | null {
 		[location.pathname],
 	);
 
-	const onClickHandler = useCallback(
-		(e?: React.MouseEvent): void => {
-			let targetPath: string;
-			if (location.pathname === ROUTES.LOGS_EXPLORER) {
-				targetPath = ROUTES.OLD_LOGS_EXPLORER;
-			} else if (location.pathname === ROUTES.TRACE) {
-				targetPath = ROUTES.TRACES_EXPLORER;
-			} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
-				targetPath = ROUTES.LOGS_EXPLORER;
-			} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
-				targetPath = ROUTES.TRACE;
-			} else {
-				return;
-			}
-			navigateToPage(targetPath, history.push, e);
-		},
-		[location.pathname],
-	);
+	const onClickHandler = useCallback((): void => {
+		if (location.pathname === ROUTES.LOGS_EXPLORER) {
+			history.push(ROUTES.OLD_LOGS_EXPLORER);
+		} else if (location.pathname === ROUTES.TRACE) {
+			history.push(ROUTES.TRACES_EXPLORER);
+		} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
+			history.push(ROUTES.LOGS_EXPLORER);
+		} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
+			history.push(ROUTES.TRACE);
+		}
+	}, [location.pathname]);
 
 	const button = useMemo(
 		() => (
 			<Button
 				icon={<Undo size={16} />}
-				onClick={(e): void => onClickHandler(e)}
+				onClick={onClickHandler}
 				data-testid="newExplorerCTA"
 				type="text"
 				className="periscope-btn link"

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useEffectOnce } from 'react-use';
@@ -17,7 +17,6 @@ import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingIn
 import history from 'lib/history';
 import { UserPlus } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { navigateToPage } from 'utils/navigation';
 
 import ModuleStepsContainer from './common/ModuleStepsContainer/ModuleStepsContainer';
 import { stepsMap } from './constants/stepsConfig';
@@ -253,13 +252,9 @@ export default function Onboarding(): JSX.Element {
 		}
 	};
 
-	const handleNext = (e?: React.MouseEvent): void => {
+	const handleNext = (): void => {
 		if (activeStep <= 3) {
-			navigateToPage(
-				moduleRouteMap[selectedModule.id as ModulesMap],
-				history.push,
-				e,
-			);
+			history.push(moduleRouteMap[selectedModule.id as ModulesMap]);
 		}
 	};
 
@@ -322,9 +317,9 @@ export default function Onboarding(): JSX.Element {
 			{activeStep === 1 && (
 				<div className="onboarding-page">
 					<div
-						onClick={(e): void => {
+						onClick={(): void => {
 							logEvent('Onboarding V2: Skip Button Clicked', {});
-							navigateToPage(ROUTES.APPLICATION, history.push, e);
+							history.push(ROUTES.APPLICATION);
 						}}
 						className="skip-to-console"
 					>
@@ -360,11 +355,7 @@ export default function Onboarding(): JSX.Element {
 						</div>
 					</div>
 					<div className="continue-to-next-step">
-						<Button
-							type="primary"
-							icon={<ArrowRightOutlined />}
-							onClick={(e): void => handleNext(e)}
-						>
+						<Button type="primary" icon={<ArrowRightOutlined />} onClick={handleNext}>
 							{t('get_started')}
 						</Button>
 					</div>
@@ -395,16 +386,17 @@ export default function Onboarding(): JSX.Element {
 			{activeStep > 1 && (
 				<div className="stepsContainer">
 					<ModuleStepsContainer
-						onReselectModule={(e?: React.MouseEvent): void => {
+						onReselectModule={(): void => {
 							setCurrent(current - 1);
 							setActiveStep(activeStep - 1);
 							setSelectedModule(useCases.APM);
 							resetProgress();
 
-							const path = isOnboardingV3Enabled
-								? ROUTES.GET_STARTED_WITH_CLOUD
-								: ROUTES.GET_STARTED;
-							navigateToPage(path, history.push, e);
+							if (isOnboardingV3Enabled) {
+								history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+							} else {
+								history.push(ROUTES.GET_STARTED);
+							}
 						}}
 						selectedModule={selectedModule}
 						selectedModuleSteps={selectedModuleSteps}

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

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -23,7 +23,6 @@ import {
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Blocks, Check } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import './DataSource.styles.scss';
@@ -142,13 +141,13 @@ export default function DataSource(): JSX.Element {
 		}
 	};
 
-	const goToIntegrationsPage = (e?: React.MouseEvent): void => {
+	const goToIntegrationsPage = (): void => {
 		logEvent('Onboarding V2: Go to integrations', {
 			module: selectedModule?.id,
 			dataSource: selectedDataSource?.name,
 			framework: selectedFramework,
 		});
-		navigateToPage(ROUTES.INTEGRATIONS, history.push, e);
+		history.push(ROUTES.INTEGRATIONS);
 	};
 
 	return (
@@ -250,7 +249,7 @@ export default function DataSource(): JSX.Element {
 								page which allows more sources of sending data
 							</Typography.Text>
 							<Button
-								onClick={(e): void => goToIntegrationsPage(e)}
+								onClick={goToIntegrationsPage}
 								icon={<Blocks size={14} />}
 								className="navigate-integrations-page-btn"
 							>

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/jsx-no-comment-textnodes */
 /* eslint-disable sonarjs/prefer-single-boolean-return */
-import React, { SetStateAction, useState } from 'react';
+import { SetStateAction, useState } from 'react';
 import {
 	ArrowLeftOutlined,
 	ArrowRightOutlined,
@@ -19,7 +19,6 @@ import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUti
 import history from 'lib/history';
 import { isEmpty, isNull } from 'lodash-es';
 import { UserPlus } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 
 import { useOnboardingContext } from '../../context/OnboardingContext';
 import {
@@ -143,7 +142,7 @@ export default function ModuleStepsContainer({
 		return true;
 	};
 
-	const redirectToModules = (event?: React.MouseEvent): void => {
+	const redirectToModules = (): void => {
 		logEvent('Onboarding V2 Complete', {
 			module: selectedModule.id,
 			dataSource: selectedDataSource?.id,
@@ -153,28 +152,26 @@ export default function ModuleStepsContainer({
 			serviceName,
 		});
 
-		let targetPath: string;
 		if (selectedModule.id === ModulesMap.APM) {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		} else if (selectedModule.id === ModulesMap.LogsManagement) {
-			targetPath = ROUTES.LOGS_EXPLORER;
+			history.push(ROUTES.LOGS_EXPLORER);
 		} else if (selectedModule.id === ModulesMap.InfrastructureMonitoring) {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		} else if (selectedModule.id === ModulesMap.AwsMonitoring) {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		} else {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		}
-		navigateToPage(targetPath, history.push, event);
 	};
 
-	const handleNext = (event?: React.MouseEvent): void => {
+	const handleNext = (): void => {
 		const isValid = isValidForm();
 
 		if (isValid) {
 			if (current === lastStepIndex) {
 				resetProgress();
-				redirectToModules(event);
+				redirectToModules();
 				return;
 			}
 
@@ -382,8 +379,8 @@ export default function ModuleStepsContainer({
 		}
 	};
 
-	const handleLogoClick = (e: React.MouseEvent): void => {
-		navigateToPage('/home', history.push, e);
+	const handleLogoClick = (): void => {
+		history.push('/home');
 	};
 
 	return (
@@ -403,7 +400,7 @@ export default function ModuleStepsContainer({
 							style={{ display: 'flex', alignItems: 'center' }}
 							type="default"
 							icon={<LeftCircleOutlined />}
-							onClick={(e): void => onReselectModule(e)}
+							onClick={onReselectModule}
 						>
 							{selectedModule.title}
 						</Button>
@@ -473,11 +470,7 @@ export default function ModuleStepsContainer({
 					>
 						Back
 					</Button>
-					<Button
-						onClick={(e): void => handleNext(e)}
-						type="primary"
-						icon={<ArrowRightOutlined />}
-					>
+					<Button onClick={handleNext} type="primary" icon={<ArrowRightOutlined />}>
 						{current < lastStepIndex ? 'Continue to next step' : 'Done'}
 					</Button>
 					<LaunchChatSupport

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -21,7 +21,6 @@ import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { CheckIcon, Goal, UserPlus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { navigateToPage } from 'utils/navigation';
 
 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
 import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
@@ -414,10 +413,7 @@ function OnboardingAddDataSource(): JSX.Element {
 		]);
 	}, [org]);
 
-	const handleUpdateCurrentStep = (
-		step: number,
-		event?: React.MouseEvent,
-	): void => {
+	const handleUpdateCurrentStep = (step: number): void => {
 		setCurrentStep(step);
 
 		if (step === 1) {
@@ -447,45 +443,43 @@ function OnboardingAddDataSource(): JSX.Element {
 				...setupStepItemsBase.slice(2),
 			]);
 		} else if (step === 3) {
-			let targetPath: string;
 			switch (selectedDataSource?.module) {
 				case 'apm':
-					targetPath = ROUTES.APPLICATION;
+					history.push(ROUTES.APPLICATION);
 					break;
 				case 'logs':
-					targetPath = ROUTES.LOGS;
+					history.push(ROUTES.LOGS);
 					break;
 				case 'metrics':
-					targetPath = ROUTES.METRICS_EXPLORER;
+					history.push(ROUTES.METRICS_EXPLORER);
 					break;
 				case 'dashboards':
-					targetPath = ROUTES.ALL_DASHBOARD;
+					history.push(ROUTES.ALL_DASHBOARD);
 					break;
 				case 'infra-monitoring-hosts':
-					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_HOSTS;
+					history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
 					break;
 				case 'infra-monitoring-k8s':
-					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES;
+					history.push(ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES);
 					break;
 				case 'messaging-queues-kafka':
-					targetPath = ROUTES.MESSAGING_QUEUES_KAFKA;
+					history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
 					break;
 				case 'messaging-queues-celery':
-					targetPath = ROUTES.MESSAGING_QUEUES_CELERY_TASK;
+					history.push(ROUTES.MESSAGING_QUEUES_CELERY_TASK);
 					break;
 				case 'integrations':
-					targetPath = ROUTES.INTEGRATIONS;
+					history.push(ROUTES.INTEGRATIONS);
 					break;
 				case 'home':
-					targetPath = ROUTES.HOME;
+					history.push(ROUTES.HOME);
 					break;
 				case 'api-monitoring':
-					targetPath = ROUTES.API_MONITORING;
+					history.push(ROUTES.API_MONITORING);
 					break;
 				default:
-					targetPath = ROUTES.APPLICATION;
+					history.push(ROUTES.APPLICATION);
 			}
-			navigateToPage(targetPath, history.push, event);
 		}
 	};
 
@@ -634,7 +628,7 @@ function OnboardingAddDataSource(): JSX.Element {
 							<X
 								size={14}
 								className="onboarding-header-container-close-icon"
-								onClick={(e): void => {
+								onClick={(): void => {
 									logEvent(
 										`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CLOSE_ONBOARDING_CLICKED}`,
 										{
@@ -642,7 +636,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										},
 									);
 
-									navigateToPage(ROUTES.HOME, history.push, e);
+									history.push(ROUTES.HOME);
 								}}
 							/>
 							<Typography.Text>Get Started (2/4)</Typography.Text>
@@ -969,7 +963,7 @@ function OnboardingAddDataSource(): JSX.Element {
 													type="primary"
 													disabled={!selectedDataSource}
 													shape="round"
-													onClick={(e): void => {
+													onClick={(): void => {
 														logEvent(
 															`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONFIGURED_PRODUCT}`,
 															{
@@ -983,7 +977,7 @@ function OnboardingAddDataSource(): JSX.Element {
 															selectedEnvironment || selectedFramework || selectedDataSource;
 
 														if (currentEntity?.internalRedirect && currentEntity?.link) {
-															navigateToPage(currentEntity.link, history.push, e);
+															history.push(currentEntity.link);
 														} else {
 															handleUpdateCurrentStep(2);
 														}
@@ -1054,7 +1048,7 @@ function OnboardingAddDataSource(): JSX.Element {
 									<Button
 										type="primary"
 										shape="round"
-										onClick={(e): void => {
+										onClick={(): void => {
 											logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONTINUE_BUTTON_CLICKED}`,
 												{
@@ -1066,7 +1060,7 @@ function OnboardingAddDataSource(): JSX.Element {
 											);
 
 											handleFilterByCategory('All');
-											handleUpdateCurrentStep(3, e);
+											handleUpdateCurrentStep(3);
 										}}
 									>
 										Continue

frontend/src/container/OrganizationSettings/AuthDomain/AuthDomain.styles.scss

@@ -7,6 +7,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+
+		.auth-domain-title {
+			margin: 0;
+			font-size: 20px;
+			font-weight: 600;
+		}
 	}
 }
 
@@ -15,5 +21,29 @@
 		display: flex;
 		flex-direction: row;
 		gap: 24px;
+
+		.auth-domain-list-action-link {
+			cursor: pointer;
+			color: var(--bg-robin-500);
+			transition: color 0.3s;
+			border: none;
+			background: none;
+			padding: 0;
+			font-size: inherit;
+
+			&:hover {
+				opacity: 0.8;
+				text-decoration: underline;
+			}
+
+			&.delete {
+				color: var(--bg-cherry-500);
+			}
+		}
+	}
+
+	.auth-domain-list-na {
+		padding-left: 6px;
+		color: var(--text-secondary);
 	}
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -1,28 +1,37 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Button, Form, Modal } from 'antd';
-import put from 'api/v1/domains/id/put';
-import post from 'api/v1/domains/post';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import {
+	useCreateAuthDomain,
+	useUpdateAuthDomain,
+} from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	AuthtypesGoogleConfigDTO,
+	AuthtypesRoleMappingDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import { FeatureKeys } from 'constants/features';
+import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
-import { PostableAuthDomain } from 'types/api/v1/domains/post';
 
 import AuthnProviderSelector from './AuthnProviderSelector';
+import {
+	convertDomainMappingsToRecord,
+	convertGroupMappingsToRecord,
+	FormValues,
+	prepareInitialValues,
+} from './CreateEdit.utils';
 import ConfigureGoogleAuthAuthnProvider from './Providers/AuthnGoogleAuth';
 import ConfigureOIDCAuthnProvider from './Providers/AuthnOIDC';
 import ConfigureSAMLAuthnProvider from './Providers/AuthnSAML';
 
 import './CreateEdit.styles.scss';
-
-interface CreateOrEditProps {
-	isCreate: boolean;
-	onClose: () => void;
-	record?: GettableAuthDomain;
-}
-
 function configureAuthnProvider(
 	authnProvider: string,
 	isCreate: boolean,
@@ -39,64 +48,193 @@ function configureAuthnProvider(
 	}
 }
 
+interface CreateOrEditProps {
+	isCreate: boolean;
+	onClose: () => void;
+	record?: AuthtypesGettableAuthDomainDTO;
+}
+
 function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 	const { isCreate, record, onClose } = props;
-	const [form] = Form.useForm<PostableAuthDomain>();
+	const [form] = Form.useForm<FormValues>();
 	const [authnProvider, setAuthnProvider] = useState<string>(
 		record?.ssoType || '',
 	);
 
+	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
 	const { featureFlags } = useAppContext();
+
+	const handleError = useCallback(
+		(error: AxiosError<RenderErrorResponseDTO>): void => {
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
+		},
+		[showErrorModal],
+	);
 	const samlEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.SSO)?.active || false;
 
-	const onSubmitHandler = async (): Promise<void> => {
+	const {
+		mutate: createAuthDomain,
+		isLoading: isCreating,
+	} = useCreateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
+
+	const {
+		mutate: updateAuthDomain,
+		isLoading: isUpdating,
+	} = useUpdateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
+
+	/**
+	 * Prepares Google Auth config for API payload
+	 */
+	const getGoogleAuthConfig = useCallback(():
+		| AuthtypesGoogleConfigDTO
+		| undefined => {
+		const config = form.getFieldValue('googleAuthConfig');
+		if (!config) {
+			return undefined;
+		}
+
+		const { domainToAdminEmailList, ...rest } = config;
+		const domainToAdminEmail = convertDomainMappingsToRecord(
+			domainToAdminEmailList,
+		);
+
+		return {
+			...rest,
+			...(domainToAdminEmail && { domainToAdminEmail }),
+		};
+	}, [form]);
+
+	/**
+	 * Prepares role mapping for API payload
+	 */
+	const getRoleMapping = useCallback((): AuthtypesRoleMappingDTO | undefined => {
+		const roleMapping = form.getFieldValue('roleMapping');
+		if (!roleMapping) {
+			return undefined;
+		}
+
+		const { groupMappingsList, ...rest } = roleMapping;
+		const groupMappings = convertGroupMappingsToRecord(groupMappingsList);
+
+		// Only return roleMapping if there's meaningful content
+		const hasDefaultRole = !!rest.defaultRole;
+		const hasUseRoleAttribute = rest.useRoleAttribute === true;
+		const hasGroupMappings =
+			groupMappings && Object.keys(groupMappings).length > 0;
+
+		if (!hasDefaultRole && !hasUseRoleAttribute && !hasGroupMappings) {
+			return undefined;
+		}
+
+		return {
+			...rest,
+			...(groupMappings && { groupMappings }),
+		};
+	}, [form]);
+
+	const onSubmitHandler = useCallback(async (): Promise<void> => {
+		try {
+			await form.validateFields();
+		} catch {
+			return;
+		}
+
 		const name = form.getFieldValue('name');
-		const googleAuthConfig = form.getFieldValue('googleAuthConfig');
+		const googleAuthConfig = getGoogleAuthConfig();
 		const samlConfig = form.getFieldValue('samlConfig');
 		const oidcConfig = form.getFieldValue('oidcConfig');
+		const roleMapping = getRoleMapping();
 
-		try {
-			if (isCreate) {
-				await post({
-					name,
-					config: {
-						ssoEnabled: true,
-						ssoType: authnProvider,
-						googleAuthConfig,
-						samlConfig,
-						oidcConfig,
+		if (isCreate) {
+			createAuthDomain(
+				{
+					data: {
+						name,
+						config: {
+							ssoEnabled: true,
+							ssoType: authnProvider,
+							googleAuthConfig,
+							samlConfig,
+							oidcConfig,
+							roleMapping,
+						},
 					},
-				});
-			} else {
-				await put({
-					id: record?.id || '',
-					config: {
-						ssoEnabled: form.getFieldValue('ssoEnabled'),
-						ssoType: authnProvider,
-						googleAuthConfig,
-						samlConfig,
-						oidcConfig,
+				},
+				{
+					onSuccess: () => {
+						notifications.success({
+							message: 'Domain created successfully',
+						});
+						onClose();
 					},
-				});
+					onError: handleError,
+				},
+			);
+		} else {
+			if (!record?.id) {
+				return;
 			}
 
-			onClose();
-		} catch (error) {
-			showErrorModal(error as APIError);
+			updateAuthDomain(
+				{
+					pathParams: { id: record.id },
+					data: {
+						config: {
+							ssoEnabled: form.getFieldValue('ssoEnabled'),
+							ssoType: authnProvider,
+							googleAuthConfig,
+							samlConfig,
+							oidcConfig,
+							roleMapping,
+						},
+					},
+				},
+				{
+					onSuccess: () => {
+						notifications.success({
+							message: 'Domain updated successfully',
+						});
+						onClose();
+					},
+					onError: handleError,
+				},
+			);
 		}
-	};
+	}, [
+		authnProvider,
+		createAuthDomain,
+		form,
+		getGoogleAuthConfig,
+		getRoleMapping,
+		handleError,
+		isCreate,
+		notifications,
+		onClose,
+		record,
+		updateAuthDomain,
+	]);
 
-	const onBackHandler = (): void => {
+	const onBackHandler = useCallback((): void => {
+		form.resetFields();
 		setAuthnProvider('');
-	};
+	}, [form]);
 
 	return (
-		<Modal open footer={null} onCancel={onClose}>
+		<Modal
+			open
+			footer={null}
+			onCancel={onClose}
+			width={authnProvider ? 980 : undefined}
+		>
 			<Form
 				name="auth-domain"
-				initialValues={defaultTo(record, {
+				initialValues={defaultTo(prepareInitialValues(record), {
 					name: '',
 					ssoEnabled: false,
 					ssoType: '',
@@ -116,7 +254,11 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 						<section className="action-buttons">
 							{isCreate && <Button onClick={onBackHandler}>Back</Button>}
 							{!isCreate && <Button onClick={onClose}>Cancel</Button>}
-							<Button onClick={onSubmitHandler} type="primary">
+							<Button
+								onClick={onSubmitHandler}
+								type="primary"
+								loading={isCreating || isUpdating}
+							>
 								Save Changes
 							</Button>
 						</section>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.utils.ts

@@ -0,0 +1,134 @@
+import {
+	AuthtypesGettableAuthDomainDTO,
+	AuthtypesGoogleConfigDTO,
+	AuthtypesOIDCConfigDTO,
+	AuthtypesRoleMappingDTO,
+	AuthtypesSamlConfigDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+// Form values interface for internal use (includes array-based fields for UI)
+export interface FormValues {
+	name?: string;
+	ssoEnabled?: boolean;
+	ssoType?: string;
+	googleAuthConfig?: AuthtypesGoogleConfigDTO & {
+		domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>;
+	};
+	samlConfig?: AuthtypesSamlConfigDTO;
+	oidcConfig?: AuthtypesOIDCConfigDTO;
+	roleMapping?: AuthtypesRoleMappingDTO & {
+		groupMappingsList?: Array<{ groupName?: string; role?: string }>;
+	};
+}
+
+/**
+ * Converts groupMappingsList array to groupMappings Record for API
+ */
+export function convertGroupMappingsToRecord(
+	groupMappingsList?: Array<{ groupName?: string; role?: string }>,
+): Record<string, string> | undefined {
+	if (!Array.isArray(groupMappingsList) || groupMappingsList.length === 0) {
+		return undefined;
+	}
+
+	const groupMappings: Record<string, string> = {};
+	groupMappingsList.forEach((item) => {
+		if (item.groupName && item.role) {
+			groupMappings[item.groupName] = item.role;
+		}
+	});
+
+	return Object.keys(groupMappings).length > 0 ? groupMappings : undefined;
+}
+
+/**
+ * Converts groupMappings Record to groupMappingsList array for form
+ */
+export function convertGroupMappingsToList(
+	groupMappings?: Record<string, string> | null,
+): Array<{ groupName: string; role: string }> {
+	if (!groupMappings) {
+		return [];
+	}
+
+	return Object.entries(groupMappings).map(([groupName, role]) => ({
+		groupName,
+		role,
+	}));
+}
+
+/**
+ * Converts domainToAdminEmailList array to domainToAdminEmail Record for API
+ */
+export function convertDomainMappingsToRecord(
+	domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>,
+): Record<string, string> | undefined {
+	if (
+		!Array.isArray(domainToAdminEmailList) ||
+		domainToAdminEmailList.length === 0
+	) {
+		return undefined;
+	}
+
+	const domainToAdminEmail: Record<string, string> = {};
+	domainToAdminEmailList.forEach((item) => {
+		if (item.domain && item.adminEmail) {
+			domainToAdminEmail[item.domain] = item.adminEmail;
+		}
+	});
+
+	return Object.keys(domainToAdminEmail).length > 0
+		? domainToAdminEmail
+		: undefined;
+}
+
+/**
+ * Converts domainToAdminEmail Record to domainToAdminEmailList array for form
+ */
+export function convertDomainMappingsToList(
+	domainToAdminEmail?: Record<string, string>,
+): Array<{ domain: string; adminEmail: string }> {
+	if (!domainToAdminEmail) {
+		return [];
+	}
+
+	return Object.entries(domainToAdminEmail).map(([domain, adminEmail]) => ({
+		domain,
+		adminEmail,
+	}));
+}
+
+/**
+ * Prepares initial form values from API record
+ */
+export function prepareInitialValues(
+	record?: AuthtypesGettableAuthDomainDTO,
+): FormValues {
+	if (!record) {
+		return {
+			name: '',
+			ssoEnabled: false,
+			ssoType: '',
+		};
+	}
+
+	return {
+		...record,
+		googleAuthConfig: record.googleAuthConfig
+			? {
+					...record.googleAuthConfig,
+					domainToAdminEmailList: convertDomainMappingsToList(
+						record.googleAuthConfig.domainToAdminEmail,
+					),
+			  }
+			: undefined,
+		roleMapping: record.roleMapping
+			? {
+					...record.roleMapping,
+					groupMappingsList: convertGroupMappingsToList(
+						record.roleMapping.groupMappings,
+					),
+			  }
+			: undefined,
+	};
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -1,20 +1,67 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { Color } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import DomainMappingList from './components/DomainMappingList';
+import EmailTagInput from './components/EmailTagInput';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'workspace-groups' | 'role-mapping' | null;
+
 function ConfigureGoogleAuthAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+	const fetchGroups = Form.useWatch(['googleAuthConfig', 'fetchGroups'], form);
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleWorkspaceGroupsChange = useCallback(
+		(keys: string | string[]): void => {
+			const isExpanding = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			setExpandedSection(isExpanding ? 'workspace-groups' : null);
+		},
+		[],
+	);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
+	const {
+		hasErrors: hasWorkspaceGroupsErrors,
+		errorMessages: workspaceGroupsErrorMessages,
+	} = useCollapseSectionErrors(
+		['googleAuthConfig'],
+		[
+			['googleAuthConfig', 'fetchGroups'],
+			['googleAuthConfig', 'serviceAccountJson'],
+			['googleAuthConfig', 'domainToAdminEmailList'],
+			['googleAuthConfig', 'fetchTransitiveGroupMembership'],
+			['googleAuthConfig', 'allowedGroups'],
+		],
+	);
+
 	return (
-		<div className="google-auth">
-			<section className="header">
-				<Typography.Text className="title">
-					Edit Google Authentication
-				</Typography.Text>
-				<Typography.Paragraph className="description">
+		<div className="authn-provider">
+			<section className="authn-provider__header">
+				<h3 className="authn-provider__title">Edit Google Authentication</h3>
+				<p className="authn-provider__description">
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
@@ -25,50 +72,247 @@ function ConfigureGoogleAuthAuthnProvider({
 						docs
 					</a>{' '}
 					for more information.
-				</Typography.Paragraph>
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				className="field"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="authn-provider__columns">
+				{/* Left Column - Core OAuth Settings */}
+				<div className="authn-provider__left">
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="google-domain">
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="google-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client ID"
-				name={['googleAuthConfig', 'clientId']}
-				className="field"
-				tooltip={{
-					title: `ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="google-client-id">
+							Client ID
+							<Tooltip title="ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientId']}
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Client ID is required', whitespace: true },
+							]}
+						>
+							<Input id="google-client-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client Secret"
-				name={['googleAuthConfig', 'clientSecret']}
-				className="field"
-				tooltip={{
-					title: `It is the application's secret.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="google-client-secret">
+							Client Secret
+							<Tooltip title="It is the application's secret.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientSecret']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'Client Secret is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="google-client-secret" />
+						</Form.Item>
+					</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="Google OAuth2 won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['googleAuthConfig', 'insecureSkipEmailVerified']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="google-skip-email-verification"
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['googleAuthConfig', 'insecureSkipEmailVerified'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
+							<CircleHelp size={14} className="authn-provider__label-icon" />
+						</Tooltip>
+					</div>
+
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="Google OAuth2 won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
+
+				{/* Right Column - Google Workspace Groups (Advanced) */}
+				<div className="authn-provider__right">
+					<Collapse
+						bordered={false}
+						activeKey={
+							expandedSection === 'workspace-groups' ? ['workspace-groups'] : []
+						}
+						onChange={handleWorkspaceGroupsChange}
+						className="authn-provider__collapse"
+						expandIcon={(): null => null}
+					>
+						<Collapse.Panel
+							key="workspace-groups"
+							header={
+								<div className="authn-provider__collapse-header">
+									{expandedSection !== 'workspace-groups' ? (
+										<ChevronRight size={16} />
+									) : (
+										<ChevronDown size={16} />
+									)}
+									<div className="authn-provider__collapse-header-text">
+										<h4 className="authn-provider__section-title">
+											Google Workspace Groups (Advanced)
+										</h4>
+										<p className="authn-provider__section-description">
+											Enable group fetching to retrieve user groups from Google Workspace.
+											Requires a Service Account with domain-wide delegation.
+										</p>
+									</div>
+									{expandedSection !== 'workspace-groups' && hasWorkspaceGroupsErrors && (
+										<Tooltip
+											title={
+												<div>
+													{workspaceGroupsErrorMessages.map((msg) => (
+														<div key={msg}>{msg}</div>
+													))}
+												</div>
+											}
+										>
+											<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+										</Tooltip>
+									)}
+								</div>
+							}
+						>
+							<div className="authn-provider__group-content">
+								<div className="authn-provider__checkbox-row">
+									<Form.Item
+										name={['googleAuthConfig', 'fetchGroups']}
+										valuePropName="checked"
+										noStyle
+									>
+										<Checkbox
+											id="google-fetch-groups"
+											labelName="Fetch Groups"
+											onCheckedChange={(checked: boolean): void => {
+												form.setFieldValue(['googleAuthConfig', 'fetchGroups'], checked);
+											}}
+										/>
+									</Form.Item>
+									<Tooltip title="Enable fetching Google Workspace groups for the user. Requires service account configuration.">
+										<CircleHelp size={14} className="authn-provider__label-icon" />
+									</Tooltip>
+								</div>
+
+								{fetchGroups && (
+									<div className="authn-provider__group-fields">
+										<div className="authn-provider__field-group">
+											<label
+												className="authn-provider__label"
+												htmlFor="google-service-account-json"
+											>
+												Service Account JSON
+												<Tooltip title="The JSON content of the Google Service Account credentials file. Required for group fetching.">
+													<CircleHelp size={14} className="authn-provider__label-icon" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'serviceAccountJson']}
+												className="authn-provider__form-item"
+											>
+												<TextArea
+													id="google-service-account-json"
+													rows={3}
+													placeholder="Paste service account JSON"
+													className="authn-provider__textarea"
+												/>
+											</Form.Item>
+										</div>
+
+										<DomainMappingList
+											fieldNamePrefix={['googleAuthConfig', 'domainToAdminEmailList']}
+										/>
+
+										<div className="authn-provider__checkbox-row">
+											<Form.Item
+												name={['googleAuthConfig', 'fetchTransitiveGroupMembership']}
+												valuePropName="checked"
+												noStyle
+											>
+												<Checkbox
+													id="google-transitive-membership"
+													labelName="Fetch Transitive Group Membership"
+													onCheckedChange={(checked: boolean): void => {
+														form.setFieldValue(
+															['googleAuthConfig', 'fetchTransitiveGroupMembership'],
+															checked,
+														);
+													}}
+												/>
+											</Form.Item>
+											<Tooltip title="If enabled, recursively fetch groups that contain other groups (transitive membership).">
+												<CircleHelp size={14} className="authn-provider__label-icon" />
+											</Tooltip>
+										</div>
+
+										<div className="authn-provider__field-group">
+											<label
+												className="authn-provider__label"
+												htmlFor="google-allowed-groups"
+											>
+												Allowed Groups
+												<Tooltip title="Optional list of allowed groups. If configured, only users belonging to one of these groups will be allowed to login.">
+													<CircleHelp size={14} className="authn-provider__label-icon" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'allowedGroups']}
+												className="authn-provider__form-item"
+											>
+												<EmailTagInput placeholder="Type a group email and press Enter" />
+											</Form.Item>
+										</div>
+									</div>
+								)}
+							</div>
+						</Collapse.Panel>
+					</Collapse>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -1,110 +1,211 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox, Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { CircleHelp } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form, Tooltip } from 'antd';
+
+import ClaimMappingSection from './components/ClaimMappingSection';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'claim-mapping' | 'role-mapping' | null;
+
 function ConfigureOIDCAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleClaimMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'claim-mapping' : null);
+	}, []);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
 	return (
-		<div className="saml">
-			<section className="header">
-				<Typography.Text className="title">
-					Edit OIDC Authentication
-				</Typography.Text>
+		<div className="authn-provider">
+			<section className="authn-provider__header">
+				<h3 className="authn-provider__title">Edit OIDC Authentication</h3>
+				<p className="authn-provider__description">
+					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
+					the{' '}
+					<a
+						href="https://signoz.io/docs/userguide/sso-authentication"
+						target="_blank"
+						rel="noreferrer"
+					>
+						docs
+					</a>{' '}
+					for more information.
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="authn-provider__columns">
+				{/* Left Column - Core OIDC Settings */}
+				<div className="authn-provider__left">
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-domain">
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Issuer URL"
-				name={['oidcConfig', 'issuer']}
-				tooltip={{
-					title: `It is the URL identifier for the service. For example: "https://accounts.google.com" or "https://login.salesforce.com".`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-issuer">
+							Issuer URL
+							<Tooltip title='The URL identifier for the OIDC provider. For example: "https://accounts.google.com" or "https://login.salesforce.com".'>
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuer']}
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Issuer URL is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-issuer" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Issuer Alias"
-				name={['oidcConfig', 'issuerAlias']}
-				tooltip={{
-					title: `Some offspec providers like Azure, Oracle IDCS have oidc discovery url different from issuer url which causes issuerValidation to fail.
-					This provides a way to override the Issuer url from the .well-known/openid-configuration issuer`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-issuer-alias">
+							Issuer Alias
+							<Tooltip title="Optional: Override the issuer URL from .well-known/openid-configuration for providers like Azure or Oracle IDCS.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuerAlias']}
+							className="authn-provider__form-item"
+						>
+							<Input id="oidc-issuer-alias" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client ID"
-				name={['oidcConfig', 'clientId']}
-				tooltip={{ title: `It is the application's ID.` }}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-client-id">
+							Client ID
+							<Tooltip title="The application's client ID from your OIDC provider.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientId']}
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Client ID is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-client-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client Secret"
-				name={['oidcConfig', 'clientSecret']}
-				tooltip={{ title: `It is the application's secret.` }}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-client-secret">
+							Client Secret
+							<Tooltip title="The application's client secret from your OIDC provider.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientSecret']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'Client Secret is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="oidc-client-secret" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Email Claim Mapping"
-				name={['oidcConfig', 'claimMapping', 'email']}
-				tooltip={{
-					title: `Mapping of email claims to the corresponding email field in the token.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['oidcConfig', 'insecureSkipEmailVerified']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="oidc-skip-email-verification"
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['oidcConfig', 'insecureSkipEmailVerified'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
+							<CircleHelp size={14} className="authn-provider__label-icon" />
+						</Tooltip>
+					</div>
 
-			<Form.Item
-				label="Skip Email Verification"
-				name={['oidcConfig', 'insecureSkipEmailVerified']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Whether to skip email verification. Defaults to "false"`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['oidcConfig', 'getUserInfo']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="oidc-get-user-info"
+								labelName="Get User Info"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(['oidcConfig', 'getUserInfo'], checked);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title="Use the userinfo endpoint to get additional claims. Useful when providers return thin ID tokens.">
+							<CircleHelp size={14} className="authn-provider__label-icon" />
+						</Tooltip>
+					</div>
 
-			<Form.Item
-				label="Get User Info"
-				name={['oidcConfig', 'getUserInfo']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Uses the userinfo endpoint to get additional claims for the token. This is especially useful where upstreams return "thin" id tokens`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="OIDC won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="OIDC won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+				{/* Right Column - Advanced Settings */}
+				<div className="authn-provider__right">
+					<ClaimMappingSection
+						fieldNamePrefix={['oidcConfig', 'claimMapping']}
+						isExpanded={expandedSection === 'claim-mapping'}
+						onExpandChange={handleClaimMappingChange}
+					/>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -1,82 +1,190 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox, Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { CircleHelp } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form, Tooltip } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+
+import AttributeMappingSection from './components/AttributeMappingSection';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'attribute-mapping' | 'role-mapping' | null;
+
 function ConfigureSAMLAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleAttributeMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'attribute-mapping' : null);
+	}, []);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
 	return (
-		<div className="saml">
-			<section className="header">
-				<Typography.Text className="title">
-					Edit SAML Authentication
-				</Typography.Text>
+		<div className="authn-provider">
+			<section className="authn-provider__header">
+				<h3 className="authn-provider__title">Edit SAML Authentication</h3>
+				<p className="authn-provider__description">
+					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
+					<a
+						href="https://signoz.io/docs/userguide/sso-authentication"
+						target="_blank"
+						rel="noreferrer"
+					>
+						docs
+					</a>{' '}
+					for more information.
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="authn-provider__columns">
+				{/* Left Column - Core SAML Settings */}
+				<div className="authn-provider__left">
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-domain">
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="saml-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML ACS URL"
-				name={['samlConfig', 'samlIdp']}
-				tooltip={{
-					title: `The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider. Example: <md:SingleSignOnService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST" Location="{samlIdp}"/>`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-acs-url">
+							SAML ACS URL
+							<Tooltip title="The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlIdp']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML ACS URL is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="saml-acs-url" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML Entity ID"
-				name={['samlConfig', 'samlEntity']}
-				tooltip={{
-					title: `The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata of the identity provider. Example: <md:EntityDescriptor xmlns:md="urn:oasis:names:tc:SAML:2.0:metadata" entityID="{samlEntity}">`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-entity-id">
+							SAML Entity ID
+							<Tooltip title="The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlEntity']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML Entity ID is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="saml-entity-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML X.509 Certificate"
-				name={['samlConfig', 'samlCert']}
-				tooltip={{
-					title: `The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata of the identity provider. Example: <ds:X509Certificate><ds:X509Certificate>{samlCert}</ds:X509Certificate></ds:X509Certificate>`,
-				}}
-			>
-				<Input.TextArea rows={4} />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-certificate">
+							SAML X.509 Certificate
+							<Tooltip title="The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata.">
+								<CircleHelp size={14} className="authn-provider__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlCert']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML Certificate is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<TextArea
+								id="saml-certificate"
+								rows={3}
+								placeholder="Paste X.509 certificate"
+								className="authn-provider__textarea"
+							/>
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Skip Signing AuthN Requests"
-				name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Whether to skip signing the SAML requests. It can typically be found in the WantAuthnRequestsSigned attribute of the IDPSSODescriptor element in the SAML metadata of the identity provider. Example: <md:IDPSSODescriptor WantAuthnRequestsSigned="false" protocolSupportEnumeration="urn:oasis:names:tc:SAML:2.0:protocol">
-					For providers like jumpcloud, this should be set to true.Note: This is the reverse of WantAuthnRequestsSigned. If WantAuthnRequestsSigned is false, then InsecureSkipAuthNRequestsSigned should be true.`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="saml-skip-signing"
+								labelName="Skip Signing AuthN Requests"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['samlConfig', 'insecureSkipAuthNRequestsSigned'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title="Whether to skip signing the SAML requests. For providers like JumpCloud, this should be enabled.">
+							<CircleHelp size={14} className="authn-provider__label-icon" />
+						</Tooltip>
+					</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="SAML won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="SAML won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
+
+				{/* Right Column - Advanced Settings */}
+				<div className="authn-provider__right">
+					<AttributeMappingSection
+						fieldNamePrefix={['samlConfig', 'attributeMapping']}
+						isExpanded={expandedSection === 'attribute-mapping'}
+						onExpandChange={handleAttributeMappingChange}
+					/>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/Providers.styles.scss

@@ -1,24 +1,246 @@
-.google-auth {
+.authn-provider {
 	display: flex;
 	flex-direction: column;
 
-	.ant-form-item {
-		margin-bottom: 12px !important;
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		margin-bottom: 16px;
 	}
 
-	.header {
+	&__title {
+		margin: 0;
+		color: var(--l1-foreground);
+		font-family: 'Inter', sans-serif;
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+	}
+
+	&__description {
+		margin: 0;
+		color: var(--l2-foreground);
+		font-family: 'Inter', sans-serif;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+
+		a {
+			color: var(--accent-primary);
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&__columns {
+		display: grid;
+		grid-template-columns: 0.9fr 1fr;
+		gap: 24px;
+	}
+
+	&__left {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__right {
+		border-left: 1px solid var(--l3-border);
+		padding-left: 24px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__field-group {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
 		margin-bottom: 12px;
+	}
 
-		.title {
-			font-weight: bold;
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	&__checkbox-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin-bottom: 12px;
+	}
+
+	input,
+	textarea {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
 		}
 
-		.description {
-			margin-bottom: 0px !important;
+		&:hover {
+			border-color: var(--l3-border) !important;
 		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+
+	textarea {
+		height: auto;
+	}
+	&__textarea {
+		min-height: 60px !important;
+		max-height: 200px;
+		resize: vertical;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+		font-family: 'SF Mono', monospace;
+		font-size: 12px;
+		line-height: 18px;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			font-family: Inter, sans-serif;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+
+	button[role='checkbox'] {
+		border: 1px solid var(--l2-foreground) !important;
+		border-radius: 2px;
+
+		&[data-state='checked'] {
+			background-color: var(--bg-robin-500) !important;
+			border-color: var(--bg-robin-500) !important;
+		}
+	}
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__group-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	&__group-fields {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		.authn-provider__field-group,
+		.authn-provider__checkbox-row {
+			margin-bottom: 0;
+		}
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
 	}
 
 	.callout {

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.styles.scss

@@ -0,0 +1,134 @@
+.attribute-mapping-section {
+	display: flex;
+	flex-direction: column;
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import './AttributeMappingSection.styles.scss';
+
+interface AttributeMappingSectionProps {
+	/** The form field name prefix for the attribute mapping configuration */
+	fieldNamePrefix: string[];
+	/** Whether the section is expanded (controlled mode) */
+	isExpanded?: boolean;
+	/** Callback when expand/collapse is toggled */
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function AttributeMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: AttributeMappingSectionProps): JSX.Element {
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['attribute-mapping'] : [];
+	const { hasErrors, errorMessages } = useCollapseSectionErrors(fieldNamePrefix);
+
+	return (
+		<div className="attribute-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="attribute-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="attribute-mapping"
+					header={
+						<div
+							className="attribute-mapping-section__collapse-header"
+							role="button"
+							aria-expanded={expanded}
+							aria-controls="attribute-mapping-content"
+						>
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="attribute-mapping-section__collapse-header-text">
+								<h4 className="attribute-mapping-section__section-title">
+									Attribute Mapping (Advanced)
+								</h4>
+								<p className="attribute-mapping-section__section-description">
+									Configure how SAML assertion attributes from your Identity Provider map
+									to SigNoz user attributes. Leave empty to use default values.
+								</p>
+							</div>
+							{!expanded && hasErrors && (
+								<Tooltip
+									title={
+										<div>
+											{errorMessages.map((msg) => (
+												<div key={msg}>{msg}</div>
+											))}
+										</div>
+									}
+								>
+									<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+								</Tooltip>
+							)}
+						</div>
+					}
+				>
+					<div
+						id="attribute-mapping-content"
+						className="attribute-mapping-section__content"
+					>
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="email-attribute"
+							>
+								Email Attribute
+								<Tooltip title="The SAML attribute key that contains the user's email. Default: 'email'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'email']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="email-attribute" placeholder="Email" />
+							</Form.Item>
+						</div>
+
+						{/* Name Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="name-attribute"
+							>
+								Name Attribute
+								<Tooltip title="The SAML attribute key that contains the user's display name. Default: 'name'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="name-attribute" placeholder="Name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="groups-attribute"
+							>
+								Groups Attribute
+								<Tooltip title="The SAML attribute key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="groups-attribute" placeholder="Groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="role-attribute"
+							>
+								Role Attribute
+								<Tooltip title="The SAML attribute key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="role-attribute" placeholder="Role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default AttributeMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.styles.scss

@@ -0,0 +1,134 @@
+.claim-mapping-section {
+	display: flex;
+	flex-direction: column;
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.tsx

@@ -0,0 +1,164 @@
+import { useCallback, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import './ClaimMappingSection.styles.scss';
+
+interface ClaimMappingSectionProps {
+	/** The form field name prefix for the claim mapping configuration */
+	fieldNamePrefix: string[];
+	/** Whether the section is expanded (controlled mode) */
+	isExpanded?: boolean;
+	/** Callback when expand/collapse is toggled */
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function ClaimMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: ClaimMappingSectionProps): JSX.Element {
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['claim-mapping'] : [];
+	const { hasErrors, errorMessages } = useCollapseSectionErrors(fieldNamePrefix);
+
+	return (
+		<div className="claim-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="claim-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="claim-mapping"
+					header={
+						<div
+							className="claim-mapping-section__collapse-header"
+							role="button"
+							aria-expanded={expanded}
+							aria-controls="claim-mapping-content"
+						>
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="claim-mapping-section__collapse-header-text">
+								<h4 className="claim-mapping-section__section-title">
+									Claim Mapping (Advanced)
+								</h4>
+								<p className="claim-mapping-section__section-description">
+									Configure how claims from your Identity Provider map to SigNoz user
+									attributes. Leave empty to use default values.
+								</p>
+							</div>
+							{!expanded && hasErrors && (
+								<Tooltip
+									title={
+										<div>
+											{errorMessages.map((msg) => (
+												<div key={msg}>{msg}</div>
+											))}
+										</div>
+									}
+								>
+									<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+								</Tooltip>
+							)}
+						</div>
+					}
+				>
+					<div id="claim-mapping-content" className="claim-mapping-section__content">
+						{/* Email Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="email-claim">
+								Email Claim
+								<Tooltip title="The claim key that contains the user's email address. Default: 'email'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'email']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="email-claim" placeholder="Email" />
+							</Form.Item>
+						</div>
+
+						{/* Name Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="name-claim">
+								Name Claim
+								<Tooltip title="The claim key that contains the user's display name. Default: 'name'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="name-claim" placeholder="Name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="groups-claim">
+								Groups Claim
+								<Tooltip title="The claim key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="groups-claim" placeholder="Groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="role-claim">
+								Role Claim
+								<Tooltip title="The claim key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="role-claim" placeholder="Role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default ClaimMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.styles.scss

@@ -0,0 +1,103 @@
+.domain-mapping-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-bottom: 4px;
+	}
+
+	&__title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+	}
+
+	&__field {
+		flex: 1;
+	}
+
+	&__remove-btn {
+		flex-shrink: 0;
+		width: 32px !important;
+		height: 32px !important;
+		min-width: 32px !important;
+		padding: 0 !important;
+		border: none !important;
+		border-radius: 2px !important;
+		background: transparent !important;
+		color: var(--bg-cherry-500) !important;
+		opacity: 0.6 !important;
+		cursor: pointer;
+		transition: background-color 0.2s, opacity 0.2s;
+		box-shadow: none !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			color: var(--bg-cherry-500) !important;
+			width: 12px !important;
+			height: 12px !important;
+		}
+
+		&:hover {
+			background: rgba(229, 72, 77, 0.1) !important;
+			opacity: 0.9 !important;
+			color: var(--bg-cherry-500) !important;
+
+			svg {
+				color: var(--bg-cherry-500) !important;
+			}
+		}
+
+		&:active {
+			opacity: 0.7 !important;
+			background: rgba(229, 72, 77, 0.15) !important;
+		}
+	}
+
+	&__add-btn {
+		width: 100%;
+
+		// Ensure icon is visible
+		svg,
+		[class*='icon'] {
+			color: var(--l2-foreground) !important;
+			display: inline-block !important;
+			opacity: 1 !important;
+		}
+
+		&:hover {
+			color: var(--l1-foreground);
+
+			svg,
+			[class*='icon'] {
+				color: var(--l1-foreground) !important;
+			}
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.tsx

@@ -0,0 +1,88 @@
+import { Button } from '@signozhq/button';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form } from 'antd';
+
+import './DomainMappingList.styles.scss';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const validateEmail = (_: unknown, value: string): Promise<void> => {
+	if (!value) {
+		return Promise.reject(new Error('Admin email is required'));
+	}
+	if (!EMAIL_REGEX.test(value)) {
+		return Promise.reject(new Error('Please enter a valid email'));
+	}
+	return Promise.resolve();
+};
+
+interface DomainMappingListProps {
+	/** The form field name prefix for the domain mapping list */
+	fieldNamePrefix: string[];
+}
+
+function DomainMappingList({
+	fieldNamePrefix,
+}: DomainMappingListProps): JSX.Element {
+	return (
+		<div className="domain-mapping-list">
+			<div className="domain-mapping-list__header">
+				<span className="domain-mapping-list__title">
+					Domain to Admin Email Mapping
+				</span>
+				<p className="domain-mapping-list__description">
+					Map workspace domains to admin emails for service account impersonation.
+					Use &quot;*&quot; as a wildcard for any domain.
+				</p>
+			</div>
+
+			<Form.List name={fieldNamePrefix}>
+				{(fields, { add, remove }): JSX.Element => (
+					<div className="domain-mapping-list__items">
+						{fields.map((field) => (
+							<div key={field.key} className="domain-mapping-list__row">
+								<Form.Item
+									name={[field.name, 'domain']}
+									className="domain-mapping-list__field"
+									rules={[{ required: true, message: 'Domain is required' }]}
+								>
+									<Input placeholder="Domain (e.g., example.com or *)" />
+								</Form.Item>
+
+								<Form.Item
+									name={[field.name, 'adminEmail']}
+									className="domain-mapping-list__field"
+									rules={[{ validator: validateEmail }]}
+								>
+									<Input placeholder="Admin Email" />
+								</Form.Item>
+
+								<Button
+									variant="ghost"
+									color="secondary"
+									className="domain-mapping-list__remove-btn"
+									onClick={(): void => remove(field.name)}
+									aria-label="Remove mapping"
+								>
+									<Trash2 size={12} />
+								</Button>
+							</div>
+						))}
+
+						<Button
+							variant="dashed"
+							onClick={(): void => add({ domain: '', adminEmail: '' })}
+							prefixIcon={<Plus size={14} />}
+							className="domain-mapping-list__add-btn"
+						>
+							Add Domain Mapping
+						</Button>
+					</div>
+				)}
+			</Form.List>
+		</div>
+	);
+}
+
+export default DomainMappingList;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.styles.scss

@@ -0,0 +1,28 @@
+.email-tag-input {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+
+	&__select {
+		width: 100%;
+
+		.ant-select-selector {
+			.ant-select-selection-search {
+				input {
+					height: 32px !important;
+					border: none !important;
+					background: transparent !important;
+					padding: 0 !important;
+					margin: 0 !important;
+					box-shadow: none !important;
+					font-family: inherit !important;
+				}
+			}
+		}
+	}
+
+	&__error {
+		margin: 0;
+		color: var(--bg-cherry-500);
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useState } from 'react';
+import { Select, Tooltip } from 'antd';
+
+import './EmailTagInput.styles.scss';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface EmailTagInputProps {
+	/** Current value (array of email strings) */
+	value?: string[];
+	/** Change handler */
+	onChange?: (value: string[]) => void;
+	/** Placeholder text */
+	placeholder?: string;
+}
+
+function EmailTagInput({
+	value = [],
+	onChange,
+	placeholder = 'Type an email and press Enter',
+}: EmailTagInputProps): JSX.Element {
+	const [validationError, setValidationError] = useState('');
+
+	const handleChange = useCallback(
+		(newValues: string[]): void => {
+			const addedValues = newValues.filter((v) => !value.includes(v));
+			const invalidEmail = addedValues.find((v) => !EMAIL_REGEX.test(v));
+
+			if (invalidEmail) {
+				setValidationError(`"${invalidEmail}" is not a valid email`);
+				return;
+			}
+			setValidationError('');
+			onChange?.(newValues);
+		},
+		[onChange, value],
+	);
+
+	return (
+		<div className="email-tag-input">
+			<Tooltip
+				title={validationError}
+				open={!!validationError}
+				placement="topRight"
+			>
+				<Select
+					mode="tags"
+					value={value}
+					onChange={handleChange}
+					placeholder={placeholder}
+					tokenSeparators={[',', ' ']}
+					className="email-tag-input__select"
+					allowClear
+					status={validationError ? 'error' : undefined}
+				/>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default EmailTagInput;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.styles.scss

@@ -0,0 +1,294 @@
+.role-mapping-section {
+	display: flex;
+	flex-direction: column;
+	margin-top: 24px;
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	&__checkbox-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__select {
+		width: 100%;
+
+		&.ant-select {
+			.ant-select-selector {
+				height: 32px;
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l3-border) !important;
+				border-radius: 2px;
+				color: var(--l1-foreground) !important;
+
+				.ant-select-selection-item {
+					color: var(--l1-foreground) !important;
+				}
+			}
+
+			&:hover .ant-select-selector {
+				border-color: var(--l3-border) !important;
+			}
+
+			&.ant-select-focused .ant-select-selector {
+				border-color: var(--bg-robin-500) !important;
+				box-shadow: none !important;
+			}
+
+			.ant-select-arrow {
+				color: var(--l3-foreground);
+			}
+		}
+	}
+
+	&__group-mappings {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__group-header {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-bottom: 4px;
+	}
+
+	&__group-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__group-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+	}
+
+	&__field {
+		&--group {
+			flex: 2;
+		}
+
+		&--role {
+			flex: 1;
+			min-width: 120px;
+		}
+	}
+
+	&__remove-btn {
+		flex-shrink: 0;
+		width: 32px !important;
+		height: 32px !important;
+		min-width: 32px !important;
+		padding: 0 !important;
+		border: none !important;
+		border-radius: 2px !important;
+		background: transparent !important;
+		color: var(--bg-cherry-500) !important;
+		opacity: 0.6 !important;
+		cursor: pointer;
+		transition: background-color 0.2s, opacity 0.2s;
+		box-shadow: none !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			color: var(--bg-cherry-500) !important;
+			width: 12px !important;
+			height: 12px !important;
+		}
+
+		&:hover {
+			background: rgba(229, 72, 77, 0.1) !important;
+			opacity: 0.9 !important;
+			color: var(--bg-cherry-500) !important;
+
+			svg {
+				color: var(--bg-cherry-500) !important;
+			}
+		}
+
+		&:active {
+			opacity: 0.7 !important;
+			background: rgba(229, 72, 77, 0.15) !important;
+		}
+	}
+
+	&__add-btn {
+		width: 100%;
+
+		// Ensure icon is visible
+		svg,
+		[class*='icon'] {
+			color: var(--l2-foreground) !important;
+			display: inline-block !important;
+			opacity: 1 !important;
+		}
+
+		&:hover {
+			color: var(--l1-foreground);
+
+			svg,
+			[class*='icon'] {
+				color: var(--l1-foreground) !important;
+			}
+		}
+	}
+
+	// --- Checkbox border visibility ---
+	button[role='checkbox'] {
+		border: 1px solid var(--l2-foreground) !important;
+		border-radius: 2px;
+
+		&[data-state='checked'] {
+			background-color: var(--bg-robin-500) !important;
+			border-color: var(--bg-robin-500) !important;
+		}
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx

@@ -0,0 +1,222 @@
+import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Checkbox } from '@signozhq/checkbox';
+import { Color } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	Plus,
+	Trash2,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Select, Tooltip } from 'antd';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import './RoleMappingSection.styles.scss';
+
+const ROLE_OPTIONS = [
+	{ value: 'VIEWER', label: 'VIEWER' },
+	{ value: 'EDITOR', label: 'EDITOR' },
+	{ value: 'ADMIN', label: 'ADMIN' },
+];
+
+interface RoleMappingSectionProps {
+	/** The form field name prefix for the role mapping configuration */
+	fieldNamePrefix: string[];
+	/** Whether the section is expanded (controlled mode) */
+	isExpanded?: boolean;
+	/** Callback when expand/collapse is toggled */
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function RoleMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: RoleMappingSectionProps): JSX.Element {
+	const form = Form.useFormInstance();
+	const useRoleAttribute = Form.useWatch(
+		[...fieldNamePrefix, 'useRoleAttribute'],
+		form,
+	);
+
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['role-mapping'] : [];
+	const { hasErrors, errorMessages } = useCollapseSectionErrors(fieldNamePrefix);
+
+	return (
+		<div className="role-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="role-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="role-mapping"
+					header={
+						<div
+							className="role-mapping-section__collapse-header"
+							role="button"
+							aria-expanded={expanded}
+							aria-controls="role-mapping-content"
+						>
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="role-mapping-section__collapse-header-text">
+								<h4 className="role-mapping-section__section-title">
+									Role Mapping (Advanced)
+								</h4>
+								<p className="role-mapping-section__section-description">
+									Configure how user roles are determined from your Identity Provider.
+									You can either use a direct role attribute or map IDP groups to SigNoz
+									roles.
+								</p>
+							</div>
+							{!expanded && hasErrors && (
+								<Tooltip
+									title={
+										<div>
+											{errorMessages.map((msg) => (
+												<div key={msg}>{msg}</div>
+											))}
+										</div>
+									}
+								>
+									<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+								</Tooltip>
+							)}
+						</div>
+					}
+				>
+					<div id="role-mapping-content" className="role-mapping-section__content">
+						{/* Default Role */}
+						<div className="role-mapping-section__field-group">
+							<label className="role-mapping-section__label" htmlFor="default-role">
+								Default Role
+								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "VIEWER"'>
+									<CircleHelp size={14} className="role-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'defaultRole']}
+								className="role-mapping-section__form-item"
+								initialValue="VIEWER"
+							>
+								<Select
+									id="default-role"
+									options={ROLE_OPTIONS}
+									className="role-mapping-section__select"
+								/>
+							</Form.Item>
+						</div>
+
+						{/* Use Role Attribute */}
+						<div className="role-mapping-section__checkbox-row">
+							<Form.Item
+								name={[...fieldNamePrefix, 'useRoleAttribute']}
+								valuePropName="checked"
+								noStyle
+							>
+								<Checkbox
+									id="use-role-attribute"
+									labelName="Use Role Attribute Directly"
+									onCheckedChange={(checked: boolean): void => {
+										form.setFieldValue([...fieldNamePrefix, 'useRoleAttribute'], checked);
+									}}
+								/>
+							</Form.Item>
+							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
+								<CircleHelp size={14} className="role-mapping-section__label-icon" />
+							</Tooltip>
+						</div>
+
+						{/* Group to Role Mappings - only show when useRoleAttribute is false */}
+						{!useRoleAttribute && (
+							<div className="role-mapping-section__group-mappings">
+								<div className="role-mapping-section__group-header">
+									<span className="role-mapping-section__group-title">
+										Group to Role Mappings
+									</span>
+									<p className="role-mapping-section__group-description">
+										Map IDP group names to SigNoz roles. If a user belongs to multiple
+										groups, the highest privilege role will be assigned.
+									</p>
+								</div>
+
+								<Form.List name={[...fieldNamePrefix, 'groupMappingsList']}>
+									{(fields, { add, remove }): JSX.Element => (
+										<div className="role-mapping-section__items">
+											{fields.map((field) => (
+												<div key={field.key} className="role-mapping-section__row">
+													<Form.Item
+														name={[field.name, 'groupName']}
+														className="role-mapping-section__field role-mapping-section__field--group"
+														rules={[{ required: true, message: 'Group name is required' }]}
+													>
+														<Input placeholder="IDP Group Name" />
+													</Form.Item>
+
+													<Form.Item
+														name={[field.name, 'role']}
+														className="role-mapping-section__field role-mapping-section__field--role"
+														rules={[{ required: true, message: 'Role is required' }]}
+														initialValue="VIEWER"
+													>
+														<Select
+															options={ROLE_OPTIONS}
+															className="role-mapping-section__select"
+														/>
+													</Form.Item>
+
+													<Button
+														variant="ghost"
+														color="secondary"
+														className="role-mapping-section__remove-btn"
+														onClick={(): void => remove(field.name)}
+														aria-label="Remove mapping"
+													>
+														<Trash2 size={12} />
+													</Button>
+												</div>
+											))}
+
+											<Button
+												variant="dashed"
+												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
+												prefixIcon={<Plus size={14} />}
+												className="role-mapping-section__add-btn"
+											>
+												Add Group Mapping
+											</Button>
+										</div>
+									)}
+								</Form.List>
+							</div>
+						)}
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default RoleMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/Toggle.tsx

@@ -1,45 +1,74 @@
-import { useState } from 'react';
-import { Switch } from 'antd';
-import put from 'api/v1/domains/id/put';
+import { useEffect, useState } from 'react';
+import { Switch } from '@signozhq/switch';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { useUpdateAuthDomain } from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
-
-function Toggle({ isDefaultChecked, record }: ToggleProps): JSX.Element {
-	const [isChecked, setIsChecked] = useState<boolean>(isDefaultChecked);
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-	const { showErrorModal } = useErrorModal();
-
-	const onChangeHandler = async (checked: boolean): Promise<void> => {
-		setIsLoading(true);
-
-		try {
-			await put({
-				id: record.id,
-				config: {
-					ssoEnabled: checked,
-					ssoType: record.ssoType,
-					googleAuthConfig: record.googleAuthConfig,
-					oidcConfig: record.oidcConfig,
-					samlConfig: record.samlConfig,
-				},
-			});
-			setIsChecked(checked);
-		} catch (error) {
-			showErrorModal(error as APIError);
-		}
-
-		setIsLoading(false);
-	};
-
-	return (
-		<Switch loading={isLoading} checked={isChecked} onChange={onChangeHandler} />
-	);
-}
 
 interface ToggleProps {
 	isDefaultChecked: boolean;
-	record: GettableAuthDomain;
+	record: AuthtypesGettableAuthDomainDTO;
+}
+
+function Toggle({ isDefaultChecked, record }: ToggleProps): JSX.Element {
+	const [isChecked, setIsChecked] = useState<boolean>(isDefaultChecked);
+	const { showErrorModal } = useErrorModal();
+
+	useEffect(() => {
+		setIsChecked(isDefaultChecked);
+	}, [isDefaultChecked]);
+
+	const { mutate: updateAuthDomain, isLoading } = useUpdateAuthDomain<
+		AxiosError<RenderErrorResponseDTO>
+	>();
+
+	const onChangeHandler = (checked: boolean): void => {
+		if (!record.id) {
+			return;
+		}
+
+		setIsChecked(checked);
+
+		updateAuthDomain(
+			{
+				pathParams: { id: record.id },
+				data: {
+					config: {
+						ssoEnabled: checked,
+						ssoType: record.ssoType,
+						googleAuthConfig: record.googleAuthConfig,
+						oidcConfig: record.oidcConfig,
+						samlConfig: record.samlConfig,
+						roleMapping: record.roleMapping,
+					},
+				},
+			},
+			{
+				onError: (error) => {
+					setIsChecked(!checked);
+					try {
+						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+					} catch (apiError) {
+						showErrorModal(apiError as APIError);
+					}
+				},
+			},
+		);
+	};
+
+	return (
+		<Switch
+			disabled={isLoading}
+			checked={isChecked}
+			onCheckedChange={onChangeHandler}
+		/>
+	);
 }
 
 export default Toggle;

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/AuthDomain.test.tsx

@@ -0,0 +1,142 @@
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import AuthDomain from '../index';
+import {
+	AUTH_DOMAINS_LIST_ENDPOINT,
+	mockDomainsListResponse,
+	mockEmptyDomainsResponse,
+	mockErrorResponse,
+} from './mocks';
+
+const successNotification = jest.fn();
+jest.mock('hooks/useNotifications', () => ({
+	__esModule: true,
+	useNotifications: jest.fn(() => ({
+		notifications: {
+			success: successNotification,
+			error: jest.fn(),
+		},
+	})),
+}));
+
+describe('AuthDomain', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	describe('List View', () => {
+		it('renders page header and add button', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockEmptyDomainsResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			expect(screen.getByText(/authenticated domains/i)).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', { name: /add domain/i }),
+			).toBeInTheDocument();
+		});
+
+		it('renders list of auth domains successfully', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockDomainsListResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(screen.getByText('signoz.io')).toBeInTheDocument();
+				expect(screen.getByText('example.com')).toBeInTheDocument();
+				expect(screen.getByText('corp.io')).toBeInTheDocument();
+			});
+		});
+
+		it('renders empty state when no domains exist', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockEmptyDomainsResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(screen.getByText(/no data/i)).toBeInTheDocument();
+			});
+		});
+
+		it('displays error content when API fails', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(500), ctx.json(mockErrorResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(
+					screen.getByText(/failed to perform operation/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Add Domain', () => {
+		it('opens create modal when Add Domain button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockEmptyDomainsResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			const addButton = await screen.findByRole('button', { name: /add domain/i });
+			await user.click(addButton);
+
+			await waitFor(() => {
+				expect(
+					screen.getByText(/configure authentication method/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Configure Domain', () => {
+		it('opens edit modal when configure action is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockDomainsListResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(screen.getByText('signoz.io')).toBeInTheDocument();
+			});
+
+			const configureLinks = await screen.findAllByText(/configure google auth/i);
+			await user.click(configureLinks[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+			});
+		});
+	});
+});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.test.tsx

@@ -0,0 +1,354 @@
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import CreateEdit from '../CreateEdit/CreateEdit';
+import {
+	mockDomainWithRoleMapping,
+	mockGoogleAuthDomain,
+	mockGoogleAuthWithWorkspaceGroups,
+	mockOidcAuthDomain,
+	mockOidcWithClaimMapping,
+	mockSamlAuthDomain,
+	mockSamlWithAttributeMapping,
+} from './mocks';
+
+const mockOnClose = jest.fn();
+
+describe('CreateEdit Modal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('Provider Selection (Create Mode)', () => {
+		it('renders provider selection when creating new domain', () => {
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			expect(
+				screen.getByText(/configure authentication method/i),
+			).toBeInTheDocument();
+			expect(screen.getByText(/google apps authentication/i)).toBeInTheDocument();
+			expect(screen.getByText(/saml authentication/i)).toBeInTheDocument();
+			expect(screen.getByText(/oidc authentication/i)).toBeInTheDocument();
+		});
+
+		it('returns to provider selection when back button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+			});
+
+			const backButton = screen.getByRole('button', { name: /back/i });
+			await user.click(backButton);
+
+			await waitFor(() => {
+				expect(
+					screen.getByText(/configure authentication method/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Edit Mode', () => {
+		it('shows provider form directly when editing existing domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+			expect(
+				screen.queryByText(/configure authentication method/i),
+			).not.toBeInTheDocument();
+		});
+
+		it('pre-fills form with existing domain values', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByDisplayValue('signoz.io')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('test-client-id')).toBeInTheDocument();
+		});
+
+		it('disables domain field when editing', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const domainInput = screen.getByDisplayValue('signoz.io');
+			expect(domainInput).toBeDisabled();
+		});
+
+		it('shows cancel button instead of back when editing', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', { name: /back/i }),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Form Validation', () => {
+		it('shows validation error when submitting without required fields', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			const saveButton = await screen.findByRole('button', {
+				name: /save changes/i,
+			});
+			await user.click(saveButton);
+
+			await waitFor(() => {
+				expect(screen.getByText(/domain is required/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Google Auth Provider', () => {
+		it('shows Google Auth form fields', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/domain/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/client id/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/client secret/i)).toBeInTheDocument();
+				expect(screen.getByText(/skip email verification/i)).toBeInTheDocument();
+			});
+		});
+
+		it('shows workspace groups section when expanded', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthWithWorkspaceGroups}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const workspaceHeader = screen.getByText(/google workspace groups/i);
+			await user.click(workspaceHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/fetch groups/i)).toBeInTheDocument();
+				expect(screen.getByText(/service account json/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('SAML Provider', () => {
+		it('shows SAML-specific fields when editing SAML domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockSamlAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit saml authentication/i)).toBeInTheDocument();
+			expect(
+				screen.getByDisplayValue('https://idp.example.com/sso'),
+			).toBeInTheDocument();
+			expect(screen.getByDisplayValue('urn:example:idp')).toBeInTheDocument();
+		});
+
+		it('shows attribute mapping section for SAML', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockSamlWithAttributeMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(
+				screen.getByText(/attribute mapping \(advanced\)/i),
+			).toBeInTheDocument();
+
+			const attributeHeader = screen.getByText(/attribute mapping \(advanced\)/i);
+			await user.click(attributeHeader);
+
+			await waitFor(() => {
+				expect(screen.getByLabelText(/name attribute/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/groups attribute/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/role attribute/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('OIDC Provider', () => {
+		it('shows OIDC-specific fields when editing OIDC domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit oidc authentication/i)).toBeInTheDocument();
+			expect(screen.getByDisplayValue('https://oidc.corp.io')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('oidc-client-id')).toBeInTheDocument();
+		});
+
+		it('shows claim mapping section for OIDC', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcWithClaimMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/claim mapping \(advanced\)/i)).toBeInTheDocument();
+
+			const claimHeader = screen.getByText(/claim mapping \(advanced\)/i);
+			await user.click(claimHeader);
+
+			await waitFor(() => {
+				expect(screen.getByLabelText(/email claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/name claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/groups claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/role claim/i)).toBeInTheDocument();
+			});
+		});
+
+		it('shows OIDC options checkboxes', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/skip email verification/i)).toBeInTheDocument();
+			expect(screen.getByText(/get user info/i)).toBeInTheDocument();
+		});
+	});
+
+	describe('Role Mapping', () => {
+		it('shows role mapping section in provider forms', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/role mapping \(advanced\)/i)).toBeInTheDocument();
+			});
+		});
+
+		it('expands role mapping section to show default role selector', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockDomainWithRoleMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const roleMappingHeader = screen.getByText(/role mapping \(advanced\)/i);
+			await user.click(roleMappingHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/default role/i)).toBeInTheDocument();
+				expect(
+					screen.getByText(/use role attribute directly/i),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows group mappings section when useRoleAttribute is false', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockDomainWithRoleMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const roleMappingHeader = screen.getByText(/role mapping \(advanced\)/i);
+			await user.click(roleMappingHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/group to role mappings/i)).toBeInTheDocument();
+				expect(
+					screen.getByRole('button', { name: /add group mapping/i }),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Modal Actions', () => {
+		it('calls onClose when cancel button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const cancelButton = screen.getByRole('button', { name: /cancel/i });
+			await user.click(cancelButton);
+
+			expect(mockOnClose).toHaveBeenCalled();
+		});
+	});
+});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/Toggle.test.tsx

@@ -0,0 +1,115 @@
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import Toggle from '../Toggle';
+import {
+	AUTH_DOMAINS_UPDATE_ENDPOINT,
+	mockErrorResponse,
+	mockGoogleAuthDomain,
+	mockUpdateSuccessResponse,
+} from './mocks';
+
+describe('Toggle', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders switch with correct initial state', () => {
+		render(<Toggle isDefaultChecked={true} record={mockGoogleAuthDomain} />);
+
+		const switchElement = screen.getByRole('switch');
+		expect(switchElement).toBeChecked();
+	});
+
+	it('renders unchecked switch when SSO is disabled', () => {
+		render(
+			<Toggle
+				isDefaultChecked={false}
+				record={{ ...mockGoogleAuthDomain, ssoEnabled: false }}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+		expect(switchElement).not.toBeChecked();
+	});
+
+	it('calls update API when toggle is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockUpdateAPI = jest.fn();
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
+				const body = await req.json();
+				mockUpdateAPI(body);
+				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
+			}),
+		);
+
+		render(<Toggle isDefaultChecked={true} record={mockGoogleAuthDomain} />);
+
+		const switchElement = screen.getByRole('switch');
+		await user.click(switchElement);
+
+		await waitFor(() => {
+			expect(switchElement).not.toBeChecked();
+		});
+
+		expect(mockUpdateAPI).toHaveBeenCalledTimes(1);
+		expect(mockUpdateAPI).toHaveBeenCalledWith(
+			expect.objectContaining({
+				config: expect.objectContaining({
+					ssoEnabled: false,
+				}),
+			}),
+		);
+	});
+
+	it('shows error modal when update fails', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(500), ctx.json(mockErrorResponse)),
+			),
+		);
+
+		render(<Toggle isDefaultChecked={true} record={mockGoogleAuthDomain} />);
+
+		const switchElement = screen.getByRole('switch');
+		await user.click(switchElement);
+
+		await waitFor(() => {
+			expect(screen.getByText(/failed to perform operation/i)).toBeInTheDocument();
+		});
+	});
+
+	it('does not call API when record has no id', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let apiCalled = false;
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, (_, res, ctx) => {
+				apiCalled = true;
+				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
+			}),
+		);
+
+		render(
+			<Toggle
+				isDefaultChecked={true}
+				record={{ ...mockGoogleAuthDomain, id: undefined }}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+		await user.click(switchElement);
+
+		// Wait a bit to ensure no API call was made
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		expect(apiCalled).toBe(false);
+	});
+});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/mocks.ts

@@ -0,0 +1,220 @@
+import { AuthtypesGettableAuthDomainDTO } from 'api/generated/services/sigNoz.schemas';
+
+// API Endpoints
+export const AUTH_DOMAINS_LIST_ENDPOINT = '*/api/v1/domains';
+export const AUTH_DOMAINS_CREATE_ENDPOINT = '*/api/v1/domains';
+export const AUTH_DOMAINS_UPDATE_ENDPOINT = '*/api/v1/domains/:id';
+export const AUTH_DOMAINS_DELETE_ENDPOINT = '*/api/v1/domains/:id';
+
+// Mock Auth Domain with Google Auth
+export const mockGoogleAuthDomain: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-1',
+	name: 'signoz.io',
+	ssoEnabled: true,
+	ssoType: 'google_auth',
+	googleAuthConfig: {
+		clientId: 'test-client-id',
+		clientSecret: 'test-client-secret',
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-1',
+	},
+};
+
+// Mock Auth Domain with SAML
+export const mockSamlAuthDomain: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-2',
+	name: 'example.com',
+	ssoEnabled: false,
+	ssoType: 'saml',
+	samlConfig: {
+		samlIdp: 'https://idp.example.com/sso',
+		samlEntity: 'urn:example:idp',
+		samlCert: 'MOCK_CERTIFICATE',
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-2',
+	},
+};
+
+// Mock Auth Domain with OIDC
+export const mockOidcAuthDomain: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-3',
+	name: 'corp.io',
+	ssoEnabled: true,
+	ssoType: 'oidc',
+	oidcConfig: {
+		issuer: 'https://oidc.corp.io',
+		clientId: 'oidc-client-id',
+		clientSecret: 'oidc-client-secret',
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-3',
+	},
+};
+
+// Mock Auth Domain with Role Mapping
+export const mockDomainWithRoleMapping: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-4',
+	name: 'enterprise.com',
+	ssoEnabled: true,
+	ssoType: 'saml',
+	samlConfig: {
+		samlIdp: 'https://idp.enterprise.com/sso',
+		samlEntity: 'urn:enterprise:idp',
+		samlCert: 'MOCK_CERTIFICATE',
+	},
+	roleMapping: {
+		defaultRole: 'EDITOR',
+		useRoleAttribute: false,
+		groupMappings: {
+			'admin-group': 'ADMIN',
+			'dev-team': 'EDITOR',
+			viewers: 'VIEWER',
+		},
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-4',
+	},
+};
+
+// Mock Auth Domain with useRoleAttribute enabled
+export const mockDomainWithDirectRoleAttribute: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-5',
+	name: 'direct-role.com',
+	ssoEnabled: true,
+	ssoType: 'oidc',
+	oidcConfig: {
+		issuer: 'https://oidc.direct-role.com',
+		clientId: 'direct-role-client-id',
+		clientSecret: 'direct-role-client-secret',
+	},
+	roleMapping: {
+		defaultRole: 'VIEWER',
+		useRoleAttribute: true,
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-5',
+	},
+};
+
+// Mock OIDC domain with claim mapping
+export const mockOidcWithClaimMapping: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-6',
+	name: 'oidc-claims.com',
+	ssoEnabled: true,
+	ssoType: 'oidc',
+	oidcConfig: {
+		issuer: 'https://oidc.claims.com',
+		issuerAlias: 'https://alias.claims.com',
+		clientId: 'claims-client-id',
+		clientSecret: 'claims-client-secret',
+		insecureSkipEmailVerified: true,
+		getUserInfo: true,
+		claimMapping: {
+			email: 'user_email',
+			name: 'display_name',
+			groups: 'user_groups',
+			role: 'user_role',
+		},
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-6',
+	},
+};
+
+// Mock SAML domain with attribute mapping
+export const mockSamlWithAttributeMapping: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-7',
+	name: 'saml-attrs.com',
+	ssoEnabled: true,
+	ssoType: 'saml',
+	samlConfig: {
+		samlIdp: 'https://idp.saml-attrs.com/sso',
+		samlEntity: 'urn:saml-attrs:idp',
+		samlCert: 'MOCK_CERTIFICATE_ATTRS',
+		insecureSkipAuthNRequestsSigned: true,
+		attributeMapping: {
+			name: 'user_display_name',
+			groups: 'member_of',
+			role: 'signoz_role',
+		},
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-7',
+	},
+};
+
+// Mock Google Auth with workspace groups
+export const mockGoogleAuthWithWorkspaceGroups: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-8',
+	name: 'google-groups.com',
+	ssoEnabled: true,
+	ssoType: 'google_auth',
+	googleAuthConfig: {
+		clientId: 'google-groups-client-id',
+		clientSecret: 'google-groups-client-secret',
+		insecureSkipEmailVerified: false,
+		fetchGroups: true,
+		serviceAccountJson: '{"type": "service_account"}',
+		domainToAdminEmail: {
+			'google-groups.com': 'admin@google-groups.com',
+		},
+		fetchTransitiveGroupMembership: true,
+		allowedGroups: ['allowed-group-1', 'allowed-group-2'],
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-8',
+	},
+};
+
+// Mock empty list response
+export const mockEmptyDomainsResponse = {
+	status: 'success',
+	data: [],
+};
+
+// Mock list response with domains
+export const mockDomainsListResponse = {
+	status: 'success',
+	data: [mockGoogleAuthDomain, mockSamlAuthDomain, mockOidcAuthDomain],
+};
+
+// Mock single domain list response
+export const mockSingleDomainResponse = {
+	status: 'success',
+	data: [mockGoogleAuthDomain],
+};
+
+// Mock success responses
+export const mockCreateSuccessResponse = {
+	status: 'success',
+	data: mockGoogleAuthDomain,
+};
+
+export const mockUpdateSuccessResponse = {
+	status: 'success',
+	data: { ...mockGoogleAuthDomain, ssoEnabled: false },
+};
+
+export const mockDeleteSuccessResponse = {
+	status: 'success',
+	data: 'Domain deleted successfully',
+};
+
+// Mock error responses
+export const mockErrorResponse = {
+	error: {
+		code: 'internal_error',
+		message: 'Failed to perform operation',
+		url: '',
+	},
+};
+
+export const mockValidationErrorResponse = {
+	error: {
+		code: 'invalid_input',
+		message: 'Domain name is required',
+		url: '',
+	},
+};

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

@@ -1,151 +1,214 @@
-import { useState } from 'react';
-import { useQuery } from 'react-query';
+import { useCallback, useMemo, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Table, Typography } from 'antd';
+import { Button } from '@signozhq/button';
+import { Trash2, X } from '@signozhq/icons';
+import { Modal, Typography } from 'antd';
+import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import deleteDomain from 'api/v1/domains/id/delete';
-import listAllDomain from 'api/v1/domains/list';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import {
+	useDeleteAuthDomain,
+	useListAuthDomains,
+} from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import { useNotifications } from 'hooks/useNotifications';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain, SSOType } from 'types/api/v1/domains/list';
 
 import CreateEdit from './CreateEdit/CreateEdit';
 import Toggle from './Toggle';
 
 import './AuthDomain.styles.scss';
+import '../../IngestionSettings/IngestionSettings.styles.scss';
 
-const columns: ColumnsType<GettableAuthDomain> = [
-	{
-		title: 'Domain',
-		dataIndex: 'name',
-		key: 'name',
-		width: 100,
-		render: (val): JSX.Element => <Typography.Text>{val}</Typography.Text>,
-	},
-	{
-		title: 'Enforce SSO',
-		dataIndex: 'ssoEnabled',
-		key: 'ssoEnabled',
-		width: 80,
-		render: (value: boolean, record: GettableAuthDomain): JSX.Element => (
-			<Toggle isDefaultChecked={value} record={record} />
-		),
-	},
-	{
-		title: 'IDP Initiated SSO URL',
-		dataIndex: 'relayState',
-		key: 'relayState',
-		width: 80,
-		render: (_, record: GettableAuthDomain): JSX.Element => {
-			const relayPath = record.authNProviderInfo.relayStatePath;
-			if (!relayPath) {
-				return (
-					<Typography.Text style={{ paddingLeft: '6px' }}>N/A</Typography.Text>
-				);
-			}
-
-			const href = `${window.location.origin}/${relayPath}`;
-			return <CopyToClipboard textToCopy={href} />;
-		},
-	},
-	{
-		title: 'Action',
-		dataIndex: 'action',
-		key: 'action',
-		width: 100,
-		render: (_, record: GettableAuthDomain): JSX.Element => (
-			<section className="auth-domain-list-column-action">
-				<Typography.Link data-column-action="configure">
-					Configure {SSOType.get(record.ssoType)}
-				</Typography.Link>
-				<Typography.Link type="danger" data-column-action="delete">
-					Delete
-				</Typography.Link>
-			</section>
-		),
-	},
-];
-
-async function deleteDomainById(
-	id: string,
-	showErrorModal: (error: APIError) => void,
-	refetchAuthDomainListResponse: () => void,
-): Promise<void> {
-	try {
-		await deleteDomain(id);
-		refetchAuthDomainListResponse();
-	} catch (error) {
-		showErrorModal(error as APIError);
-	}
-}
+export const SSOType = new Map<string, string>([
+	['google_auth', 'Google Auth'],
+	['saml', 'SAML'],
+	['email_password', 'Email Password'],
+	['oidc', 'OIDC'],
+]);
 
 function AuthDomain(): JSX.Element {
-	const [record, setRecord] = useState<GettableAuthDomain>();
+	const [record, setRecord] = useState<AuthtypesGettableAuthDomainDTO>();
 	const [addDomain, setAddDomain] = useState<boolean>(false);
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+	const [
+		activeDomain,
+		setActiveDomain,
+	] = useState<AuthtypesGettableAuthDomainDTO | null>(null);
+	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
+
 	const {
 		data: authDomainListResponse,
 		isLoading: isLoadingAuthDomainListResponse,
 		isFetching: isFetchingAuthDomainListResponse,
 		error: errorFetchingAuthDomainListResponse,
 		refetch: refetchAuthDomainListResponse,
-	} = useQuery({
-		queryFn: listAllDomain,
-		queryKey: ['/api/v1/domains', 'list'],
-		enabled: true,
-	});
+	} = useListAuthDomains();
+
+	const { mutate: deleteAuthDomain, isLoading } = useDeleteAuthDomain<
+		AxiosError<RenderErrorResponseDTO>
+	>();
+
+	const showDeleteModal = useCallback(
+		(domain: AuthtypesGettableAuthDomainDTO): void => {
+			setActiveDomain(domain);
+			setIsDeleteModalOpen(true);
+		},
+		[],
+	);
+
+	const hideDeleteModal = useCallback((): void => {
+		setIsDeleteModalOpen(false);
+		setActiveDomain(null);
+	}, []);
+
+	const handleDeleteDomain = useCallback((): void => {
+		if (!activeDomain?.id) {
+			return;
+		}
+
+		deleteAuthDomain(
+			{ pathParams: { id: activeDomain.id } },
+			{
+				onSuccess: () => {
+					notifications.success({
+						message: 'Domain deleted successfully',
+					});
+					refetchAuthDomainListResponse();
+					hideDeleteModal();
+				},
+				onError: (error) => {
+					try {
+						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+					} catch (apiError) {
+						showErrorModal(apiError as APIError);
+					}
+				},
+			},
+		);
+	}, [
+		activeDomain,
+		deleteAuthDomain,
+		hideDeleteModal,
+		notifications,
+		refetchAuthDomainListResponse,
+		showErrorModal,
+	]);
+
+	const formattedError = useMemo(() => {
+		if (!errorFetchingAuthDomainListResponse) {
+			return null;
+		}
+
+		let errorResult: APIError | null = null;
+		try {
+			ErrorResponseHandlerV2(
+				errorFetchingAuthDomainListResponse as AxiosError<ErrorV2Resp>,
+			);
+		} catch (error) {
+			errorResult = error as APIError;
+		}
+		return errorResult;
+	}, [errorFetchingAuthDomainListResponse]);
+
+	const columns: ColumnsType<AuthtypesGettableAuthDomainDTO> = useMemo(
+		() => [
+			{
+				title: 'Domain',
+				dataIndex: 'name',
+				key: 'name',
+				width: 100,
+				render: (val): JSX.Element => <span>{val}</span>,
+			},
+			{
+				title: 'Enforce SSO',
+				dataIndex: 'ssoEnabled',
+				key: 'ssoEnabled',
+				width: 80,
+				render: (
+					value: boolean,
+					record: AuthtypesGettableAuthDomainDTO,
+				): JSX.Element => <Toggle isDefaultChecked={value} record={record} />,
+			},
+			{
+				title: 'IDP Initiated SSO URL',
+				dataIndex: 'relayState',
+				key: 'relayState',
+				width: 80,
+				render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => {
+					const relayPath = record.authNProviderInfo?.relayStatePath;
+					if (!relayPath) {
+						return <span className="auth-domain-list-na">N/A</span>;
+					}
+
+					const href = `${window.location.origin}/${relayPath}`;
+					return <CopyToClipboard textToCopy={href} />;
+				},
+			},
+			{
+				title: 'Action',
+				dataIndex: 'action',
+				key: 'action',
+				width: 100,
+				render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => (
+					<section className="auth-domain-list-column-action">
+						<Button
+							className="auth-domain-list-action-link"
+							onClick={(): void => setRecord(record)}
+							variant="link"
+						>
+							Configure {SSOType.get(record.ssoType || '')}
+						</Button>
+						<Button
+							className="auth-domain-list-action-link delete"
+							onClick={(): void => showDeleteModal(record)}
+							variant="link"
+						>
+							Delete
+						</Button>
+					</section>
+				),
+			},
+		],
+		[showDeleteModal],
+	);
 
 	return (
 		<div className="auth-domain">
 			<section className="auth-domain-header">
-				<Typography.Title level={3}>Authenticated Domains</Typography.Title>
+				<h3 className="auth-domain-title">Authenticated Domains</h3>
 				<Button
-					type="primary"
-					icon={<PlusOutlined />}
+					prefixIcon={<PlusOutlined />}
 					onClick={(): void => {
 						setAddDomain(true);
 					}}
-					className="button"
+					variant="solid"
+					size="sm"
+					color="primary"
 				>
 					Add Domain
 				</Button>
 			</section>
-			{(errorFetchingAuthDomainListResponse as APIError) && (
-				<ErrorContent error={errorFetchingAuthDomainListResponse as APIError} />
-			)}
-			{!(errorFetchingAuthDomainListResponse as APIError) && (
+			{formattedError && <ErrorContent error={formattedError} />}
+			{!errorFetchingAuthDomainListResponse && (
 				<Table
 					columns={columns}
-					dataSource={authDomainListResponse?.data}
-					onRow={(record): any => ({
-						onClick: (
-							event: React.SyntheticEvent<HTMLLinkElement, MouseEvent>,
-						): void => {
-							const target = event.target as HTMLLinkElement;
-							const { columnAction } = target.dataset;
-							switch (columnAction) {
-								case 'configure':
-									setRecord(record);
-
-									break;
-								case 'delete':
-									deleteDomainById(
-										record.id,
-										showErrorModal,
-										refetchAuthDomainListResponse,
-									);
-									break;
-								default:
-									console.error('Unknown action:', columnAction);
-							}
-						},
-					})}
+					dataSource={authDomainListResponse?.data?.data}
+					onRow={undefined}
 					loading={
 						isLoadingAuthDomainListResponse || isFetchingAuthDomainListResponse
 					}
 					className="auth-domain-list"
+					rowKey="id"
 				/>
 			)}
 			{(addDomain || record) && (
@@ -159,6 +222,39 @@ function AuthDomain(): JSX.Element {
 					}}
 				/>
 			)}
+
+			<Modal
+				className="delete-ingestion-key-modal"
+				title={<span className="title">Delete Domain</span>}
+				open={isDeleteModalOpen}
+				closable
+				onCancel={hideDeleteModal}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={hideDeleteModal}
+						className="cancel-btn"
+						prefixIcon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<Button
+						key="submit"
+						prefixIcon={<Trash2 size={16} />}
+						onClick={handleDeleteDomain}
+						className="delete-btn"
+						loading={isLoading}
+					>
+						Delete Domain
+					</Button>,
+				]}
+			>
+				<Typography.Text className="delete-text">
+					Are you sure you want to delete the domain{' '}
+					<strong>{activeDomain?.name}</strong>? This action cannot be undone.
+				</Typography.Text>
+			</Modal>
 		</div>
 	);
 }

frontend/src/container/SideNav/SideNav.tsx

@@ -65,7 +65,6 @@ import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 import { checkVersionState } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { useCmdK } from '../../providers/cmdKProvider';
 import { routeConfig } from './config';
@@ -307,6 +306,8 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		icon: <Cog size={16} />,
 	};
 
+	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
+
 	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
 
 	const [
@@ -435,6 +436,10 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
+	const openInNewTab = (path: string): void => {
+		window.open(path, '_blank');
+	};
+
 	const onClickGetStarted = (event: MouseEvent): void => {
 		logEvent('Sidebar: Menu clicked', {
 			menuRoute: '/get-started',
@@ -445,7 +450,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			? ROUTES.GET_STARTED_WITH_CLOUD
 			: ROUTES.GET_STARTED;
 
-		if (isModifierKeyPressed(event)) {
+		if (isCtrlMetaKey(event)) {
 			openInNewTab(onboaringRoute);
 		} else {
 			history.push(onboaringRoute);
@@ -460,7 +465,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== key) {
-				if (event && isModifierKeyPressed(event)) {
+				if (event && isCtrlMetaKey(event)) {
 					openInNewTab(`${key}?${queryString.join('&')}`);
 				} else {
 					history.push(`${key}?${queryString.join('&')}`, {
@@ -659,7 +664,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const handleMenuItemClick = (event: MouseEvent, item: SidebarItem): void => {
 		if (item.key === ROUTES.SETTINGS) {
-			if (isModifierKeyPressed(event)) {
+			if (isCtrlMetaKey(event)) {
 				openInNewTab(settingsRoute);
 			} else {
 				history.push(settingsRoute);
@@ -837,7 +842,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleHelpSupportMenuItemClick = (info: SidebarItem): void => {
 		const item = helpSupportDropdownMenuItems.find(
 			(item) => !('type' in item) && item.key === info.key,
@@ -847,8 +851,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			window.open(item.url, '_blank');
 		}
 
-		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
-
 		if (item && !('type' in item)) {
 			logEvent('Help Popover: Item clicked', {
 				menuRoute: item.key,
@@ -857,18 +859,10 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 			switch (item.key) {
 				case ROUTES.SHORTCUTS:
-					if (event && isModifierKeyPressed(event)) {
-						openInNewTab(ROUTES.SHORTCUTS);
-					} else {
-						history.push(ROUTES.SHORTCUTS);
-					}
+					history.push(ROUTES.SHORTCUTS);
 					break;
 				case 'invite-collaborators':
-					if (event && isModifierKeyPressed(event)) {
-						openInNewTab(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
-					} else {
-						history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
-					}
+					history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
 					break;
 				case 'chat-support':
 					if (window.pylon) {
@@ -887,7 +881,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleSettingsMenuItemClick = (info: SidebarItem): void => {
 		const item = userSettingsDropdownMenuItems.find(
 			(item) => item?.key === info.key,
@@ -905,30 +898,15 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			menuRoute: item?.key,
 			menuLabel,
 		});
-
-		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
-
 		switch (info.key) {
 			case 'account':
-				if (event && isModifierKeyPressed(event)) {
-					openInNewTab(ROUTES.MY_SETTINGS);
-				} else {
-					history.push(ROUTES.MY_SETTINGS);
-				}
+				history.push(ROUTES.MY_SETTINGS);
 				break;
 			case 'workspace':
-				if (event && isModifierKeyPressed(event)) {
-					openInNewTab(ROUTES.SETTINGS);
-				} else {
-					history.push(ROUTES.SETTINGS);
-				}
+				history.push(ROUTES.SETTINGS);
 				break;
 			case 'license':
-				if (event && isModifierKeyPressed(event)) {
-					openInNewTab(ROUTES.LIST_LICENSES);
-				} else {
-					history.push(ROUTES.LIST_LICENSES);
-				}
+				history.push(ROUTES.LIST_LICENSES);
 				break;
 			case 'logout':
 				Logout();

frontend/src/hooks/__tests__/useSafeNavigate.test.ts

@@ -1,106 +0,0 @@
-/**
- * Tests for useSafeNavigate's mock contract.
- *
- * The real useSafeNavigate hook is globally replaced by a mock via
- * jest.config.ts moduleNameMapper, so we cannot test the real
- * implementation here. Instead we verify:
- *
- * 1. The mock accepts the new `event` and `newTab` options without
- *    type errors — ensuring component tests that pass these options
- *    won't break.
- * 2. The shouldOpenNewTab decision logic (extracted inline below)
- *    matches the real hook's behaviour.
- */
-
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { isModifierKeyPressed } from 'utils/navigation';
-
-/**
- * Mirrors the shouldOpenNewTab logic from the real useSafeNavigate hook.
- * Kept in sync manually — any drift will be caught by integration tests.
- */
-interface NavigateOptions {
-	newTab?: boolean;
-	event?: MouseEvent | React.MouseEvent;
-}
-
-const shouldOpenNewTab = (options?: NavigateOptions): boolean =>
-	Boolean(
-		options?.newTab || (options?.event && isModifierKeyPressed(options.event)),
-	);
-
-describe('useSafeNavigate mock contract', () => {
-	it('mock returns a safeNavigate function', () => {
-		const { safeNavigate } = useSafeNavigate();
-		expect(typeof safeNavigate).toBe('function');
-	});
-
-	it('safeNavigate accepts string path with event option', () => {
-		const { safeNavigate } = useSafeNavigate();
-		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
-
-		expect(() => {
-			safeNavigate('/alerts', { event });
-		}).not.toThrow();
-
-		expect(safeNavigate).toHaveBeenCalledWith('/alerts', { event });
-	});
-
-	it('safeNavigate accepts string path with newTab option', () => {
-		const { safeNavigate } = useSafeNavigate();
-
-		expect(() => {
-			safeNavigate('/dashboard', { newTab: true });
-		}).not.toThrow();
-
-		expect(safeNavigate).toHaveBeenCalledWith('/dashboard', { newTab: true });
-	});
-
-	it('safeNavigate accepts SafeNavigateParams with event option', () => {
-		const { safeNavigate } = useSafeNavigate();
-		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
-
-		expect(() => {
-			safeNavigate({ pathname: '/settings', search: '?tab=general' }, { event });
-		}).not.toThrow();
-
-		expect(safeNavigate).toHaveBeenCalledWith(
-			{ pathname: '/settings', search: '?tab=general' },
-			{ event },
-		);
-	});
-});
-
-describe('shouldOpenNewTab decision logic', () => {
-	it('returns true when newTab is true', () => {
-		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
-	});
-
-	it('returns true when event has metaKey pressed', () => {
-		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
-		expect(shouldOpenNewTab({ event })).toBe(true);
-	});
-
-	it('returns true when event has ctrlKey pressed', () => {
-		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
-		expect(shouldOpenNewTab({ event })).toBe(true);
-	});
-
-	it('returns false when event has no modifier keys', () => {
-		const event = { metaKey: false, ctrlKey: false } as MouseEvent;
-		expect(shouldOpenNewTab({ event })).toBe(false);
-	});
-
-	it('returns false when no options provided', () => {
-		expect(shouldOpenNewTab()).toBe(false);
-		expect(shouldOpenNewTab(undefined)).toBe(false);
-	});
-
-	it('returns false when options provided without event or newTab', () => {
-		expect(shouldOpenNewTab({})).toBe(false);
-	});
-
-	it('newTab takes precedence even without event', () => {
-		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
-	});
-});

frontend/src/hooks/useCollapseSectionErrors.ts

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { Form } from 'antd';
+
+export interface CollapseSectionErrors {
+	hasErrors: boolean;
+	errorMessages: string[];
+}
+
+/**
+ * Detects validation errors in a form section
+ * @param fieldNamePrefix - Field path prefix for the section
+ * @param specificFields - Optional specific field prefixes to check (uses prefix matching)
+ */
+export function useCollapseSectionErrors(
+	fieldNamePrefix: string[],
+	specificFields?: string[][],
+): CollapseSectionErrors {
+	const form = Form.useFormInstance();
+	// Refer: https://github.com/SigNoz/signoz/pull/10276#discussion_r2819372174
+	Form.useWatch([], form);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	return useMemo(() => {
+		const fieldErrors = form.getFieldsError();
+		const messages: string[] = [];
+
+		if (specificFields?.length) {
+			fieldErrors.forEach((field) => {
+				const fieldPath = Array.isArray(field.name) ? field.name : [field.name];
+
+				const isMatch = specificFields.some((specificField) => {
+					if (fieldPath.length < specificField.length) {
+						return false;
+					}
+					return specificField.every((part, idx) => fieldPath[idx] === part);
+				});
+
+				if (isMatch && field.errors.length > 0) {
+					field.errors.forEach((error) => messages.push(error));
+				}
+			});
+		} else {
+			const prefixPath = fieldNamePrefix.join('.');
+
+			fieldErrors.forEach((field) => {
+				const fieldPath = Array.isArray(field.name)
+					? field.name.join('.')
+					: String(field.name);
+
+				if (fieldPath.startsWith(prefixPath) && field.errors.length > 0) {
+					field.errors.forEach((error) => messages.push(error));
+				}
+			});
+		}
+
+		return {
+			hasErrors: messages.length > 0,
+			errorMessages: messages,
+		};
+	}, [form, fieldNamePrefix, specificFields]);
+}

frontend/src/hooks/useSafeNavigate.ts

@@ -1,13 +1,11 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
-import { isModifierKeyPressed } from 'utils/navigation';
 
 interface NavigateOptions {
 	replace?: boolean;
 	state?: any;
 	newTab?: boolean;
-	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateParams {
@@ -107,7 +105,6 @@ export const useSafeNavigate = (
 	const location = useLocation();
 
 	const safeNavigate = useCallback(
-		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(to: string | SafeNavigateParams, options?: NavigateOptions) => {
 			const currentUrl = new URL(
 				`${location.pathname}${location.search}`,
@@ -125,10 +122,8 @@ export const useSafeNavigate = (
 				);
 			}
 
-			const shouldOpenNewTab =
-				options?.newTab || (options?.event && isModifierKeyPressed(options.event));
-
-			if (shouldOpenNewTab) {
+			// If newTab is true, open in new tab and return early
+			if (options?.newTab) {
 				const targetPath =
 					typeof to === 'string'
 						? to

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Breadcrumb, Button, Divider } from 'antd';
@@ -18,7 +18,6 @@ import {
 	NEW_ALERT_SCHEMA_VERSION,
 	PostableAlertRuleV2,
 } from 'types/api/alerts/alertTypesV2';
-import { navigateToPage } from 'utils/navigation';
 
 import AlertHeader from './AlertHeader/AlertHeader';
 import AlertNotFound from './AlertNotFound';
@@ -59,11 +58,11 @@ function BreadCrumbItem({
 	if (isLast) {
 		return <div className="breadcrumb-item breadcrumb-item--last">{title}</div>;
 	}
-	const handleNavigate = (e: React.MouseEvent): void => {
+	const handleNavigate = (): void => {
 		if (!route) {
 			return;
 		}
-		navigateToPage(ROUTES.LIST_ALL_ALERT, history.push, e);
+		history.push(ROUTES.LIST_ALL_ALERT);
 	};
 
 	return (

frontend/src/pages/AlertDetails/AlertNotFound/AlertNotFound.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Typography } from 'antd';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -16,8 +15,8 @@ function AlertNotFound({ isTestAlert }: AlertNotFoundProps): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const { safeNavigate } = useSafeNavigate();
 
-	const checkAllRulesHandler = (e?: React.MouseEvent): void => {
-		safeNavigate(ROUTES.LIST_ALL_ALERT, { event: e });
+	const checkAllRulesHandler = (): void => {
+		safeNavigate(ROUTES.LIST_ALL_ALERT);
 	};
 
 	const contactSupportHandler = (): void => {

frontend/src/pages/AlertDetails/__tests__/AlertNotFound.test.tsx

@@ -69,10 +69,7 @@ describe('AlertNotFound', () => {
 		const user = userEvent.setup();
 		render(<AlertNotFound isTestAlert={false} />);
 		await user.click(screen.getByText('Check all rules'));
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			ROUTES.LIST_ALL_ALERT,
-			expect.objectContaining({ event: expect.any(Object) }),
-		);
+		expect(mockSafeNavigate).toHaveBeenCalledWith(ROUTES.LIST_ALL_ALERT);
 	});
 
 	it('should navigate to the correct support page for cloud users when button is clicked', async () => {

frontend/src/pages/AlertTypeSelection/AlertTypeSelection.tsx

@@ -18,7 +18,7 @@ function AlertTypeSelectionPage(): JSX.Element {
 	}, []);
 
 	const handleSelectType = useCallback(
-		(type: AlertTypes, event?: React.MouseEvent): void => {
+		(type: AlertTypes): void => {
 			// For anamoly based alert, we need to set the ruleType to anomaly_rule
 			// and alertType to metrics_based_alert
 			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
@@ -41,7 +41,7 @@ function AlertTypeSelectionPage(): JSX.Element {
 				queryParams.set(QueryParams.showClassicCreateAlertsPage, 'true');
 			}
 
-			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { event });
+			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`);
 		},
 		[queryParams, safeNavigate],
 	);

frontend/src/pages/Integrations/Header.tsx

@@ -1,14 +1,14 @@
+import { useHistory } from 'react-router-dom';
 import { Button, Flex, Typography } from 'antd';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { navigateToPage } from 'utils/navigation';
 import { routePermission } from 'utils/permission';
 
 import './Integrations.styles.scss';
 
 function Header(): JSX.Element {
+	const history = useHistory();
 	const { user } = useAppContext();
 
 	const isGetStartedWithCloudAllowed = routePermission.GET_STARTED_WITH_CLOUD.includes(
@@ -30,9 +30,7 @@ function Header(): JSX.Element {
 					<Button
 						className="periscope-btn primary view-data-sources-btn"
 						type="primary"
-						onClick={(e): void =>
-							navigateToPage(ROUTES.GET_STARTED_WITH_CLOUD, history.push, e)
-						}
+						onClick={(): void => history.push(ROUTES.GET_STARTED_WITH_CLOUD)}
 					>
 						<span>View 150+ Data Sources</span>
 						<ArrowRight size={14} />

frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx

@@ -7,7 +7,6 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import {
 	MessagingQueuesViewType,
@@ -65,14 +64,8 @@ function MQDetailPage(): JSX.Element {
 		selectedView !== MessagingQueuesViewType.dropRate.value &&
 		selectedView !== MessagingQueuesViewType.metricPage.value;
 
-	const handleBackClick = (
-		event?: React.MouseEvent | React.KeyboardEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event as React.MouseEvent)) {
-			openInNewTab(ROUTES.MESSAGING_QUEUES_KAFKA);
-		} else {
-			history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
-		}
+	const handleBackClick = (): void => {
+		history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
 	};
 
 	return (
@@ -84,7 +77,7 @@ function MQDetailPage(): JSX.Element {
 						className="message-queue-text"
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {
-								handleBackClick(e);
+								handleBackClick();
 							}
 						}}
 						role="button"

frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx

@@ -30,7 +30,6 @@ import {
 	setConfigDetail,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 import { formatNumericValue } from 'utils/numericUtils';
 
 import { getTableDataForProducerLatencyOverview } from './MQTableUtils';
@@ -81,12 +80,7 @@ export function getColumns(
 								onClick={(e): void => {
 									e.preventDefault();
 									e.stopPropagation();
-									const path = `/services/${encodeURIComponent(text)}`;
-									if (isModifierKeyPressed(e)) {
-										openInNewTab(path);
-									} else {
-										history.push(path);
-									}
+									history.push(`/services/${encodeURIComponent(text)}`);
 								}}
 							>
 								{text}

frontend/src/pages/MessagingQueues/MessagingQueues.tsx

@@ -10,7 +10,6 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import {
 	KAFKA_SETUP_DOC_LINK,
@@ -24,40 +23,26 @@ function MessagingQueues(): JSX.Element {
 	const history = useHistory();
 	const { t } = useTranslation('messagingQueuesKafkaOverview');
 
-	const redirectToDetailsPage = (
-		callerView?: string,
-		event?: React.MouseEvent,
-	): void => {
+	const redirectToDetailsPage = (callerView?: string): void => {
 		logEvent('Messaging Queues: View details clicked', {
 			page: 'Messaging Queues Overview',
 			source: callerView,
 		});
 
-		const path = `${ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL}?${QueryParams.mqServiceView}=${callerView}`;
-		if (event && isModifierKeyPressed(event)) {
-			openInNewTab(path);
-		} else {
-			history.push(path);
-		}
+		history.push(
+			`${ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL}?${QueryParams.mqServiceView}=${callerView}`,
+		);
 	};
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const getStartedRedirect = (
-		link: string,
-		sourceCard: string,
-		event?: React.MouseEvent,
-	): void => {
+	const getStartedRedirect = (link: string, sourceCard: string): void => {
 		logEvent('Messaging Queues: Get started clicked', {
 			source: sourceCard,
 			link: isCloudUserVal ? link : KAFKA_SETUP_DOC_LINK,
 		});
 		if (isCloudUserVal) {
-			if (event && isModifierKeyPressed(event)) {
-				openInNewTab(link);
-			} else {
-				history.push(link);
-			}
+			history.push(link);
 		} else {
 			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
@@ -94,11 +79,10 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
+								onClick={(): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Consumers}`,
 										'Configure Consumer',
-										e,
 									)
 								}
 							>
@@ -114,11 +98,10 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
+								onClick={(): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Producers}`,
 										'Configure Producer',
-										e,
 									)
 								}
 							>
@@ -134,11 +117,10 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
+								onClick={(): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Kafka}`,
 										'Monitor kafka',
-										e,
 									)
 								}
 							>
@@ -161,8 +143,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.consumerLag.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.consumerLag.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -179,8 +161,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.producerLatency.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.producerLatency.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -197,11 +179,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(
-										MessagingQueuesViewType.partitionLatency.value,
-										e,
-									)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.partitionLatency.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -218,8 +197,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.dropRate.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.dropRate.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -236,8 +215,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.metricPage.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.metricPage.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}

frontend/src/pages/Settings/Settings.tsx

@@ -16,7 +16,6 @@ import history from 'lib/history';
 import { Cog } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { getRoutes } from './utils';
 
@@ -185,6 +184,12 @@ function SettingsPage(): JSX.Element {
 		],
 	);
 
+	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
+
+	const openInNewTab = (path: string): void => {
+		window.open(path, '_blank');
+	};
+
 	const onClickHandler = useCallback(
 		(key: string, event: MouseEvent | null) => {
 			const params = new URLSearchParams(search);
@@ -193,7 +198,7 @@ function SettingsPage(): JSX.Element {
 			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== key) {
-				if (event && isModifierKeyPressed(event)) {
+				if (event && isCtrlMetaKey(event)) {
 					openInNewTab(`${key}?${queryString.join('&')}`);
 				} else {
 					history.push(`${key}?${queryString.join('&')}`, {

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import type { TabsProps } from 'antd';
@@ -27,7 +27,6 @@ import { CircleArrowRight } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
-import { navigateToPage } from 'utils/navigation';
 import { getFormattedDate } from 'utils/timeUtils';
 
 import CustomerStoryCard from './CustomerStoryCard';
@@ -134,10 +133,10 @@ export default function WorkspaceBlocked(): JSX.Element {
 		});
 	};
 
-	const handleViewBilling = (e?: React.MouseEvent): void => {
+	const handleViewBilling = (): void => {
 		logEvent('Workspace Blocked: User Clicked View Billing', {});
 
-		navigateToPage(ROUTES.BILLING, history.push, e);
+		history.push(ROUTES.BILLING);
 	};
 
 	const renderCustomerStories = (
@@ -297,7 +296,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 										type="link"
 										size="small"
 										role="button"
-										onClick={(e): void => handleViewBilling(e)}
+										onClick={handleViewBilling}
 									>
 										View Billing
 									</Button>

frontend/src/utils/__tests__/navigation.test.ts

@@ -1,123 +0,0 @@
-import {
-	isModifierKeyPressed,
-	navigateToPage,
-	openInNewTab,
-} from '../navigation';
-
-describe('navigation utilities', () => {
-	const originalWindowOpen = window.open;
-
-	beforeEach(() => {
-		window.open = jest.fn();
-	});
-
-	afterEach(() => {
-		window.open = originalWindowOpen;
-	});
-
-	describe('isModifierKeyPressed', () => {
-		const createMouseEvent = (overrides: Partial<MouseEvent> = {}): MouseEvent =>
-			({
-				metaKey: false,
-				ctrlKey: false,
-				...overrides,
-			} as MouseEvent);
-
-		it('returns true when metaKey is pressed (Cmd on Mac)', () => {
-			const event = createMouseEvent({ metaKey: true });
-			expect(isModifierKeyPressed(event)).toBe(true);
-		});
-
-		it('returns true when ctrlKey is pressed (Ctrl on Windows/Linux)', () => {
-			const event = createMouseEvent({ ctrlKey: true });
-			expect(isModifierKeyPressed(event)).toBe(true);
-		});
-
-		it('returns true when both metaKey and ctrlKey are pressed', () => {
-			const event = createMouseEvent({ metaKey: true, ctrlKey: true });
-			expect(isModifierKeyPressed(event)).toBe(true);
-		});
-
-		it('returns false when neither modifier key is pressed', () => {
-			const event = createMouseEvent();
-			expect(isModifierKeyPressed(event)).toBe(false);
-		});
-
-		it('returns false when only shiftKey or altKey are pressed', () => {
-			const event = createMouseEvent({
-				shiftKey: true,
-				altKey: true,
-			} as Partial<MouseEvent>);
-			expect(isModifierKeyPressed(event)).toBe(false);
-		});
-	});
-
-	describe('openInNewTab', () => {
-		it('calls window.open with the given path and _blank target', () => {
-			openInNewTab('/dashboard');
-			expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
-		});
-
-		it('handles full URLs', () => {
-			openInNewTab('https://example.com/page');
-			expect(window.open).toHaveBeenCalledWith(
-				'https://example.com/page',
-				'_blank',
-			);
-		});
-
-		it('handles paths with query strings', () => {
-			openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
-			expect(window.open).toHaveBeenCalledWith(
-				'/alerts?tab=AlertRules&relativeTime=30m',
-				'_blank',
-			);
-		});
-	});
-
-	describe('navigateToPage', () => {
-		const mockNavigate = jest.fn() as jest.MockedFunction<(path: string) => void>;
-
-		beforeEach(() => {
-			mockNavigate.mockClear();
-		});
-
-		it('opens new tab when metaKey is pressed', () => {
-			const event = { metaKey: true, ctrlKey: false } as MouseEvent;
-			navigateToPage('/services', mockNavigate, event);
-
-			expect(window.open).toHaveBeenCalledWith('/services', '_blank');
-			expect(mockNavigate).not.toHaveBeenCalled();
-		});
-
-		it('opens new tab when ctrlKey is pressed', () => {
-			const event = { metaKey: false, ctrlKey: true } as MouseEvent;
-			navigateToPage('/services', mockNavigate, event);
-
-			expect(window.open).toHaveBeenCalledWith('/services', '_blank');
-			expect(mockNavigate).not.toHaveBeenCalled();
-		});
-
-		it('calls navigate callback when no modifier key is pressed', () => {
-			const event = { metaKey: false, ctrlKey: false } as MouseEvent;
-			navigateToPage('/services', mockNavigate, event);
-
-			expect(mockNavigate).toHaveBeenCalledWith('/services');
-			expect(window.open).not.toHaveBeenCalled();
-		});
-
-		it('calls navigate callback when no event is provided', () => {
-			navigateToPage('/services', mockNavigate);
-
-			expect(mockNavigate).toHaveBeenCalledWith('/services');
-			expect(window.open).not.toHaveBeenCalled();
-		});
-
-		it('calls navigate callback when event is undefined', () => {
-			navigateToPage('/dashboard', mockNavigate, undefined);
-
-			expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
-			expect(window.open).not.toHaveBeenCalled();
-		});
-	});
-});

frontend/src/utils/navigation.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-
-/**
- * Returns true if the user is holding Cmd (Mac) or Ctrl (Windows/Linux)
- * during a click event — the universal "open in new tab" modifier.
- */
-export const isModifierKeyPressed = (
-	event: MouseEvent | React.MouseEvent,
-): boolean => event.metaKey || event.ctrlKey;
-
-/**
- * Opens the given path in a new browser tab.
- */
-export const openInNewTab = (path: string): void => {
-	window.open(path, '_blank');
-};
-
-/**
- * Navigates to a path, respecting modifier keys. If Cmd/Ctrl is held,
- * the path is opened in a new tab. Otherwise, the provided `navigate`
- * callback is invoked for SPA navigation.
- *
- * @param path - The target URL path
- * @param navigate - SPA navigation callback (e.g. history.push, safeNavigate)
- * @param event - Optional mouse event to check for modifier keys
- */
-export const navigateToPage = (
-	path: string,
-	navigate: (path: string) => void,
-	event?: MouseEvent | React.MouseEvent,
-): void => {
-	if (event && isModifierKeyPressed(event)) {
-		openInNewTab(path);
-	} else {
-		navigate(path);
-	}
-};

frontend/yarn.lock

@@ -4479,6 +4479,19 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
+"@radix-ui/react-switch@^1.1.4":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.2.6.tgz#ff79acb831f0d5ea9216cfcc5b939912571358e3"
+  integrity sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+
 "@radix-ui/react-tabs@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2"
@@ -5164,6 +5177,20 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
+"@signozhq/switch@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/switch/-/switch-0.0.2.tgz#58003ce9c0cd1f2ad8266a7045182607ce51df76"
+  integrity sha512-3B3Y5dzIyepO6EQJ7agx97bPmwg1dcOY46q2lqviHnMxNk3Sv079nSNCaztjQlo0VR0qu2JgVXhWi5Lw9WBN8A==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@radix-ui/react-switch" "^1.1.4"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
 "@signozhq/table@0.3.7":
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/@signozhq/table/-/table-0.3.7.tgz#895b710c02af124dfb5117e02bbc6d80ce062063"

pkg/telemetrylogs/field_mapper.go

@@ -61,11 +61,13 @@ var (
 	}
 )
 
-type fieldMapper struct {}
+type fieldMapper struct {
+}
 
 func NewFieldMapper() qbtypes.FieldMapper {
 	return &fieldMapper{}
 }
+
 func (m *fieldMapper) getColumn(_ context.Context, key *telemetrytypes.TelemetryFieldKey) (*schema.Column, error) {
 	switch key.FieldContext {
 	case telemetrytypes.FieldContextResource:
@@ -252,27 +254,12 @@ func (m *fieldMapper) buildFieldForJSON(key *telemetrytypes.TelemetryFieldKey) (
 					"plan length is less than 2 for promoted path: %s", key.Name)
 			}
 
-			node := plan[1]
-			promotedExpr := fmt.Sprintf(
-				"dynamicElement(%s, '%s')",
-				node.FieldPath(),
-				node.TerminalConfig.ElemType.StringValue(),
+			// promoted column first then body_json column
+			// TODO(Piyush): Change this in future for better performance
+			expr = fmt.Sprintf("coalesce(%s, %s)",
+				fmt.Sprintf("dynamicElement(%s, '%s')", plan[1].FieldPath(), plan[1].TerminalConfig.ElemType.StringValue()),
+				expr,
 			)
-
-			// dynamicElement returns NULL for scalar types or an empty array for array types.
-			if node.TerminalConfig.ElemType.IsArray {
-				expr = fmt.Sprintf(
-					"if(length(%s) > 0, %s, %s)",
-					promotedExpr,
-					promotedExpr,
-					expr,
-				)
-			} else {
-				// promoted column first then body_json column
-				// TODO(Piyush): Change this in future for better performance
-				expr = fmt.Sprintf("coalesce(%s, %s)", promotedExpr, expr)
-			}
-
 		}
 
 		return expr, nil
@@ -294,7 +281,8 @@ func (m *fieldMapper) buildArrayConcat(plan telemetrytypes.JSONAccessPlan) (stri
 	}
 
 	// Build arrayMap expressions for ALL available branches at the root level.
-	// Iterate branches in deterministic order (JSON then Dynamic)
+	// Iterate branches in deterministic order (JSON then Dynamic) so generated SQL
+	// is stable across environments; map iteration order is random in Go.
 	var arrayMapExpressions []string
 	for _, node := range plan {
 		for _, branchType := range node.BranchesInOrder() {

pkg/telemetrylogs/json_condition_builder.go

@@ -32,6 +32,7 @@ func NewJSONConditionBuilder(key *telemetrytypes.TelemetryFieldKey, valueType te
 
 // BuildCondition builds the full WHERE condition for body_json JSON paths
 func (c *jsonConditionBuilder) buildJSONCondition(operator qbtypes.FilterOperator, value any, sb *sqlbuilder.SelectBuilder) (string, error) {
+
 	conditions := []string{}
 	for _, node := range c.key.JSONPlan {
 		condition, err := c.emitPlannedCondition(node, operator, value, sb)
@@ -72,9 +73,9 @@ func (c *jsonConditionBuilder) buildTerminalCondition(node *telemetrytypes.JSONA
 
 			// switch operator for array membership checks
 			switch operator {
-			case qbtypes.FilterOperatorContains:
+			case qbtypes.FilterOperatorContains, qbtypes.FilterOperatorIn:
 				operator = qbtypes.FilterOperatorEqual
-			case qbtypes.FilterOperatorNotContains:
+			case qbtypes.FilterOperatorNotContains, qbtypes.FilterOperatorNotIn:
 				operator = qbtypes.FilterOperatorNotEqual
 			}
 		}
@@ -190,14 +191,13 @@ func (c *jsonConditionBuilder) buildArrayMembershipCondition(node *telemetrytype
 		arrayExpr = typedArrayExpr()
 	}
 
-	key := "x"
-	fieldExpr, value := querybuilder.DataTypeCollisionHandledFieldName(&localKeyCopy, value, key, operator)
+	fieldExpr, value := querybuilder.DataTypeCollisionHandledFieldName(&localKeyCopy, value, "x", operator)
 	op, err := c.applyOperator(sb, fieldExpr, operator, value)
 	if err != nil {
 		return "", err
 	}
 
-	return fmt.Sprintf("arrayExists(%s -> %s, %s)", key, op, arrayExpr), nil
+	return fmt.Sprintf("arrayExists(%s -> %s, %s)", fieldExpr, op, arrayExpr), nil
 }
 
 // recurseArrayHops recursively builds array traversal conditions
@@ -279,31 +279,27 @@ func (c *jsonConditionBuilder) applyOperator(sb *sqlbuilder.SelectBuilder, field
 	case qbtypes.FilterOperatorNotContains:
 		return sb.NotILike(fieldExpr, fmt.Sprintf("%%%v%%", value)), nil
 	case qbtypes.FilterOperatorIn, qbtypes.FilterOperatorNotIn:
+		// emulate IN/NOT IN using OR/AND over equals to leverage indexes consistently
 		values, ok := value.([]any)
 		if !ok {
 			values = []any{value}
 		}
-		if operator == qbtypes.FilterOperatorIn {
-			return sb.In(fieldExpr, values...), nil
+		conds := []string{}
+		for _, v := range values {
+			if operator == qbtypes.FilterOperatorIn {
+				conds = append(conds, sb.E(fieldExpr, v))
+			} else {
+				conds = append(conds, sb.NE(fieldExpr, v))
+			}
 		}
-		return sb.NotIn(fieldExpr, values...), nil
+		if operator == qbtypes.FilterOperatorIn {
+			return sb.Or(conds...), nil
+		}
+		return sb.And(conds...), nil
 	case qbtypes.FilterOperatorExists:
 		return fmt.Sprintf("%s IS NOT NULL", fieldExpr), nil
 	case qbtypes.FilterOperatorNotExists:
 		return fmt.Sprintf("%s IS NULL", fieldExpr), nil
-	// between and not between
-	case qbtypes.FilterOperatorBetween, qbtypes.FilterOperatorNotBetween:
-		values, ok := value.([]any)
-		if !ok {
-			return "", qbtypes.ErrBetweenValues
-		}
-		if len(values) != 2 {
-			return "", qbtypes.ErrBetweenValues
-		}
-		if operator == qbtypes.FilterOperatorBetween {
-			return sb.Between(fieldExpr, values[0], values[1]), nil
-		}
-		return sb.NotBetween(fieldExpr, values[0], values[1]), nil
 	default:
 		return "", qbtypes.ErrUnsupportedOperator
 	}

pkg/telemetrylogs/json_stmt_builder_test.go

@@ -316,7 +316,7 @@ func TestStatementBuilderListQueryBody(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> toFloat64(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> toFloat64(x) = ?, arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(toFloat64(x) -> toFloat64(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(toFloat64(x) -> toFloat64(x) = ?, arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%1.65%", 1.65, "%1.65%", 1.65, "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `education[].parameters` is ambiguous, found 2 different combinations of field context / data type: [name=education[].parameters,context=body,datatype=[]float64,jsondatatype=Array(Nullable(Float64)) name=education[].parameters,context=body,datatype=[]dynamic,jsondatatype=Array(Dynamic)]."},
 			},
@@ -345,7 +345,7 @@ func TestStatementBuilderListQueryBody(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%true%", true, "%true%", true, "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `education[].parameters` is ambiguous, found 2 different combinations of field context / data type: [name=education[].parameters,context=body,datatype=[]float64,jsondatatype=Array(Nullable(Float64)) name=education[].parameters,context=body,datatype=[]dynamic,jsondatatype=Array(Dynamic)]."},
 			},
@@ -360,55 +360,12 @@ func TestStatementBuilderListQueryBody(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> toString(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(toString(x) -> toString(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%passed%", "passed", "%passed%", "passed", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `education[].parameters` is ambiguous, found 2 different combinations of field context / data type: [name=education[].parameters,context=body,datatype=[]float64,jsondatatype=Array(Nullable(Float64)) name=education[].parameters,context=body,datatype=[]dynamic,jsondatatype=Array(Dynamic)]."},
 			},
 			expectedErr: nil,
 		},
-		{
-			name:        "Dynamic array IN Operator",
-			requestType: qbtypes.RequestTypeRaw,
-			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
-				Signal: telemetrytypes.SignalLogs,
-				Filter: &qbtypes.Filter{Expression: "body.education[].parameters IN [1.65, 1.99]"},
-				Limit:  10,
-			},
-			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(x -> toFloat64(x) IN (?, ?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> x IN (?, ?), arrayMap(x->dynamicElement(x, 'Array(Nullable(Float64))'), arrayFilter(x->(dynamicType(x) = 'Array(Nullable(Float64))'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
-				Args:     []any{uint64(1747945619), uint64(1747983448), 1.65, 1.99, 1.65, 1.99, "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
-				Warnings: []string{"Key `education[].parameters` is ambiguous, found 2 different combinations of field context / data type: [name=education[].parameters,context=body,datatype=[]float64,jsondatatype=Array(Nullable(Float64)) name=education[].parameters,context=body,datatype=[]dynamic,jsondatatype=Array(Dynamic)]."},
-			},
-			expectedErr: nil,
-		},
-		{
-			name:        "Integer BETWEEN Operator",
-			requestType: qbtypes.RequestTypeRaw,
-			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
-				Signal: telemetrytypes.SignalLogs,
-				Filter: &qbtypes.Filter{Expression: "education[].awards[].semester BETWEEN 2 AND 4"},
-				Limit:  10,
-			},
-			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE (arrayExists(`body_json.education`-> (arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) BETWEEN ? AND ?, dynamicElement(`body_json.education`.`awards`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')) OR arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) BETWEEN ? AND ?, arrayMap(x->dynamicElement(x, 'JSON'), arrayFilter(x->(dynamicType(x) = 'JSON'), dynamicElement(`body_json.education`.`awards`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND (arrayExists(`body_json.education`-> (arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) BETWEEN ? AND ?, dynamicElement(`body_json.education`.`awards`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')) OR arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) BETWEEN ? AND ?, arrayMap(x->dynamicElement(x, 'JSON'), arrayFilter(x->(dynamicType(x) = 'JSON'), dynamicElement(`body_json.education`.`awards`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
-				Args:  []any{float64(2), float64(4), float64(2), float64(4), uint64(1747945619), uint64(1747983448), float64(2), float64(4), float64(2), float64(4), "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
-			},
-			expectedErr: nil,
-		},
-		{
-			name:        "Integer IN Operator",
-			requestType: qbtypes.RequestTypeRaw,
-			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
-				Signal: telemetrytypes.SignalLogs,
-				Filter: &qbtypes.Filter{Expression: "education[].awards[].semester IN [2, 4]"},
-				Limit:  10,
-			},
-			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE (arrayExists(`body_json.education`-> (arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) IN (?, ?), dynamicElement(`body_json.education`.`awards`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')) OR arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) IN (?, ?), arrayMap(x->dynamicElement(x, 'JSON'), arrayFilter(x->(dynamicType(x) = 'JSON'), dynamicElement(`body_json.education`.`awards`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND (arrayExists(`body_json.education`-> (arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) IN (?, ?), dynamicElement(`body_json.education`.`awards`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')) OR arrayExists(`body_json.education[].awards`-> toFloat64(dynamicElement(`body_json.education[].awards`.`semester`, 'Int64')) IN (?, ?), arrayMap(x->dynamicElement(x, 'JSON'), arrayFilter(x->(dynamicType(x) = 'JSON'), dynamicElement(`body_json.education`.`awards`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
-				Args:  []any{float64(2), float64(4), float64(2), float64(4), uint64(1747945619), uint64(1747983448), float64(2), float64(4), float64(2), float64(4), "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
-			},
-			expectedErr: nil,
-		},
 		{
 			name:        "Equals to 'sports' inside array of awards",
 			requestType: qbtypes.RequestTypeRaw,
@@ -432,7 +389,7 @@ func TestStatementBuilderListQueryBody(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))')) OR arrayExists(x -> toFloat64(x) = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))')) OR arrayExists(x -> toFloat64OrNull(x) = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))')) OR arrayExists(toFloat64(x) -> toFloat64(x) = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))')) OR arrayExists(toFloat64OrNull(x) -> toFloat64OrNull(x) = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%4%", float64(4), "%4%", float64(4), "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `interests[].entities[].reviews[].entries[].metadata[].positions[].ratings` is ambiguous, found 2 different combinations of field context / data type: [name=interests[].entities[].reviews[].entries[].metadata[].positions[].ratings,context=body,datatype=[]int64,jsondatatype=Array(Nullable(Int64)) name=interests[].entities[].reviews[].entries[].metadata[].positions[].ratings,context=body,datatype=[]string,jsondatatype=Array(Nullable(String))]."},
 			},
@@ -447,7 +404,7 @@ func TestStatementBuilderListQueryBody(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))')) OR arrayExists(x -> toString(x) = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))')) OR arrayExists(toString(x) -> toString(x) = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(Int64))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))'))) OR (arrayExists(`body_json.interests`-> arrayExists(`body_json.interests[].entities`-> arrayExists(`body_json.interests[].entities[].reviews`-> arrayExists(`body_json.interests[].entities[].reviews[].entries`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata`-> arrayExists(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata[].positions`.`ratings`, 'Array(Nullable(String))'))), dynamicElement(`body_json.interests[].entities[].reviews[].entries[].metadata`.`positions`, 'Array(JSON(max_dynamic_types=0, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews[].entries`.`metadata`, 'Array(JSON(max_dynamic_types=1, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities[].reviews`.`entries`, 'Array(JSON(max_dynamic_types=2, max_dynamic_paths=0))')), dynamicElement(`body_json.interests[].entities`.`reviews`, 'Array(JSON(max_dynamic_types=4, max_dynamic_paths=0))')), dynamicElement(`body_json.interests`.`entities`, 'Array(JSON(max_dynamic_types=8, max_dynamic_paths=0))')), dynamicElement(body_json.`interests`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%Good%", "Good", "%Good%", "Good", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `interests[].entities[].reviews[].entries[].metadata[].positions[].ratings` is ambiguous, found 2 different combinations of field context / data type: [name=interests[].entities[].reviews[].entries[].metadata[].positions[].ratings,context=body,datatype=[]int64,jsondatatype=Array(Nullable(Int64)) name=interests[].entities[].reviews[].entries[].metadata[].positions[].ratings,context=body,datatype=[]string,jsondatatype=Array(Nullable(String))]."},
 			},
@@ -535,7 +492,7 @@ func TestStatementBuilderListQueryBodyPromoted(t *testing.T) {
 		disableBodyJSONQuery(t)
 	}()
 
-	statementBuilder := buildJSONTestStatementBuilder(t, "education", "tags")
+	statementBuilder := buildJSONTestStatementBuilder(t, "education")
 	cases := []struct {
 		name        string
 		requestType qbtypes.RequestType
@@ -543,20 +500,6 @@ func TestStatementBuilderListQueryBodyPromoted(t *testing.T) {
 		expected    qbtypes.Statement
 		expectedErr error
 	}{
-		{
-			name:        "Has Array promoted uses body fallback",
-			requestType: qbtypes.RequestTypeRaw,
-			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
-				Signal: telemetrytypes.SignalLogs,
-				Filter: &qbtypes.Filter{Expression: "has(body.tags, 'production')"},
-				Limit:  10,
-			},
-			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND has(if(length(dynamicElement(body_json_promoted.`tags`, 'Array(Nullable(String))')) > 0, dynamicElement(body_json_promoted.`tags`, 'Array(Nullable(String))'), dynamicElement(body_json.`tags`, 'Array(Nullable(String))')), ?) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
-				Args:  []any{uint64(1747945619), uint64(1747983448), "production", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
-			},
-			expectedErr: nil,
-		},
 		{
 			name:        "Key inside Array(JSON) exists",
 			requestType: qbtypes.RequestTypeRaw,
@@ -608,7 +551,7 @@ func TestStatementBuilderListQueryBodyPromoted(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> toFloat64(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> toFloat64(x) = ?, dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> toFloat64(x) = ?, arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> toFloat64(x) = ?, arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(toFloat64(x) -> toFloat64(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(toFloat64(x) -> toFloat64(x) = ?, dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))'))) OR (arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(toFloat64(x) -> toFloat64(x) = ?, arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(toFloat64(x) -> toFloat64(x) = ?, arrayMap(x->dynamicElement(x, 'Float64'), arrayFilter(x->(dynamicType(x) = 'Float64'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%1.65%", 1.65, "%1.65%", 1.65, "%1.65%", 1.65, "%1.65%", 1.65, "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `education[].parameters` is ambiguous, found 2 different combinations of field context / data type: [name=education[].parameters,context=body,datatype=[]float64,materialized=true,jsondatatype=Array(Nullable(Float64)) name=education[].parameters,context=body,datatype=[]dynamic,materialized=true,jsondatatype=Array(Dynamic)]."},
 			},
@@ -637,7 +580,7 @@ func TestStatementBuilderListQueryBodyPromoted(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> x = ?, dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))'))) OR (arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'Bool'), arrayFilter(x->(dynamicType(x) = 'Bool'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%true%", true, "%true%", true, "%true%", true, "%true%", true, "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `education[].parameters` is ambiguous, found 2 different combinations of field context / data type: [name=education[].parameters,context=body,datatype=[]float64,materialized=true,jsondatatype=Array(Nullable(Float64)) name=education[].parameters,context=body,datatype=[]dynamic,materialized=true,jsondatatype=Array(Dynamic)]."},
 			},
@@ -652,7 +595,7 @@ func TestStatementBuilderListQueryBodyPromoted(t *testing.T) {
 				Limit:  10,
 			},
 			expected: qbtypes.Statement{
-				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> toString(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(x -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(x -> toString(x) = ?, dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, body_json, body_json_promoted, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((arrayExists(`body_json.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(toString(x) -> toString(x) = ?, dynamicElement(`body_json.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(toString(x) -> LOWER(toString(x)) LIKE LOWER(?), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))')) OR arrayExists(toString(x) -> toString(x) = ?, dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Nullable(Float64))'))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))'))) OR (arrayExists(`body_json.education`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=0))')) OR arrayExists(`body_json_promoted.education`-> (arrayExists(x -> LOWER(x) LIKE LOWER(?), arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)')))) OR arrayExists(x -> x = ?, arrayMap(x->dynamicElement(x, 'String'), arrayFilter(x->(dynamicType(x) = 'String'), dynamicElement(`body_json_promoted.education`.`parameters`, 'Array(Dynamic)'))))), dynamicElement(body_json_promoted.`education`, 'Array(JSON(max_dynamic_types=16, max_dynamic_paths=256))')))) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:     []any{uint64(1747945619), uint64(1747983448), "%passed%", "passed", "%passed%", "passed", "%passed%", "passed", "%passed%", "passed", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
 				Warnings: []string{"Key `education[].parameters` is ambiguous, found 2 different combinations of field context / data type: [name=education[].parameters,context=body,datatype=[]float64,materialized=true,jsondatatype=Array(Nullable(Float64)) name=education[].parameters,context=body,datatype=[]dynamic,materialized=true,jsondatatype=Array(Dynamic)]."},
 			},

pkg/telemetrylogs/json_string.go

@@ -3,12 +3,12 @@ package telemetrylogs
 import (
 	"context"
 	"fmt"
-	"reflect"
 	"strconv"
 	"strings"
 
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 func parseStrValue(valueStr string, operator qbtypes.FilterOperator) (telemetrytypes.FieldDataType, any) {
@@ -41,55 +41,31 @@ func parseStrValue(valueStr string, operator qbtypes.FilterOperator) (telemetryt
 }
 
 func InferDataType(value any, operator qbtypes.FilterOperator, key *telemetrytypes.TelemetryFieldKey) (telemetrytypes.FieldDataType, any) {
-	if operator.IsArrayOperator() && reflect.ValueOf(value).Kind() != reflect.Slice {
-		value = []any{value}
-	}
-
-	// closure to calculate the data type of the value
-	var closure func(value any, key *telemetrytypes.TelemetryFieldKey) (telemetrytypes.FieldDataType, any)
-	closure = func(value any, key *telemetrytypes.TelemetryFieldKey) (telemetrytypes.FieldDataType, any) {
-		// check if the value is a int, float, string, bool
-		valueType := telemetrytypes.FieldDataTypeUnspecified
-		switch v := value.(type) {
-		case []any:
-			// take the first element and infer the type
-			var scalerType telemetrytypes.FieldDataType
-			if len(v) > 0 {
-				// Note: [[...]] Slices inside Slices are not handled yet
-				if reflect.ValueOf(v[0]).Kind() == reflect.Slice {
-					return telemetrytypes.FieldDataTypeUnspecified, value
-				}
-
-				scalerType, _ = closure(v[0], key)
-			}
-
-			arrayType := telemetrytypes.ScalerFieldTypeToArrayFieldType[scalerType]
-			switch {
-			// decide on the field data type based on the key
-			case key.FieldDataType.IsArray():
-				return arrayType, v
-			default:
-				// TODO(Piyush): backward compatibility for the old String based JSON QB queries
-				if strings.HasSuffix(key.Name, telemetrytypes.ArrayAnyIndexSuffix) {
-					return arrayType, v
-				}
-				return scalerType, v
-			}
-		case uint8, uint16, uint32, uint64, int, int8, int16, int32, int64:
-			valueType = telemetrytypes.FieldDataTypeInt64
-		case float32, float64:
-			valueType = telemetrytypes.FieldDataTypeFloat64
-		case string:
-			valueType, value = parseStrValue(v, operator)
-		case bool:
-			valueType = telemetrytypes.FieldDataTypeBool
+	// check if the value is a int, float, string, bool
+	valueType := telemetrytypes.FieldDataTypeUnspecified
+	switch v := value.(type) {
+	case []any:
+		// take the first element and infer the type
+		if len(v) > 0 {
+			valueType, _ = InferDataType(v[0], operator, key)
 		}
-
-		return valueType, value
+		return valueType, v
+	case uint8, uint16, uint32, uint64, int, int8, int16, int32, int64:
+		valueType = telemetrytypes.FieldDataTypeInt64
+	case float32, float64:
+		valueType = telemetrytypes.FieldDataTypeFloat64
+	case string:
+		valueType, value = parseStrValue(v, operator)
+	case bool:
+		valueType = telemetrytypes.FieldDataTypeBool
 	}
 
-	// calculate the data type of the value
-	return closure(value, key)
+	// check if it is array
+	if strings.HasSuffix(key.Name, "[*]") || strings.HasSuffix(key.Name, "[]") {
+		valueType = telemetrytypes.FieldDataType{String: valuer.NewString(fmt.Sprintf("[]%s", valueType.StringValue()))}
+	}
+
+	return valueType, value
 }
 
 func getBodyJSONPath(key *telemetrytypes.TelemetryFieldKey) string {

pkg/telemetrylogs/stmt_builder_test.go

@@ -421,38 +421,6 @@ func TestStatementBuilderListQueryResourceTests(t *testing.T) {
 			},
 			expectedErr: nil,
 		},
-		{
-			name:        "IN operator with json search",
-			requestType: qbtypes.RequestTypeRaw,
-			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
-				Signal: telemetrytypes.SignalLogs,
-				Filter: &qbtypes.Filter{
-					Expression: "body.user_names[*] IN 'john_doe'",
-				},
-				Limit: 10,
-			},
-			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND ((JSONExtract(JSON_QUERY(body, '$.\"user_names\"[*]'), 'Array(String)') = ?) AND JSON_EXISTS(body, '$.\"user_names\"[*]')) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
-				Args:  []any{uint64(1747945619), uint64(1747983448), "john_doe", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
-			},
-			expectedErr: nil,
-		},
-		{
-			name:        "has with json search",
-			requestType: qbtypes.RequestTypeRaw,
-			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
-				Signal: telemetrytypes.SignalLogs,
-				Filter: &qbtypes.Filter{
-					Expression: "has(body.user_names[*], 'john_doe')",
-				},
-				Limit: 10,
-			},
-			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND has(JSONExtract(JSON_QUERY(body, '$.\"user_names\"[*]'), 'Array(String)'), ?) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
-				Args:  []any{uint64(1747945619), uint64(1747983448), "john_doe", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
-			},
-			expectedErr: nil,
-		},
 	}
 
 	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()

pkg/telemetrymetadata/body_json_metadata.go

@@ -112,8 +112,7 @@ func (t *telemetryMetaStore) buildBodyJSONPaths(ctx context.Context,
 	}
 
 	for _, fieldKey := range fieldKeys {
-		promotedKey := strings.Split(fieldKey.Name, telemetrytypes.ArraySep)[0]
-		fieldKey.Materialized = promoted.Contains(promotedKey)
+		fieldKey.Materialized = promoted.Contains(fieldKey.Name)
 		fieldKey.Indexes = indexes[fieldKey.Name]
 	}
 
@@ -502,8 +501,7 @@ func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...stri
 	sb := sqlbuilder.Select("path").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
 	pathConditions := []string{}
 	for _, path := range paths {
-		split := strings.Split(path, telemetrytypes.ArraySep)
-		pathConditions = append(pathConditions, sb.Equal("path", split[0]))
+		pathConditions = append(pathConditions, sb.Equal("path", path))
 	}
 	sb.Where(sb.Or(pathConditions...))
 

pkg/types/querybuildertypes/querybuildertypesv5/builder_elements.go

@@ -161,17 +161,6 @@ func (f FilterOperator) IsStringSearchOperator() bool {
 	}
 }
 
-// IsArrayOperator returns true if the operator works with array values only
-func (f FilterOperator) IsArrayOperator() bool {
-	switch f {
-	case FilterOperatorIn, FilterOperatorNotIn,
-		FilterOperatorBetween, FilterOperatorNotBetween:
-		return true
-	default:
-		return false
-	}
-}
-
 type OrderDirection struct {
 	valuer.String
 }

pkg/types/telemetrytypes/field.go

@@ -23,10 +23,8 @@ const (
 	// e.g., "body.status" where "body." is the prefix
 	BodyJSONStringSearchPrefix = "body."
 	ArraySep                   = jsontypeexporter.ArraySeparator
-	ArraySepSuffix             = "[]"
 	// TODO(Piyush): Remove once we've migrated to the new array syntax
-	ArrayAnyIndex       = "[*]."
-	ArrayAnyIndexSuffix = "[*]"
+	ArrayAnyIndex = "[*]."
 )
 
 type TelemetryFieldKey struct {

pkg/types/telemetrytypes/field_datatype.go

@@ -93,14 +93,6 @@ var (
 		FieldDataTypeArrayFloat64: "Array(Float64)",
 		FieldDataTypeArrayBool:    "Array(Bool)",
 	}
-
-	ScalerFieldTypeToArrayFieldType = map[FieldDataType]FieldDataType{
-		FieldDataTypeString:  FieldDataTypeArrayString,
-		FieldDataTypeBool:    FieldDataTypeArrayBool,
-		FieldDataTypeNumber:  FieldDataTypeArrayNumber,
-		FieldDataTypeInt64:   FieldDataTypeArrayInt64,
-		FieldDataTypeFloat64: FieldDataTypeArrayFloat64,
-	}
 )
 
 func (f FieldDataType) CHDataType() string {

pkg/types/telemetrytypes/test_data.go

@@ -65,7 +65,6 @@ func TestJSONTypeSet() (map[string][]JSONDataType, MetadataStore) {
 		"interests[].entities[].reviews[].entries[].metadata[].positions[].unit":     {String},
 		"interests[].entities[].reviews[].entries[].metadata[].positions[].ratings":  {ArrayInt64, ArrayString},
 		"message": {String},
-		"tags":    {ArrayString},
 	}
 
 	return types, nil

tests/integration/src/passwordauthn/06_duplicate_invite.py

@@ -1,62 +0,0 @@
-from http import HTTPStatus
-from typing import Callable
-
-import requests
-
-from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
-from fixtures.types import SigNoz
-
-DUPLICATE_USER_EMAIL = "duplicate@integration.test"
-
-
-def test_duplicate_user_invite_rejected(
-    signoz: SigNoz,
-    get_token: Callable[[str, str], str],
-):
-    """
-    Verify that the unique index on (email, org_id) in the users table prevents
-    creating duplicate users. This invites a new user, accepts the invite, then
-    tries to invite and accept the same email again expecting a failure.
-    """
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Step 1: Invite a new user.
-    initial_invite_response = requests.post(
-        signoz.self.host_configs["8080"].get("/api/v1/invite"),
-        json={"email": DUPLICATE_USER_EMAIL, "role": "EDITOR"},
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=2,
-    )
-    assert initial_invite_response.status_code == HTTPStatus.CREATED
-    initial_invite_token = initial_invite_response.json()["data"]["token"]
-
-    # Step 2: Accept the invite to create the user.
-    initial_accept_response = requests.post(
-        signoz.self.host_configs["8080"].get("/api/v1/invite/accept"),
-        json={"token": initial_invite_token, "password": "password123Z$"},
-        timeout=2,
-    )
-    assert initial_accept_response.status_code == HTTPStatus.CREATED
-
-    # Step 3: Invite the same email again.
-    duplicate_invite_response = requests.post(
-        signoz.self.host_configs["8080"].get("/api/v1/invite"),
-        json={"email": DUPLICATE_USER_EMAIL, "role": "VIEWER"},
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=2,
-    )
-
-    # The invite creation itself may be rejected if the app checks for existing users.
-    if duplicate_invite_response.status_code != HTTPStatus.CREATED:
-        assert duplicate_invite_response.status_code == HTTPStatus.CONFLICT
-        return
-
-    duplicate_invite_token = duplicate_invite_response.json()["data"]["token"]
-
-    # Step 4: Accept the duplicate invite — should fail due to unique constraint.
-    duplicate_accept_response = requests.post(
-        signoz.self.host_configs["8080"].get("/api/v1/invite/accept"),
-        json={"token": duplicate_invite_token, "password": "password123Z$"},
-        timeout=2,
-    )
-    assert duplicate_accept_response.status_code == HTTPStatus.CONFLICT