fix: added disabled for sent invites button

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.styles.scss

@@ -1,22 +1,3 @@
-.chart-manager-series-label {
-	width: 100%;
-	min-width: 0;
-	max-width: 100%;
-	cursor: pointer;
-	border: none;
-	background-color: transparent;
-	color: inherit;
-	text-align: left;
-	padding: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	&:disabled {
-		cursor: not-allowed;
-	}
-}
-
 .chart-manager-container {
 	width: 100%;
 	max-height: calc(40% - 40px);

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

@@ -1,28 +1,24 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Input } from 'antd';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
+import { getGraphManagerTableColumns } from 'container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns';
+import { ExtendedChartDataset } from 'container/GridCardLayout/GridCard/FullView/types';
+import { getDefaultTableDataSet } from 'container/GridCardLayout/GridCard/FullView/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 
-import { getChartManagerColumns } from './getChartMangerColumns';
-import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
-
 import './ChartManager.styles.scss';
 
 interface ChartManagerProps {
 	config: UPlotConfigBuilder;
 	alignedData: uPlot.AlignedData;
 	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
 	onCancel?: () => void;
 }
 
-const X_AXIS_INDEX = 0;
-
 /**
  * ChartManager provides a tabular view to manage the visibility of
  * individual series on a uPlot chart.
@@ -32,12 +28,16 @@ const X_AXIS_INDEX = 0;
  * - filter series by label
  * - toggle individual series on/off
  * - persist the visibility configuration to local storage.
+ *
+ * @param config - `UPlotConfigBuilder` instance used to derive chart options.
+ * @param alignedData - uPlot aligned data used to build the initial table dataset.
+ * @param yAxisUnit - Optional unit label for Y-axis values shown in the table.
+ * @param onCancel - Optional callback invoked when the user cancels the dialog.
  */
 export default function ChartManager({
 	config,
 	alignedData,
 	yAxisUnit,
-	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
 	const { notifications } = useNotifications();
@@ -53,13 +53,8 @@ export default function ChartManager({
 	const { isDashboardLocked } = useDashboard();
 
 	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(() =>
-		getDefaultTableDataSet(
-			config.getConfig() as uPlot.Options,
-			alignedData,
-			decimalPrecision,
-		),
+		getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
 	);
-	const [filterValue, setFilterValue] = useState('');
 
 	const graphVisibilityState = useMemo(
 		() =>
@@ -72,62 +67,46 @@ export default function ChartManager({
 
 	useEffect(() => {
 		setTableDataSet(
-			getDefaultTableDataSet(
-				config.getConfig() as uPlot.Options,
-				alignedData,
-				decimalPrecision,
-			),
+			getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
 		);
-		setFilterValue('');
-	}, [alignedData, config, decimalPrecision]);
+	}, [alignedData, config]);
 
-	const handleFilterChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			setFilterValue(e.target.value.toLowerCase());
+	const filterHandler = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = event.target.value.toString().toLowerCase();
+			const updatedDataSet = tableDataSet.map((item) => {
+				if (item.label?.toLocaleLowerCase().includes(value)) {
+					return { ...item, show: true };
+				}
+				return { ...item, show: false };
+			});
+			setTableDataSet(updatedDataSet);
 		},
-		[],
+		[tableDataSet],
 	);
 
-	const handleToggleSeriesOnOff = useCallback(
-		(index: number): void => {
-			onToggleSeriesOnOff(index);
-		},
-		[onToggleSeriesOnOff],
+	const dataSource = useMemo(
+		() =>
+			tableDataSet.filter(
+				(item, index) => index !== 0 && item.show, // skipping the first item as it is the x-axis
+			),
+		[tableDataSet],
 	);
 
-	const dataSource = useMemo(() => {
-		const filter = filterValue.trim();
-		return tableDataSet.filter((item, index) => {
-			if (index === X_AXIS_INDEX) {
-				return false;
-			}
-			if (!filter) {
-				return true;
-			}
-			return item.label?.toLowerCase().includes(filter) ?? false;
-		});
-	}, [tableDataSet, filterValue]);
-
 	const columns = useMemo(
 		() =>
-			getChartManagerColumns({
+			getGraphManagerTableColumns({
 				tableDataSet,
+				checkBoxOnChangeHandler: (_e, index) => {
+					onToggleSeriesOnOff(index);
+				},
 				graphVisibilityState,
-				onToggleSeriesOnOff: handleToggleSeriesOnOff,
-				onToggleSeriesVisibility,
+				labelClickedHandler: onToggleSeriesVisibility,
 				yAxisUnit,
 				isGraphDisabled: isDashboardLocked,
-				decimalPrecision,
 			}),
-		[
-			tableDataSet,
-			graphVisibilityState,
-			handleToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit,
-			isDashboardLocked,
-			decimalPrecision,
-		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[tableDataSet, graphVisibilityState, yAxisUnit, isDashboardLocked],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -135,18 +114,15 @@ export default function ChartManager({
 		notifications.success({
 			message: 'The updated graphs & legends are saved',
 		});
-		onCancel?.();
+		if (onCancel) {
+			onCancel();
+		}
 	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
 
 	return (
 		<div className="chart-manager-container">
 			<div className="chart-manager-header">
-				<Input
-					placeholder="Filter Series"
-					value={filterValue}
-					onChange={handleFilterChange}
-					data-testid="filter-input"
-				/>
+				<Input onChange={filterHandler} placeholder="Filter Series" />
 				<div className="chart-manager-actions-container">
 					<Button type="default" onClick={onCancel}>
 						Cancel
@@ -160,10 +136,10 @@ export default function ChartManager({
 				<ResizeTable
 					columns={columns}
 					dataSource={dataSource}
+					virtual
 					rowKey="index"
 					scroll={{ y: 200 }}
 					pagination={false}
-					virtual
 				/>
 			</div>
 		</div>

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

@@ -1,31 +0,0 @@
-import { Tooltip } from 'antd';
-
-import './ChartManager.styles.scss';
-
-interface SeriesLabelProps {
-	label: string;
-	labelIndex: number;
-	onClick: (idx: number) => void;
-	disabled?: boolean;
-}
-
-export function SeriesLabel({
-	label,
-	labelIndex,
-	onClick,
-	disabled,
-}: SeriesLabelProps): JSX.Element {
-	return (
-		<Tooltip placement="topLeft" title={label}>
-			<button
-				className="chart-manager-series-label"
-				disabled={disabled}
-				type="button"
-				data-testid={`series-label-button-${labelIndex}`}
-				onClick={(): void => onClick(labelIndex)}
-			>
-				{label}
-			</button>
-		</Tooltip>
-	);
-}

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

@@ -1,172 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { render, screen } from 'tests/test-utils';
-
-import ChartManager from '../ChartManager';
-
-const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
-const mockNotificationsSuccess = jest.fn();
-
-jest.mock('lib/uPlotV2/context/PlotContext', () => ({
-	usePlotContext: (): {
-		onToggleSeriesOnOff: jest.Mock;
-		onToggleSeriesVisibility: jest.Mock;
-		syncSeriesVisibilityToLocalStorage: jest.Mock;
-	} => ({
-		onToggleSeriesOnOff: jest.fn(),
-		onToggleSeriesVisibility: jest.fn(),
-		syncSeriesVisibilityToLocalStorage: mockSyncSeriesVisibilityToLocalStorage,
-	}),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync', () => ({
-	__esModule: true,
-	default: (): {
-		legendItemsMap: { [key: number]: { show: boolean; label: string } };
-	} => ({
-		legendItemsMap: {
-			0: { show: true, label: 'Time' },
-			1: { show: true, label: 'Series 1' },
-			2: { show: true, label: 'Series 2' },
-		},
-	}),
-}));
-
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: (): { isDashboardLocked: boolean } => ({
-		isDashboardLocked: false,
-	}),
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): { notifications: { success: jest.Mock } } => ({
-		notifications: {
-			success: mockNotificationsSuccess,
-		},
-	}),
-}));
-
-jest.mock('components/ResizeTable', () => {
-	const MockTable = ({
-		dataSource,
-		columns,
-	}: {
-		dataSource: { index: number; label?: string }[];
-		columns: { key: string; title: string }[];
-	}): JSX.Element => (
-		<div data-testid="resize-table">
-			{columns.map((col) => (
-				<span key={col.key}>{col.title}</span>
-			))}
-			{dataSource.map((row) => (
-				<div key={row.index} data-testid={`row-${row.index}`}>
-					{row.label}
-				</div>
-			))}
-		</div>
-	);
-	return { ResizeTable: MockTable };
-});
-
-const createMockConfig = (): { getConfig: () => uPlot.Options } => ({
-	getConfig: (): uPlot.Options => ({
-		width: 100,
-		height: 100,
-		series: [
-			{ label: 'Time', value: 'time' },
-			{ label: 'Series 1', scale: 'y' },
-			{ label: 'Series 2', scale: 'y' },
-		],
-	}),
-});
-
-const createAlignedData = (): uPlot.AlignedData => [
-	[1000, 2000, 3000],
-	[10, 20, 30],
-	[1, 2, 3],
-];
-
-describe('ChartManager', () => {
-	const mockOnCancel = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders filter input and action buttons', () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as any}
-				alignedData={createAlignedData()}
-				onCancel={mockOnCancel}
-			/>,
-		);
-
-		expect(screen.getByPlaceholderText('Filter Series')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /Cancel/ })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /Save/ })).toBeInTheDocument();
-	});
-
-	it('renders ResizeTable with data', () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-			/>,
-		);
-
-		expect(screen.getByTestId('resize-table')).toBeInTheDocument();
-	});
-
-	it('calls onCancel when Cancel button is clicked', async () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-				onCancel={mockOnCancel}
-			/>,
-		);
-
-		await userEvent.click(screen.getByRole('button', { name: /Cancel/ }));
-
-		expect(mockOnCancel).toHaveBeenCalledTimes(1);
-	});
-
-	it('filters table data when typing in filter input', async () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-			/>,
-		);
-
-		// Before filter: both Series 1 and Series 2 rows are visible
-		expect(screen.getByTestId('row-1')).toBeInTheDocument();
-		expect(screen.getByTestId('row-2')).toBeInTheDocument();
-
-		const filterInput = screen.getByTestId('filter-input');
-		await userEvent.type(filterInput, 'Series 1');
-
-		// After filter: only Series 1 row is visible, Series 2 row is filtered out
-		expect(screen.getByTestId('row-1')).toBeInTheDocument();
-		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
-	});
-
-	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-				onCancel={mockOnCancel}
-			/>,
-		);
-
-		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
-
-		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
-			message: 'The updated graphs & legends are saved',
-		});
-		expect(mockOnCancel).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/SeriesLabel.test.tsx

