Merge branch 'main' into sso-mapping

* feat: updated onboarding question and used radio from signozhq

* feat: added and updated test cases

* feat: removed the editorg and updateorg from onboarding questionnaire

* feat: addressed comments and feedback

frontend/package.json

@@ -55,8 +55,10 @@
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
+		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
+		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",

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

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

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

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

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

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

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

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

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

@@ -21,7 +21,9 @@ import '@signozhq/design-tokens';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
+import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
+import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/tooltip';

frontend/src/container/DashboardContainer/visualization/panels/types.ts

@@ -14,11 +14,6 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
-export interface SeriesVisibilityState {
-	labels: string[];
-	visibility: boolean[];
-}
-
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -62,10 +62,10 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns visibility by index including duplicate labels', () => {
@@ -85,10 +85,11 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'CPU', 'Memory'],
-				visibility: [true, false, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns null on malformed JSON in localStorage', () => {
@@ -127,10 +128,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('adds a new widget entry when other widgets already exist', () => {
@@ -149,7 +150,7 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-new');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
+			expect(stored).toEqual([{ label: 'CPU', show: false }]);
 		});
 
 		it('updates existing widget visibility when entry already exists', () => {
@@ -175,10 +176,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [false, true],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: true },
+			]);
 		});
 
 		it('silently handles malformed existing JSON without throwing', () => {
@@ -201,10 +202,10 @@ describe('legendVisibilityUtils', () => {
 
 			const stored = getStoredSeriesVisibility('widget-1');
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['x-axis', 'CPU'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: false },
+			]);
 			const expected = [
 				{
 					name: 'widget-1',
@@ -231,14 +232,12 @@ describe('legendVisibilityUtils', () => {
 				{ label: 'B', show: true },
 			]);
 
-			expect(getStoredSeriesVisibility('widget-a')).toEqual({
-				labels: ['A'],
-				visibility: [true],
-			});
-			expect(getStoredSeriesVisibility('widget-b')).toEqual({
-				labels: ['B'],
-				visibility: [true],
-			});
+			expect(getStoredSeriesVisibility('widget-a')).toEqual([
+				{ label: 'A', show: true },
+			]);
+			expect(getStoredSeriesVisibility('widget-b')).toEqual([
+				{ label: 'B', show: true },
+			]);
 		});
 
 		it('calls setItem with storage key and stringified visibility states', () => {

frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts

@@ -1,10 +1,6 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import {
-	GraphVisibilityState,
-	SeriesVisibilityItem,
-	SeriesVisibilityState,
-} from '../types';
+import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
  * Retrieves the stored series visibility for a specific widget from localStorage by index.
@@ -14,7 +10,7 @@ import {
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityState | null {
+): SeriesVisibilityItem[] | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -29,10 +25,7 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return {
-			labels: widgetState.dataIndex.map((item) => item.label),
-			visibility: widgetState.dataIndex.map((item) => item.show),
-		};
+		return widgetState.dataIndex;
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -477,47 +477,67 @@
 			}
 		}
 
-		.opentelemetry-radio-container {
+		.observability-tools-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
 			width: 528px;
 
-			.opentelemetry-radio-group {
-				width: 100%;
+			.observability-tool-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
 
-				.opentelemetry-radio-items-wrapper {
-					display: flex;
-					flex-direction: row;
-					flex-wrap: nowrap;
-					gap: 12px;
-					width: 100%;
+				label {
+					color: var(--l1-foreground);
+					font-size: 13px;
+					cursor: pointer;
 				}
 
-				.opentelemetry-radio-item {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					height: 32px;
-					width: calc((528px - 12px) / 2);
-					min-width: 258px;
-					flex: 0 0 calc((528px - 12px) / 2);
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
+					}
+				}
+
+				&.observability-tool-others-item {
+					.onboarding-questionaire-other-input {
+						flex: 1;
+					}
+				}
+			}
+		}
+
+		.migration-timeline-radio-container,
+		.opentelemetry-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
+			width: 528px;
+
+			.migration-timeline-radio-item,
+			.opentelemetry-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
+
+				label {
 					color: var(--l1-foreground);
-					font-family: Inter, sans-serif;
 					font-size: 13px;
-					font-weight: 400;
-					line-height: 1;
-					letter-spacing: -0.065px;
-					box-sizing: border-box;
+					cursor: pointer;
+				}
 
-					.ant-radio {
-						.ant-radio-inner {
-							width: 16px;
-							height: 16px;
-							border-color: var(--l3-border);
-						}
-
-						&.ant-radio-checked .ant-radio-inner {
-							border-color: var(--bg-robin-500);
-							background-color: var(--bg-robin-500);
-						}
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
 					}
 				}
 			}
@@ -977,27 +997,6 @@
 				color: var(--bg-slate-300);
 			}
 
-			.opentelemetry-radio-container {
-				.opentelemetry-radio-group {
-					.opentelemetry-radio-items-wrapper {
-						.opentelemetry-radio-item {
-							color: var(--l1-foreground);
-
-							.ant-radio {
-								.ant-radio-inner {
-									border-color: var(--l3-border);
-								}
-
-								&.ant-radio-checked .ant-radio-inner {
-									border-color: var(--bg-robin-500);
-									background-color: var(--bg-robin-500);
-								}
-							}
-						}
-					}
-				}
-			}
-
 			.onboarding-back-button {
 				border-color: var(--text-vanilla-300);
 				color: var(--l3-foreground);

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -1,34 +1,27 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button } from '@signozhq/button';
-import { Checkbox } from '@signozhq/checkbox';
 import { Input } from '@signozhq/input';
