Merge branch 'main' into sso-mapping

frontend/package.json

@@ -57,6 +57,7 @@
 		"@signozhq/popover": "0.0.0",
 		"@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

@@ -23,5 +23,6 @@ import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
+import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/tooltip';

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
-import {
-	BarTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
-import { BarChartProps } from '../types';
-
-export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
-
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: BarTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
-			};
-			return <BarChartTooltip {...tooltipProps} />;
-		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
-	);
-
-	return (
-		<ChartWrapper
-			{...rest}
-			config={config}
-			data={chartData}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -1,117 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { getInitialStackedBands, stack } from '../stackUtils';
-
-describe('stackUtils', () => {
-	describe('stack', () => {
-		const neverOmit = (): boolean => false;
-
-		it('preserves time axis as first row', () => {
-			const data: AlignedData = [
-				[100, 200, 300],
-				[1, 2, 3],
-				[4, 5, 6],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[0]).toEqual([100, 200, 300]);
-		});
-
-		it('stacks value series cumulatively (last = raw, first = total)', () => {
-			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
-			const data: AlignedData = [
-				[0, 1, 2],
-				[1, 2, 3], // series 1
-				[4, 5, 6], // series 2
-				[7, 8, 9], // series 3
-			];
-			const { data: result } = stack(data, neverOmit);
-			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
-			expect(result[1]).toEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
-			expect(result[2]).toEqual([11, 13, 15]); // 4+7, 5+8, 6+9
-			expect(result[3]).toEqual([7, 8, 9]);
-		});
-
-		it('treats null values as 0 when stacking', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, null],
-				[null, 10],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[1]).toEqual([1, 10]); // total
-			expect(result[2]).toEqual([0, 10]); // last series with null→0
-		});
-
-		it('copies omitted series as-is without accumulating', () => {
-			// Omit series 2 (index 2); series 1 and 3 are stacked.
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20], // series 1
-				[100, 200], // series 2 - omitted
-				[1, 2], // series 3
-			];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { data: result } = stack(data, omitSeries2);
-			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
-			expect(result[1]).toEqual([11, 22]); // 10+1, 20+2
-			expect(result[2]).toEqual([100, 200]); // copied, not stacked
-			expect(result[3]).toEqual([1, 2]);
-		});
-
-		it('returns bands between consecutive visible series when none omitted', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-				[3, 4],
-				[5, 6],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		});
-
-		it('returns bands only between visible series when some are omitted', () => {
-			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
-			const data: AlignedData = [[0], [1], [2], [3], [4]];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { bands } = stack(data, omitSeries2);
-			expect(bands).toEqual([{ series: [1, 3] }, { series: [3, 4] }]);
-		});
-
-		it('returns empty bands when only one value series', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([]);
-		});
-	});
-
-	describe('getInitialStackedBands', () => {
-		it('returns one band between each consecutive pair for seriesCount 3', () => {
-			expect(getInitialStackedBands(3)).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('returns empty array for seriesCount 0 or 1', () => {
-			expect(getInitialStackedBands(0)).toEqual([]);
-			expect(getInitialStackedBands(1)).toEqual([]);
-		});
-
-		it('returns single band for seriesCount 2', () => {
-			expect(getInitialStackedBands(2)).toEqual([{ series: [1, 2] }]);
-		});
-
-		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
-			const bands = getInitialStackedBands(5);
-			expect(bands).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-				{ series: [3, 4] },
-				{ series: [4, 5] },
-			]);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stackSeries(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stack(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

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

@@ -1,313 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import uPlot from 'uplot';
-
-import type { UseBarChartStackingParams } from '../useBarChartStacking';
-import { useBarChartStacking } from '../useBarChartStacking';
-
-type MockConfig = { addHook: jest.Mock };
-
-function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
-	return (c as unknown) as UseBarChartStackingParams['config'];
-}
-
-function createMockConfig(): {
-	config: MockConfig;
-	invokeSetData: (plot: uPlot) => void;
-	invokeSetSeries: (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	) => void;
-	removeSetData: jest.Mock;
-	removeSetSeries: jest.Mock;
-} {
-	let setDataHandler: ((plot: uPlot) => void) | null = null;
-	let setSeriesHandler:
-		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-		| null = null;
-
-	const removeSetData = jest.fn();
-	const removeSetSeries = jest.fn();
-
-	const addHook = jest.fn(
-		(
-			hookName: string,
-			handler: (plot: uPlot, ...args: unknown[]) => void,
-		): (() => void) => {
-			if (hookName === 'setData') {
-				setDataHandler = handler as (plot: uPlot) => void;
-				return removeSetData;
-			}
-			if (hookName === 'setSeries') {
-				setSeriesHandler = handler as (
-					plot: uPlot,
-					seriesIndex: number | null,
-					opts: uPlot.Series,
-				) => void;
-				return removeSetSeries;
-			}
-			return jest.fn();
-		},
-	);
-
-	const config: MockConfig = { addHook };
-
-	const invokeSetData = (plot: uPlot): void => {
-		setDataHandler?.(plot);
-	};
-
-	const invokeSetSeries = (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	): void => {
-		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
-	};
-
-	return {
-		config,
-		invokeSetData,
-		invokeSetSeries,
-		removeSetData,
-		removeSetSeries,
-	};
-}
-
-function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
-	return ({
-		data: [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		],
-		series: [{ show: true }, { show: true }, { show: true }],
-		delBand: jest.fn(),
-		addBand: jest.fn(),
-		setData: jest.fn(),
-		...overrides,
-	} as unknown) as uPlot;
-}
-
-describe('useBarChartStacking', () => {
-	it('returns data as-is when isStackedBarChart is false', () => {
-		const data: uPlot.AlignedData = [
-			[100, 200],
-			[1, 2],
-			[3, 4],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: null,
-			}),
-		);
-		expect(result.current).toBe(data);
-	});
-
-	it('returns data as-is when config is null and isStackedBarChart is true', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[4, 5],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		// Still returns stacked data (computed in useMemo); no hooks registered
-		expect(result.current[0]).toEqual([0, 1]);
-		expect(result.current[1]).toEqual([5, 7]); // stacked
-		expect(result.current[2]).toEqual([4, 5]);
-	});
-
-	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-			[7, 8, 9],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current[0]).toEqual([0, 1, 2]);
-		expect(result.current[1]).toEqual([12, 15, 18]); // s1+s2+s3
-		expect(result.current[2]).toEqual([11, 13, 15]); // s2+s3
-		expect(result.current[3]).toEqual([7, 8, 9]);
-	});
-
-	it('returns data as-is when only one value series (no stacking needed)', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current).toEqual(data);
-	});
-
-	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-	});
-
-	it('does not register hooks when isStackedBarChart is false', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('calls cleanup when unmounted', () => {
-		const { config, removeSetData, removeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		const { unmount } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		unmount();
-
-		expect(removeSetData).toHaveBeenCalled();
-		expect(removeSetSeries).toHaveBeenCalled();
-	});
-
-	it('re-stacks and updates plot when setData hook is invoked', () => {
-		const { config, invokeSetData } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		];
-		const plot = createMockPlot({
-			data: [
-				[0, 1, 2],
-				[5, 7, 9],
-				[4, 5, 6],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetData(plot);
-
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-		expect(plot.addBand).toHaveBeenCalled();
-		expect(plot.setData).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				[0, 1, 2],
-				expect.any(Array), // stacked row 1
-				expect.any(Array), // stacked row 2
-			]),
-		);
-	});
-
-	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[10, 20],
-			[5, 10],
-		];
-		// Plot data must match unstacked length so canApplyStacking passes
-		const plot = createMockPlot({
-			data: [
-				[0, 1],
-				[15, 30],
-				[5, 10],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetSeries(plot, 1, { show: false });
-
-		expect(plot.setData).toHaveBeenCalled();
-	});
-
-	it('does not re-stack when setSeries is called with focus option', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-		const plot = createMockPlot();
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		(plot.setData as jest.Mock).mockClear();
-		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

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

@@ -1,125 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stackSeries } from '../charts/utils/stackSeriesUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstackedData: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstackedData &&
-		!!plot.data &&
-		unstackedData[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	applyStackingToChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		if (!has(opts, 'focus')) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseBarChartStackingParams {
-	data: uPlot.AlignedData;
-	isStackedBarChart?: boolean;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Handles stacking for bar charts: computes initial stacked data and re-stacks
- * when data or series visibility changes (e.g. legend toggles).
- */
-export function useBarChartStacking({
-	data,
-	isStackedBarChart = false,
-	config,
-}: UseBarChartStackingParams): uPlot.AlignedData {
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
-
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stackSeries(data, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
-
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		if (
-			!unstacked ||
-			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-		) {
-			return;
-		}
-
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
-
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
-	}, [isStackedBarChart, config, applyStackingToChart]);
-
-	return chartData;
-}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -1,160 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import BarChart from '../../charts/BarChart/BarChart';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
-
-import '../Panel.styles.scss';
-
-function BarPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const config = useMemo(() => {
-		return prepareBarPanelConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-		});
-	}, [
-		widget,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
-		panelMode,
-	]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	const onPlotDestroy = useCallback(() => {
-		uPlotRef.current = null;
-	}, []);
-
-	const onPlotRef = useCallback((plot: uPlot | null): void => {
-		uPlotRef.current = plot;
-	}, []);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={onPlotRef}
-					onDestroy={onPlotDestroy}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-					isStackedBarChart={widget.stackedBarChart ?? false}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</BarChart>
-			)}
-		</div>
-	);
-}
-
-export default BarPanel;

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