@@ -1,39 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { render, screen } from 'tests/test-utils';
-
-import { SeriesLabel } from '../SeriesLabel';
-
-describe('SeriesLabel', () => {
-	it('renders the label text', () => {
-		render(
-			<SeriesLabel label="Test Series Label" labelIndex={1} onClick={jest.fn()} />,
-		);
-		expect(screen.getByTestId('series-label-button-1')).toHaveTextContent(
-			'Test Series Label',
-		);
-	});
-
-	it('calls onClick with labelIndex when clicked', async () => {
-		const onClick = jest.fn();
-		render(<SeriesLabel label="Series A" labelIndex={2} onClick={onClick} />);
-
-		await userEvent.click(screen.getByTestId('series-label-button-2'));
-
-		expect(onClick).toHaveBeenCalledWith(2);
-		expect(onClick).toHaveBeenCalledTimes(1);
-	});
-
-	it('renders disabled button when disabled prop is true', () => {
-		render(
-			<SeriesLabel label="Disabled" labelIndex={0} onClick={jest.fn()} disabled />,
-		);
-		const button = screen.getByTestId('series-label-button-0');
-		expect(button).toBeDisabled();
-	});
-
-	it('has chart-manager-series-label class', () => {
-		render(<SeriesLabel label="Label" labelIndex={0} onClick={jest.fn()} />);
-		const button = screen.getByTestId('series-label-button-0');
-		expect(button).toHaveClass('chart-manager-series-label');
-	});
-});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/getChartManagerColumns.test.tsx

