feat(authz): introducing identity

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

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.112.0
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.112.0
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.0}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.0}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

ee/query-service/app/api/cloudIntegrations.go

@@ -170,14 +170,14 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider)
 	email := valuer.MustNewEmail(fmt.Sprintf("%s@signoz.io", cloudIntegrationUserName))
 
-	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId))
+	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, valuer.MustNewUUID(orgId))
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}
 
 	password := types.MustGenerateFactorPassword(cloudIntegrationUser.ID.StringValue())
 
-	cloudIntegrationUser, err = ah.Signoz.Modules.User.GetOrCreateUser(ctx, cloudIntegrationUser, user.WithFactorPassword(password))
+	cloudIntegrationUser, err = ah.Signoz.Modules.User.GetOrCreateUser(ctx, cloudIntegrationUser, user.WithFactorPassword(password), user.WithRole(types.RoleViewer))
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't look for integration user: %w", err))
 	}

frontend/package.json

@@ -58,7 +58,6 @@
 		"@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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,26 @@
+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,6 +24,5 @@ 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/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
 import { Card } from 'antd';
-import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -11,8 +10,6 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -31,15 +28,6 @@ interface Props {
 }
 
 function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
-
 	const basePayload = getHostLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -84,40 +72,29 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 		setIsPaginating(false);
 	}, [data, setIsPaginating]);
 
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef,
-	});
-
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => {
-			return (
-				<div key={logToRender.id}>
-					<RawLogView
-						isTextOverflowEllipsisDisabled
-						data={logToRender}
-						linesPerRow={5}
-						fontSize={FontSize.MEDIUM}
-						selectedFields={[
-							{
-								dataType: 'string',
-								type: '',
-								name: 'body',
-							},
-							{
-								dataType: 'string',
-								type: '',
-								name: 'timestamp',
-							},
-						]}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						isActiveLog={activeLog?.id === logToRender.id}
-					/>
-				</div>
-			);
-		},
-		[activeLog, handleSetActiveLog, handleCloseLogDetail],
+		(_: number, logToRender: ILog): JSX.Element => (
+			<RawLogView
+				isTextOverflowEllipsisDisabled
+				key={logToRender.id}
+				data={logToRender}
+				linesPerRow={5}
+				fontSize={FontSize.MEDIUM}
+				selectedFields={[
+					{
+						dataType: 'string',
+						type: '',
+						name: 'body',
+					},
+					{
+						dataType: 'string',
+						type: '',
+						name: 'timestamp',
+					},
+				]}
+			/>
+		),
+		[],
 	);
 
 	const renderFooter = useCallback(
@@ -141,7 +118,6 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 					<Virtuoso
 						className="host-metrics-logs-virtuoso"
 						key="host-metrics-logs-virtuoso"
-						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -163,24 +139,7 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div
-					className="host-metrics-logs-list-container"
-					data-log-detail-ignore="true"
-				>
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
-				/>
+				<div className="host-metrics-logs-list-container">{renderContent}</div>
 			)}
 		</div>
 	);

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -13,9 +13,6 @@ export type LogDetailProps = {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
-	logs?: ILog[];
-	onNavigateLog?: (log: ILog) => void;
-	onScrollToLog?: (logId: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -15,8 +15,6 @@
 		}
 
 		.log-detail-drawer__title-right {
-			display: flex;
-			align-items: center;
 			.ant-btn {
 				display: flex;
 				align-items: center;
@@ -68,10 +66,6 @@
 		margin-bottom: 16px;
 	}
 
-	.log-detail-drawer__content {
-		height: 100%;
-	}
-
 	.log-detail-drawer__log {
 		width: 100%;
 		display: flex;
@@ -189,115 +183,9 @@
 	.ant-drawer-close {
 		padding: 0px;
 	}
-	.log-detail-drawer__footer-hint {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 8px 16px;
-		text-align: left;
-		color: var(--text-vanilla-200);
-		background: var(--bg-ink-400);
-		z-index: 10;
-
-		.log-detail-drawer__footer-hint-content {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.log-detail-drawer__footer-hint-icon {
-			display: inline;
-			vertical-align: middle;
-			color: var(--text-vanilla-200);
-		}
-
-		.log-detail-drawer__footer-hint-text {
-			font-size: 13px;
-			margin: 0;
-		}
-	}
-	.log-arrows {
-		display: flex;
-		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-		border-radius: 6px;
-		padding: 2px 6px;
-		align-items: center;
-		margin-left: 8px;
-	}
-
-	.log-arrow-btn {
-		padding: 0;
-		min-width: 28px;
-		height: 28px;
-		border-radius: 4px;
-		background: var(--bg-ink-400);
-		color: var(--text-vanilla-400);
-		border: 1px solid var(--bg-ink-300);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--bg-ink-400);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--bg-ink-300);
-		color: var(--text-vanilla-100);
-	}
-
-	.log-arrow-btn[disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		background: var(--bg-ink-500);
-		color: var(--text-vanilla-200);
-
-		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--bg-ink-300);
-			color: var(--text-vanilla-100);
-		}
-	}
 }
 
 .lightMode {
-	.log-arrows {
-		background: var(--bg-vanilla-100);
-		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-400);
-		border: 1px solid var(--bg-vanilla-300);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--bg-vanilla-100);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn:hover:not([disabled]) {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn[disabled] {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-200);
-	}
 	.ant-drawer-header {
 		border-bottom: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-100);
@@ -364,33 +252,4 @@
 			color: var(--text-ink-300);
 		}
 	}
-
-	.log-detail-drawer__footer-hint {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 8px 16px;
-		text-align: left;
-		color: var(--text-vanilla-700);
-		background: var(--bg-vanilla-100);
-		z-index: 10;
-
-		.log-detail-drawer__footer-hint-content {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.log-detail-drawer__footer-hint-icon {
-			display: inline;
-			vertical-align: middle;
-			color: var(--text-vanilla-700);
-		}
-
-		.log-detail-drawer__footer-hint-text {
-			font-size: 13px;
-			margin: 0;
-		}
-	}
 }

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -32,12 +32,8 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
 import { cloneDeep } from 'lodash-es';
 import {
-	ArrowDown,
-	ArrowUp,
 	BarChart2,
 	Braces,
-	ChevronDown,
-	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
@@ -64,9 +60,6 @@ function LogDetailInner({
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
-	logs,
-	onNavigateLog,
-	onScrollToLog,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -81,78 +74,6 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
 
-	// Handle clicks outside to close drawer, except on explicitly ignored regions
-	useEffect(() => {
-		const handleClickOutside = (e: MouseEvent): void => {
-			const target = e.target as HTMLElement;
-
-			// Don't close if clicking on explicitly ignored regions
-			if (target.closest('[data-log-detail-ignore="true"]')) {
-				return;
-			}
-
-			// Close the drawer for any other outside click
-			onClose?.(e as any);
-		};
-
-		document.addEventListener('mousedown', handleClickOutside);
-
-		return (): void => {
-			document.removeEventListener('mousedown', handleClickOutside);
-		};
-	}, [onClose]);
-
-	// Keyboard navigation - handle up/down arrow keys
-	// Only listen when in OVERVIEW tab
-	useEffect(() => {
-		if (
-			!logs ||
-			!onNavigateLog ||
-			logs.length === 0 ||
-			selectedView !== VIEW_TYPES.OVERVIEW
-		) {
-			return;
-		}
-
-		const handleKeyDown = (e: KeyboardEvent): void => {
-			const currentIndex = logs.findIndex((l) => l.id === log.id);
-			if (currentIndex === -1) {
-				return;
-			}
-
-			if (e.key === 'ArrowUp') {
-				e.preventDefault();
-				e.stopPropagation();
-				// Navigate to previous log
-				if (currentIndex > 0) {
-					const prevLog = logs[currentIndex - 1];
-					onNavigateLog(prevLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(prevLog.id);
-					}
-				}
-			} else if (e.key === 'ArrowDown') {
-				e.preventDefault();
-				e.stopPropagation();
-				// Navigate to next log
-				if (currentIndex < logs.length - 1) {
-					const nextLog = logs[currentIndex + 1];
-					onNavigateLog(nextLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(nextLog.id);
-					}
-				}
-			}
-		};
-
-		document.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			document.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
-
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
 			return null;
@@ -306,87 +227,32 @@ function LogDetailInner({
 	);
 
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
-	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
-	const isPrevDisabled =
-		!logs || !onNavigateLog || logs.length === 0 || currentLogIndex <= 0;
-	const isNextDisabled =
-		!logs ||
-		!onNavigateLog ||
-		logs.length === 0 ||
-		currentLogIndex === logs.length - 1;
-
-	type HandleNavigateLogParams = {
-		direction: 'next' | 'previous';
-	};
-
-	const handleNavigateLog = ({ direction }: HandleNavigateLogParams): void => {
-		if (!logs || !onNavigateLog || currentLogIndex === -1) {
-			return;
-		}
-		if (direction === 'previous' && !isPrevDisabled) {
-			const prevLog = logs[currentLogIndex - 1];
-			onNavigateLog(prevLog);
-			onScrollToLog?.(prevLog.id);
-		} else if (direction === 'next' && !isNextDisabled) {
-			const nextLog = logs[currentLogIndex + 1];
-			onNavigateLog(nextLog);
-			onScrollToLog?.(nextLog.id);
-		}
-	};
 
 	return (
 		<Drawer
 			width="60%"
-			mask={false}
-			maskClosable={false}
+			maskStyle={{ background: 'none' }}
 			title={
-				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
+				<div className="log-detail-drawer__title">
 					<div className="log-detail-drawer__title-left">
 						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
 						<Typography.Text className="title">Log details</Typography.Text>
 					</div>
-					<div className="log-detail-drawer__title-right">
-						<div className="log-arrows">
-							<Tooltip
-								title={isPrevDisabled ? '' : 'Move to previous log'}
-								placement="top"
-								mouseLeaveDelay={0}
+					{showOpenInExplorerBtn && (
+						<div className="log-detail-drawer__title-right">
+							<Button
+								className="open-in-explorer-btn"
+								icon={<Compass size={16} />}
+								onClick={handleOpenInExplorer}
 							>
-								<Button
-									icon={<ChevronUp size={14} />}
-									className="log-arrow-btn log-arrow-btn-up"
-									disabled={isPrevDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
-								/>
-							</Tooltip>
-							<Tooltip
-								title={isNextDisabled ? '' : 'Move to next log'}
-								placement="top"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									icon={<ChevronDown size={14} />}
-									className="log-arrow-btn log-arrow-btn-down"
-									disabled={isNextDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'next' })}
-								/>
-							</Tooltip>
+								Open in Explorer
+							</Button>
 						</div>
-						{showOpenInExplorerBtn && (
-							<div>
-								<Button
-									className="open-in-explorer-btn"
-									icon={<Compass size={16} />}
-									onClick={handleOpenInExplorer}
-								>
-									Open in Explorer
-								</Button>
-							</div>
-						)}
-					</div>
+					)}
 				</div>
 			}
 			placement="right"
+			// closable
 			onClose={drawerCloseHandler}
 			open={log !== null}
 			style={{
@@ -397,164 +263,138 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
-				<div className="log-detail-drawer__log">
-					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
-						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-					</Tooltip>
+			<div className="log-detail-drawer__log">
+				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+				<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+					<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+				</Tooltip>
 
-					<div className="log-overflow-shadow">&nbsp;</div>
-				</div>
+				<div className="log-overflow-shadow">&nbsp;</div>
+			</div>
 
-				<div className="tabs-and-search">
-					<Radio.Group
-						className="views-tabs"
-						onChange={handleModeChange}
-						value={selectedView}
+			<div className="tabs-and-search">
+				<Radio.Group
+					className="views-tabs"
+					onChange={handleModeChange}
+					value={selectedView}
+				>
+					<Radio.Button
+						className={
+							// eslint-disable-next-line sonarjs/no-duplicate-string
+							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.OVERVIEW}
 					>
-						<Radio.Button
-							className={
-								// eslint-disable-next-line sonarjs/no-duplicate-string
-								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.OVERVIEW}
-						>
-							<div className="view-title">
-								<Table size={14} />
-								Overview
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.JSON}
-						>
-							<div className="view-title">
-								<Braces size={14} />
-								JSON
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.CONTEXT}
-						>
-							<div className="view-title">
-								<TextSelect size={14} />
-								Context
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.INFRAMETRICS}
-						>
-							<div className="view-title">
-								<BarChart2 size={14} />
-								Metrics
-							</div>
-						</Radio.Button>
-					</Radio.Group>
-
-					<div className="log-detail-drawer__actions">
-						{selectedView === VIEW_TYPES.CONTEXT && (
-							<Tooltip
-								title="Show Filters"
-								placement="topLeft"
-								aria-label="Show Filters"
-							>
-								<Button
-									className="action-btn"
-									icon={<Filter size={16} />}
-									onClick={handleFilterVisible}
-								/>
-							</Tooltip>
-						)}
+						<div className="view-title">
+							<Table size={14} />
+							Overview
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
+						value={VIEW_TYPES.JSON}
+					>
+						<div className="view-title">
+							<Braces size={14} />
+							JSON
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.CONTEXT}
+					>
+						<div className="view-title">
+							<TextSelect size={14} />
+							Context
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.INFRAMETRICS}
+					>
+						<div className="view-title">
+							<BarChart2 size={14} />
+							Metrics
+						</div>
+					</Radio.Button>
+				</Radio.Group>
 
+				<div className="log-detail-drawer__actions">
+					{selectedView === VIEW_TYPES.CONTEXT && (
 						<Tooltip
-							title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+							title="Show Filters"
 							placement="topLeft"
-							aria-label={
-								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-							}
+							aria-label="Show Filters"
 						>
 							<Button
 								className="action-btn"
-								icon={<Copy size={16} />}
-								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+								icon={<Filter size={16} />}
+								onClick={handleFilterVisible}
 							/>
 						</Tooltip>
-					</div>
-				</div>
-				{isFilterVisible && contextQuery?.builder.queryData[0] && (
-					<div className="log-detail-drawer-query-container">
-						<QuerySearch
-							onChange={(value): void => handleQueryExpressionChange(value, 0)}
-							dataSource={DataSource.LOGS}
-							queryData={contextQuery?.builder.queryData[0]}
-							onRun={handleRunQuery}
+					)}
+
+					<Tooltip
+						title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+						placement="topLeft"
+						aria-label={
+							selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+						}
+					>
+						<Button
+							className="action-btn"
+							icon={<Copy size={16} />}
+							onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 						/>
-					</div>
-				)}
-
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<Overview
-						logData={log}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onClickActionItem}
-						isListViewPanel={isListViewPanel}
-						selectedOptions={options}
-						listViewPanelSelectedFields={listViewPanelSelectedFields}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
-
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<ContextView
-						log={log}
-						filters={filters}
-						contextQuery={contextQuery}
-						isEdit={isEdit}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.INFRAMETRICS && (
-					<InfraMetrics
-						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-						timestamp={log.timestamp.toString()}
-						dataSource={DataSource.LOGS}
-					/>
-				)}
-
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<div className="log-detail-drawer__footer-hint">
-						<div className="log-detail-drawer__footer-hint-content">
-							<Typography.Text
-								type="secondary"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								Use
-							</Typography.Text>
-							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
-							<span>/</span>
-							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
-							<Typography.Text
-								type="secondary"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								to view previous/next log
-							</Typography.Text>
-						</div>
-					</div>
-				)}
+					</Tooltip>
+				</div>
 			</div>