@@ -1,108 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { AlignedData } from 'uplot';
-
-import { PanelMode } from '../types';
-import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-
-export function prepareBarPanelData(
-	apiResponse: MetricRangePayloadProps,
-): AlignedData {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-	return [timestampArr, ...yAxisValuesArr];
-}
-
-export function prepareBarPanelConfig({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	minTimeScale,
-	maxTimeScale,
-}: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
-		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	builder.setCursor({
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-	}
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
-			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-		});
-	});
-
-	return builder;
-}

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 && rest.defaultRole !== 'VIEWER';
+		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">
+			<section className="google-auth__header">
+				<h3 className="google-auth__title">Edit Google Authentication</h3>
+				<p className="google-auth__description">
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
@@ -25,50 +51,234 @@ 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="google-auth__columns">
+				{/* Left Column - Core OAuth Settings */}
+				<div className="google-auth__left">
+					<div className="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientId']}
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__label" htmlFor="google-client-secret">
+							Client Secret
+							<Tooltip title="It is the application's secret.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientSecret']}
+							className="google-auth__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="google-auth__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="google-auth__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="google-auth__right">
+					<Collapse
+						bordered={false}
+						activeKey={
+							expandedSection === 'workspace-groups' ? ['workspace-groups'] : []
+						}
+						onChange={handleWorkspaceGroupsChange}
+						className="google-auth__collapse"
+						expandIcon={(): null => null}
+					>
+						<Collapse.Panel
+							key="workspace-groups"
+							header={
+								<div className="google-auth__collapse-header">
+									{expandedSection !== 'workspace-groups' ? (
+										<ChevronRight size={16} />
+									) : (
+										<ChevronDown size={16} />
+									)}
+									<div className="google-auth__collapse-header-text">
+										<h4 className="google-auth__section-title">
+											Google Workspace Groups (Advanced)
+										</h4>
+										<p className="google-auth__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="google-auth__group-content">
+								<div className="google-auth__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="google-auth__label-icon" />
+									</Tooltip>
+								</div>
+
+								{fetchGroups && (
+									<div className="google-auth__group-fields">
+										<div className="google-auth__field-group">
+											<label
+												className="google-auth__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="google-auth__label-icon" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'serviceAccountJson']}
+												className="google-auth__form-item"
+											>
+												<TextArea
+													id="google-service-account-json"
+													rows={3}
+													placeholder="Paste service account JSON"
+													className="google-auth__textarea"
+												/>
+											</Form.Item>
+										</div>
+
+										<DomainMappingList
+											fieldNamePrefix={['googleAuthConfig', 'domainToAdminEmailList']}
+										/>
+
+										<div className="google-auth__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="google-auth__label-icon" />
+											</Tooltip>
+										</div>
+
+										<div className="google-auth__field-group">
+											<label
+												className="google-auth__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="google-auth__label-icon" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'allowedGroups']}
+												className="google-auth__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="google-auth">
+			<section className="google-auth__header">
+				<h3 className="google-auth__title">Edit OIDC Authentication</h3>
+				<p className="google-auth__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="google-auth__columns">
+				{/* Left Column - Core OIDC Settings */}
+				<div className="google-auth__left">
+					<div className="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuer']}
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuerAlias']}
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__label" htmlFor="oidc-client-id">
+							Client ID
+							<Tooltip title="The application's client ID from your OIDC provider.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientId']}
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__label" htmlFor="oidc-client-secret">
+							Client Secret
+							<Tooltip title="The application's client secret from your OIDC provider.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientSecret']}
+							className="google-auth__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="google-auth__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="google-auth__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="google-auth__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="google-auth__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="google-auth__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="google-auth">
+			<section className="google-auth__header">
+				<h3 className="google-auth__title">Edit SAML Authentication</h3>
+				<p className="google-auth__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="google-auth__columns">
+				{/* Left Column - Core SAML Settings */}
+				<div className="google-auth__left">
+					<div className="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlIdp']}
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlEntity']}
+							className="google-auth__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="google-auth__field-group">
+						<label className="google-auth__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="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlCert']}
+							className="google-auth__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML Certificate is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<TextArea
+								id="saml-certificate"
+								rows={3}
+								placeholder="Paste X.509 certificate"
+								className="google-auth__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="google-auth__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="google-auth__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="google-auth__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

@@ -2,23 +2,243 @@
 	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;
+
+		.google-auth__field-group,
+		.google-auth__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,141 @@
+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">
+							{!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 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,138 @@
+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">
+							{!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 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,92 @@
+import { useCallback } from 'react';
+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@]+$/;
+
+interface DomainMappingListProps {
+	/** The form field name prefix for the domain mapping list */
+	fieldNamePrefix: string[];
+}
+
+function DomainMappingList({
+	fieldNamePrefix,
+}: DomainMappingListProps): JSX.Element {
+	const validateEmail = useCallback(
+		(_: 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();
+		},
+		[],
+	);
+
+	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,200 @@
+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">
+							{!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 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,73 @@
-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;
+		}
+
+		updateAuthDomain(
+			{
+				pathParams: { id: record.id },
+				data: {
+					config: {
+						ssoEnabled: checked,
+						ssoType: record.ssoType,
+						googleAuthConfig: record.googleAuthConfig,
+						oidcConfig: record.oidcConfig,
+						samlConfig: record.samlConfig,
+					},
+				},
+			},
+			{
+				onSuccess: () => {
+					setIsChecked(checked);
+				},
+				onError: (error) => {
+					try {
+						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+					} catch (apiError) {
+						showErrorModal(apiError as APIError);
+					}
+				},
+			},
+		);
+	};
+
+	return (
+		<Switch
+			disabled={isLoading}
+			checked={isChecked}
+			onCheckedChange={onChangeHandler}
+		/>
+	);
 }
 
 export default Toggle;

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

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

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

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

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

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

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

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

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

@@ -1,147 +1,186 @@
-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;
+		}
+
+		try {
+			ErrorResponseHandlerV2(
+				errorFetchingAuthDomainListResponse as AxiosError<ErrorV2Resp>,
+			);
+		} catch (error) {
+			return error as APIError;
+		}
+	}, [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
 					}

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { BarTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-				isStackedBarChart: props.isStackedBarChart,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-			props.isStackedBarChart,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -25,28 +25,16 @@ export function getTooltipBaseValue({
 	index,
 	dataIndex,
 	isStackedBarChart,
-	series,
 }: {
 	data: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
-	series?: Series[];
 }): number | null {
 	let baseValue = data[index][dataIndex] ?? null;
-	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
-	// When series are hidden, we must use the next *visible* series, not index+1,
-	// since hidden series keep raw values and would produce negative/wrong results.
-	if (isStackedBarChart && baseValue !== null && series) {
-		let nextVisibleIdx = -1;
-		for (let j = index + 1; j < series.length; j++) {
-			if (series[j]?.show) {
-				nextVisibleIdx = j;
-				break;
-			}
-		}
-		if (nextVisibleIdx >= 1) {
-			const nextValue = data[nextVisibleIdx][dataIndex] ?? 0;
+	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
+		const nextValue = data[index + 1][dataIndex] ?? null;
+		if (nextValue !== null) {
 			baseValue = baseValue - nextValue;
 		}
 	}
@@ -92,7 +80,6 @@ export function buildTooltipContent({
 			index,
 			dataIndex,
 			isStackedBarChart,
-			series,
 		});
 
 		const isActive = index === activeSeriesIndex;

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

@@ -1,10 +1,8 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import uPlot, { Series } from 'uplot';
 
 import {
-	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
 	LineInterpolation,
@@ -45,13 +43,18 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	private buildLineConfig({
-		resolvedLineColor,
+		lineColor,
+		lineWidth,
+		lineStyle,
+		lineCap,
 	}: {
-		resolvedLineColor: string;
+		lineColor: string;
+		lineWidth?: number;
+		lineStyle?: LineStyle;
+		lineCap?: Series.Cap;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap } = this.props;
 		const lineConfig: Partial<Series> = {
-			stroke: resolvedLineColor,
+			stroke: lineColor,
 			width: lineWidth ?? 2,
 		};
 
@@ -62,26 +65,21 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		if (lineCap) {
 			lineConfig.cap = lineCap;
 		}
-
-		if (this.props.panelType === PANEL_TYPES.BAR) {
-			lineConfig.fill = resolvedLineColor;
-		}
-
 		return lineConfig;
 	}
 
 	/**
 	 * Build path configuration
 	 */
-	private buildPathConfig(): Partial<Series> {
-		const {
-			pathBuilder,
-			drawStyle,
-			lineInterpolation,
-			barAlignment,
-			barMaxWidth,
-			barWidthFactor,
-		} = this.props;
+	private buildPathConfig({
+		pathBuilder,
+		drawStyle,
+		lineInterpolation,
+	}: {
+		pathBuilder?: Series.PathBuilder | null;
+		drawStyle: DrawStyle;
+		lineInterpolation?: LineInterpolation;
+	}): Partial<Series> {
 		if (pathBuilder) {
 			return { paths: pathBuilder };
 		}
@@ -98,13 +96,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 					idx0: number,
 					idx1: number,
 				): Series.Paths | null => {
-					const pathsBuilder = getPathBuilder({
-						drawStyle,
-						lineInterpolation,
-						barAlignment,
-						barMaxWidth,
-						barWidthFactor,
-					});
+					const pathsBuilder = getPathBuilder(drawStyle, lineInterpolation);
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
 				},
@@ -118,21 +110,25 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	 * Build points configuration
 	 */
 	private buildPointsConfig({
-		resolvedLineColor,
+		lineColor,
+		lineWidth,
+		pointSize,
+		pointsBuilder,
+		pointsFilter,
+		drawStyle,
+		showPoints,
 	}: {
-		resolvedLineColor: string;
+		lineColor: string;
+		lineWidth?: number;
+		pointSize?: number;
+		pointsBuilder: Series.Points.Show | null;
+		pointsFilter: Series.Points.Filter | null;
+		drawStyle: DrawStyle;
+		showPoints?: VisibilityMode;
 	}): Partial<Series.Points> {
-		const {
-			lineWidth,
-			pointSize,
-			pointsBuilder,
-			pointsFilter,
-			drawStyle,
-			showPoints,
-		} = this.props;
 		const pointsConfig: Partial<Series.Points> = {
-			stroke: resolvedLineColor,
-			fill: resolvedLineColor,
+			stroke: lineColor,
+			fill: lineColor,
 			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
 			filter: pointsFilter || undefined,
 		};
@@ -166,16 +162,44 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	getConfig(): Series {
-		const { scaleKey, label, spanGaps, show = true } = this.props;
+		const {
+			drawStyle,
+			pathBuilder,
+			pointsBuilder,
+			pointsFilter,
+			lineInterpolation,
+			lineWidth,
+			lineStyle,
+			lineCap,
+			showPoints,
+			pointSize,
+			scaleKey,
+			label,
+			spanGaps,
+			show = true,
+		} = this.props;
 
-		const resolvedLineColor = this.getLineColor();
+		const lineColor = this.getLineColor();
 
 		const lineConfig = this.buildLineConfig({
-			resolvedLineColor,
+			lineColor,
+			lineWidth,
+			lineStyle,
+			lineCap,
+		});
+		const pathConfig = this.buildPathConfig({
+			pathBuilder,
+			drawStyle,
+			lineInterpolation,
 		});
-		const pathConfig = this.buildPathConfig();
 		const pointsConfig = this.buildPointsConfig({
-			resolvedLineColor,
+			lineColor,
+			lineWidth,
+			pointSize,
+			pointsBuilder: pointsBuilder ?? null,
+			pointsFilter: pointsFilter ?? null,
+			drawStyle,
+			showPoints,
 		});
 
 		return {
@@ -203,36 +227,15 @@ interface PathBuilders {
 /**
  * Get path builder based on draw style and interpolation
  */
-function getPathBuilder({
-	drawStyle,
-	lineInterpolation,
-	barAlignment = BarAlignment.Center,
-	barWidthFactor = 0.6,
-	barMaxWidth = 200,
-}: {
-	drawStyle: DrawStyle;
-	lineInterpolation?: LineInterpolation;
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-}): Series.PathBuilder {
+function getPathBuilder(
+	style: DrawStyle,
+	lineInterpolation?: LineInterpolation,
+): Series.PathBuilder {
 	if (!builders) {
 		throw new Error('Required uPlot path builders are not available');
 	}
 
-	if (drawStyle === DrawStyle.Bar) {
-		const pathBuilders = uPlot.paths;
-		const barsConfigKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
-		if (!builders[barsConfigKey] && pathBuilders.bars) {
-			builders[barsConfigKey] = pathBuilders.bars({
-				size: [barWidthFactor, barMaxWidth],
-				align: barAlignment,
-			});
-		}
-		return builders[barsConfigKey];
-	}
-
-	if (drawStyle === DrawStyle.Line) {
+	if (style === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;
 		}

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

@@ -126,45 +126,7 @@ export enum VisibilityMode {
 	Never = 'never',
 }
 
-/**
- * Props for configuring lines
- */
-export interface LineConfig {
-	lineColor?: string;
-	lineInterpolation?: LineInterpolation;
-	lineStyle?: LineStyle;
-	lineWidth?: number;
-	lineCap?: Series.Cap;
-}
-
-/**
- * Alignment of bars
- */
-export enum BarAlignment {
-	After = 1,
-	Before = -1,
-	Center = 0,
-}
-
-/**
- * Props for configuring bars
- */
-export interface BarConfig {
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-}
-
-/**
- * Props for configuring points
- */
-export interface PointsConfig {
-	pointColor?: string;
-	pointSize?: number;
-	showPoints?: VisibilityMode;
-}
-
-export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
+export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
 	panelType: PANEL_TYPES;
@@ -175,7 +137,20 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
+
 	isDarkMode?: boolean;
+
+	// Line config
+	lineColor?: string;
+	lineInterpolation?: LineInterpolation;
+	lineStyle?: LineStyle;
+	lineWidth?: number;
+	lineCap?: Series.Cap;
+
+	// Points config
+	pointColor?: string;
+	pointSize?: number;
+	showPoints?: VisibilityMode;
 }
 
 export interface LegendItem {

frontend/yarn.lock

@@ -4433,6 +4433,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"
@@ -5104,6 +5117,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"