@@ -1,167 +0,0 @@
-import { render } from '@testing-library/react';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
-
-import { getChartManagerColumns } from '../getChartMangerColumns';
-import { ExtendedChartDataset } from '../utils';
-
-const createMockDataset = (
-	index: number,
-	overrides: Partial<ExtendedChartDataset> = {},
-): ExtendedChartDataset =>
-	({
-		index,
-		label: `Series ${index}`,
-		show: true,
-		sum: 100,
-		avg: 50,
-		min: 10,
-		max: 90,
-		stroke: '#ff0000',
-		...overrides,
-	} as ExtendedChartDataset);
-
-describe('getChartManagerColumns', () => {
-	const tableDataSet: ExtendedChartDataset[] = [
-		createMockDataset(0, { label: 'Time' }),
-		createMockDataset(1),
-		createMockDataset(2),
-	];
-	const graphVisibilityState = [true, true, false];
-	const onToggleSeriesOnOff = jest.fn();
-	const onToggleSeriesVisibility = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('returns columns with expected structure', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		expect(columns).toHaveLength(6);
-		expect(columns[0].key).toBe('index');
-		expect(columns[1].key).toBe('label');
-		expect(columns[2].key).toBe('avg');
-		expect(columns[3].key).toBe('sum');
-		expect(columns[4].key).toBe('max');
-		expect(columns[5].key).toBe('min');
-	});
-
-	it('includes Label column with title', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		const labelCol = columns.find((c) => c.key === 'label');
-		expect(labelCol!.title).toBe('Label');
-	});
-
-	it('formats column titles with yAxisUnit', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit: 'ms',
-		});
-
-		const avgCol = columns.find((c) => c.key === 'avg');
-		expect(avgCol!.title).toBe(
-			`Avg (in ${Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS]})`,
-		);
-	});
-
-	it('numeric column render returns formatted string with yAxisUnit', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit: 'ms',
-		});
-
-		const avgCol = columns.find((c) => c.key === 'avg');
-		const renderFn = avgCol?.render as
-			| ((val: number, record: ExtendedChartDataset, index: number) => string)
-			| undefined;
-		expect(renderFn).toBeDefined();
-		const output = renderFn!(123.45, tableDataSet[1], 1);
-		expect(output).toBe('123.45 ms');
-	});
-
-	it('numeric column render formats zero when value is undefined', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit: 'none',
-		});
-
-		const sumCol = columns.find((c) => c.key === 'sum');
-		const renderFn = sumCol?.render as
-			| ((
-					val: number | undefined,
-					record: ExtendedChartDataset,
-					index: number,
-			  ) => string)
-			| undefined;
-		const output = renderFn!(undefined, tableDataSet[1], 1);
-		expect(output).toBe('0');
-	});
-
-	it('label column render displays label text and is clickable', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		const labelCol = columns.find((c) => c.key === 'label');
-		const renderFn = labelCol!.render as
-			| ((
-					label: string,
-					record: ExtendedChartDataset,
-					index: number,
-			  ) => JSX.Element)
-			| undefined;
-		expect(renderFn).toBeDefined();
-		const renderResult = renderFn!('Series 1', tableDataSet[1], 1);
-
-		const { getByRole } = render(renderResult);
-		expect(getByRole('button', { name: 'Series 1' })).toBeInTheDocument();
-	});
-
-	it('index column render renders checkbox with correct checked state', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		const indexCol = columns.find((c) => c.key === 'index');
-		const renderFn = indexCol!.render as
-			| ((
-					_val: unknown,
-					record: ExtendedChartDataset,
-					index: number,
-			  ) => JSX.Element)
-			| undefined;
-		expect(renderFn).toBeDefined();
-		const { container } = render(renderFn!(null, tableDataSet[1], 1));
-
-		const checkbox = container.querySelector('input[type="checkbox"]');
-		expect(checkbox).toBeInTheDocument();
-		expect(checkbox).toBeChecked(); // graphVisibilityState[1] is true
-	});
-});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/utils.test.ts

@@ -1,113 +0,0 @@
-import { PrecisionOptionsEnum } from 'components/Graph/types';
-
-import {
-	formatTableValueWithUnit,
-	getDefaultTableDataSet,
-	getTableColumnTitle,
-} from '../utils';
-
-describe('ChartManager utils', () => {
-	describe('getDefaultTableDataSet', () => {
-		const createOptions = (seriesCount: number): uPlot.Options => ({
-			series: Array.from({ length: seriesCount }, (_, i) =>
-				i === 0
-					? { label: 'Time', value: 'time' }
-					: { label: `Series ${i}`, scale: 'y' },
-			),
-			width: 100,
-			height: 100,
-		});
-
-		it('returns one row per series with computed stats', () => {
-			const options = createOptions(3);
-			const data: uPlot.AlignedData = [
-				[1000, 2000, 3000],
-				[10, 20, 30],
-				[1, 2, 3],
-			];
-
-			const result = getDefaultTableDataSet(options, data);
-
-			expect(result).toHaveLength(3);
-			expect(result[0]).toMatchObject({
-				index: 0,
-				label: 'Time',
-				show: true,
-			});
-			expect(result[1]).toMatchObject({
-				index: 1,
-				label: 'Series 1',
-				show: true,
-				sum: 60,
-				avg: 20,
-				max: 30,
-				min: 10,
-			});
-			expect(result[2]).toMatchObject({
-				index: 2,
-				label: 'Series 2',
-				show: true,
-				sum: 6,
-				avg: 2,
-				max: 3,
-				min: 1,
-			});
-		});
-
-		it('handles empty data arrays', () => {
-			const options = createOptions(2);
-			const data: uPlot.AlignedData = [[], []];
-
-			const result = getDefaultTableDataSet(options, data);
-
-			expect(result[0]).toMatchObject({
-				sum: 0,
-				avg: 0,
-				max: 0,
-				min: 0,
-			});
-		});
-
-		it('respects decimalPrecision parameter', () => {
-			const options = createOptions(2);
-			const data: uPlot.AlignedData = [[1000], [123.454]];
-
-			const resultTwo = getDefaultTableDataSet(
-				options,
-				data,
-				PrecisionOptionsEnum.TWO,
-			);
-			expect(resultTwo[1].avg).toBe(123.45);
-
-			const resultZero = getDefaultTableDataSet(
-				options,
-				data,
-				PrecisionOptionsEnum.ZERO,
-			);
-			expect(resultZero[1].avg).toBe(123);
-		});
-	});
-
-	describe('formatTableValueWithUnit', () => {
-		it('formats value with unit', () => {
-			const result = formatTableValueWithUnit(1234.56, 'ms');
-			expect(result).toBe('1.23 s');
-		});
-
-		it('falls back to none format when yAxisUnit is undefined', () => {
-			const result = formatTableValueWithUnit(123.45);
-			expect(result).toBe('123.45');
-		});
-	});
-
-	describe('getTableColumnTitle', () => {
-		it('returns title only when yAxisUnit is undefined', () => {
-			expect(getTableColumnTitle('Avg')).toBe('Avg');
-		});
-
-		it('returns title with unit when yAxisUnit is provided', () => {
-			const result = getTableColumnTitle('Avg', 'ms');
-			expect(result).toBe('Avg (in Milliseconds (ms))');
-		});
-	});
-});

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