+			{isFilterVisible && contextQuery?.builder.queryData[0] && (
+				<div className="log-detail-drawer-query-container">
+					<QuerySearch
+						onChange={(value): void => handleQueryExpressionChange(value, 0)}
+						dataSource={DataSource.LOGS}
+						queryData={contextQuery?.builder.queryData[0]}
+						onRun={handleRunQuery}
+					/>
+				</div>
+			)}
+
+			{selectedView === VIEW_TYPES.OVERVIEW && (
+				<Overview
+					logData={log}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onClickActionItem}
+					isListViewPanel={isListViewPanel}
+					selectedOptions={options}
+					listViewPanelSelectedFields={listViewPanelSelectedFields}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+
+			{selectedView === VIEW_TYPES.CONTEXT && (
+				<ContextView
+					log={log}
+					filters={filters}
+					contextQuery={contextQuery}
+					isEdit={isEdit}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.INFRAMETRICS && (
+				<InfraMetrics
+					clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+					timestamp={log.timestamp.toString()}
+					dataSource={DataSource.LOGS}
+				/>
+			)}
 		</Drawer>
 	);
 }

frontend/src/components/Logs/ListLogView/index.tsx

@@ -2,11 +2,13 @@ import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import cx from 'classnames';
+import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
@@ -102,17 +104,12 @@ function LogSelectedField({
 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
-	onSetActiveLog: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
+	onSetActiveLog: (log: ILog) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	isActiveLog?: boolean;
-	onClearActiveLog?: () => void;
 };
 
 function ListLogView({
@@ -123,8 +120,7 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
-	isActiveLog,
-	onClearActiveLog,
+	handleChangeSelectedView,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -133,24 +129,35 @@ function ListLogView({
 	);
 	const isReadOnlyLog = !isLogsExplorerPage;
 
+	const {
+		activeLog: activeContextLog,
+		onAddToQuery: handleAddToQuery,
+		onSetActiveLog: handleSetActiveContextLog,
+		onClearActiveLog: handleClearActiveContextLog,
+	} = useActiveLog();
+
 	const isDarkMode = useIsDarkMode();
 
-	const handleDetailedView = useCallback(() => {
-		if (isActiveLog) {
-			onClearActiveLog?.();
-			return;
-		}
+	const handlerClearActiveContextLog = useCallback(
+		(event: React.MouseEvent | React.KeyboardEvent) => {
+			event.preventDefault();
+			event.stopPropagation();
+			handleClearActiveContextLog();
+		},
+		[handleClearActiveContextLog],
+	);
 
+	const handleDetailedView = useCallback(() => {
 		onSetActiveLog(logData);
-	}, [logData, onSetActiveLog, isActiveLog, onClearActiveLog]);
+	}, [logData, onSetActiveLog]);
 
 	const handleShowContext = useCallback(
 		(event: React.MouseEvent) => {
 			event.preventDefault();
 			event.stopPropagation();
-			onSetActiveLog(logData, VIEW_TYPES.CONTEXT);
+			handleSetActiveContextLog(logData);
 		},
-		[logData, onSetActiveLog],
+		[logData, handleSetActiveContextLog],
 	);
 
 	const updatedSelecedFields = useMemo(
@@ -179,7 +186,11 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				$isActiveLog={isHighlighted || activeLog?.id === logData.id}
+				$isActiveLog={
+					isHighlighted ||
+					activeLog?.id === logData.id ||
+					activeContextLog?.id === logData.id
+				}
 				$isDarkMode={isDarkMode}
 				$logType={logType}
 				onClick={handleDetailedView}
@@ -240,6 +251,15 @@ function ListLogView({
 					/>
 				)}
 			</Container>
+			{activeContextLog && (
+				<LogDetail
+					log={activeContextLog}
+					onAddToQuery={handleAddToQuery}
+					selectedTab={VIEW_TYPES.CONTEXT}
+					onClose={handlerClearActiveContextLog}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
 		</>
 	);
 }

frontend/src/components/Logs/RawLogView/index.tsx

@@ -1,15 +1,19 @@
 import {
+	KeyboardEvent,
 	memo,
 	MouseEvent,
 	MouseEventHandler,
 	useCallback,
 	useMemo,
+	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Tooltip } from 'antd';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
+import { DrawerProps, Tooltip } from 'antd';
+import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -35,8 +39,7 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	onSetActiveLog,
-	onClearActiveLog,
+	handleChangeSelectedView,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -45,6 +48,15 @@ function RawLogView({
 	} = useCopyLogLink(data.id);
 	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();
+
+	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
+
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
@@ -122,24 +134,34 @@ function RawLogView({
 			// Use custom click handler if provided, otherwise use default behavior
 			if (onLogClick) {
 				onLogClick(data, event);
-				return;
+			} else {
+				onSetActiveLog(data);
+				setSelectedTab(VIEW_TYPES.OVERVIEW);
 			}
-			if (isActiveLog) {
-				onClearActiveLog?.();
-				return;
-			}
-
-			onSetActiveLog?.(data);
 		},
-		[isReadOnly, onLogClick, isActiveLog, onSetActiveLog, data, onClearActiveLog],
+		[isReadOnly, data, onSetActiveLog, onLogClick],
+	);
+
+	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
+		(
+			event: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>,
+		) => {
+			event.preventDefault();
+			event.stopPropagation();
+
+			onClearActiveLog();
+			setSelectedTab(undefined);
+		},
+		[onClearActiveLog],
 	);
 
 	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-
-			onSetActiveLog?.(data, VIEW_TYPES.CONTEXT);
+			// handleSetActiveContextLog(data);
+			setSelectedTab(VIEW_TYPES.CONTEXT);
+			onSetActiveLog(data);
 		},
 		[data, onSetActiveLog],
 	);
@@ -159,7 +181,7 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isHightlightedLog={isUrlHighlighted}
-			$isActiveLog={isActiveLog}
+			$isActiveLog={activeLog?.id === data.id || isActiveLog}
 			$isCustomHighlighted={isHighlighted}
 			$logType={logType}
 			fontSize={fontSize}
@@ -196,6 +218,17 @@ function RawLogView({
 					onLogCopy={onLogCopy}
 				/>
 			)}
+
+			{selectedTab && (
+				<LogDetail
+					selectedTab={selectedTab}
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
 		</RawLogViewContainer>
 	);
 }

frontend/src/components/Logs/RawLogView/styles.ts

@@ -45,6 +45,9 @@ export const RawLogViewContainer = styled(Row)<{
 				: `margin: 2px 0;`}
 	}
 
+	${({ $isActiveLog, $logType }): string =>
+		getActiveLogBackground($isActiveLog, true, $logType)}
+
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)

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

@@ -1,5 +1,4 @@
 import { MouseEvent } from 'react';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
@@ -17,11 +16,6 @@ export interface RawLogViewProps {
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	onSetActiveLog?: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
-	onClearActiveLog?: () => void;
 }
 
 export interface RawLogContentProps {

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
 import { Card } from 'antd';
-import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -12,8 +11,6 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -43,15 +40,6 @@ function EntityLogs({
 	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
-
 	const basePayload = getEntityEventsOrLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -74,40 +62,29 @@ function EntityLogs({
 		basePayload,
 	});
 
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef,
-	});
-
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => {
-			return (
-				<div key={logToRender.id}>
-					<RawLogView
-						isTextOverflowEllipsisDisabled
-						data={logToRender}
-						linesPerRow={5}
-						fontSize={FontSize.MEDIUM}
-						selectedFields={[
-							{
-								dataType: 'string',
-								type: '',
-								name: 'body',
-							},
-							{
-								dataType: 'string',
-								type: '',
-								name: 'timestamp',
-							},
-						]}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						isActiveLog={activeLog?.id === logToRender.id}
-					/>
-				</div>
-			);
-		},
-		[activeLog, handleSetActiveLog, handleCloseLogDetail],
+		(_: number, logToRender: ILog): JSX.Element => (
+			<RawLogView
+				isTextOverflowEllipsisDisabled
+				key={logToRender.id}
+				data={logToRender}
+				linesPerRow={5}
+				fontSize={FontSize.MEDIUM}
+				selectedFields={[
+					{
+						dataType: 'string',
+						type: '',
+						name: 'body',
+					},
+					{
+						dataType: 'string',
+						type: '',
+						name: 'timestamp',
+					},
+				]}
+			/>
+		),
+		[],
 	);
 
 	const { data, isLoading, isFetching, isError } = useQuery({
@@ -154,7 +131,6 @@ function EntityLogs({
 					<Virtuoso
 						className="entity-logs-virtuoso"
 						key="entity-logs-virtuoso"
-						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -178,21 +154,7 @@ function EntityLogs({
 			)}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="entity-logs-list-container" data-log-detail-ignore="true">
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
-				/>
+				<div className="entity-logs-list-container">{renderContent}</div>
 			)}
 		</div>
 	);

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -13,9 +14,8 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -38,11 +38,10 @@ function LiveLogsList({
 
 	const {
 		activeLog,
+		onClearActiveLog,
 		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
+		onSetActiveLog,
+	} = useActiveLog();
 
 	// get only data from the logs object
 	const formattedLogs: ILog[] = useMemo(
@@ -66,56 +65,42 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
-	const handleScrollToLog = useScrollToLog({
-		logs: formattedLogs,
-		virtuosoRef: ref,
-	});
-
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<div key={log.id}>
-						<RawLogView
-							data={log}
-							isActiveLog={activeLog?.id === log.id}
-							linesPerRow={options.maxLines}
-							selectedFields={selectedFields}
-							fontSize={options.fontSize}
-							handleChangeSelectedView={handleChangeSelectedView}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-						/>
-					</div>
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+						fontSize={options.fontSize}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
 				);
 			}
 
 			return (
-				<div key={log.id}>
-					<ListLogView
-						logData={log}
-						isActiveLog={activeLog?.id === log.id}
-						selectedFields={selectedFields}
-						linesPerRow={options.maxLines}
-						onAddToQuery={onAddToQuery}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				</div>
+				<ListLogView
+					key={log.id}
+					logData={log}
+					selectedFields={selectedFields}
+					linesPerRow={options.maxLines}
+					onAddToQuery={onAddToQuery}
+					onSetActiveLog={onSetActiveLog}
+					fontSize={options.fontSize}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
 			);
 		},
 		[
+			handleChangeSelectedView,
+			onAddToQuery,
+			onSetActiveLog,
+			options.fontSize,
 			options.format,
 			options.maxLines,
-			options.fontSize,
-			activeLog?.id,
 			selectedFields,
-			onAddToQuery,
-			handleSetActiveLog,
-			handleCloseLogDetail,
-			handleChangeSelectedView,
 		],
 	);
 
@@ -171,10 +156,6 @@ function LiveLogsList({
 								activeLogIndex,
 							}}
 							handleChangeSelectedView={handleChangeSelectedView}
-							logs={formattedLogs}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-							activeLog={activeLog}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
@@ -192,17 +173,14 @@ function LiveLogsList({
 				</InfinityWrapperStyled>
 			)}
 
-			{activeLog && selectedTab && (
+			{activeLog && (
 				<LogDetail
-					selectedTab={selectedTab}
+					selectedTab={VIEW_TYPES.OVERVIEW}
 					log={activeLog}
-					onClose={handleCloseLogDetail}
+					onClose={onClearActiveLog}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
 					handleChangeSelectedView={handleChangeSelectedView}
-					logs={formattedLogs}
-					onNavigateLog={handleSetActiveLog}
-					onScrollToLog={handleScrollToLog}
 				/>
 			)}
 		</div>

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -395,7 +395,7 @@ export default function TableViewActions(
 								onOpenChange={setIsOpen}
 								arrow={false}
 								content={
-									<div data-log-detail-ignore="true">
+									<div>
 										<Button
 											className="more-filter-actions"
 											type="text"
@@ -481,7 +481,7 @@ export default function TableViewActions(
 							onOpenChange={setIsOpen}
 							arrow={false}
 							content={
-								<div data-log-detail-ignore="true">
+								<div>
 									<Button
 										className="more-filter-actions"
 										type="text"

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -7,7 +7,6 @@ import {
 	useMemo,
 } from 'react';
 import { ColumnsType } from 'antd/es/table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
 import { ColumnTypeRender } from 'components/Logs/TableView/types';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -23,27 +22,22 @@ interface TableRowProps {
 	tableColumns: ColumnsType<Record<string, unknown>>;
 	index: number;
 	log: Record<string, unknown>;
-	onShowLogDetails?: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
+	handleSetActiveContextLog: (log: ILog) => void;
+	onShowLogDetails: (log: ILog) => void;
 	logs: ILog[];
 	hasActions: boolean;
 	fontSize: FontSize;
-	isActiveLog?: boolean;
-	onClearActiveLog?: () => void;
 }
 
 export default function TableRow({
 	tableColumns,
 	index,
 	log,
+	handleSetActiveContextLog,
 	onShowLogDetails,
 	logs,
 	hasActions,
 	fontSize,
-	isActiveLog,
-	onClearActiveLog,
 }: TableRowProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -58,31 +52,21 @@ export default function TableRow({
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			if (!currentLog) {
+			if (!handleSetActiveContextLog || !currentLog) {
 				return;
 			}
 
-			onShowLogDetails?.(currentLog, VIEW_TYPES.CONTEXT);
+			handleSetActiveContextLog(currentLog);
 		},
-		[currentLog, onShowLogDetails],
+		[currentLog, handleSetActiveContextLog],
 	);
 
 	const handleShowLogDetails = useCallback(() => {
-		if (!currentLog) {
+		if (!onShowLogDetails || !currentLog) {
 			return;
 		}
-
-		// If this log is already active, close the detail drawer
-		if (isActiveLog && onClearActiveLog) {
-			onClearActiveLog();
-			return;
-		}
-
-		// Otherwise, open the detail drawer for this log
-		if (onShowLogDetails) {
-			onShowLogDetails(currentLog);
-		}
-	}, [currentLog, onShowLogDetails, isActiveLog, onClearActiveLog]);
+		onShowLogDetails(currentLog);
+	}, [currentLog, onShowLogDetails]);
 
 	const hasSingleColumn =
 		tableColumns.filter((column) => column.key !== 'state-indicator').length ===

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -4,6 +4,7 @@ import {
 	TableVirtuoso,
 	TableVirtuosoHandle,
 } from 'react-virtuoso';
+import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
@@ -57,40 +58,26 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 
 const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 	function InfinityTableView(
-		{
-			isLoading,
-			tableViewProps,
-			infitiyTableProps,
-			onSetActiveLog,
-			onClearActiveLog,
-			activeLog,
-		},
+		{ isLoading, tableViewProps, infitiyTableProps, handleChangeSelectedView },
 		ref,
 	): JSX.Element | null {
-		const { activeLog: activeContextLog } = useActiveLog();
-
-		const onSetActiveLogExpand = useCallback(
-			(log: ILog) => {
-				onSetActiveLog?.(log);
-			},
-			[onSetActiveLog],
-		);
-
-		const onSetActiveLogContext = useCallback(
-			(log: ILog) => {
-				onSetActiveLog?.(log, VIEW_TYPES.CONTEXT);
-			},
-			[onSetActiveLog],
-		);
-
-		const onCloseActiveLog = useCallback(() => {
-			onClearActiveLog?.();
-		}, [onClearActiveLog]);
+		const {
+			activeLog: activeContextLog,
+			onSetActiveLog: handleSetActiveContextLog,
+			onClearActiveLog: handleClearActiveContextLog,
+			onAddToQuery: handleAddToQuery,
+		} = useActiveLog();
+		const {
+			activeLog,
+			onSetActiveLog,
+			onClearActiveLog,
+			onAddToQuery,
+		} = useActiveLog();
 
 		const { dataSource, columns } = useTableView({
 			...tableViewProps,
-			onClickExpand: onSetActiveLogExpand,
-			onOpenLogsContext: onSetActiveLogContext,
+			onClickExpand: onSetActiveLog,
+			onOpenLogsContext: handleSetActiveContextLog,
 		});
 
 		const { draggedColumns, onDragColumns } = useDragColumns<
@@ -111,32 +98,27 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => {
-				return (
-					<div key={log.id as string}>
-						<TableRow
-							tableColumns={tableColumns}
-							index={index}
-							log={log}
-							logs={tableViewProps.logs}
-							hasActions
-							fontSize={tableViewProps.fontSize}
-							onShowLogDetails={onSetActiveLog}
-							isActiveLog={activeLog?.id === log.id}
-							onClearActiveLog={onCloseActiveLog}
-						/>
-					</div>
-				);
-			},
+			(index: number, log: Record<string, unknown>): JSX.Element => (
+				<TableRow
+					tableColumns={tableColumns}
+					index={index}
+					log={log}
+					handleSetActiveContextLog={handleSetActiveContextLog}
+					logs={tableViewProps.logs}
+					hasActions
+					fontSize={tableViewProps.fontSize}
+					onShowLogDetails={onSetActiveLog}
+				/>
+			),
 			[
+				handleSetActiveContextLog,
 				tableColumns,
-				onSetActiveLog,
-				tableViewProps.logs,
 				tableViewProps.fontSize,
-				activeLog?.id,
-				onCloseActiveLog,
+				tableViewProps.logs,
+				onSetActiveLog,
 			],
 		);
+
 		const tableHeader = useCallback(
 			() => (
 				<tr>
@@ -197,6 +179,24 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						? { endReached: infitiyTableProps.onEndReached }
 						: {})}
 				/>
+
+				{activeContextLog && (
+					<LogDetail
+						log={activeContextLog}
+						onClose={handleClearActiveContextLog}
+						onAddToQuery={handleAddToQuery}
+						selectedTab={VIEW_TYPES.CONTEXT}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				)}
+				<LogDetail
+					selectedTab={VIEW_TYPES.OVERVIEW}
+					log={activeLog}
+					onClose={onClearActiveLog}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
 			</>
 		);
 	},

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -1,7 +1,5 @@
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { UseTableViewProps } from 'components/Logs/TableView/types';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
@@ -10,11 +8,4 @@ export type InfinityTableProps = {
 		onEndReached: (index: number) => void;
 	};
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	logs?: ILog[];
-	onSetActiveLog?: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
-	onClearActiveLog?: () => void;
-	activeLog?: ILog | null;
 };

frontend/src/container/LogsExplorerList/index.tsx

@@ -4,6 +4,7 @@ import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 // components
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
@@ -15,9 +16,8 @@ import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import APIError from 'types/api/error';
 // interfaces
@@ -55,11 +55,10 @@ function LogsExplorerList({
 
 	const {
 		activeLog,
+		onClearActiveLog,
 		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
+		onSetActiveLog,
+	} = useActiveLog();
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -83,12 +82,6 @@ function LogsExplorerList({
 		() => convertKeysToColumnFields(options.selectColumns),
 		[options],
 	);
-
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef: ref,
-	});
-
 	useEffect(() => {
 		if (!isLoading && !isFetching && !isError && logs.length !== 0) {
 			logEvent('Logs Explorer: Data present', {
@@ -101,48 +94,40 @@ function LogsExplorerList({
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<div key={log.id}>
-						<RawLogView
-							data={log}
-							isActiveLog={activeLog?.id === log.id}
-							linesPerRow={options.maxLines}
-							selectedFields={selectedFields}
-							fontSize={options.fontSize}
-							handleChangeSelectedView={handleChangeSelectedView}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-						/>
-					</div>
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+						fontSize={options.fontSize}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
 				);
 			}
 
 			return (
-				<div key={log.id}>
-					<ListLogView
-						logData={log}
-						isActiveLog={activeLog?.id === log.id}
-						selectedFields={selectedFields}
-						onAddToQuery={onAddToQuery}
-						onSetActiveLog={handleSetActiveLog}
-						activeLog={activeLog}
-						fontSize={options.fontSize}
-						linesPerRow={options.maxLines}
-						handleChangeSelectedView={handleChangeSelectedView}
-						onClearActiveLog={handleCloseLogDetail}
-					/>
-				</div>
+				<ListLogView
+					key={log.id}
+					logData={log}
+					selectedFields={selectedFields}
+					onAddToQuery={onAddToQuery}
+					onSetActiveLog={onSetActiveLog}
+					activeLog={activeLog}
+					fontSize={options.fontSize}
+					linesPerRow={options.maxLines}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
 			);
 		},
 		[
-			options.format,
-			options.fontSize,
-			options.maxLines,
 			activeLog,
-			selectedFields,
-			onAddToQuery,
-			handleSetActiveLog,
 			handleChangeSelectedView,
-			handleCloseLogDetail,
+			onAddToQuery,
+			onSetActiveLog,
+			options.fontSize,
+			options.format,
+			options.maxLines,
+			selectedFields,
 		],
 	);
 
@@ -168,10 +153,6 @@ function LogsExplorerList({
 					}}
 					infitiyTableProps={{ onEndReached }}
 					handleChangeSelectedView={handleChangeSelectedView}
-					logs={logs}
-					onSetActiveLog={handleSetActiveLog}
-					onClearActiveLog={handleCloseLogDetail}
-					activeLog={activeLog}
 				/>
 			);
 		}
@@ -218,9 +199,6 @@ function LogsExplorerList({
 		getItemContent,
 		selectedFields,
 		handleChangeSelectedView,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-		activeLog,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {
@@ -300,19 +278,14 @@ function LogsExplorerList({
 						{renderContent}
 					</InfinityWrapperStyled>
 
-					{selectedTab && activeLog && (
-						<LogDetail
-							selectedTab={selectedTab}
-							log={activeLog}
-							onClose={handleCloseLogDetail}
-							onAddToQuery={onAddToQuery}
-							onClickActionItem={onAddToQuery}
-							handleChangeSelectedView={handleChangeSelectedView}
-							logs={logs}
-							onNavigateLog={handleSetActiveLog}
-							onScrollToLog={handleScrollToLog}
-						/>
-					)}
+					<LogDetail
+						selectedTab={VIEW_TYPES.OVERVIEW}
+						log={activeLog}
+						onClose={onClearActiveLog}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onAddToQuery}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
 				</>
 			)}
 		</div>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -466,10 +466,7 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 
-				<div
-					className="logs-explorer-views-type-content"
-					data-log-detail-ignore="true"
-				>
+				<div className="logs-explorer-views-type-content">
 					{showLiveLogs && (
 						<LiveLogs handleChangeSelectedView={handleChangeSelectedView} />
 					)}

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import { UseQueryResult } from 'react-query';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { ResizeTable } from 'components/ResizeTable';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -15,7 +16,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import Controls from 'container/Controls';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useLogsData } from 'hooks/useLogsData';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -82,24 +83,24 @@ function LogsPanelComponent({
 		() => logs.map((log) => FlatLogData(log) as RowData),
 		[logs],
 	);
+
 	const {
 		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
 		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
+	} = useActiveLog();
 
 	const handleRow = useCallback(
 		(record: RowData): HTMLAttributes<RowData> => ({
 			onClick: (): void => {
 				const log = logs.find((item) => item.id === record.id);
 				if (log) {
-					handleSetActiveLog(log);
+					onSetActiveLog(log);
 				}
 			},
 		}),
-		[handleSetActiveLog, logs],
+		[logs, onSetActiveLog],
 	);
 
 	const handleRequestData = (newOffset: number): void => {
@@ -131,7 +132,7 @@ function LogsPanelComponent({
 
 	return (
 		<>
-			<div className="logs-table" data-log-detail-ignore="true">
+			<div className="logs-table">
 				<div className="resize-table">
 					<OverlayScrollbar>
 						<ResizeTable
@@ -165,19 +166,15 @@ function LogsPanelComponent({
 					</div>
 				)}
 			</div>
-			{selectedTab && activeLog && (
-				<LogDetail
-					selectedTab={selectedTab}
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					isListViewPanel
-					listViewPanelSelectedFields={widget?.selectedLogFields}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-				/>
-			)}
+			<LogDetail
+				selectedTab={VIEW_TYPES.OVERVIEW}
+				log={activeLog}
+				onClose={onClearActiveLog}
+				onAddToQuery={onAddToQuery}
+				onClickActionItem={onAddToQuery}
+				isListViewPanel
+				listViewPanelSelectedFields={widget?.selectedLogFields}
+			/>
 		</>
 	);
 }

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

@@ -7,12 +7,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-
-		.auth-domain-title {
-			margin: 0;
-			font-size: 20px;
-			font-weight: 600;
-		}
 	}
 }
 
@@ -21,29 +15,5 @@
 		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,37 +1,28 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { Button, Form, Modal } from 'antd';
-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 put from 'api/v1/domains/id/put';
+import post from 'api/v1/domains/post';
 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,
@@ -48,193 +39,64 @@ 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<FormValues>();
+	const [form] = Form.useForm<PostableAuthDomain>();
 	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 {
-		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 onSubmitHandler = async (): Promise<void> => {
 		const name = form.getFieldValue('name');
-		const googleAuthConfig = getGoogleAuthConfig();
+		const googleAuthConfig = form.getFieldValue('googleAuthConfig');
 		const samlConfig = form.getFieldValue('samlConfig');
 		const oidcConfig = form.getFieldValue('oidcConfig');
-		const roleMapping = getRoleMapping();
 
-		if (isCreate) {
-			createAuthDomain(
-				{
-					data: {
-						name,
-						config: {
-							ssoEnabled: true,
-							ssoType: authnProvider,
-							googleAuthConfig,
-							samlConfig,
-							oidcConfig,
-							roleMapping,
-						},
+		try {
+			if (isCreate) {
+				await post({
+					name,
+					config: {
+						ssoEnabled: true,
+						ssoType: authnProvider,
+						googleAuthConfig,
+						samlConfig,
+						oidcConfig,
 					},
-				},
-				{
-					onSuccess: () => {
-						notifications.success({
-							message: 'Domain created successfully',
-						});
-						onClose();
+				});
+			} else {
+				await put({
+					id: record?.id || '',
+					config: {
+						ssoEnabled: form.getFieldValue('ssoEnabled'),
+						ssoType: authnProvider,
+						googleAuthConfig,
+						samlConfig,
+						oidcConfig,
 					},
-					onError: handleError,
-				},
-			);
-		} else {
-			if (!record?.id) {
-				return;
+				});
 			}
 
-			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,
-				},
-			);
+			onClose();
+		} catch (error) {
+			showErrorModal(error as APIError);
 		}
-	}, [
-		authnProvider,
-		createAuthDomain,
-		form,
-		getGoogleAuthConfig,
-		getRoleMapping,
-		handleError,
-		isCreate,
-		notifications,
-		onClose,
-		record,
-		updateAuthDomain,
-	]);
+	};
 
-	const onBackHandler = useCallback((): void => {
-		form.resetFields();
+	const onBackHandler = (): void => {
 		setAuthnProvider('');
-	}, [form]);
+	};
 
 	return (
-		<Modal
-			open
-			footer={null}
-			onCancel={onClose}
-			width={authnProvider ? 980 : undefined}
-		>
+		<Modal open footer={null} onCancel={onClose}>
 			<Form
 				name="auth-domain"
-				initialValues={defaultTo(prepareInitialValues(record), {
+				initialValues={defaultTo(record, {
 					name: '',
 					ssoEnabled: false,
 					ssoType: '',
@@ -254,11 +116,7 @@ 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"
-								loading={isCreating || isUpdating}
-							>
+							<Button onClick={onSubmitHandler} type="primary">
 								Save Changes
 							</Button>
 						</section>

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

@@ -1,134 +0,0 @@
-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,67 +1,20 @@
-import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-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 { Form, Input, Typography } from 'antd';
 
 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="authn-provider">
-			<section className="authn-provider__header">
-				<h3 className="authn-provider__title">Edit Google Authentication</h3>
-				<p className="authn-provider__description">
+		<div className="google-auth">
+			<section className="header">
+				<Typography.Text className="title">
+					Edit Google Authentication
+				</Typography.Text>
+				<Typography.Paragraph className="description">
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
@@ -72,247 +25,50 @@ function ConfigureGoogleAuthAuthnProvider({
 						docs
 					</a>{' '}
 					for more information.
-				</p>
+				</Typography.Paragraph>
 			</section>
 
-			<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="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__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 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-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>
+			<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__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>
+			<Callout
+				type="warning"
+				size="small"
+				showIcon
+				description="Google OAuth2 won’t be enabled unless you enter all the attributes above"
+				className="callout"
+			/>
 		</div>
 	);
 }

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

@@ -1,211 +1,110 @@
-import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-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 { Checkbox, Form, Input, Typography } from 'antd';
 
 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="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>
+		<div className="saml">
+			<section className="header">
+				<Typography.Text className="title">
+					Edit OIDC Authentication
+				</Typography.Text>
 			</section>
 
-			<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="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__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 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-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="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-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 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-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="Client Secret"
+				name={['oidcConfig', 'clientSecret']}
+				tooltip={{ title: `It is the application's secret.` }}
+			>
+				<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="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', '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="Skip Email Verification"
+				name={['oidcConfig', 'insecureSkipEmailVerified']}
+				valuePropName="checked"
+				className="field"
+				tooltip={{
+					title: `Whether to skip email verification. Defaults to "false"`,
+				}}
+			>
+				<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>
+			<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>
 
-				{/* 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>
+			<Callout
+				type="warning"
+				size="small"
+				showIcon
+				description="OIDC won’t be enabled unless you enter all the attributes above"
+				className="callout"
+			/>
 		</div>
 	);
 }

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

@@ -1,190 +1,82 @@
-import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-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 { Checkbox, Form, Input, Typography } from 'antd';
 
 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="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>
+		<div className="saml">
+			<section className="header">
+				<Typography.Text className="title">
+					Edit SAML Authentication
+				</Typography.Text>
 			</section>
 
-			<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="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__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 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-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 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-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="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__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>
+			<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>
 
-					<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>
+			<Callout
+				type="warning"
+				size="small"
+				showIcon
+				description="SAML won’t be enabled unless you enter all the attributes above"
+				className="callout"
+			/>
 		</div>
 	);
 }

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

@@ -1,246 +1,24 @@
-.authn-provider {
+.google-auth {
 	display: flex;
 	flex-direction: column;
 
-	&__header {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		margin-bottom: 16px;
+	.ant-form-item {
+		margin-bottom: 12px !important;
 	}
 
-	&__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 {
+	.header {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
 		margin-bottom: 12px;
-	}
 
-	&__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;
+		.title {
+			font-weight: bold;
 		}
 
-		&:hover {
-			border-color: var(--l3-border) !important;
+		.description {
+			margin-bottom: 0px !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

@@ -1,134 +0,0 @@
-.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

@@ -1,190 +0,0 @@
-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

@@ -1,134 +0,0 @@
-.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

@@ -1,164 +0,0 @@
-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

@@ -1,103 +0,0 @@
-.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

@@ -1,88 +0,0 @@
-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

@@ -1,28 +0,0 @@
-.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

@@ -1,61 +0,0 @@
-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

@@ -1,294 +0,0 @@
-.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

@@ -1,222 +0,0 @@
-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,74 +1,45 @@
-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 { useState } from 'react';
+import { Switch } from 'antd';
+import put from 'api/v1/domains/id/put';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-
-interface ToggleProps {
-	isDefaultChecked: boolean;
-	record: AuthtypesGettableAuthDomainDTO;
-}
+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();
 
-	useEffect(() => {
-		setIsChecked(isDefaultChecked);
-	}, [isDefaultChecked]);
+	const onChangeHandler = async (checked: boolean): Promise<void> => {
+		setIsLoading(true);
 
-	const { mutate: updateAuthDomain, isLoading } = useUpdateAuthDomain<
-		AxiosError<RenderErrorResponseDTO>
-	>();
-
-	const onChangeHandler = (checked: boolean): void => {
-		if (!record.id) {
-			return;
+		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);
 		}
 
-		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);
-					}
-				},
-			},
-		);
+		setIsLoading(false);
 	};
 
 	return (
-		<Switch
-			disabled={isLoading}
-			checked={isChecked}
-			onCheckedChange={onChangeHandler}
-		/>
+		<Switch loading={isLoading} checked={isChecked} onChange={onChangeHandler} />
 	);
 }
 
+interface ToggleProps {
+	isDefaultChecked: boolean;
+	record: GettableAuthDomain;
+}
+
 export default Toggle;

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

@@ -1,142 +0,0 @@
-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

@@ -1,354 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,220 +0,0 @@
-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,214 +1,151 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
+import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button } from '@signozhq/button';
-import { Trash2, X } from '@signozhq/icons';
-import { Modal, Typography } from 'antd';
-import { Table } from 'antd';
+import { Button, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-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 deleteDomain from 'api/v1/domains/id/delete';
+import listAllDomain from 'api/v1/domains/list';
 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';
 
-export const SSOType = new Map<string, string>([
-	['google_auth', 'Google Auth'],
-	['saml', 'SAML'],
-	['email_password', 'Email Password'],
-	['oidc', 'OIDC'],
-]);
+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);
+	}
+}
 
 function AuthDomain(): JSX.Element {
-	const [record, setRecord] = useState<AuthtypesGettableAuthDomainDTO>();
+	const [record, setRecord] = useState<GettableAuthDomain>();
 	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,
-	} = 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],
-	);
+	} = useQuery({
+		queryFn: listAllDomain,
+		queryKey: ['/api/v1/domains', 'list'],
+		enabled: true,
+	});
 
 	return (
 		<div className="auth-domain">
 			<section className="auth-domain-header">
-				<h3 className="auth-domain-title">Authenticated Domains</h3>
+				<Typography.Title level={3}>Authenticated Domains</Typography.Title>
 				<Button
-					prefixIcon={<PlusOutlined />}
+					type="primary"
+					icon={<PlusOutlined />}
 					onClick={(): void => {
 						setAddDomain(true);
 					}}
-					variant="solid"
-					size="sm"
-					color="primary"
+					className="button"
 				>
 					Add Domain
 				</Button>
 			</section>
-			{formattedError && <ErrorContent error={formattedError} />}
-			{!errorFetchingAuthDomainListResponse && (
+			{(errorFetchingAuthDomainListResponse as APIError) && (
+				<ErrorContent error={errorFetchingAuthDomainListResponse as APIError} />
+			)}
+			{!(errorFetchingAuthDomainListResponse as APIError) && (
 				<Table
 					columns={columns}
-					dataSource={authDomainListResponse?.data?.data}
-					onRow={undefined}
+					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);
+							}
+						},
+					})}
 					loading={
 						isLoadingAuthDomainListResponse || isFetchingAuthDomainListResponse
 					}
 					className="auth-domain-list"
-					rowKey="id"
 				/>
 			)}
 			{(addDomain || record) && (
@@ -222,39 +159,6 @@ 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/hooks/logs/useLogDetailHandlers.ts

@@ -1,59 +0,0 @@
-import { useCallback, useState } from 'react';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import type { UseActiveLog } from 'hooks/logs/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { ILog } from 'types/api/logs/log';
-
-type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
-
-type UseLogDetailHandlersParams = {
-	defaultTab?: SelectedTab;
-};
-
-type UseLogDetailHandlersResult = {
-	activeLog: UseActiveLog['activeLog'];
-	onAddToQuery: UseActiveLog['onAddToQuery'];
-	selectedTab: SelectedTab;
-	handleSetActiveLog: (log: ILog, selectedTab?: SelectedTab) => void;
-	handleCloseLogDetail: () => void;
-};
-
-function useLogDetailHandlers({
-	defaultTab = VIEW_TYPES.OVERVIEW,
-}: UseLogDetailHandlersParams = {}): UseLogDetailHandlersResult {
-	const {
-		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
-		onAddToQuery,
-	} = useActiveLog();
-	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
-
-	const handleSetActiveLog = useCallback(
-		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
-			if (activeLog?.id === log.id) {
-				onClearActiveLog();
-				setSelectedTab(undefined);
-				return;
-			}
-			onSetActiveLog(log);
-			setSelectedTab(nextTab ?? defaultTab);
-		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
-	);
-
-	const handleCloseLogDetail = useCallback((): void => {
-		onClearActiveLog();
-		setSelectedTab(undefined);
-	}, [onClearActiveLog]);
-
-	return {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	};
-}
-
-export default useLogDetailHandlers;

frontend/src/hooks/logs/useScrollToLog.ts

@@ -1,28 +0,0 @@
-import { useCallback } from 'react';
-import type { VirtuosoHandle } from 'react-virtuoso';
-
-type UseScrollToLogParams = {
-	logs: Array<{ id: string }>;
-	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
-};
-
-function useScrollToLog({
-	logs,
-	virtuosoRef,
-}: UseScrollToLogParams): (logId: string) => void {
-	return useCallback(
-		(logId: string): void => {
-			const logIndex = logs.findIndex(({ id }) => id === logId);
-			if (logIndex !== -1 && virtuosoRef.current) {
-				virtuosoRef.current.scrollToIndex({
-					index: logIndex,
-					align: 'center',
-					behavior: 'smooth',
-				});
-			}
-		},
-		[logs, virtuosoRef],
-	);
-}
-
-export default useScrollToLog;

frontend/src/hooks/useCollapseSectionErrors.ts

@@ -1,61 +0,0 @@
-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/styles.scss

@@ -567,15 +567,6 @@ body {
 		border: 1px solid var(--bg-vanilla-300);
 	}
 
-	.ant-tooltip {
-		--antd-arrow-background-color: var(--bg-vanilla-100);
-
-		.ant-tooltip-inner {
-			background-color: var(--bg-vanilla-100);
-			color: var(---bg-ink-500);
-		}
-	}
-
 	.ant-dropdown-menu {
 		border: 1px solid var(--bg-vanilla-300);
 		background: var(--bg-vanilla-100);

frontend/src/utils/logs.ts

@@ -9,9 +9,10 @@ export const getDefaultLogBackground = (
 	if (isReadOnly) {
 		return '';
 	}
+	// TODO handle the light mode here
 	return `&:hover {
     background-color: ${
-					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'
+					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'var(--bg-vanilla-200)'
 				};
     }`;
 };
@@ -27,38 +28,22 @@ export const getActiveLogBackground = (
 	if (isDarkMode) {
 		switch (logType) {
 			case LogType.INFO:
-				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
+				return `background-color: ${Color.BG_ROBIN_500}10 !important;`;
 			case LogType.WARN:
-				return `background-color: ${Color.BG_AMBER_500}40 !important;`;
+				return `background-color: ${Color.BG_AMBER_500}10 !important;`;
 			case LogType.ERROR:
-				return `background-color: ${Color.BG_CHERRY_500}40 !important;`;
+				return `background-color: ${Color.BG_CHERRY_500}10 !important;`;
 			case LogType.TRACE:
-				return `background-color: ${Color.BG_FOREST_400}40 !important;`;
+				return `background-color: ${Color.BG_FOREST_400}10 !important;`;
 			case LogType.DEBUG:
-				return `background-color: ${Color.BG_AQUA_500}40 !important;`;
+				return `background-color: ${Color.BG_AQUA_500}10 !important;`;
 			case LogType.FATAL:
-				return `background-color: ${Color.BG_SAKURA_500}40 !important;`;
+				return `background-color: ${Color.BG_SAKURA_500}10 !important;`;
 			default:
-				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
+				return `background-color: ${Color.BG_SLATE_200} !important;`;
 		}
 	}
-	// Light mode - use lighter background colors
-	switch (logType) {
-		case LogType.INFO:
-			return `background-color: ${Color.BG_ROBIN_100} !important;`;
-		case LogType.WARN:
-			return `background-color: ${Color.BG_AMBER_100} !important;`;
-		case LogType.ERROR:
-			return `background-color: ${Color.BG_CHERRY_100} !important;`;
-		case LogType.TRACE:
-			return `background-color: ${Color.BG_FOREST_200} !important;`;
-		case LogType.DEBUG:
-			return `background-color: ${Color.BG_AQUA_100} !important;`;
-		case LogType.FATAL:
-			return `background-color: ${Color.BG_SAKURA_100} !important;`;
-		default:
-			return `background-color: ${Color.BG_VANILLA_300} !important;`;
-	}
+	return `background-color: ${Color.BG_VANILLA_400}!important; color: ${Color.TEXT_SLATE_400} !important;`;
 };
 
 export const getHightLightedLogBackground = (

frontend/yarn.lock

@@ -4479,19 +4479,6 @@
   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"
@@ -5177,20 +5164,6 @@
     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/modules/identity/identity.go

@@ -0,0 +1,31 @@
+package identity
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Module interface {
+	// GetRoles gets all roles for an identity
+	GetRoles(ctx context.Context, identityID valuer.UUID) ([]types.Role, error)
+
+	// GetRolesForIdentities gets roles for multiple identities (batch)
+	GetRolesForIdentities(ctx context.Context, identityIDs []valuer.UUID) (map[valuer.UUID][]types.Role, error)
+
+	// CountByRoleAndOrgID counts identities with a specific role in an org
+	CountByRoleAndOrgID(ctx context.Context, role types.Role, orgID valuer.UUID) (int64, error)
+
+	// CreateIdentityWithRoles creates an identity and assigns roles to it
+	CreateIdentityWithRoles(ctx context.Context, id valuer.UUID, orgID valuer.UUID, roles []types.Role) error
+
+	// AddRole adds a role to an identity
+	AddRole(ctx context.Context, identityID valuer.UUID, orgID valuer.UUID, role types.Role) error
+
+	// RemoveRole removes a role from an identity
+	RemoveRole(ctx context.Context, identityID valuer.UUID, orgID valuer.UUID, role types.Role) error
+
+	// DeleteIdentity deletes an identity and its associated roles
+	DeleteIdentity(ctx context.Context, identityID valuer.UUID) error
+}

pkg/modules/identity/implidentity/module.go

@@ -0,0 +1,111 @@
+package implidentity
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/modules/identity"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/identitytypes"
+	"github.com/SigNoz/signoz/pkg/types/roletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type module struct {
+	store *store
+}
+
+func NewModule(sqlstore sqlstore.SQLStore) identity.Module {
+	return &module{
+		store: newStore(sqlstore),
+	}
+}
+
+func (m *module) CreateIdentityWithRoles(ctx context.Context, id valuer.UUID, orgID valuer.UUID, roles []types.Role) error {
+	return m.store.RunInTx(ctx, func(ctx context.Context) error {
+		// Create identity
+		ident := identitytypes.NewStorableIdentity(id, orgID)
+		if err := m.store.CreateIdentity(ctx, ident); err != nil {
+			return err
+		}
+
+		// Create identity_role mappings for each role
+		for _, role := range roles {
+			roleName := roletypes.MustGetSigNozManagedRoleFromExistingRole(role)
+			identityRole := identitytypes.NewStorableIdentityRole(id, roleName)
+			if err := m.store.CreateIdentityRole(ctx, identityRole); err != nil {
+				return err
+			}
+		}
+
+		return nil
+	})
+}
+
+func (m *module) AddRole(ctx context.Context, identityID valuer.UUID, orgID valuer.UUID, role types.Role) error {
+	roleName := roletypes.MustGetSigNozManagedRoleFromExistingRole(role)
+	identityRole := identitytypes.NewStorableIdentityRole(identityID, roleName)
+	return m.store.CreateIdentityRole(ctx, identityRole)
+}
+
+func (m *module) RemoveRole(ctx context.Context, identityID valuer.UUID, orgID valuer.UUID, role types.Role) error {
+	roleName := roletypes.MustGetSigNozManagedRoleFromExistingRole(role)
+	return m.store.DeleteIdentityRole(ctx, identityID, roleName)
+}
+
+func (m *module) GetRoles(ctx context.Context, identityID valuer.UUID) ([]types.Role, error) {
+	roleNames, err := m.store.GetRolesByIdentityID(ctx, identityID)
+	if err != nil {
+		return nil, err
+	}
+
+	roles := make([]types.Role, 0, len(roleNames))
+	for _, roleName := range roleNames {
+		roles = append(roles, roletypes.GetRoleFromManagedRoleName(roleName))
+	}
+
+	return roles, nil
+}
+
+func (m *module) GetRolesForIdentities(ctx context.Context, identityIDs []valuer.UUID) (map[valuer.UUID][]types.Role, error) {
+	roleNamesMap, err := m.store.GetRolesForIdentityIDs(ctx, identityIDs)
+	if err != nil {
+		return nil, err
+	}
+
+	result := make(map[valuer.UUID][]types.Role)
+	for _, id := range identityIDs {
+		if roleNames, ok := roleNamesMap[id.StringValue()]; ok {
+			roles := make([]types.Role, 0, len(roleNames))
+			for _, roleName := range roleNames {
+				roles = append(roles, roletypes.GetRoleFromManagedRoleName(roleName))
+			}
+			result[id] = roles
+		} else {
+			result[id] = []types.Role{}
+		}
+	}
+
+	return result, nil
+}
+
+func (m *module) DeleteIdentity(ctx context.Context, identityID valuer.UUID) error {
+	return m.store.RunInTx(ctx, func(ctx context.Context) error {
+		// Delete identity_role first (FK constraint)
+		if err := m.store.DeleteIdentityRoles(ctx, identityID); err != nil {
+			return err
+		}
+
+		// Delete identity
+		if err := m.store.DeleteIdentity(ctx, identityID); err != nil {
+			return err
+		}
+
+		return nil
+	})
+}
+
+func (m *module) CountByRoleAndOrgID(ctx context.Context, role types.Role, orgID valuer.UUID) (int64, error) {
+	roleName := roletypes.MustGetSigNozManagedRoleFromExistingRole(role)
+	return m.store.CountByRoleNameAndOrgID(ctx, roleName, orgID)
+}

pkg/modules/identity/implidentity/store.go

@@ -0,0 +1,152 @@
+package implidentity
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/identitytypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+)
+
+type store struct {
+	sqlstore sqlstore.SQLStore
+}
+
+func newStore(sqlstore sqlstore.SQLStore) *store {
+	return &store{sqlstore: sqlstore}
+}
+
+func (s *store) CreateIdentity(ctx context.Context, identity *identitytypes.StorableIdentity) error {
+	_, err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewInsert().
+		Model(identity).
+		Exec(ctx)
+	if err != nil {
+		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create identity")
+	}
+	return nil
+}
+
+func (s *store) CreateIdentityRole(ctx context.Context, identityRole *identitytypes.StorableIdentityRole) error {
+	_, err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewInsert().
+		Model(identityRole).
+		Exec(ctx)
+	if err != nil {
+		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create identity role")
+	}
+	return nil
+}
+
+func (s *store) DeleteIdentityRole(ctx context.Context, identityID valuer.UUID, roleName string) error {
+	_, err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewDelete().
+		Model(&identitytypes.StorableIdentityRole{}).
+		Where("identity_id = ?", identityID).
+		Where("role_name = ?", roleName).
+		Exec(ctx)
+	if err != nil {
+		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to delete identity role")
+	}
+	return nil
+}
+
+func (s *store) DeleteIdentityRoles(ctx context.Context, identityID valuer.UUID) error {
+	_, err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewDelete().
+		Model(&identitytypes.StorableIdentityRole{}).
+		Where("identity_id = ?", identityID).
+		Exec(ctx)
+	if err != nil {
+		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to delete identity roles")
+	}
+	return nil
+}
+
+func (s *store) DeleteIdentity(ctx context.Context, identityID valuer.UUID) error {
+	_, err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewDelete().
+		Model(&identitytypes.StorableIdentity{}).
+		Where("id = ?", identityID).
+		Exec(ctx)
+	if err != nil {
+		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to delete identity")
+	}
+	return nil
+}
+
+func (s *store) GetRolesByIdentityID(ctx context.Context, identityID valuer.UUID) ([]string, error) {
+	var roleNames []string
+	err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model((*identitytypes.StorableIdentityRole)(nil)).
+		Column("role_name").
+		Where("identity_id = ?", identityID).
+		Scan(ctx, &roleNames)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to get roles for identity %s", identityID)
+	}
+	return roleNames, nil
+}
+
+func (s *store) GetRolesForIdentityIDs(ctx context.Context, identityIDs []valuer.UUID) (map[string][]string, error) {
+	if len(identityIDs) == 0 {
+		return map[string][]string{}, nil
+	}
+
+	var results []identitytypes.StorableIdentityRole
+	err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(&results).
+		Column("identity_id", "role_name").
+		Where("identity_id IN (?)", bun.In(identityIDs)).
+		Scan(ctx)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to get roles for identities")
+	}
+
+	roleMap := make(map[string][]string)
+	for _, r := range results {
+		roleMap[r.IdentityID.StringValue()] = append(roleMap[r.IdentityID.StringValue()], r.RoleName)
+	}
+
+	return roleMap, nil
+}
+
+func (s *store) RunInTx(ctx context.Context, cb func(ctx context.Context) error) error {
+	return s.sqlstore.RunInTxCtx(ctx, nil, func(ctx context.Context) error {
+		return cb(ctx)
+	})
+}
+
+func (s *store) CountByRoleNameAndOrgID(ctx context.Context, roleName string, orgID valuer.UUID) (int64, error) {
+	count, err := s.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model((*identitytypes.StorableIdentityRole)(nil)).
+		Join("JOIN identity ON identity.id = identity_role.identity_id").
+		Where("identity_role.role_name = ?", roleName).
+		Where("identity.org_id = ?", orgID).
+		Count(ctx)
+	if err != nil {
+		return 0, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to count identities by role")
+	}
+	return int64(count), nil
+}

pkg/modules/session/implsession/module.go

@@ -11,6 +11,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
+	"github.com/SigNoz/signoz/pkg/modules/identity"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/session"
 	"github.com/SigNoz/signoz/pkg/modules/user"
@@ -28,9 +29,10 @@ type module struct {
 	authDomain authdomain.Module
 	tokenizer  tokenizer.Tokenizer
 	orgGetter  organization.Getter
+	identity   identity.Module
 }
 
-func NewModule(providerSettings factory.ProviderSettings, authNs map[authtypes.AuthNProvider]authn.AuthN, user user.Module, userGetter user.Getter, authDomain authdomain.Module, tokenizer tokenizer.Tokenizer, orgGetter organization.Getter) session.Module {
+func NewModule(providerSettings factory.ProviderSettings, authNs map[authtypes.AuthNProvider]authn.AuthN, user user.Module, userGetter user.Getter, authDomain authdomain.Module, tokenizer tokenizer.Tokenizer, orgGetter organization.Getter, identity identity.Module) session.Module {
 	return &module{
 		settings:   factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/modules/session/implsession"),
 		authNs:     authNs,
@@ -39,6 +41,7 @@ func NewModule(providerSettings factory.ProviderSettings, authNs map[authtypes.A
 		authDomain: authDomain,
 		tokenizer:  tokenizer,
 		orgGetter:  orgGetter,
+		identity:   identity,
 	}
 }
 
@@ -141,21 +144,33 @@ func (module *module) CreateCallbackAuthNSession(ctx context.Context, authNProvi
 	roleMapping := authDomain.AuthDomainConfig().RoleMapping
 	role := roleMapping.NewRoleFromCallbackIdentity(callbackIdentity)
 
-	user, err := types.NewUser(callbackIdentity.Name, callbackIdentity.Email, role, callbackIdentity.OrgID)
+	newUser, err := types.NewUser(callbackIdentity.Name, callbackIdentity.Email, callbackIdentity.OrgID)
 	if err != nil {
 		return "", err
 	}
 
-	user, err = module.user.GetOrCreateUser(ctx, user)
+	createdUser, err := module.user.GetOrCreateUser(ctx, newUser, user.WithRole(role))
 	if err != nil {
 		return "", err
 	}
 
-	if err := user.ErrIfRoot(); err != nil {
+	if err := createdUser.ErrIfRoot(); err != nil {
 		return "", errors.WithAdditionalf(err, "root user can only authenticate via password")
 	}
 
-	token, err := module.tokenizer.CreateToken(ctx, authtypes.NewIdentity(user.ID, user.OrgID, user.Email, user.Role), map[string]string{})
+	// Get roles from identity module
+	userRoles, err := module.identity.GetRoles(ctx, createdUser.IdentityID)
+	if err != nil {
+		return "", err
+	}
+
+	// Use first role for token creation (backward compatibility with current token system)
+	var primaryRole types.Role
+	if len(userRoles) > 0 {
+		primaryRole = userRoles[0]
+	}
+
+	token, err := module.tokenizer.CreateToken(ctx, authtypes.NewIdentity(createdUser.ID, createdUser.OrgID, createdUser.Email, primaryRole), map[string]string{})
 	if err != nil {
 		return "", err
 	}

pkg/modules/user/impluser/module.go

@@ -12,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/emailing"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/modules/identity"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	root "github.com/SigNoz/signoz/pkg/modules/user"
@@ -33,10 +34,11 @@ type Module struct {
 	authz     authz.AuthZ
 	analytics analytics.Analytics
 	config    user.Config
+	identity  identity.Module
 }
 
 // This module is a WIP, don't take inspiration from this.
-func NewModule(store types.UserStore, tokenizer tokenizer.Tokenizer, emailing emailing.Emailing, providerSettings factory.ProviderSettings, orgSetter organization.Setter, authz authz.AuthZ, analytics analytics.Analytics, config user.Config) root.Module {
+func NewModule(store types.UserStore, tokenizer tokenizer.Tokenizer, emailing emailing.Emailing, providerSettings factory.ProviderSettings, orgSetter organization.Setter, authz authz.AuthZ, analytics analytics.Analytics, config user.Config, identity identity.Module) root.Module {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/modules/user/impluser")
 	return &Module{
 		store:     store,
@@ -47,6 +49,7 @@ func NewModule(store types.UserStore, tokenizer tokenizer.Tokenizer, emailing em
 		analytics: analytics,
 		authz:     authz,
 		config:    config,
+		identity:  identity,
 	}
 }
 
@@ -56,7 +59,7 @@ func (m *Module) AcceptInvite(ctx context.Context, token string, password string
 		return nil, err
 	}
 
-	user, err := types.NewUser(invite.Name, invite.Email, invite.Role, invite.OrgID)
+	user, err := types.NewUser(invite.Name, invite.Email, invite.OrgID)
 	if err != nil {
 		return nil, err
 	}
@@ -66,7 +69,7 @@ func (m *Module) AcceptInvite(ctx context.Context, token string, password string
 		return nil, err
 	}
 
-	err = m.CreateUser(ctx, user, root.WithFactorPassword(factorPassword))
+	err = m.CreateUser(ctx, user, root.WithFactorPassword(factorPassword), root.WithRole(invite.Role))
 	if err != nil {
 		return nil, err
 	}
@@ -172,14 +175,21 @@ func (m *Module) DeleteInvite(ctx context.Context, orgID string, id valuer.UUID)
 
 func (module *Module) CreateUser(ctx context.Context, input *types.User, opts ...root.CreateUserOption) error {
 	createUserOpts := root.NewCreateUserOptions(opts...)
+	role := createUserOpts.Role
 
 	// since assign is idempotant multiple calls to assign won't cause issues in case of retries.
-	err := module.authz.Grant(ctx, input.OrgID, roletypes.MustGetSigNozManagedRoleFromExistingRole(input.Role), authtypes.MustNewSubject(authtypes.TypeableUser, input.ID.StringValue(), input.OrgID, nil))
+	err := module.authz.Grant(ctx, input.OrgID, roletypes.MustGetSigNozManagedRoleFromExistingRole(role), authtypes.MustNewSubject(authtypes.TypeableUser, input.ID.StringValue(), input.OrgID, nil))
 	if err != nil {
 		return err
 	}
 
 	if err := module.store.RunInTx(ctx, func(ctx context.Context) error {
+		// Create identity with roles via identity module
+		if err := module.identity.CreateIdentityWithRoles(ctx, input.ID, input.OrgID, []types.Role{role}); err != nil {
+			return err
+		}
+
+		// Create user
 		if err := module.store.CreateUser(ctx, input); err != nil {
 			return err
 		}
@@ -195,7 +205,7 @@ func (module *Module) CreateUser(ctx context.Context, input *types.User, opts ..
 		return err
 	}
 
-	traitsOrProperties := types.NewTraitsFromUser(input)
+	traitsOrProperties := types.NewTraitsFromUser(input, []types.Role{role})
 	module.analytics.IdentifyUser(ctx, input.OrgID.String(), input.ID.String(), traitsOrProperties)
 	module.analytics.TrackUser(ctx, input.OrgID.String(), input.ID.String(), "User Created", traitsOrProperties)
 
@@ -212,40 +222,7 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 		return nil, errors.WithAdditionalf(err, "cannot update root user")
 	}
 
-	requestor, err := m.store.GetUser(ctx, valuer.MustNewUUID(updatedBy))
-	if err != nil {
-		return nil, err
-	}
-
-	if user.Role != "" && user.Role != existingUser.Role && requestor.Role != types.RoleAdmin {
-		return nil, errors.New(errors.TypeForbidden, errors.CodeForbidden, "only admins can change roles")
-	}
-
-	// Make sure that the request is not demoting the last admin user.
-	if user.Role != "" && user.Role != existingUser.Role && existingUser.Role == types.RoleAdmin {
-		adminUsers, err := m.store.GetUsersByRoleAndOrgID(ctx, types.RoleAdmin, orgID)
-		if err != nil {
-			return nil, err
-		}
-
-		if len(adminUsers) == 1 {
-			return nil, errors.New(errors.TypeForbidden, errors.CodeForbidden, "cannot demote the last admin")
-		}
-	}
-
-	if user.Role != "" && user.Role != existingUser.Role {
-		err = m.authz.ModifyGrant(ctx,
-			orgID,
-			roletypes.MustGetSigNozManagedRoleFromExistingRole(existingUser.Role),
-			roletypes.MustGetSigNozManagedRoleFromExistingRole(user.Role),
-			authtypes.MustNewSubject(authtypes.TypeableUser, id, orgID, nil),
-		)
-		if err != nil {
-			return nil, err
-		}
-	}
-
-	existingUser.Update(user.DisplayName, user.Role)
+	existingUser.Update(user.DisplayName)
 	if err := m.UpdateAnyUser(ctx, orgID, existingUser); err != nil {
 		return nil, err
 	}
@@ -258,7 +235,9 @@ func (module *Module) UpdateAnyUser(ctx context.Context, orgID valuer.UUID, user
 		return err
 	}
 
-	traits := types.NewTraitsFromUser(user)
+	// Get roles from identity module for analytics
+	roles, _ := module.identity.GetRoles(ctx, user.IdentityID)
+	traits := types.NewTraitsFromUser(user, roles)
 	module.analytics.IdentifyUser(ctx, user.OrgID.String(), user.ID.String(), traits)
 	module.analytics.TrackUser(ctx, user.OrgID.String(), user.ID.String(), "User Updated", traits)
 
@@ -283,19 +262,37 @@ func (module *Module) DeleteUser(ctx context.Context, orgID valuer.UUID, id stri
 		return errors.New(errors.TypeForbidden, errors.CodeForbidden, "integration user cannot be deleted")
 	}
 
-	// don't allow to delete the last admin user
-	adminUsers, err := module.store.GetUsersByRoleAndOrgID(ctx, types.RoleAdmin, orgID)
+	// Get user's roles from identity module
+	userRoles, err := module.identity.GetRoles(ctx, user.IdentityID)
 	if err != nil {
 		return err
 	}
 
-	if len(adminUsers) == 1 && user.Role == types.RoleAdmin {
-		return errors.New(errors.TypeForbidden, errors.CodeForbidden, "cannot delete the last admin")
+	// Check if user has admin role
+	hasAdminRole := slices.Contains(userRoles, types.RoleAdmin)
+
+	// don't allow to delete the last admin user
+	if hasAdminRole {
+		adminCount, err := module.identity.CountByRoleAndOrgID(ctx, types.RoleAdmin, orgID)
+		if err != nil {
+			return err
+		}
+
+		if adminCount == 1 {
+			return errors.New(errors.TypeForbidden, errors.CodeForbidden, "cannot delete the last admin")
+		}
 	}
 
-	// since revoke is idempotant multiple calls to revoke won't cause issues in case of retries
-	err = module.authz.Revoke(ctx, orgID, roletypes.MustGetSigNozManagedRoleFromExistingRole(user.Role), authtypes.MustNewSubject(authtypes.TypeableUser, id, orgID, nil))
-	if err != nil {
+	// Revoke all roles for the user
+	for _, userRole := range userRoles {
+		err = module.authz.Revoke(ctx, orgID, roletypes.MustGetSigNozManagedRoleFromExistingRole(userRole), authtypes.MustNewSubject(authtypes.TypeableUser, id, orgID, nil))
+		if err != nil {
+			return err
+		}
+	}
+
+	// Delete identity and identity_role records
+	if err := module.identity.DeleteIdentity(ctx, user.IdentityID); err != nil {
 		return err
 	}
 
@@ -545,7 +542,7 @@ func (module *Module) CreateFirstUser(ctx context.Context, organization *types.O
 			return err
 		}
 
-		err = module.createUserWithoutGrant(ctx, user, root.WithFactorPassword(password))
+		err = module.createUserWithoutGrant(ctx, user, root.WithFactorPassword(password), root.WithRole(types.RoleAdmin))
 		if err != nil {
 			return err
 		}
@@ -575,7 +572,15 @@ func (module *Module) Collect(ctx context.Context, orgID valuer.UUID) (map[strin
 
 func (module *Module) createUserWithoutGrant(ctx context.Context, input *types.User, opts ...root.CreateUserOption) error {
 	createUserOpts := root.NewCreateUserOptions(opts...)
+	role := createUserOpts.Role
+
 	if err := module.store.RunInTx(ctx, func(ctx context.Context) error {
+		// Create identity with roles via identity module
+		if err := module.identity.CreateIdentityWithRoles(ctx, input.ID, input.OrgID, []types.Role{role}); err != nil {
+			return err
+		}
+
+		// Create user
 		if err := module.store.CreateUser(ctx, input); err != nil {
 			return err
 		}
@@ -591,7 +596,7 @@ func (module *Module) createUserWithoutGrant(ctx context.Context, input *types.U
 		return err
 	}
 
-	traitsOrProperties := types.NewTraitsFromUser(input)
+	traitsOrProperties := types.NewTraitsFromUser(input, []types.Role{role})
 	module.analytics.IdentifyUser(ctx, input.OrgID.String(), input.ID.String(), traitsOrProperties)
 	module.analytics.TrackUser(ctx, input.OrgID.String(), input.ID.String(), "User Created", traitsOrProperties)
 

pkg/modules/user/impluser/service.go

@@ -2,11 +2,13 @@ package impluser
 
 import (
 	"context"
+	"slices"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/modules/identity"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -21,6 +23,7 @@ type service struct {
 	module    user.Module
 	orgGetter organization.Getter
 	authz     authz.AuthZ
+	identity  identity.Module
 	config    user.RootConfig
 	stopC     chan struct{}
 }
@@ -31,6 +34,7 @@ func NewService(
 	module user.Module,
 	orgGetter organization.Getter,
 	authz authz.AuthZ,
+	identity identity.Module,
 	config user.RootConfig,
 ) user.Service {
 	return &service{
@@ -39,6 +43,7 @@ func NewService(
 		module:    module,
 		orgGetter: orgGetter,
 		authz:     authz,
+		identity:  identity,
 		config:    config,
 		stopC:     make(chan struct{}),
 	}
@@ -112,20 +117,39 @@ func (s *service) createOrPromoteRootUser(ctx context.Context, orgID valuer.UUID
 	}
 
 	if existingUser != nil {
-		oldRole := existingUser.Role
+		// Get user's current roles from identity module
+		userRoles, err := s.identity.GetRoles(ctx, existingUser.IdentityID)
+		if err != nil {
+			return err
+		}
 
 		existingUser.PromoteToRoot()
 		if err := s.module.UpdateAnyUser(ctx, orgID, existingUser); err != nil {
 			return err
 		}
 
-		if oldRole != types.RoleAdmin {
-			if err := s.authz.ModifyGrant(ctx,
-				orgID,
-				roletypes.MustGetSigNozManagedRoleFromExistingRole(oldRole),
-				roletypes.MustGetSigNozManagedRoleFromExistingRole(types.RoleAdmin),
-				authtypes.MustNewSubject(authtypes.TypeableUser, existingUser.ID.StringValue(), orgID, nil),
-			); err != nil {
+		// If user doesn't have admin role, modify the grant and update identity roles
+		if !slices.Contains(userRoles, types.RoleAdmin) {
+			// Update authz grants and identity roles
+			for _, oldRole := range userRoles {
+				// Update authz grant
+				if err := s.authz.ModifyGrant(ctx,
+					orgID,
+					roletypes.MustGetSigNozManagedRoleFromExistingRole(oldRole),
+					roletypes.MustGetSigNozManagedRoleFromExistingRole(types.RoleAdmin),
+					authtypes.MustNewSubject(authtypes.TypeableUser, existingUser.ID.StringValue(), orgID, nil),
+				); err != nil {
+					return err
+				}
+
+				// Update identity role
+				if err := s.identity.RemoveRole(ctx, existingUser.IdentityID, orgID, oldRole); err != nil {
+					return err
+				}
+			}
+
+			// Add admin role to identity
+			if err := s.identity.AddRole(ctx, existingUser.IdentityID, orgID, types.RoleAdmin); err != nil {
 				return err
 			}
 		}
@@ -144,7 +168,7 @@ func (s *service) createOrPromoteRootUser(ctx context.Context, orgID valuer.UUID
 		return err
 	}
 
-	return s.module.CreateUser(ctx, newUser, user.WithFactorPassword(factorPassword))
+	return s.module.CreateUser(ctx, newUser, user.WithFactorPassword(factorPassword), user.WithRole(types.RoleAdmin))
 }
 
 func (s *service) updateExistingRootUser(ctx context.Context, orgID valuer.UUID, existingRoot *types.User) error {

pkg/modules/user/impluser/store.go

@@ -192,24 +192,6 @@ func (store *store) GetUserByEmailAndOrgID(ctx context.Context, email valuer.Ema
 	return user, nil
 }
 
-func (store *store) GetUsersByRoleAndOrgID(ctx context.Context, role types.Role, orgID valuer.UUID) ([]*types.User, error) {
-	var users []*types.User
-
-	err := store.
-		sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(&users).
-		Where("org_id = ?", orgID).
-		Where("role = ?", role).
-		Scan(ctx)
-	if err != nil {
-		return nil, err
-	}
-
-	return users, nil
-}
-
 func (store *store) UpdateUser(ctx context.Context, orgID valuer.UUID, user *types.User) error {
 	_, err := store.
 		sqlstore.
@@ -218,7 +200,6 @@ func (store *store) UpdateUser(ctx context.Context, orgID valuer.UUID, user *typ
 		Model(user).
 		Column("display_name").
 		Column("email").
-		Column("role").
 		Column("is_root").
 		Column("updated_at").
 		Where("org_id = ?", orgID).
@@ -619,6 +600,7 @@ func (store *store) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (
 	if err != nil {
 		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "root user for org %s not found", orgID)
 	}
+
 	return user, nil
 }
 

pkg/modules/user/option.go

@@ -7,6 +7,7 @@ import (
 
 type createUserOptions struct {
 	FactorPassword *types.FactorPassword
+	Role           types.Role
 }
 
 type CreateUserOption func(*createUserOptions)
@@ -17,9 +18,16 @@ func WithFactorPassword(factorPassword *types.FactorPassword) CreateUserOption {
 	}
 }
 
+func WithRole(role types.Role) CreateUserOption {
+	return func(o *createUserOptions) {
+		o.Role = role
+	}
+}
+
 func NewCreateUserOptions(opts ...CreateUserOption) *createUserOptions {
 	o := &createUserOptions{
 		FactorPassword: nil,
+		Role:           types.RoleViewer, // default role
 	}
 
 	for _, opt := range opts {

pkg/signoz/module.go

@@ -13,6 +13,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
 	"github.com/SigNoz/signoz/pkg/modules/authdomain/implauthdomain"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
+	"github.com/SigNoz/signoz/pkg/modules/identity"
+	"github.com/SigNoz/signoz/pkg/modules/identity/implidentity"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer/implmetricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
@@ -54,6 +56,7 @@ type Modules struct {
 	Preference      preference.Module
 	User            user.Module
 	UserGetter      user.Getter
+	Identity        identity.Module
 	SavedView       savedview.Module
 	Apdex           apdex.Module
 	Dashboard       dashboard.Module
@@ -88,7 +91,8 @@ func NewModules(
 ) Modules {
 	quickfilter := implquickfilter.NewModule(implquickfilter.NewStore(sqlstore))
 	orgSetter := implorganization.NewSetter(implorganization.NewStore(sqlstore), alertmanager, quickfilter)
-	user := impluser.NewModule(impluser.NewStore(sqlstore, providerSettings), tokenizer, emailing, providerSettings, orgSetter, authz, analytics, config.User)
+	identityModule := implidentity.NewModule(sqlstore)
+	user := impluser.NewModule(impluser.NewStore(sqlstore, providerSettings), tokenizer, emailing, providerSettings, orgSetter, authz, analytics, config.User, identityModule)
 	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
 	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
 
@@ -101,11 +105,12 @@ func NewModules(
 		Dashboard:       dashboard,
 		User:            user,
 		UserGetter:      userGetter,
+		Identity:        identityModule,
 		QuickFilter:     quickfilter,
 		TraceFunnel:     impltracefunnel.NewModule(impltracefunnel.NewStore(sqlstore)),
 		RawDataExport:   implrawdataexport.NewModule(querier),
 		AuthDomain:      implauthdomain.NewModule(implauthdomain.NewStore(sqlstore), authNs),
-		Session:         implsession.NewModule(providerSettings, authNs, user, userGetter, implauthdomain.NewModule(implauthdomain.NewStore(sqlstore), authNs), tokenizer, orgGetter),
+		Session:         implsession.NewModule(providerSettings, authNs, user, userGetter, implauthdomain.NewModule(implauthdomain.NewStore(sqlstore), authNs), tokenizer, orgGetter, identityModule),
 		SpanPercentile:  implspanpercentile.NewModule(querier, providerSettings),
 		Services:        implservices.NewModule(querier, telemetryStore),
 		MetricsExplorer: implmetricsexplorer.NewModule(telemetryStore, telemetryMetadataStore, cache, ruleStore, dashboard, providerSettings, config.MetricsExplorer),

pkg/signoz/provider.go

@@ -23,6 +23,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/global/signozglobal"
 	"github.com/SigNoz/signoz/pkg/modules/authdomain/implauthdomain"
+	"github.com/SigNoz/signoz/pkg/modules/identity"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/preference/implpreference"
@@ -169,6 +170,9 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddAnonymousPublicDashboardTransactionFactory(sqlstore),
 		sqlmigration.NewAddRootUserFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddUserEmailOrgIDIndexFactory(sqlstore, sqlschema),
+		sqlmigration.NewAddIdentityFactory(sqlstore, sqlschema),
+		sqlmigration.NewUpdateUserIdentity(sqlstore, sqlschema),
+		sqlmigration.NewMigrateUserRolesFactory(sqlstore, sqlschema),
 	)
 }
 
@@ -220,9 +224,9 @@ func NewSharderProviderFactories() factory.NamedMap[factory.ProviderFactory[shar
 	)
 }
 
-func NewStatsReporterProviderFactories(telemetryStore telemetrystore.TelemetryStore, collectors []statsreporter.StatsCollector, orgGetter organization.Getter, userGetter user.Getter, tokenizer tokenizer.Tokenizer, build version.Build, analyticsConfig analytics.Config) factory.NamedMap[factory.ProviderFactory[statsreporter.StatsReporter, statsreporter.Config]] {
+func NewStatsReporterProviderFactories(telemetryStore telemetrystore.TelemetryStore, collectors []statsreporter.StatsCollector, orgGetter organization.Getter, userGetter user.Getter, identityModule identity.Module, tokenizer tokenizer.Tokenizer, build version.Build, analyticsConfig analytics.Config) factory.NamedMap[factory.ProviderFactory[statsreporter.StatsReporter, statsreporter.Config]] {
 	return factory.MustNewNamedMap(
-		analyticsstatsreporter.NewFactory(telemetryStore, collectors, orgGetter, userGetter, tokenizer, build, analyticsConfig),
+		analyticsstatsreporter.NewFactory(telemetryStore, collectors, orgGetter, userGetter, identityModule, tokenizer, build, analyticsConfig),
 		noopstatsreporter.NewFactory(),
 	)
 }

pkg/signoz/provider_test.go

@@ -7,6 +7,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager/nfmanager/nfmanagertest"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
+	"github.com/SigNoz/signoz/pkg/modules/identity/implidentity"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/queryparser"
@@ -75,10 +76,12 @@ func TestNewProviderFactories(t *testing.T) {
 	})
 
 	assert.NotPanics(t, func() {
-		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()))
-		orgGetter := implorganization.NewGetter(implorganization.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)), nil)
+		sqlStore := sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)
+		userGetter := impluser.NewGetter(impluser.NewStore(sqlStore, instrumentationtest.New().ToProviderSettings()))
+		orgGetter := implorganization.NewGetter(implorganization.NewStore(sqlStore), nil)
+		identityModule := implidentity.NewModule(sqlStore)
 		telemetryStore := telemetrystoretest.New(telemetrystore.Config{Provider: "clickhouse"}, sqlmock.QueryMatcherEqual)
-		NewStatsReporterProviderFactories(telemetryStore, []statsreporter.StatsCollector{}, orgGetter, userGetter, tokenizertest.NewMockTokenizer(t), version.Build{}, analytics.Config{Enabled: true})
+		NewStatsReporterProviderFactories(telemetryStore, []statsreporter.StatsCollector{}, orgGetter, userGetter, identityModule, tokenizertest.NewMockTokenizer(t), version.Build{}, analytics.Config{Enabled: true})
 	})
 
 	assert.NotPanics(t, func() {

pkg/signoz/signoz.go

@@ -389,7 +389,7 @@ func New(
 	// Initialize all modules
 	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard)
 
-	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)
+	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, modules.Identity, config.User.Root)
 
 	// Initialize all handlers for the modules
 	handlers := NewHandlers(modules, providerSettings, querier, licensing, global, flagger, gateway, telemetryMetadataStore, authz)
@@ -424,7 +424,7 @@ func New(
 		ctx,
 		providerSettings,
 		config.StatsReporter,
-		NewStatsReporterProviderFactories(telemetrystore, statsCollectors, orgGetter, userGetter, tokenizer, version.Info, config.Analytics),
+		NewStatsReporterProviderFactories(telemetrystore, statsCollectors, orgGetter, userGetter, modules.Identity, tokenizer, version.Info, config.Analytics),
 		config.StatsReporter.Provider(),
 	)
 	if err != nil {

pkg/sqlmigration/066_add_identity.go

@@ -0,0 +1,111 @@
+package sqlmigration
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type addIdentity struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+func NewAddIdentityFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(factory.MustNewName("add_identity"), func(ctx context.Context, providerSettings factory.ProviderSettings, config Config) (SQLMigration, error) {
+		return &addIdentity{
+			sqlstore:  sqlstore,
+			sqlschema: sqlschema,
+		}, nil
+	})
+}
+
+func (migration *addIdentity) Register(migrations *migrate.Migrations) error {
+	if err := migrations.Register(migration.Up, migration.Down); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (migration *addIdentity) Up(ctx context.Context, db *bun.DB) error {
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	sqls := [][]byte{}
+	tableSQLs := migration.sqlschema.Operator().CreateTable(&sqlschema.Table{
+		Name: "identity",
+		Columns: []*sqlschema.Column{
+			{Name: "id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "status", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "created_at", DataType: sqlschema.DataTypeTimestamp, Nullable: false},
+			{Name: "updated_at", DataType: sqlschema.DataTypeTimestamp, Nullable: false},
+			{Name: "org_id", DataType: sqlschema.DataTypeText, Nullable: false},
+		},
+		PrimaryKeyConstraint: &sqlschema.PrimaryKeyConstraint{
+			ColumnNames: []sqlschema.ColumnName{"id"},
+		},
+		ForeignKeyConstraints: []*sqlschema.ForeignKeyConstraint{
+			{
+				ReferencingColumnName: sqlschema.ColumnName("org_id"),
+				ReferencedTableName:   sqlschema.TableName("organizations"),
+				ReferencedColumnName:  sqlschema.ColumnName("id"),
+			},
+		},
+	})
+	sqls = append(sqls, tableSQLs...)
+
+	tableSQLs = migration.sqlschema.Operator().CreateTable(&sqlschema.Table{
+		Name: "identity_role",
+		Columns: []*sqlschema.Column{
+			{Name: "id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "identity_id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "role_name", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "created_at", DataType: sqlschema.DataTypeTimestamp, Nullable: false},
+			{Name: "updated_at", DataType: sqlschema.DataTypeTimestamp, Nullable: false},
+		},
+		PrimaryKeyConstraint: &sqlschema.PrimaryKeyConstraint{
+			ColumnNames: []sqlschema.ColumnName{"id"},
+		},
+		ForeignKeyConstraints: []*sqlschema.ForeignKeyConstraint{
+			{
+				ReferencingColumnName: sqlschema.ColumnName("identity_id"),
+				ReferencedTableName:   sqlschema.TableName("identity"),
+				ReferencedColumnName:  sqlschema.ColumnName("id"),
+			},
+		},
+	})
+	sqls = append(sqls, tableSQLs...)
+
+	indexSQLs := migration.sqlschema.Operator().CreateIndex(&sqlschema.UniqueIndex{
+		TableName:   "identity_role",
+		ColumnNames: []sqlschema.ColumnName{"identity_id", "role_name"},
+	})
+	sqls = append(sqls, indexSQLs...)
+
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (migration *addIdentity) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/sqlmigration/067_update_user_identity.go

@@ -0,0 +1,132 @@
+package sqlmigration
+
+import (
+	"context"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type updateUserIdentity struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+func NewUpdateUserIdentity(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(factory.MustNewName("update_user_identity"), func(ctx context.Context, providerSettings factory.ProviderSettings, config Config) (SQLMigration, error) {
+		return &updateUserIdentity{
+			sqlstore:  sqlstore,
+			sqlschema: sqlschema,
+		}, nil
+	})
+}
+
+func (migration *updateUserIdentity) Register(migrations *migrate.Migrations) error {
+	if err := migrations.Register(migration.Up, migration.Down); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (migration *updateUserIdentity) Up(ctx context.Context, db *bun.DB) error {
+	// 1. Disable FK enforcement
+	if err := migration.sqlschema.ToggleFKEnforcement(ctx, db, false); err != nil {
+		return err
+	}
+
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	// 2. Fetch existing users
+	type existingUser struct {
+		bun.BaseModel `bun:"table:users"`
+		ID            string `bun:"id"`
+		OrgID         string `bun:"org_id"`
+	}
+	var users []*existingUser
+	if err := tx.NewSelect().Model(&users).Scan(ctx); err != nil {
+		return err
+	}
+
+	// 3. Create identity records for each user
+	now := time.Now()
+	for _, user := range users {
+		if _, err := tx.NewInsert().
+			Table("identity").
+			Value("id", "?", user.ID).
+			Value("status", "?", "active").
+			Value("org_id", "?", user.OrgID).
+			Value("created_at", "?", now).
+			Value("updated_at", "?", now).
+			Exec(ctx); err != nil {
+			return err
+		}
+	}
+
+	// 4. Get current table structure
+	table, uniqueConstraints, err := migration.sqlschema.GetTable(ctx, sqlschema.TableName("users"))
+	if err != nil {
+		return err
+	}
+
+	// 5. Get existing indices to preserve them after recreation
+	indices, err := migration.sqlschema.GetIndices(ctx, sqlschema.TableName("users"))
+	if err != nil {
+		return err
+	}
+
+	// 6. Build all SQL statements
+	sqls := [][]byte{}
+
+	// Add identity_id column using AddColumn with ColumnName("id") as value
+	identityIdColumn := &sqlschema.Column{
+		Name:     "identity_id",
+		DataType: sqlschema.DataTypeText,
+		Nullable: false,
+	}
+	sqls = append(sqls, migration.sqlschema.Operator().AddColumn(table, uniqueConstraints, identityIdColumn, sqlschema.ColumnName("id"))...)
+
+	// Add FK constraint to table definition
+	table.ForeignKeyConstraints = append(table.ForeignKeyConstraints, &sqlschema.ForeignKeyConstraint{
+		ReferencingColumnName: sqlschema.ColumnName("identity_id"),
+		ReferencedTableName:   sqlschema.TableName("identity"),
+		ReferencedColumnName:  sqlschema.ColumnName("id"),
+	})
+
+	// Recreate table to apply FK constraint
+	sqls = append(sqls, migration.sqlschema.Operator().RecreateTable(table, uniqueConstraints)...)
+
+	// Recreate indices that were lost during table recreation
+	for _, index := range indices {
+		sqls = append(sqls, migration.sqlschema.Operator().CreateIndex(index)...)
+	}
+
+	// 7. Execute all SQL statements
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		return err
+	}
+
+	// 8. Re-enable FK enforcement
+	return migration.sqlschema.ToggleFKEnforcement(ctx, db, true)
+}
+
+func (migration *updateUserIdentity) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/sqlmigration/068_migrate_user_roles.go

@@ -0,0 +1,112 @@
+package sqlmigration
+
+import (
+	"context"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+// Role name mapping from existing roles to managed role names
+var existingRoleToManagedRole = map[string]string{
+	"ADMIN":  "signoz-admin",
+	"EDITOR": "signoz-editor",
+	"VIEWER": "signoz-viewer",
+}
+
+type migrateUserRoles struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+func NewMigrateUserRolesFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(factory.MustNewName("migrate_user_roles"), func(ctx context.Context, providerSettings factory.ProviderSettings, config Config) (SQLMigration, error) {
+		return &migrateUserRoles{
+			sqlstore:  sqlstore,
+			sqlschema: sqlschema,
+		}, nil
+	})
+}
+
+func (migration *migrateUserRoles) Register(migrations *migrate.Migrations) error {
+	if err := migrations.Register(migration.Up, migration.Down); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (migration *migrateUserRoles) Up(ctx context.Context, db *bun.DB) error {
+	// 1. Disable FK enforcement
+	if err := migration.sqlschema.ToggleFKEnforcement(ctx, db, false); err != nil {
+		return err
+	}
+
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	// 2. Fetch existing users with their roles
+	type existingUser struct {
+		bun.BaseModel `bun:"table:users"`
+		ID            string `bun:"id"`
+		Role          string `bun:"role"`
+	}
+	var users []*existingUser
+	if err := tx.NewSelect().Model(&users).Scan(ctx); err != nil {
+		return err
+	}
+
+	// 3. Create identity_role records for each user using role_name directly
+	now := time.Now()
+	for _, user := range users {
+		roleName := existingRoleToManagedRole[user.Role]
+
+		if _, err := tx.NewInsert().
+			Table("identity_role").
+			Value("id", "?", valuer.GenerateUUID().StringValue()).
+			Value("identity_id", "?", user.ID).
+			Value("role_name", "?", roleName).
+			Value("created_at", "?", now).
+			Value("updated_at", "?", now).
+			Exec(ctx); err != nil {
+			return err
+		}
+	}
+
+	// 4. Get current table structure
+	table, _, err := migration.sqlschema.GetTable(ctx, sqlschema.TableName("users"))
+	if err != nil {
+		return err
+	}
+
+	// 5. Drop role column
+	roleColumn := &sqlschema.Column{Name: "role"}
+	dropColumnSQLs := migration.sqlschema.Operator().DropColumn(table, roleColumn)
+	for _, sql := range dropColumnSQLs {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		return err
+	}
+
+	// 6. Re-enable FK enforcement
+	return migration.sqlschema.ToggleFKEnforcement(ctx, db, true)
+}
+
+func (migration *migrateUserRoles) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/statsreporter/analyticsstatsreporter/provider.go

@@ -8,6 +8,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/analytics/segmentanalytics"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/modules/identity"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/statsreporter"
@@ -39,6 +40,9 @@ type provider struct {
 	// used to get users
 	userGetter user.Getter
 
+	// used to get identity roles
+	identity identity.Module
+
 	// used to get tokenizer
 	tokenizer tokenizer.Tokenizer
 
@@ -55,9 +59,9 @@ type provider struct {
 	stopC chan struct{}
 }
 
-func NewFactory(telemetryStore telemetrystore.TelemetryStore, collectors []statsreporter.StatsCollector, orgGetter organization.Getter, userGetter user.Getter, tokenizer tokenizer.Tokenizer, build version.Build, analyticsConfig analytics.Config) factory.ProviderFactory[statsreporter.StatsReporter, statsreporter.Config] {
+func NewFactory(telemetryStore telemetrystore.TelemetryStore, collectors []statsreporter.StatsCollector, orgGetter organization.Getter, userGetter user.Getter, identity identity.Module, tokenizer tokenizer.Tokenizer, build version.Build, analyticsConfig analytics.Config) factory.ProviderFactory[statsreporter.StatsReporter, statsreporter.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("analytics"), func(ctx context.Context, settings factory.ProviderSettings, config statsreporter.Config) (statsreporter.StatsReporter, error) {
-		return New(ctx, settings, config, telemetryStore, collectors, orgGetter, userGetter, tokenizer, build, analyticsConfig)
+		return New(ctx, settings, config, telemetryStore, collectors, orgGetter, userGetter, identity, tokenizer, build, analyticsConfig)
 	})
 }
 
@@ -69,6 +73,7 @@ func New(
 	collectors []statsreporter.StatsCollector,
 	orgGetter organization.Getter,
 	userGetter user.Getter,
+	identity identity.Module,
 	tokenizer tokenizer.Tokenizer,
 	build version.Build,
 	analyticsConfig analytics.Config,
@@ -87,6 +92,7 @@ func New(
 		collectors:     collectors,
 		orgGetter:      orgGetter,
 		userGetter:     userGetter,
+		identity:       identity,
 		analytics:      analytics,
 		tokenizer:      tokenizer,
 		build:          build,
@@ -166,6 +172,17 @@ func (provider *provider) Report(ctx context.Context) error {
 			continue
 		}
 
+		// Get roles for all users in batch
+		identityIDs := make([]valuer.UUID, len(users))
+		for i, user := range users {
+			identityIDs[i] = user.IdentityID
+		}
+		rolesMap, err := provider.identity.GetRolesForIdentities(ctx, identityIDs)
+		if err != nil {
+			provider.settings.Logger().WarnContext(ctx, "failed to get roles", "error", err, "org_id", org.ID)
+			rolesMap = make(map[valuer.UUID][]types.Role)
+		}
+
 		maxLastObservedAtPerUserID, err := provider.tokenizer.ListMaxLastObservedAtByOrgID(ctx, org.ID)
 		if err != nil {
 			provider.settings.Logger().WarnContext(ctx, "failed to list max last observed at per user id", "error", err, "org_id", org.ID)
@@ -173,7 +190,8 @@ func (provider *provider) Report(ctx context.Context) error {
 		}
 
 		for _, user := range users {
-			traits := types.NewTraitsFromUser(user)
+			roles := rolesMap[user.IdentityID]
+			traits := types.NewTraitsFromUser(user, roles)
 			if maxLastObservedAt, ok := maxLastObservedAtPerUserID[user.ID]; ok {
 				traits["auth_token.last_observed_at.max.time"] = maxLastObservedAt.UTC()
 				traits["auth_token.last_observed_at.max.time_unix"] = maxLastObservedAt.Unix()

pkg/types/identitytypes/identity.go

@@ -0,0 +1,62 @@
+package identitytypes
+
+import (
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+)
+
+// IdentityStatus represents the status of an identity
+type IdentityStatus string
+
+const (
+	IdentityStatusActive   IdentityStatus = "active"
+	IdentityStatusInactive IdentityStatus = "inactive"
+)
+
+// StorableIdentity represents the database entity for a user's identity
+type StorableIdentity struct {
+	bun.BaseModel `bun:"table:identity"`
+
+	ID        valuer.UUID    `bun:"id,pk,type:text" json:"id"`
+	Status    IdentityStatus `bun:"status" json:"status"`
+	OrgID     valuer.UUID    `bun:"org_id" json:"orgId"`
+	CreatedAt time.Time      `bun:"created_at" json:"createdAt"`
+	UpdatedAt time.Time      `bun:"updated_at" json:"updatedAt"`
+}
+
+// StorableIdentityRole represents the relationship between identity and role in the database
+type StorableIdentityRole struct {
+	bun.BaseModel `bun:"table:identity_role"`
+
+	ID         valuer.UUID `bun:"id,pk,type:text" json:"id"`
+	IdentityID valuer.UUID `bun:"identity_id" json:"identityId"`
+	RoleName   string      `bun:"role_name" json:"roleName"`
+	CreatedAt  time.Time   `bun:"created_at" json:"createdAt"`
+	UpdatedAt  time.Time   `bun:"updated_at" json:"updatedAt"`
+}
+
+// NewStorableIdentity creates a new storable identity
+func NewStorableIdentity(id valuer.UUID, orgID valuer.UUID) *StorableIdentity {
+	now := time.Now()
+	return &StorableIdentity{
+		ID:        id,
+		Status:    IdentityStatusActive,
+		OrgID:     orgID,
+		CreatedAt: now,
+		UpdatedAt: now,
+	}
+}
+
+// NewStorableIdentityRole creates a new identity-role mapping
+func NewStorableIdentityRole(identityID valuer.UUID, roleName string) *StorableIdentityRole {
+	now := time.Now()
+	return &StorableIdentityRole{
+		ID:         valuer.GenerateUUID(),
+		IdentityID: identityID,
+		RoleName:   roleName,
+		CreatedAt:  now,
+		UpdatedAt:  now,
+	}
+}

pkg/types/roletypes/role.go

@@ -287,3 +287,17 @@ func MustGetSigNozManagedRoleFromExistingRole(role types.Role) string {
 
 	return managedRole
 }
+
+// GetRoleFromManagedRoleName converts a managed role name back to the legacy role type
+func GetRoleFromManagedRoleName(managedRoleName string) types.Role {
+	switch managedRoleName {
+	case SigNozAdminRoleName:
+		return types.RoleAdmin
+	case SigNozEditorRoleName:
+		return types.RoleEditor
+	case SigNozViewerRoleName:
+		return types.RoleViewer
+	default:
+		return types.RoleViewer // default to viewer for unknown roles
+	}
+}

pkg/types/user.go

@@ -31,7 +31,7 @@ type User struct {
 	Identifiable
 	DisplayName string       `bun:"display_name" json:"displayName"`
 	Email       valuer.Email `bun:"email" json:"email"`
-	Role        Role         `bun:"role" json:"role"`
+	IdentityID  valuer.UUID  `bun:"identity_id" json:"identityId"`
 	OrgID       valuer.UUID  `bun:"org_id" json:"orgId"`
 	IsRoot      bool         `bun:"is_root" json:"isRoot"`
 	TimeAuditable
@@ -45,26 +45,23 @@ type PostableRegisterOrgAndAdmin struct {
 	OrgName        string       `json:"orgName"`
 }
 
-func NewUser(displayName string, email valuer.Email, role Role, orgID valuer.UUID) (*User, error) {
+func NewUser(displayName string, email valuer.Email, orgID valuer.UUID) (*User, error) {
 	if email.IsZero() {
 		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "email is required")
 	}
 
-	if role == "" {
-		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "role is required")
-	}
-
 	if orgID.IsZero() {
 		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgID is required")
 	}
 
+	id := valuer.GenerateUUID()
 	return &User{
 		Identifiable: Identifiable{
-			ID: valuer.GenerateUUID(),
+			ID: id,
 		},
 		DisplayName: displayName,
 		Email:       email,
-		Role:        role,
+		IdentityID:  id, // identity_id = user.id (1:1 mapping)
 		OrgID:       orgID,
 		IsRoot:      false,
 		TimeAuditable: TimeAuditable{
@@ -83,13 +80,14 @@ func NewRootUser(displayName string, email valuer.Email, orgID valuer.UUID) (*Us
 		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgID is required")
 	}
 
+	id := valuer.GenerateUUID()
 	return &User{
 		Identifiable: Identifiable{
-			ID: valuer.GenerateUUID(),
+			ID: id,
 		},
 		DisplayName: displayName,
 		Email:       email,
-		Role:        RoleAdmin,
+		IdentityID:  id, // identity_id = user.id (1:1 mapping)
 		OrgID:       orgID,
 		IsRoot:      true,
 		TimeAuditable: TimeAuditable{
@@ -100,21 +98,18 @@ func NewRootUser(displayName string, email valuer.Email, orgID valuer.UUID) (*Us
 }
 
 // Update applies mutable fields from the input to the user. Immutable fields
-// (email, is_root, org_id, id) are preserved. Only non-zero input fields are applied.
-func (u *User) Update(displayName string, role Role) {
+// (email, is_root, org_id, id, identity_id) are preserved. Only non-zero input fields are applied.
+func (u *User) Update(displayName string) {
 	if displayName != "" {
 		u.DisplayName = displayName
 	}
-	if role != "" {
-		u.Role = role
-	}
 	u.UpdatedAt = time.Now()
 }
 
-// PromoteToRoot promotes the user to a root user with admin role.
+// PromoteToRoot promotes the user to a root user.
+// Note: The actual role assignment is handled via identity module.
 func (u *User) PromoteToRoot() {
 	u.IsRoot = true
-	u.Role = RoleAdmin
 	u.UpdatedAt = time.Now()
 }
 
@@ -133,10 +128,10 @@ func (u *User) ErrIfRoot() error {
 	return nil
 }
 
-func NewTraitsFromUser(user *User) map[string]any {
+func NewTraitsFromUser(user *User, roles []Role) map[string]any {
 	return map[string]any{
 		"name":         user.DisplayName,
-		"role":         user.Role,
+		"roles":        roles,
 		"email":        user.Email.String(),
 		"display_name": user.DisplayName,
 		"created_at":   user.CreatedAt,
@@ -186,9 +181,6 @@ type UserStore interface {
 	// Get users by email.
 	GetUsersByEmail(ctx context.Context, email valuer.Email) ([]*User, error)
 
-	// Get users by role and org.
-	GetUsersByRoleAndOrgID(ctx context.Context, role Role, orgID valuer.UUID) ([]*User, error)
-
 	// List users by org.
 	ListUsersByOrgID(ctx context.Context, orgID valuer.UUID) ([]*User, error)