-import { Radio, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/es/radio';
+import {
+	RadioGroup,
+	RadioGroupItem,
+	RadioGroupLabel,
+} from '@signozhq/radio-group';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import editOrg from 'api/organization/editOrg';
-import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, Loader2 } from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
+import { ArrowRight } from 'lucide-react';
 
 import '../OnboardingQuestionaire.styles.scss';
 
-export interface OrgData {
-	id: string;
-	displayName: string;
-}
-
 export interface OrgDetails {
-	organisationName: string;
 	usesObservability: boolean | null;
 	observabilityTool: string | null;
 	otherTool: string | null;
 	usesOtel: boolean | null;
+	migrationTimeline: string | null;
 }
 
 interface OrgQuestionsProps {
-	currentOrgData: OrgData | null;
 	orgDetails: OrgDetails;
 	onNext: (details: OrgDetails) => void;
 }
@@ -45,19 +38,14 @@ const observabilityTools = {
 	Others: 'Others',
 };
 
-function OrgQuestions({
-	currentOrgData,
-	orgDetails,
-	onNext,
-}: OrgQuestionsProps): JSX.Element {
-	const { updateOrg } = useAppContext();
-	const { notifications } = useNotifications();
+const migrationTimelineOptions = {
+	lessThanMonth: 'Less than a month',
+	oneToThreeMonths: '1-3 months',
+	greaterThanThreeMonths: 'Greater than 3 months',
+	justExploring: 'Just exploring',
+};
 
-	const { t } = useTranslation(['organizationsettings', 'common']);
-
-	const [organisationName, setOrganisationName] = useState<string>(
-		orgDetails?.organisationName || '',
-	);
+function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 	const [observabilityTool, setObservabilityTool] = useState<string | null>(
 		orgDetails?.observabilityTool || null,
 	);
@@ -66,92 +54,33 @@ function OrgQuestions({
 	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
 
-	useEffect(() => {
-		setOrganisationName(orgDetails.organisationName);
-	}, [orgDetails.organisationName]);
-
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-
 	const [usesOtel, setUsesOtel] = useState<boolean | null>(orgDetails.usesOtel);
+	const [migrationTimeline, setMigrationTimeline] = useState<string | null>(
+		orgDetails?.migrationTimeline || null,
+	);
 
-	const handleOrgNameUpdate = async (): Promise<void> => {
+	const showMigrationQuestion =
+		observabilityTool !== null && observabilityTool !== 'None';
+
+	const handleNext = (): void => {
 		const usesObservability =
 			!observabilityTool?.includes('None') && observabilityTool !== null;
 
-		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
-		if (
-			!currentOrgData ||
-			!organisationName ||
-			organisationName === '' ||
-			orgDetails.organisationName === organisationName
-		) {
-			logEvent('Org Onboarding: Answered', {
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
+		logEvent('Org Onboarding: Answered', {
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 
-			onNext({
-				organisationName,
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
-
-			return;
-		}
-
-		try {
-			setIsLoading(true);
-			const { statusCode, error } = await editOrg({
-				displayName: organisationName,
-				orgId: currentOrgData.id,
-			});
-			if (statusCode === 204) {
-				updateOrg(currentOrgData?.id, organisationName);
-
-				logEvent('Org Onboarding: Org Name Updated', {
-					organisationName,
-				});
-
-				logEvent('Org Onboarding: Answered', {
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-
-				onNext({
-					organisationName,
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-			} else {
-				logEvent('Org Onboarding: Org Name Update Failed', {
-					organisationName: orgDetails.organisationName,
-				});
-
-				notifications.error({
-					message:
-						error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-			}
-			setIsLoading(false);
-		} catch (error) {
-			setIsLoading(false);
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
+		onNext({
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 	};
 
 	const isValidUsesObservability = (): boolean => {
@@ -173,22 +102,29 @@ function OrgQuestions({
 
 	useEffect(() => {
 		const isValidObservability = isValidUsesObservability();
+		const isMigrationValid = !showMigrationQuestion || migrationTimeline !== null;
 
-		if (organisationName !== '' && usesOtel !== null && isValidObservability) {
+		if (usesOtel !== null && isValidObservability && isMigrationValid) {
 			setIsNextDisabled(false);
 		} else {
 			setIsNextDisabled(true);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [organisationName, usesOtel, observabilityTool, otherTool]);
+	}, [
+		usesOtel,
+		observabilityTool,
+		otherTool,
+		migrationTimeline,
+		showMigrationQuestion,
+	]);
 
-	const createObservabilityToolHandler = (tool: string) => (
-		checked: boolean,
-	): void => {
-		if (checked) {
-			setObservabilityTool(tool);
-		} else if (observabilityTool === tool) {
-			setObservabilityTool(null);
+	const handleObservabilityToolChange = (value: string): void => {
+		setObservabilityTool(value);
+		if (value !== 'Others') {
+			setOtherTool('');
+		}
+		if (value === 'None') {
+			setMigrationTimeline(null);
 		}
 	};
 
@@ -196,10 +132,6 @@ function OrgQuestions({
 		setUsesOtel(value === 'yes');
 	};
 
-	const handleOnNext = (): void => {
-		handleOrgNameUpdate();
-	};
-
 	return (
 		<div className="questions-container">
 			<div className="onboarding-header-section">
@@ -214,40 +146,24 @@ function OrgQuestions({
 
 			<div className="questions-form-container">
 				<div className="questions-form">
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Name of your company
-						</label>
-						<Input
-							type="text"
-							name="organisationName"
-							id="organisationName"
-							placeholder="e.g. Simpsonville"
-							autoComplete="off"
-							value={organisationName}
-							onChange={(e): void => setOrganisationName(e.target.value)}
-						/>
-					</div>
-
 					<div className="form-group">
 						<label className="question" htmlFor="observabilityTool">
 							Which observability tool do you currently use?
 						</label>
-						<div className="observability-tools-checkbox-container">
+						<RadioGroup
+							value={observabilityTool || ''}
+							onValueChange={handleObservabilityToolChange}
+							className="observability-tools-radio-container"
+						>
 							{Object.entries(observabilityTools).map(([tool, label]) => {
 								if (tool === 'Others') {
 									return (
 										<div
 											key={tool}
-											className="checkbox-item observability-tool-checkbox-item observability-tool-others-item"
+											className="radio-item observability-tool-radio-item observability-tool-others-item"
 										>
-											<Checkbox
-												id={`checkbox-${tool}`}
-												checked={observabilityTool === tool}
-												onCheckedChange={createObservabilityToolHandler(tool)}
-												labelName={observabilityTool === 'Others' ? '' : label}
-											/>
-											{observabilityTool === 'Others' && (
+											<RadioGroupItem value={tool} id={`radio-${tool}`} />
+											{observabilityTool === 'Others' ? (
 												<Input
 													type="text"
 													className="onboarding-questionaire-other-input"
@@ -256,55 +172,60 @@ function OrgQuestions({
 													autoFocus
 													onChange={(e): void => setOtherTool(e.target.value)}
 												/>
+											) : (
+												<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 											)}
 										</div>
 									);
 								}
 								return (
-									<div
-										key={tool}
-										className="checkbox-item observability-tool-checkbox-item"
-									>
-										<Checkbox
-											id={`checkbox-${tool}`}
-											checked={observabilityTool === tool}
-											onCheckedChange={createObservabilityToolHandler(tool)}
-											labelName={label}
-										/>
+									<div key={tool} className="radio-item observability-tool-radio-item">
+										<RadioGroupItem value={tool} id={`radio-${tool}`} />
+										<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 									</div>
 								);
 							})}
-						</div>
+						</RadioGroup>
 					</div>
 
+					{showMigrationQuestion && (
+						<div className="form-group">
+							<div className="question">
+								What is your timeline for migrating to SigNoz?
+							</div>
+							<RadioGroup
+								value={migrationTimeline || ''}
+								onValueChange={setMigrationTimeline}
+								className="migration-timeline-radio-container"
+							>
+								{Object.entries(migrationTimelineOptions).map(([key, label]) => (
+									<div key={key} className="radio-item migration-timeline-radio-item">
+										<RadioGroupItem value={key} id={`radio-migration-${key}`} />
+										<RadioGroupLabel htmlFor={`radio-migration-${key}`}>
+											{label}
+										</RadioGroupLabel>
+									</div>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+
 					<div className="form-group">
 						<div className="question">Do you already use OpenTelemetry?</div>
-						<div className="opentelemetry-radio-container">
-							<Radio.Group
-								value={((): string | undefined => {
-									if (usesOtel === true) {
-										return 'yes';
-									}
-									if (usesOtel === false) {
-										return 'no';
-									}
-									return undefined;
-								})()}
-								onChange={(e: RadioChangeEvent): void =>
-									handleOtelChange(e.target.value)
-								}
-								className="opentelemetry-radio-group"
-							>
-								<div className="opentelemetry-radio-items-wrapper">
-									<Radio value="yes" className="opentelemetry-radio-item">
-										Yes
-									</Radio>
-									<Radio value="no" className="opentelemetry-radio-item">
-										No
-									</Radio>
-								</div>
-							</Radio.Group>
-						</div>
+						<RadioGroup
+							value={usesOtel === true ? 'yes' : usesOtel === false ? 'no' : ''}
+							onValueChange={handleOtelChange}
+							className="opentelemetry-radio-container"
+						>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="yes" id="radio-otel-yes" />
+								<RadioGroupLabel htmlFor="radio-otel-yes">Yes</RadioGroupLabel>
+							</div>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="no" id="radio-otel-no" />
+								<RadioGroupLabel htmlFor="radio-otel-no">No</RadioGroupLabel>
+							</div>
+						</RadioGroup>
 					</div>
 				</div>
 
@@ -312,15 +233,9 @@ function OrgQuestions({
 					variant="solid"
 					color="primary"
 					className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
-					onClick={handleOnNext}
+					onClick={handleNext}
 					disabled={isNextDisabled}
-					suffixIcon={
-						isLoading ? (
-							<Loader2 className="animate-spin" size={12} />
-						) : (
-							<ArrowRight size={12} />
-						)
-					}
+					suffixIcon={<ArrowRight size={12} />}
 				>
 					Next
 				</Button>

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

@@ -69,7 +69,7 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			expect(screen.getByText(/welcome to signoz cloud/i)).toBeInTheDocument();
-			expect(screen.getByLabelText(/name of your company/i)).toBeInTheDocument();
+
 			expect(
 				screen.getByText(/which observability tool do you currently use/i),
 			).toBeInTheDocument();
@@ -86,15 +86,12 @@ describe('OnboardingQuestionaire Component', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-
 			const datadogCheckbox = screen.getByLabelText(/datadog/i);
 			await user.click(datadogCheckbox);
 
 			const otelYes = screen.getByRole('radio', { name: /yes/i });
 			await user.click(otelYes);
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = await screen.findByRole('button', { name: /next/i });
 			expect(nextButton).not.toBeDisabled();
@@ -112,15 +109,38 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 
+		it('shows migration timeline options only when specific observability tools are selected', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			render(<OnboardingQuestionaire />);
+
+			// Initially not visible
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+
+			const datadogCheckbox = screen.getByLabelText(/datadog/i);
+			await user.click(datadogCheckbox);
+
+			expect(
+				await screen.findByText(/What is your timeline for migrating to SigNoz/i),
+			).toBeInTheDocument();
+
+			// Not visible when None is selected
+			const noneCheckbox = screen.getByLabelText(/none\/starting fresh/i);
+			await user.click(noneCheckbox);
+
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+		});
+
 		it('proceeds to step 2 when next is clicked', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = screen.getByRole('button', { name: /next/i });
 			await user.click(nextButton);
@@ -137,11 +157,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -157,11 +176,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await waitFor(() => {
@@ -175,11 +193,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -203,11 +220,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -232,11 +248,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate through steps 1 and 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -267,11 +282,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 3
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -290,40 +304,4 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 	});
-
-	describe('Error Handling', () => {
-		it('handles organization update error gracefully', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.put(EDIT_ORG_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(500),
-						ctx.json({
-							error: {
-								code: 'INTERNAL_ERROR',
-								message: 'Failed to update organization',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<OnboardingQuestionaire />);
-
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			await user.click(nextButton);
-
-			// Component should still be functional
-			await waitFor(() => {
-				expect(nextButton).not.toBeDisabled();
-			});
-		});
-	});
 });

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -23,7 +23,7 @@ import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
 import OptimiseSignozNeeds, {
 	OptimiseSignozDetails,
 } from './OptimiseSignozNeeds/OptimiseSignozNeeds';
-import OrgQuestions, { OrgData, OrgDetails } from './OrgQuestions/OrgQuestions';
+import OrgQuestions, { OrgDetails } from './OrgQuestions/OrgQuestions';
 
 import './OnboardingQuestionaire.styles.scss';
 
@@ -37,11 +37,11 @@ export const showErrorNotification = (
 };
 
 const INITIAL_ORG_DETAILS: OrgDetails = {
-	organisationName: '',
 	usesObservability: true,
 	observabilityTool: '',
 	otherTool: '',
 	usesOtel: null,
+	migrationTimeline: null,
 };
 
 const INITIAL_SIGNOZ_DETAILS: SignozDetails = {
@@ -79,25 +79,11 @@ function OnboardingQuestionaire(): JSX.Element {
 		InviteTeamMembersProps[] | null
 	>(null);
 
-	const [currentOrgData, setCurrentOrgData] = useState<OrgData | null>(null);
-
 	const [
 		updatingOrgOnboardingStatus,
 		setUpdatingOrgOnboardingStatus,
 	] = useState<boolean>(false);
 
-	useEffect(() => {
-		if (org) {
-			setCurrentOrgData(org[0]);
-
-			setOrgDetails({
-				...orgDetails,
-				organisationName: org[0].displayName,
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [org]);
-
 	useEffect(() => {
 		logEvent('Org Onboarding: Started', {
 			org_id: org?.[0]?.id,
@@ -175,6 +161,7 @@ function OnboardingQuestionaire(): JSX.Element {
 					? (orgDetails?.otherTool as string)
 					: (orgDetails?.observabilityTool as string),
 			where_did_you_discover_signoz: signozDetails?.discoverSignoz as string,
+			timeline_for_migrating_to_signoz: orgDetails?.migrationTimeline as string,
 			reasons_for_interest_in_signoz: signozDetails?.interestInSignoz?.includes(
 				'Others',
 			)
@@ -208,7 +195,6 @@ function OnboardingQuestionaire(): JSX.Element {
 			<div className="onboarding-questionaire-content">
 				{currentStep === 1 && (
 					<OrgQuestions
-						currentOrgData={currentOrgData}
 						orgDetails={{
 							...orgDetails,
 							usesOtel: orgDetails.usesOtel ?? null,

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,131 @@
+.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;
+
+		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;
+	}
+
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

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

@@ -0,0 +1,149 @@
+import { useCallback, useState } from 'react';
+import { ChevronDown, ChevronRight, CircleHelp } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+
+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'] : [];
+
+	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. Note:
+									Email is always extracted from the NameID assertion.
+								</p>
+							</div>
+						</div>
+					}
+				>
+					<div
+						id="attribute-mapping-content"
+						className="attribute-mapping-section__content"
+					>
+						{/* Name Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="name-attribute"
+							>
+								Name Attribute
+								<Tooltip title="The SAML attribute key that contains the user's display name. Default: 'name'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="name-attribute" placeholder="Name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="groups-attribute"
+							>
+								Groups Attribute
+								<Tooltip title="The SAML attribute key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="groups-attribute" placeholder="Groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="role-attribute"
+							>
+								Role Attribute
+								<Tooltip title="The SAML attribute key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="role-attribute" placeholder="Role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default AttributeMappingSection;

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

@@ -0,0 +1,131 @@
+.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;
+
+		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;
+	}
+
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

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

@@ -0,0 +1,143 @@
+import { useCallback, useState } from 'react';
+import { ChevronDown, ChevronRight, CircleHelp } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+
+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'] : [];
+
+	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>
+						</div>
+					}
+				>
+					<div id="claim-mapping-content" className="claim-mapping-section__content">
+						{/* Email Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="email-claim">
+								Email Claim
+								<Tooltip title="The claim key that contains the user's email address. Default: 'email'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'email']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="email-claim" placeholder="Email" />
+							</Form.Item>
+						</div>
+
+						{/* Name Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="name-claim">
+								Name Claim
+								<Tooltip title="The claim key that contains the user's display name. Default: 'name'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="name-claim" placeholder="Name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="groups-claim">
+								Groups Claim
+								<Tooltip title="The claim key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="groups-claim" placeholder="Groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="role-claim">
+								Role Claim
+								<Tooltip title="The claim key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="role-claim" placeholder="Role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default ClaimMappingSection;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,292 @@
+.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;
+
+		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;
+		}
+	}
+
+	// --- Input styles ---
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

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

@@ -0,0 +1,205 @@
+import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Checkbox } from '@signozhq/checkbox';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	Plus,
+	Trash2,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Select, Tooltip } from 'antd';
+
+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'] : [];
+
+	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>
+						</div>
+					}
+				>
+					<div id="role-mapping-content" className="role-mapping-section__content">
+						{/* Default Role */}
+						<div className="role-mapping-section__field-group">
+							<label className="role-mapping-section__label" htmlFor="default-role">
+								Default Role
+								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "VIEWER"'>
+									<CircleHelp size={14} className="role-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'defaultRole']}
+								className="role-mapping-section__form-item"
+								initialValue="VIEWER"
+							>
+								<Select
+									id="default-role"
+									options={ROLE_OPTIONS}
+									className="role-mapping-section__select"
+								/>
+							</Form.Item>
+						</div>
+
+						{/* Use Role Attribute */}
+						<div className="role-mapping-section__checkbox-row">
+							<Form.Item
+								name={[...fieldNamePrefix, 'useRoleAttribute']}
+								valuePropName="checked"
+								noStyle
+							>
+								<Checkbox
+									id="use-role-attribute"
+									labelName="Use Role Attribute Directly"
+									onCheckedChange={(checked: boolean): void => {
+										form.setFieldValue([...fieldNamePrefix, 'useRoleAttribute'], checked);
+									}}
+								/>
+							</Form.Item>
+							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
+								<CircleHelp size={14} className="role-mapping-section__label-icon" />
+							</Tooltip>
+						</div>
+
+						{/* Group to Role Mappings - only show when useRoleAttribute is false */}
+						{!useRoleAttribute && (
+							<div className="role-mapping-section__group-mappings">
+								<div className="role-mapping-section__group-header">
+									<span className="role-mapping-section__group-title">
+										Group to Role Mappings
+									</span>
+									<p className="role-mapping-section__group-description">
+										Map IDP group names to SigNoz roles. If a user belongs to multiple
+										groups, the highest privilege role will be assigned.
+									</p>
+								</div>
+
+								<Form.List name={[...fieldNamePrefix, 'groupMappingsList']}>
+									{(fields, { add, remove }): JSX.Element => (
+										<div className="role-mapping-section__items">
+											{fields.map((field) => (
+												<div key={field.key} className="role-mapping-section__row">
+													<Form.Item
+														name={[field.name, 'groupName']}
+														className="role-mapping-section__field role-mapping-section__field--group"
+														rules={[{ required: true, message: 'Group name is required' }]}
+													>
+														<Input placeholder="IDP Group Name" />
+													</Form.Item>
+
+													<Form.Item
+														name={[field.name, 'role']}
+														className="role-mapping-section__field role-mapping-section__field--role"
+														rules={[{ required: true, message: 'Role is required' }]}
+														initialValue="VIEWER"
+													>
+														<Select
+															options={ROLE_OPTIONS}
+															className="role-mapping-section__select"
+														/>
+													</Form.Item>
+
+													<Button
+														variant="ghost"
+														color="secondary"
+														className="role-mapping-section__remove-btn"
+														onClick={(): void => remove(field.name)}
+														aria-label="Remove mapping"
+													>
+														<Trash2 size={12} />
+													</Button>
+												</div>
+											))}
+
+											<Button
+												variant="dashed"
+												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
+												prefixIcon={<Plus size={14} />}
+												className="role-mapping-section__add-btn"
+											>
+												Add Group Mapping
+											</Button>
+										</div>
+									)}
+								</Form.List>
+							</div>
+						)}
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default RoleMappingSection;

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

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

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

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

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

@@ -0,0 +1,355 @@
+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.getByLabelText(/redirect uri/i)).toBeInTheDocument();
+				expect(screen.getByText(/skip email verification/i)).toBeInTheDocument();
+			});
+		});
+
+		it('shows workspace groups section when expanded', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthWithWorkspaceGroups}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const workspaceHeader = screen.getByText(/google workspace groups/i);
+			await user.click(workspaceHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/fetch groups/i)).toBeInTheDocument();
+				expect(screen.getByText(/service account json/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('SAML Provider', () => {
+		it('shows SAML-specific fields when editing SAML domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockSamlAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit saml authentication/i)).toBeInTheDocument();
+			expect(
+				screen.getByDisplayValue('https://idp.example.com/sso'),
+			).toBeInTheDocument();
+			expect(screen.getByDisplayValue('urn:example:idp')).toBeInTheDocument();
+		});
+
+		it('shows attribute mapping section for SAML', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockSamlWithAttributeMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(
+				screen.getByText(/attribute mapping \(advanced\)/i),
+			).toBeInTheDocument();
+
+			const attributeHeader = screen.getByText(/attribute mapping \(advanced\)/i);
+			await user.click(attributeHeader);
+
+			await waitFor(() => {
+				expect(screen.getByLabelText(/name attribute/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/groups attribute/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/role attribute/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('OIDC Provider', () => {
+		it('shows OIDC-specific fields when editing OIDC domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit oidc authentication/i)).toBeInTheDocument();
+			expect(screen.getByDisplayValue('https://oidc.corp.io')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('oidc-client-id')).toBeInTheDocument();
+		});
+
+		it('shows claim mapping section for OIDC', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcWithClaimMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/claim mapping \(advanced\)/i)).toBeInTheDocument();
+
+			const claimHeader = screen.getByText(/claim mapping \(advanced\)/i);
+			await user.click(claimHeader);
+
+			await waitFor(() => {
+				expect(screen.getByLabelText(/email claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/name claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/groups claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/role claim/i)).toBeInTheDocument();
+			});
+		});
+
+		it('shows OIDC options checkboxes', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/skip email verification/i)).toBeInTheDocument();
+			expect(screen.getByText(/get user info/i)).toBeInTheDocument();
+		});
+	});
+
+	describe('Role Mapping', () => {
+		it('shows role mapping section in provider forms', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/role mapping \(advanced\)/i)).toBeInTheDocument();
+			});
+		});
+
+		it('expands role mapping section to show default role selector', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockDomainWithRoleMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const roleMappingHeader = screen.getByText(/role mapping \(advanced\)/i);
+			await user.click(roleMappingHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/default role/i)).toBeInTheDocument();
+				expect(
+					screen.getByText(/use role attribute directly/i),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows group mappings section when useRoleAttribute is false', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockDomainWithRoleMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const roleMappingHeader = screen.getByText(/role mapping \(advanced\)/i);
+			await user.click(roleMappingHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/group to role mappings/i)).toBeInTheDocument();
+				expect(
+					screen.getByRole('button', { name: /add group mapping/i }),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Modal Actions', () => {
+		it('calls onClose when cancel button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const cancelButton = screen.getByRole('button', { name: /cancel/i });
+			await user.click(cancelButton);
+
+			expect(mockOnClose).toHaveBeenCalled();
+		});
+	});
+});

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

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

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

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

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

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

frontend/src/container/PanelWrapper/constants.ts

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import BarPanel from 'container/DashboardContainer/visualization/panels/BarPanel/BarPanel';
 
 import TimeSeriesPanel from '../DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel';
 import HistogramPanelWrapper from './HistogramPanelWrapper';
 import ListPanelWrapper from './ListPanelWrapper';
 import PiePanelWrapper from './PiePanelWrapper';
 import TablePanelWrapper from './TablePanelWrapper';
-import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
@@ -16,7 +16,7 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
-	[PANEL_TYPES.BAR]: UplotPanelWrapper,
+	[PANEL_TYPES.BAR]: BarPanel,
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanelWrapper,
 };
 

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -1,4 +1,4 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
+import { SeriesVisibilityItem } from 'container/DashboardContainer/visualization/panels/types';
 import { getStoredSeriesVisibility } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { thresholdsDrawHook } from 'lib/uPlotV2/hooks/useThresholdsDrawHook';
@@ -238,7 +238,7 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	/**
 	 * Returns stored series visibility by index from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
 	 */
-	private getStoredVisibility(): SeriesVisibilityState | null {
+	private getStoredVisibility(): SeriesVisibilityItem[] | null {
 		if (
 			this.widgetId &&
 			this.selectionPreferencesSource === SelectionPreferencesSource.LOCAL_STORAGE
@@ -248,14 +248,98 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return null;
 	}
 
+	/**
+	 * Derive visibility resolution state from stored preferences and current series:
+	 * - visibleStoredLabels: labels that should always be visible
+	 * - hiddenStoredLabels: labels that should always be hidden
+	 * - hasActivePreference: whether a "mix" preference applies to new labels
+	 */
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	private getVisibilityResolutionState(): {
+		visibleStoredLabels: Set<string>;
+		hiddenStoredLabels: Set<string>;
+		hasActivePreference: boolean;
+	} {
+		const seriesVisibilityState = this.getStoredVisibility();
+		if (!seriesVisibilityState || seriesVisibilityState.length === 0) {
+			return {
+				visibleStoredLabels: new Set<string>(),
+				hiddenStoredLabels: new Set<string>(),
+				hasActivePreference: false,
+			};
+		}
+
+		// Single pass over stored items to derive:
+		// - visibleStoredLabels: any label that is ever stored as visible
+		// - hiddenStoredLabels: labels that are only ever stored as hidden
+		// - hasMixPreference: there is at least one visible and one hidden entry
+		const visibleStoredLabels = new Set<string>();
+		const hiddenStoredLabels = new Set<string>();
+		let hasAnyVisible = false;
+		let hasAnyHidden = false;
+
+		for (const { label, show } of seriesVisibilityState) {
+			if (show) {
+				hasAnyVisible = true;
+				visibleStoredLabels.add(label);
+				// If a label is ever visible, it should not be treated as "only hidden"
+				if (hiddenStoredLabels.has(label)) {
+					hiddenStoredLabels.delete(label);
+				}
+			} else {
+				hasAnyHidden = true;
+				// Only track as hidden if we have not already seen it as visible
+				if (!visibleStoredLabels.has(label)) {
+					hiddenStoredLabels.add(label);
+				}
+			}
+		}
+
+		const hasMixPreference = hasAnyVisible && hasAnyHidden;
+
+		// Current series labels in this chart.
+		const currentSeriesLabels = this.series.map(
+			(s: UPlotSeriesBuilder) => s.getConfig().label ?? '',
+		);
+
+		// Check if any stored "visible" label exists in the current series list.
+		const hasVisibleIntersection =
+			visibleStoredLabels.size > 0 &&
+			currentSeriesLabels.some((label) => visibleStoredLabels.has(label));
+
+		// Active preference only when there is a mix AND at least one visible
+		// stored label is present in the current series list.
+		const hasActivePreference = hasMixPreference && hasVisibleIntersection;
+
+		// We apply stored visibility in two cases:
+		// - There is an active preference (mix + intersection), OR
+		// - There is no mix (all true or all false) – preserve legacy behavior.
+		const shouldApplyStoredVisibility = !hasMixPreference || hasActivePreference;
+
+		if (!shouldApplyStoredVisibility) {
+			return {
+				visibleStoredLabels: new Set<string>(),
+				hiddenStoredLabels: new Set<string>(),
+				hasActivePreference,
+			};
+		}
+
+		return {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		};
+	}
+
 	/**
 	 * Get legend items with visibility state restored from localStorage if available
 	 */
 	getLegendItems(): Record<number, LegendItem> {
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
-		);
+		const {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		} = this.getVisibilityResolutionState();
 
 		return this.series.reduce((acc, s: UPlotSeriesBuilder, index: number) => {
 			const seriesConfig = s.getConfig();
@@ -263,11 +347,11 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			// +1 because uPlot series 0 is x-axis/time; data series are at 1, 2, ... (also matches stored visibility[0]=time, visibility[1]=first data, ...)
 			const seriesIndex = index + 1;
 			const show = resolveSeriesVisibility({
-				seriesIndex,
 				seriesShow: seriesConfig.show,
 				seriesLabel: label,
-				seriesVisibilityState,
-				isAnySeriesHidden,
+				visibleStoredLabels,
+				hiddenStoredLabels,
+				hasActivePreference,
 			});
 
 			acc[seriesIndex] = {
@@ -296,22 +380,23 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			...DEFAULT_PLOT_CONFIG,
 		};
 
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
-		);
+		const {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		} = this.getVisibilityResolutionState();
 
 		config.series = [
 			{ value: (): string => '' }, // Base series for timestamp
-			...this.series.map((s, index) => {
+			...this.series.map((s) => {
 				const series = s.getConfig();
 				// Stored visibility[0] is x-axis/time; data series start at visibility[1]
 				const visible = resolveSeriesVisibility({
-					seriesIndex: index + 1,
 					seriesShow: series.show,
 					seriesLabel: series.label ?? '',
-					seriesVisibilityState,
-					isAnySeriesHidden,
+					visibleStoredLabels,
+					hiddenStoredLabels,
+					hasActivePreference,
 				});
 				return {
 					...series,

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -186,11 +186,10 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('restores visibility state from localStorage when selectionPreferencesSource is LOCAL_STORAGE', () => {
-		// Index 0 = x-axis/time; indices 1,2 = data series (Requests, Errors). resolveSeriesVisibility matches by seriesIndex + seriesLabel.
-		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue({
-			labels: ['x-axis', 'Requests', 'Errors'],
-			visibility: [true, true, false],
-		});
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'Requests', show: true },
+			{ label: 'Errors', show: false },
+		]);
 
 		const builder = new UPlotConfigBuilder({
 			widgetId: 'widget-1',
@@ -202,7 +201,7 @@ describe('UPlotConfigBuilder', () => {
 
 		const legendItems = builder.getLegendItems();
 
-		// When any series is hidden, legend visibility is driven by the stored map
+		// When any series is hidden, visibility is driven by stored label-based preferences
 		expect(legendItems[1].show).toBe(true);
 		expect(legendItems[2].show).toBe(false);
 
@@ -213,6 +212,109 @@ describe('UPlotConfigBuilder', () => {
 		expect(secondSeries?.show).toBe(false);
 	});
 
+	it('hides new series by default when there is a mixed preference and a visible label matches current series', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'Requests', show: true },
+			{ label: 'Errors', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		builder.addSeries(createSeriesProps({ label: 'Requests' }));
+		builder.addSeries(createSeriesProps({ label: 'Errors' }));
+		builder.addSeries(createSeriesProps({ label: 'Latency' }));
+
+		const legendItems = builder.getLegendItems();
+
+		// Stored labels: Requests (visible), Errors (hidden).
+		// New label "Latency" should be hidden because there is a mixed preference
+		// and "Requests" (a visible stored label) is present in the current series.
+		expect(legendItems[1].label).toBe('Requests');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('Errors');
+		expect(legendItems[2].show).toBe(false);
+		expect(legendItems[3].label).toBe('Latency');
+		expect(legendItems[3].show).toBe(false);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries, thirdSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('Requests');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('Errors');
+		expect(secondSeries?.show).toBe(false);
+		expect(thirdSeries?.label).toBe('Latency');
+		expect(thirdSeries?.show).toBe(false);
+	});
+
+	it('shows all series when there is a mixed preference but no visible stored labels match current series', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'StoredVisible', show: true },
+			{ label: 'StoredHidden', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		// None of these labels intersect with the stored visible label "StoredVisible"
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+		builder.addSeries(createSeriesProps({ label: 'Memory' }));
+
+		const legendItems = builder.getLegendItems();
+
+		// Mixed preference exists in storage, but since no visible labels intersect
+		// with current series, stored preferences are ignored and all are visible.
+		expect(legendItems[1].label).toBe('CPU');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('Memory');
+		expect(legendItems[2].show).toBe(true);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('CPU');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('Memory');
+		expect(secondSeries?.show).toBe(true);
+	});
+
+	it('treats duplicate labels as visible when any stored entry for that label is visible', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'CPU', show: true },
+			{ label: 'CPU', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-dup',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		// Two series with the same label; both should be visible because at least
+		// one stored entry for "CPU" is visible.
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+
+		const legendItems = builder.getLegendItems();
+
+		expect(legendItems[1].label).toBe('CPU');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('CPU');
+		expect(legendItems[2].show).toBe(true);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('CPU');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('CPU');
+		expect(secondSeries?.show).toBe(true);
+	});
+
 	it('does not attempt to read stored visibility when using in-memory preferences', () => {
 		const builder = new UPlotConfigBuilder({
 			widgetId: 'widget-1',

frontend/src/lib/uPlotV2/utils/seriesVisibility.ts

@@ -1,25 +1,44 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
-
+/**
+ * Resolve the visibility of a single series based on:
+ * - Stored per-series visibility (when applicable)
+ * - Whether there is an "active preference" (mix of visible/hidden that matches current series)
+ * - The series' own default show flag
+ */
 export function resolveSeriesVisibility({
-	seriesIndex,
 	seriesShow,
 	seriesLabel,
-	seriesVisibilityState,
-	isAnySeriesHidden,
+	visibleStoredLabels,
+	hiddenStoredLabels,
+	hasActivePreference,
 }: {
-	seriesIndex: number;
 	seriesShow: boolean | undefined | null;
 	seriesLabel: string;
-	seriesVisibilityState: SeriesVisibilityState | null;
-	isAnySeriesHidden: boolean;
+	visibleStoredLabels: Set<string> | null;
+	hiddenStoredLabels: Set<string> | null;
+	hasActivePreference: boolean;
 }): boolean {
-	if (
-		isAnySeriesHidden &&
-		seriesVisibilityState?.visibility &&
-		seriesVisibilityState.labels.length > seriesIndex &&
-		seriesVisibilityState.labels[seriesIndex] === seriesLabel
-	) {
-		return seriesVisibilityState.visibility[seriesIndex] ?? false;
+	const isStoredVisible = !!visibleStoredLabels?.has(seriesLabel);
+	const isStoredHidden = !!hiddenStoredLabels?.has(seriesLabel);
+
+	// If the label is explicitly stored as visible, always show it.
+	if (isStoredVisible) {
+		return true;
 	}
+
+	// If the label is explicitly stored as hidden (and never stored as visible),
+	// always hide it.
+	if (isStoredHidden) {
+		return false;
+	}
+
+	// "Active preference" means:
+	// - There is a mix of visible/hidden in storage, AND
+	// - At least one stored *visible* label exists in the current series list.
+	// For such a preference, any new/unknown series should be hidden by default.
+	if (hasActivePreference) {
+		return false;
+	}
+
+	// Otherwise fall back to the series' own config or show by default.
 	return seriesShow ?? true;
 }

frontend/src/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStore.test.ts

@@ -204,6 +204,78 @@ describe('dashboardVariablesStore', () => {
 			expect(doAllVariablesHaveValuesSelected).toBe(true);
 		});
 
+		it('should treat DYNAMIC variable with allSelected=true and selectedValue=undefined as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: undefined,
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and empty string selectedValue as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: '',
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and empty array selectedValue as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: [] as any,
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
 		it('should report false when a DYNAMIC variable has empty selectedValue and allSelected is not true', () => {
 			setDashboardVariablesStore({
 				dashboardId: 'dash-1',

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts

@@ -76,7 +76,7 @@ export function getVariableDependencyContext(): VariableFetchContext {
 		(variable) => {
 			if (
 				variable.type === 'DYNAMIC' &&
-				variable.selectedValue === null &&
+				(variable.selectedValue === null || isEmpty(variable.selectedValue)) &&
 				variable.allSelected === true
 			) {
 				return true;

frontend/src/types/api/onboarding/types.ts

@@ -7,4 +7,5 @@ export interface UpdateProfileProps {
 	number_of_services: number;
 	number_of_hosts: number;
 	where_did_you_discover_signoz: string;
+	timeline_for_migrating_to_signoz: string;
 }

frontend/yarn.lock

@@ -4073,6 +4073,16 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-collection@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.7.tgz#d05c25ca9ac4695cc19ba91f42f686e3ea2d9aec"
+  integrity sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==
+  dependencies:
+    "@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-slot" "1.2.3"
+
 "@radix-ui/react-compose-refs@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
@@ -4159,6 +4169,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-direction@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.1.tgz#39e5a5769e676c753204b792fbe6cf508e550a14"
+  integrity sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==
+
 "@radix-ui/react-dismissable-layer@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
@@ -4387,6 +4402,22 @@
   dependencies:
     "@radix-ui/react-slot" "1.2.4"
 
+"@radix-ui/react-radio-group@^1.3.4":
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz#93f102b5b948d602c2f2adb1bc5c347cbaf64bd9"
+  integrity sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==
+  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-direction" "1.1.1"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.11"
+    "@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-roving-focus@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
@@ -4403,6 +4434,21 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-roving-focus@1.1.11":
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz#ef54384b7361afc6480dcf9907ef2fedb5080fd9"
+  integrity sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
 "@radix-ui/react-slot@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
@@ -4433,6 +4479,19 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
+"@radix-ui/react-switch@^1.1.4":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.2.6.tgz#ff79acb831f0d5ea9216cfcc5b939912571358e3"
+  integrity sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+
 "@radix-ui/react-tabs@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2"
@@ -5075,6 +5134,20 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
+"@signozhq/radio-group@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/radio-group/-/radio-group-0.0.2.tgz#4b13567bfee2645226f2cf41f261bbb288e1be4b"
+  integrity sha512-ahykmA5hPujOC964CFveMlQ12tWSyut2CUiFRqT1QxRkOLS2R44Qn2hh2psqJJ18JMX/24ZYCAIh9Bdd5XW+7g==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-radio-group" "^1.3.4"
+    "@radix-ui/react-slot" "^1.1.0"
+    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/resizable@0.0.0":
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/@signozhq/resizable/-/resizable-0.0.0.tgz#a517818b9f9bcdaeafc55ae134be86522bc90e9f"
@@ -5104,6 +5177,20 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
+"@signozhq/switch@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/switch/-/switch-0.0.2.tgz#58003ce9c0cd1f2ad8266a7045182607ce51df76"
+  integrity sha512-3B3Y5dzIyepO6EQJ7agx97bPmwg1dcOY46q2lqviHnMxNk3Sv079nSNCaztjQlo0VR0qu2JgVXhWi5Lw9WBN8A==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@radix-ui/react-switch" "^1.1.4"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
 "@signozhq/table@0.3.7":
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/@signozhq/table/-/table-0.3.7.tgz#895b710c02af124dfb5117e02bbc6d80ce062063"