@@ -1,94 +0,0 @@
-import { ColumnType } from 'antd/es/table';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import CustomCheckBox from 'container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox';
-
-import { SeriesLabel } from './SeriesLabel';
-import {
-	ExtendedChartDataset,
-	formatTableValueWithUnit,
-	getTableColumnTitle,
-} from './utils';
-
-export interface GetChartManagerColumnsParams {
-	tableDataSet: ExtendedChartDataset[];
-	graphVisibilityState: boolean[];
-	onToggleSeriesOnOff: (index: number) => void;
-	onToggleSeriesVisibility: (index: number) => void;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-	isGraphDisabled?: boolean;
-}
-
-export function getChartManagerColumns({
-	tableDataSet,
-	graphVisibilityState,
-	onToggleSeriesOnOff,
-	onToggleSeriesVisibility,
-	yAxisUnit,
-	decimalPrecision = PrecisionOptionsEnum.TWO,
-	isGraphDisabled,
-}: GetChartManagerColumnsParams): ColumnType<ExtendedChartDataset>[] {
-	return [
-		{
-			title: '',
-			width: 50,
-			dataIndex: 'index',
-			key: 'index',
-			render: (_: unknown, record: ExtendedChartDataset): JSX.Element => (
-				<CustomCheckBox
-					data={tableDataSet}
-					graphVisibilityState={graphVisibilityState}
-					index={record.index}
-					disabled={isGraphDisabled}
-					checkBoxOnChangeHandler={(_e, idx): void => onToggleSeriesOnOff(idx)}
-				/>
-			),
-		},
-		{
-			title: 'Label',
-			width: 300,
-			dataIndex: 'label',
-			key: 'label',
-			render: (label: string, record: ExtendedChartDataset): JSX.Element => (
-				<SeriesLabel
-					label={label ?? ''}
-					labelIndex={record.index}
-					disabled={isGraphDisabled}
-					onClick={onToggleSeriesVisibility}
-				/>
-			),
-		},
-		{
-			title: getTableColumnTitle('Avg', yAxisUnit),
-			width: 90,
-			dataIndex: 'avg',
-			key: 'avg',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-		{
-			title: getTableColumnTitle('Sum', yAxisUnit),
-			width: 90,
-			dataIndex: 'sum',
-			key: 'sum',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-		{
-			title: getTableColumnTitle('Max', yAxisUnit),
-			width: 90,
-			dataIndex: 'max',
-			key: 'max',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-		{
-			title: getTableColumnTitle('Min', yAxisUnit),
-			width: 90,
-			dataIndex: 'min',
-			key: 'min',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-	];
-}

frontend/src/container/DashboardContainer/visualization/components/ChartManager/utils.ts

@@ -1,93 +0,0 @@
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import uPlot from 'uplot';
-
-/** Extended series with computed stats for table display */
-export type ExtendedChartDataset = uPlot.Series & {
-	show: boolean;
-	sum: number;
-	avg: number;
-	min: number;
-	max: number;
-	index: number;
-};
-
-function roundToDecimalPrecision(
-	value: number,
-	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
-): number {
-	if (
-		typeof value !== 'number' ||
-		Number.isNaN(value) ||
-		value === Infinity ||
-		value === -Infinity
-	) {
-		return 0;
-	}
-
-	if (decimalPrecision === PrecisionOptionsEnum.FULL) {
-		return value;
-	}
-
-	// regex to match the decimal precision for the given decimal precision
-	const regex = new RegExp(`^-?\\d*\\.?0*\\d{0,${decimalPrecision}}`);
-	const matched = value ? value.toFixed(decimalPrecision).match(regex) : null;
-	return matched ? parseFloat(matched[0]) : 0;
-}
-
-/** Build table dataset from uPlot options and aligned data */
-export function getDefaultTableDataSet(
-	options: uPlot.Options,
-	data: uPlot.AlignedData,
-	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
-): ExtendedChartDataset[] {
-	return options.series.map(
-		(series: uPlot.Series, index: number): ExtendedChartDataset => {
-			const arr = (data[index] as number[]) ?? [];
-			const sum = arr.reduce((a, b) => a + b, 0) || 0;
-			const count = arr.length || 1;
-
-			const hasValues = arr.length > 0;
-			return {
-				...series,
-				index,
-				show: true,
-				sum: roundToDecimalPrecision(sum, decimalPrecision),
-				avg: roundToDecimalPrecision(sum / count, decimalPrecision),
-				max: hasValues
-					? roundToDecimalPrecision(Math.max(...arr), decimalPrecision)
-					: 0,
-				min: hasValues
-					? roundToDecimalPrecision(Math.min(...arr), decimalPrecision)
-					: 0,
-			};
-		},
-	);
-}
-
-/** Format numeric value for table display using yAxisUnit */
-export function formatTableValueWithUnit(
-	value: number,
-	yAxisUnit?: string,
-	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
-): string {
-	return `${getYAxisFormattedValue(
-		String(value),
-		yAxisUnit ?? 'none',
-		decimalPrecision,
-	)}`;
-}
-
-/** Format column header with optional unit */
-export function getTableColumnTitle(title: string, yAxisUnit?: string): string {
-	if (!yAxisUnit) {
-		return title;
-	}
-	const universalName =
-		Y_AXIS_UNIT_NAMES[yAxisUnit as keyof typeof Y_AXIS_UNIT_NAMES];
-	if (!universalName) {
-		return `${title} (in ${yAxisUnit})`;
-	}
-	return `${title} (in ${universalName})`;
-}

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

@@ -96,7 +96,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 				config={config}
 				alignedData={chartData}
 				yAxisUnit={widget.yAxisUnit}
-				decimalPrecision={widget.decimalPrecision}
 				onCancel={onToggleModelHandler}
 			/>
 		);
@@ -106,7 +105,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		chartData,
 		widget.yAxisUnit,
 		onToggleModelHandler,
-		widget.decimalPrecision,
 	]);
 
 	const onPlotDestroy = useCallback(() => {

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

@@ -95,7 +95,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 				config={config}
 				alignedData={chartData}
 				yAxisUnit={widget.yAxisUnit}
-				decimalPrecision={widget.decimalPrecision}
 				onCancel={onToggleModelHandler}
 			/>
 		);
@@ -105,7 +104,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		chartData,
 		widget.yAxisUnit,
 		onToggleModelHandler,
-		widget.decimalPrecision,
 	]);
 
 	return (

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -178,9 +178,7 @@ export default function HostsListTable({
 				indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 			}}
 			tableLayout="fixed"
-			rowKey={(record): string =>
-				(record as HostRowData & { key: string }).key ?? record.hostName
-			}
+			rowKey={(record): string => record.hostName}
 			onChange={handleTableChange}
 			onRow={(record): { onClick: () => void; className: string } => ({
 				onClick: (): void => handleRowClick(record),

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -126,8 +126,7 @@
 				background: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value),
-			.ant-table-cell:has(.hostname-cell-missing) {
+			.ant-table-cell:has(.hostname-column-value) {
 				background: var(--bg-ink-400);
 			}
 
@@ -140,23 +139,6 @@
 				letter-spacing: -0.07px;
 			}
 
-			.hostname-cell-missing {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-			}
-
-			.hostname-cell-placeholder {
-				color: var(--Vanilla-400, #c0c1c3);
-			}
-
-			.hostname-cell-warning-icon {
-				display: inline-flex;
-				align-items: center;
-				margin-left: 4px;
-				cursor: help;
-			}
-
 			.status-cell {
 				.active-tag {
 					color: var(--bg-forest-500);
@@ -375,8 +357,7 @@
 				color: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value),
-			.ant-table-cell:has(.hostname-cell-missing) {
+			.ant-table-cell:has(.hostname-column-value) {
 				background: var(--bg-vanilla-100);
 			}
 
@@ -384,10 +365,6 @@
 				color: var(--bg-ink-300);
 			}
 
-			.hostname-cell-placeholder {
-				color: var(--text-ink-300);
-			}
-
 			.ant-table-tbody > tr:hover > td {
 				background: rgba(0, 0, 0, 0.04);
 			}

frontend/src/container/InfraMonitoringHosts/__tests__/utilts.test.tsx

@@ -1,24 +1,13 @@
-import { render, screen } from '@testing-library/react';
-import { HostData, TimeSeries } from 'api/infraMonitoring/getHostLists';
+import { render } from '@testing-library/react';
 
-import {
-	formatDataForTable,
-	GetHostsQuickFiltersConfig,
-	HostnameCell,
-} from '../utils';
+import { formatDataForTable, GetHostsQuickFiltersConfig } from '../utils';
 
 const PROGRESS_BAR_CLASS = '.progress-bar';
 
-const emptyTimeSeries: TimeSeries = {
-	labels: {},
-	labelsArray: [],
-	values: [],
-};
-
 describe('InfraMonitoringHosts utils', () => {
 	describe('formatDataForTable', () => {
 		it('should format host data correctly', () => {
-			const mockData: HostData[] = [
+			const mockData = [
 				{
 					hostName: 'test-host',
 					active: true,
@@ -27,12 +16,8 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.05,
 					load15: 2.5,
 					os: 'linux',
-					cpuTimeSeries: emptyTimeSeries,
-					memoryTimeSeries: emptyTimeSeries,
-					waitTimeSeries: emptyTimeSeries,
-					load15TimeSeries: emptyTimeSeries,
 				},
-			];
+			] as any;
 
 			const result = formatDataForTable(mockData);
 
@@ -61,7 +46,7 @@ describe('InfraMonitoringHosts utils', () => {
 		});
 
 		it('should handle inactive hosts', () => {
-			const mockData: HostData[] = [
+			const mockData = [
 				{
 					hostName: 'test-host',
 					active: false,
@@ -70,12 +55,12 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.02,
 					load15: 1.2,
 					os: 'linux',
-					cpuTimeSeries: emptyTimeSeries,
-					memoryTimeSeries: emptyTimeSeries,
-					waitTimeSeries: emptyTimeSeries,
-					load15TimeSeries: emptyTimeSeries,
+					cpuTimeSeries: [],
+					memoryTimeSeries: [],
+					waitTimeSeries: [],
+					load15TimeSeries: [],
 				},
-			];
+			] as any;
 
 			const result = formatDataForTable(mockData);
 
@@ -83,65 +68,6 @@ describe('InfraMonitoringHosts utils', () => {
 			expect(inactiveTag.container.textContent).toBe('INACTIVE');
 			expect(inactiveTag.container.querySelector('.inactive')).toBeTruthy();
 		});
-
-		it('should set hostName to empty string when host has no hostname', () => {
-			const mockData: HostData[] = [
-				{
-					hostName: '',
-					active: true,
-					cpu: 0.5,
-					memory: 0.4,
-					wait: 0.01,
-					load15: 1.0,
-					os: 'linux',
-					cpuTimeSeries: emptyTimeSeries,
-					memoryTimeSeries: emptyTimeSeries,
-					waitTimeSeries: emptyTimeSeries,
-					load15TimeSeries: emptyTimeSeries,
-				},
-			];
-
-			const result = formatDataForTable(mockData);
-			expect(result[0].hostName).toBe('');
-			expect(result[0].key).toBe('-0');
-		});
-	});
-
-	describe('HostnameCell', () => {
-		it('should render hostname when present (case A: no icon)', () => {
-			const { container } = render(<HostnameCell hostName="gke-prod-1" />);
-			expect(container.querySelector('.hostname-column-value')).toBeTruthy();
-			expect(container.textContent).toBe('gke-prod-1');
-			expect(container.querySelector('.hostname-cell-missing')).toBeFalsy();
-			expect(container.querySelector('.hostname-cell-warning-icon')).toBeFalsy();
-		});
-
-		it('should render placeholder and icon when hostName is empty (case B)', () => {
-			const { container } = render(<HostnameCell hostName="" />);
-			expect(screen.getByText('-')).toBeTruthy();
-			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
-			const iconWrapper = container.querySelector('.hostname-cell-warning-icon');
-			expect(iconWrapper).toBeTruthy();
-			expect(iconWrapper?.getAttribute('aria-label')).toBe(
-				'Missing host.name metadata',
-			);
-			expect(iconWrapper?.getAttribute('tabindex')).toBe('0');
-			// Tooltip with "Learn how to configure →" link is shown on hover/focus
-		});
-
-		it('should render placeholder and icon when hostName is whitespace only (case C)', () => {
-			const { container } = render(<HostnameCell hostName="   " />);
-			expect(screen.getByText('-')).toBeTruthy();
-			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
-			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
-		});
-
-		it('should render placeholder and icon when hostName is undefined (case D)', () => {
-			const { container } = render(<HostnameCell hostName={undefined} />);
-			expect(screen.getByText('-')).toBeTruthy();
-			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
-			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
-		});
 	});
 
 	describe('GetHostsQuickFiltersConfig', () => {

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TabsProps, Tag, Tooltip, Typography } from 'antd';
+import { Progress, TabsProps, Tag, Tooltip } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
 	HostData,
@@ -14,7 +14,6 @@ import {
 } from 'components/QuickFilters/types';
 import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { TriangleAlert } from 'lucide-react';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -25,7 +24,6 @@ import HostsList from './HostsList';
 import './InfraMonitoring.styles.scss';
 
 export interface HostRowData {
-	key?: string;
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
@@ -34,59 +32,6 @@ export interface HostRowData {
 	active: React.ReactNode;
 }
 
-const HOSTNAME_DOCS_URL =
-	'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/#host-name-is-blankempty';
-
-export function HostnameCell({
-	hostName,
-}: {
-	hostName?: string | null;
-}): React.ReactElement {
-	const isEmpty = !hostName || !hostName.trim();
-	if (!isEmpty) {
-		return <div className="hostname-column-value">{hostName}</div>;
-	}
-	return (
-		<div className="hostname-cell-missing">
-			<Typography.Text type="secondary" className="hostname-cell-placeholder">
-				-
-			</Typography.Text>
-			<Tooltip
-				title={
-					<div>
-						Missing host.name metadata.
-						<br />
-						<a
-							href={HOSTNAME_DOCS_URL}
-							target="_blank"
-							rel="noopener noreferrer"
-							onClick={(e): void => e.stopPropagation()}
-						>
-							Learn how to configure →
-						</a>
-					</div>
-				}
-				trigger={['hover', 'focus']}
-			>
-				<span
-					className="hostname-cell-warning-icon"
-					tabIndex={0}
-					role="img"
-					aria-label="Missing host.name metadata"
-					onClick={(e): void => e.stopPropagation()}
-					onKeyDown={(e): void => {
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.stopPropagation();
-						}
-					}}
-				>
-					<TriangleAlert size={14} color={Color.BG_CHERRY_500} />
-				</span>
-			</Tooltip>
-		</div>
-	);
-}
-
 export interface HostsListTableProps {
 	isLoading: boolean;
 	isError: boolean;
@@ -130,8 +75,8 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		dataIndex: 'hostName',
 		key: 'hostName',
 		width: 250,
-		render: (value: string | undefined): React.ReactNode => (
-			<HostnameCell hostName={value ?? ''} />
+		render: (value: string): React.ReactNode => (
+			<div className="hostname-column-value">{value}</div>
 		),
 	},
 	{

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

@@ -8,7 +8,7 @@ import logEvent from 'api/common/logEvent';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import AuthError from 'components/AuthError/AuthError';
 import { useNotifications } from 'hooks/useNotifications';
-import { cloneDeep, debounce, isEmpty } from 'lodash-es';
+import { cloneDeep, debounce } from 'lodash-es';
 import {
 	ArrowRight,
 	ChevronDown,
@@ -65,7 +65,7 @@ function InviteTeamMembers({
 	};
 
 	useEffect(() => {
-		if (isEmpty(teamMembers)) {
+		if (teamMembers === null) {
 			const initialTeamMembers = Array.from({ length: 3 }, () => ({
 				...defaultTeamMember,
 				id: uuid(),
@@ -88,7 +88,10 @@ function InviteTeamMembers({
 		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
 	};
 
-	// Validation function to check all users
+	const isMemberTouched = (member: TeamMember): boolean =>
+		member.email.trim() !== '' ||
+		Boolean(member.role && member.role.trim() !== '');
+
 	const validateAllUsers = (): boolean => {
 		let isValid = true;
 		let hasEmailErrors = false;
@@ -96,7 +99,9 @@ function InviteTeamMembers({
 
 		const updatedEmailValidity: Record<string, boolean> = {};
 
-		teamMembersToInvite?.forEach((member) => {
+		const touchedMembers = teamMembersToInvite?.filter(isMemberTouched) ?? [];
+
+		touchedMembers?.forEach((member) => {
 			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
 			const roleValid = Boolean(member.role && member.role.trim() !== '');
 
@@ -150,12 +155,12 @@ function InviteTeamMembers({
 
 	const handleNext = (): void => {
 		if (validateAllUsers()) {
-			setTeamMembers(teamMembersToInvite || []);
+			setTeamMembers(teamMembersToInvite?.filter(isMemberTouched) ?? []);
 			setHasInvalidEmails(false);
 			setHasInvalidRoles(false);
 			setInviteError(null);
 			sendInvites({
-				invites: teamMembersToInvite || [],
+				invites: teamMembersToInvite?.filter(isMemberTouched) ?? [],
 			});
 		}
 	};
@@ -230,12 +235,12 @@ function InviteTeamMembers({
 
 	const getValidationErrorMessage = (): string => {
 		if (hasInvalidEmails && hasInvalidRoles) {
-			return 'Please enter valid emails and select roles for all team members';
+			return 'Please enter valid emails and select roles for team members';
 		}
 		if (hasInvalidEmails) {
-			return 'Please enter valid emails for all team members';
+			return 'Please enter valid emails for team members';
 		}
-		return 'Please select roles for all team members';
+		return 'Please select roles for team members';
 	};
 
 	const handleDoLater = (): void => {
@@ -246,7 +251,10 @@ function InviteTeamMembers({
 		onNext();
 	};
 
+	const hasInvites =
+		(teamMembersToInvite?.filter(isMemberTouched) ?? []).length > 0;
 	const isButtonDisabled = isSendingInvites || isLoading;
+	const isInviteButtonDisabled = isButtonDisabled || !hasInvites;
 
 	return (
 		<div className="questions-container">
@@ -356,9 +364,11 @@ function InviteTeamMembers({
 					<Button
 						variant="solid"
 						color="primary"
-						className={`onboarding-next-button ${isButtonDisabled ? 'disabled' : ''}`}
+						className={`onboarding-next-button ${
+							isInviteButtonDisabled ? 'disabled' : ''
+						}`}
 						onClick={handleNext}
-						disabled={isButtonDisabled}
+						disabled={isInviteButtonDisabled}
 						suffixIcon={
 							isButtonDisabled ? (
 								<Loader2 className="animate-spin" size={12} />
@@ -367,7 +377,7 @@ function InviteTeamMembers({
 							)
 						}
 					>
-						Complete
+						Send Invites
 					</Button>
 					<Button
 						variant="ghost"

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

@@ -0,0 +1,480 @@
+import { rest, server } from 'mocks-server/server';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+
+import InviteTeamMembers from '../InviteTeamMembers';
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockNotificationSuccess = jest.fn() as jest.MockedFunction<
+	(args: { message: string }) => void
+>;
+const mockNotificationError = jest.fn() as jest.MockedFunction<
+	(args: { message: string }) => void
+>;
+
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): any => ({
+		notifications: {
+			success: mockNotificationSuccess,
+			error: mockNotificationError,
+		},
+	}),
+}));
+
+const INVITE_USERS_ENDPOINT = '*/api/v1/invite/bulk';
+
+interface TeamMember {
+	email: string;
+	role: string;
+	name: string;
+	frontendBaseUrl: string;
+	id: string;
+}
+
+interface InviteRequestBody {
+	invites: { email: string; role: string }[];
+}
+
+interface RenderProps {
+	isLoading?: boolean;
+	teamMembers?: TeamMember[] | null;
+}
+
+const mockOnNext = jest.fn() as jest.MockedFunction<() => void>;
+const mockSetTeamMembers = jest.fn() as jest.MockedFunction<
+	(members: TeamMember[]) => void
+>;
+
+function renderComponent({
+	isLoading = false,
+	teamMembers = null,
+}: RenderProps = {}): ReturnType<typeof render> {
+	return render(
+		<InviteTeamMembers
+			isLoading={isLoading}
+			teamMembers={teamMembers}
+			setTeamMembers={mockSetTeamMembers}
+			onNext={mockOnNext}
+		/>,
+	);
+}
+
+async function selectRole(
+	user: ReturnType<typeof userEvent.setup>,
+	selectIndex: number,
+	optionLabel: string,
+): Promise<void> {
+	const placeholders = screen.getAllByText(/select roles/i);
+	await user.click(placeholders[selectIndex]);
+	const optionContent = await screen.findByText(optionLabel);
+	fireEvent.click(optionContent);
+}
+
+describe('InviteTeamMembers', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		server.use(
+			rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success' })),
+			),
+		);
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+		server.resetHandlers();
+	});
+
+	describe('Initial rendering', () => {
+		it('renders the page header, column labels, default rows, and action buttons', () => {
+			renderComponent();
+
+			expect(
+				screen.getByRole('heading', { name: /invite your team/i }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByText(/signoz is a lot more useful with collaborators/i),
+			).toBeInTheDocument();
+			expect(
+				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+			).toHaveLength(3);
+			expect(screen.getByText('Email address')).toBeInTheDocument();
+			expect(screen.getByText('Roles')).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', { name: /send invites/i }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', { name: /i'll do this later/i }),
+			).toBeInTheDocument();
+		});
+
+		it('disables both action buttons while isLoading is true', () => {
+			renderComponent({ isLoading: true });
+
+			expect(screen.getByRole('button', { name: /send invites/i })).toBeDisabled();
+			expect(
+				screen.getByRole('button', { name: /i'll do this later/i }),
+			).toBeDisabled();
+		});
+	});
+
+	describe('Row management', () => {
+		it('adds a new empty row when "Add another" is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			expect(
+				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+			).toHaveLength(3);
+
+			await user.click(screen.getByRole('button', { name: /add another/i }));
+
+			expect(
+				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+			).toHaveLength(4);
+		});
+
+		it('removes the correct row when its trash icon is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const emailInputs = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(emailInputs[0], 'first@example.com');
+			await screen.findByDisplayValue('first@example.com');
+
+			await user.click(
+				screen.getAllByRole('button', { name: /remove team member/i })[0],
+			);
+
+			await waitFor(() => {
+				expect(
+					screen.queryByDisplayValue('first@example.com'),
+				).not.toBeInTheDocument();
+				expect(
+					screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+				).toHaveLength(2);
+			});
+		});
+
+		it('hides remove buttons when only one row remains', async () => {
+			renderComponent();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			let removeButtons = screen.getAllByRole('button', {
+				name: /remove team member/i,
+			});
+			while (removeButtons.length > 0) {
+				await user.click(removeButtons[0]);
+				removeButtons = screen.queryAllByRole('button', {
+					name: /remove team member/i,
+				});
+			}
+
+			expect(
+				screen.queryByRole('button', { name: /remove team member/i }),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Inline email validation', () => {
+		it('shows an inline error after typing an invalid email and clears it when a valid email is entered', async () => {
+			jest.useFakeTimers();
+			const user = userEvent.setup({
+				advanceTimers: (ms) => jest.advanceTimersByTime(ms),
+			});
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+
+			await user.type(firstInput, 'not-an-email');
+			jest.advanceTimersByTime(600);
+			await waitFor(() => {
+				expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'good@example.com');
+			jest.advanceTimersByTime(600);
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/invalid email address/i),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('does not show an inline error when the field is cleared back to empty', async () => {
+			jest.useFakeTimers();
+			const user = userEvent.setup({
+				advanceTimers: (ms) => jest.advanceTimersByTime(ms),
+			});
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'a');
+			await user.clear(firstInput);
+			jest.advanceTimersByTime(600);
+
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/invalid email address/i),
+				).not.toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Validation callout on Complete', () => {
+		it('shows the correct callout message for each combination of email/role validity', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const removeButtons = screen.getAllByRole('button', {
+				name: /remove team member/i,
+			});
+			await user.click(removeButtons[0]);
+			await user.click(
+				screen.getAllByRole('button', { name: /remove team member/i })[0],
+			);
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+
+			await user.type(firstInput, 'bad-email');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(
+						/please enter valid emails and select roles for team members/i,
+					),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+			});
+
+			await selectRole(user, 0, 'Viewer');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(/please enter valid emails for team members/i),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails and select roles/i),
+				).not.toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'valid@example.com');
+			await user.click(screen.getByRole('button', { name: /add another/i }));
+			const allInputs = screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i);
+			await user.type(allInputs[1], 'norole@example.com');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(/please select roles for team members/i),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails and select roles/i),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('treats whitespace as untouched, clears the callout on fix-and-resubmit, and clears role error on role select', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const removeButtons = screen.getAllByRole('button', {
+				name: /remove team member/i,
+			});
+			await user.click(removeButtons[0]);
+			await user.click(
+				screen.getAllByRole('button', { name: /remove team member/i })[0],
+			);
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+
+			await user.type(firstInput, '   ');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/please enter valid emails/i),
+				).not.toBeInTheDocument();
+				expect(screen.queryByText(/please select roles/i)).not.toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'bad-email');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(
+						/please enter valid emails and select roles for team members/i,
+					),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'good@example.com');
+			await selectRole(user, 0, 'Admin');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/please enter valid emails and select roles/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+			});
+
+			await waitFor(() => expect(mockOnNext).toHaveBeenCalledTimes(1), {
+				timeout: 1200,
+			});
+		});
+
+		it('disables the Send Invites button when all rows are untouched (empty)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const sendInvitesBtn = screen.getByRole('button', { name: /send invites/i });
+			expect(sendInvitesBtn).toBeDisabled();
+
+			// Type something to make a row touched
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'a');
+
+			expect(sendInvitesBtn).not.toBeDisabled();
+		});
+	});
+
+	describe('API integration', () => {
+		it('only sends touched (non-empty) rows — empty rows are excluded from the invite payload', async () => {
+			let capturedBody: InviteRequestBody | null = null;
+
+			server.use(
+				rest.post(INVITE_USERS_ENDPOINT, async (req, res, ctx) => {
+					capturedBody = await req.json<InviteRequestBody>();
+					return res(ctx.status(200), ctx.json({ status: 'success' }));
+				}),
+			);
+
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'only@example.com');
+			await selectRole(user, 0, 'Admin');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+
+			await waitFor(() => {
+				expect(capturedBody).not.toBeNull();
+				expect(capturedBody?.invites).toHaveLength(1);
+				expect(capturedBody?.invites[0]).toMatchObject({
+					email: 'only@example.com',
+					role: 'ADMIN',
+				});
+			});
+			await waitFor(() => expect(mockOnNext).toHaveBeenCalled(), {
+				timeout: 1200,
+			});
+		});
+
+		it('calls the invite API, shows a success notification, and calls onNext after the 1 s delay', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'alice@example.com');
+			await selectRole(user, 0, 'Admin');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+
+			await waitFor(() => {
+				expect(mockNotificationSuccess).toHaveBeenCalledWith(
+					expect.objectContaining({ message: 'Invites sent successfully!' }),
+				);
+			});
+
+			await waitFor(
+				() => {
+					expect(mockOnNext).toHaveBeenCalledTimes(1);
+				},
+				{ timeout: 1200 },
+			);
+		});
+
+		it('renders an API error container when the invite request fails', async () => {
+			server.use(
+				rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
+					res(
+						ctx.status(500),
+						ctx.json({
+							errors: [{ code: 'INTERNAL_ERROR', msg: 'Something went wrong' }],
+						}),
+					),
+				),
+			);
+
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'fail@example.com');
+			await selectRole(user, 0, 'Viewer');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+
+			await waitFor(() => {
+				expect(document.querySelector('.auth-error-container')).toBeInTheDocument();
+			});
+
+			await user.type(firstInput, 'x');
+			await waitFor(() => {
+				expect(
+					document.querySelector('.auth-error-container'),
+				).not.toBeInTheDocument();
+			});
+		});
+	});
+});