refactor: replace antd Tabs with @signozhq/ui Tabs

Migrates Tabs usage from antd to the @signozhq/ui Tabs component across dashboard settings, integration details, metrics application, pipelines, trace detail, and workspace-locked pages. API differences (activeKey → value, defaultActiveKey → defaultValue, TabsProps['items'] → TabItemProps[]) are updated to match the new component.
refactor: replace Ant Design Switch with Signoz UI Switch across mult… (#11223 )
2026-05-27 04:10:28 +01:00 · 2026-05-22 14:33:12 +05:30 · 2026-05-22 08:50:41 +00:00 · 2026-05-21 23:49:44 +00:00 · 2026-05-21 17:24:31 +00:00 · 2026-05-21 17:22:25 +00:00
74 changed files with 418 additions and 342 deletions
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -2689,7 +2689,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesClusterRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2759,7 +2758,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesDaemonSetRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2829,7 +2827,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesDeploymentRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2908,7 +2905,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesHostRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2984,7 +2980,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesJobRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3032,7 +3027,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesNamespaceRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3110,7 +3104,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesNodeRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3209,7 +3202,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesPodRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3554,7 +3546,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesStatefulSetRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3615,7 +3606,6 @@ components:
        records:
          items:
            $ref: '#/components/schemas/InframonitoringtypesVolumeRecord'
-          nullable: true
          type: array
        requiredMetricsCheck:
          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,7 +49,7 @@
    "@signozhq/design-tokens": "2.1.4",
    "@signozhq/icons": "0.4.0",
    "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.19",
+    "@signozhq/ui": "0.0.21",
    "@tanstack/react-table": "8.21.3",
    "@tanstack/react-virtual": "3.13.22",
    "@uiw/codemirror-theme-copilot": "4.23.11",
--- a/frontend/plugins/rules/no-antd-components.mjs
+++ b/frontend/plugins/rules/no-antd-components.mjs
@@ -14,7 +14,9 @@
 */

 const BANNED_COMPONENTS = {
-	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+	Typography:
+		'Use @signozhq/ui/typography Typography instead of antd Typography.',
+	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 };

--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -77,8 +77,8 @@ importers:
        specifier: 0.0.2
        version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@signozhq/ui':
-        specifier: 0.0.19
-        version: 0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.21
+        version: 0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
      '@tanstack/react-table':
        specifier: 8.21.3
        version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3269,8 +3269,8 @@ packages:
    peerDependencies:
      react: ^18.2.0

-  '@signozhq/ui@0.0.19':
-    resolution: {integrity: sha512-2q6aRxN/PR4PlR2xJZAREEuvLPiDFggfFKzCW2Z5vHVVbrgnvZHWD1jPUuwszfEg0ceH3UvkwqceO7wN4uRJAA==}
+  '@signozhq/ui@0.0.21':
+    resolution: {integrity: sha512-uLM3Vqwxlk2USXbwtb3qRLpjZR9b9QSHFQq/jtcfYNMDmIE/sNjSj0nRkEhX4RqqRgsLRt2PVA33aeWxDOLO3g==}
    peerDependencies:
      '@signozhq/icons': 0.3.0
      react: ^18.2.0
@@ -3851,27 +3851,6 @@ packages:
    peerDependencies:
      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0

-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
-
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
-
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
-
  '@xmldom/xmldom@0.8.13':
    resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
    engines: {node: '>=10.0.0'}
@@ -12034,7 +12013,7 @@ snapshots:
      - react-dom
      - tailwindcss

-  '@signozhq/ui@0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
    dependencies:
      '@chenglou/pretext': 0.0.5
      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -3488,9 +3488,9 @@ export interface InframonitoringtypesClustersDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesClusterRecordDTO[] | null;
+	records: InframonitoringtypesClusterRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3566,9 +3566,9 @@ export interface InframonitoringtypesDaemonSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDaemonSetRecordDTO[] | null;
+	records: InframonitoringtypesDaemonSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3644,9 +3644,9 @@ export interface InframonitoringtypesDeploymentsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDeploymentRecordDTO[] | null;
+	records: InframonitoringtypesDeploymentRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3730,9 +3730,9 @@ export interface InframonitoringtypesHostsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesHostRecordDTO[] | null;
+	records: InframonitoringtypesHostRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3816,9 +3816,9 @@ export interface InframonitoringtypesJobsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesJobRecordDTO[] | null;
+	records: InframonitoringtypesJobRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3866,9 +3866,9 @@ export interface InframonitoringtypesNamespacesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNamespaceRecordDTO[] | null;
+	records: InframonitoringtypesNamespaceRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3933,9 +3933,9 @@ export interface InframonitoringtypesNodesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNodeRecordDTO[] | null;
+	records: InframonitoringtypesNodeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4017,9 +4017,9 @@ export interface InframonitoringtypesPodsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesPodRecordDTO[] | null;
+	records: InframonitoringtypesPodRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4437,9 +4437,9 @@ export interface InframonitoringtypesStatefulSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesStatefulSetRecordDTO[] | null;
+	records: InframonitoringtypesStatefulSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4506,9 +4506,9 @@ export interface InframonitoringtypesVolumesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesVolumeRecordDTO[] | null;
+	records: InframonitoringtypesVolumeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
--- a/frontend/src/components/AuthZTooltip/AuthZTooltip.authz.test.tsx
+++ b/frontend/src/components/AuthZTooltip/AuthZTooltip.authz.test.tsx
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -137,7 +137,6 @@ function CreateServiceAccountModal(): JSX.Element {
 				<AuthZTooltip checks={[SACreatePermission]}>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form="create-sa-form"
 						variant="solid"
 						color="primary"
--- a/frontend/src/components/GuardAuthZ/GuardAuthZ.authz.test.tsx
+++ b/frontend/src/components/GuardAuthZ/GuardAuthZ.authz.test.tsx
@@ -11,9 +11,6 @@ import { GuardAuthZ } from './GuardAuthZ';
 describe('GuardAuthZ', () => {
 	const TestChild = (): ReactElement => <div>Protected Content</div>;
 	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
-	const ErrorFallback = (error: Error): ReactElement => (
-		<div>Error occurred: {error.message}</div>
-	);
 	const NoPermissionFallback = (_response: {
 		requiredPermissionName: BrandedPermission;
 	}): ReactElement => <div>Access denied</div>;
@@ -90,40 +87,28 @@ describe('GuardAuthZ', () => {
 		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
 	});

-	it('should render fallbackOnError when API error occurs', async () => {
-		const errorMessage = 'Internal Server Error';
-
+	it('should render children when API error occurs and no fallbackOnError provided (fail open)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
 			}),
 		);

 		render(
-			<GuardAuthZ relation="read" object="role:*" fallbackOnError={ErrorFallback}>
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);

 		await waitFor(() => {
-			expect(screen.getByText(/Error occurred:/)).toBeInTheDocument();
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
 		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
 	});

-	it('should pass error object to fallbackOnError function', async () => {
-		const errorMessage = 'Network request failed';
-		let receivedError: Error | null = null;
-
-		const errorFallbackWithCapture = (error: Error): ReactElement => {
-			receivedError = error;
-			return <div>Captured error: {error.message}</div>;
-		};
-
+	it('should render fallbackOnError when API error occurs and fallbackOnError is provided', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
 			}),
 		);

@@ -131,35 +116,14 @@ describe('GuardAuthZ', () => {
 			<GuardAuthZ
 				relation="read"
 				object="role:*"
-				fallbackOnError={errorFallbackWithCapture}
+				fallbackOnError={<div>Custom error fallback</div>}
 			>
 				<TestChild />
 			</GuardAuthZ>,
 		);

 		await waitFor(() => {
-			expect(receivedError).not.toBeNull();
-		});
-
-		expect(receivedError).toBeInstanceOf(Error);
-		expect(screen.getByText(/Captured error:/)).toBeInTheDocument();
-	});
-
-	it('should render null when error occurs and no fallbackOnError provided', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
+			expect(screen.getByText('Custom error fallback')).toBeInTheDocument();
 		});

 		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
--- a/frontend/src/components/GuardAuthZ/GuardAuthZ.tsx
+++ b/frontend/src/components/GuardAuthZ/GuardAuthZ.tsx
@@ -12,7 +12,7 @@ export type GuardAuthZProps<R extends AuthZRelation> = {
 	relation: R;
 	object: AuthZObject<R>;
 	fallbackOnLoading?: JSX.Element;
-	fallbackOnError?: (error: Error) => JSX.Element;
+	fallbackOnError?: JSX.Element;
 	fallbackOnNoPermissions?: (response: {
 		requiredPermissionName: BrandedPermission;
 	}) => JSX.Element;
@@ -35,7 +35,7 @@ export function GuardAuthZ<R extends AuthZRelation>({
 	}

 	if (error) {
-		return fallbackOnError?.(error) ?? null;
+		return fallbackOnError ?? children;
 	}

 	if (!permissions?.[permission]?.isGranted) {
--- a/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
+++ b/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch } from 'antd';
+import { Button } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
@@ -125,9 +126,8 @@ function ShareURLModal(): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
-								checked={enableAbsoluteTime}
+								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
-								size="small"
 								onChange={(): void => {
 									setEnableAbsoluteTime((prev) => !prev);
 								}}
--- a/frontend/src/components/NoAuthBanner/NoAuthBanner.tsx
+++ b/frontend/src/components/NoAuthBanner/NoAuthBanner.tsx
@@ -13,7 +13,7 @@ export function NoAuthBanner(): JSX.Element {
 			Impersonation mode: authentication is disabled. Anyone with access to this
 			instance has admin privileges.{' '}
 			<a
-				href="https://signoz.io/docs/manage/administrator-guide/configuration/no-auth-mode/"
+				href="https://signoz.io/docs/manage/administrator-guide/configuration/impersonation-mode/"
 				target="_blank"
 				rel="noreferrer"
 			>
--- a/frontend/src/components/QuickFilters/QuickFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFilters.tsx
@@ -14,7 +14,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton, Switch, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -281,9 +282,8 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
-						size="small"
 						style={{ marginLeft: 'auto' }}
-						checked={showIP ?? true}
+						value={showIP ?? true}
 						onChange={(checked): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
 								showIP: checked,
--- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
+++ b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
@@ -4,7 +4,8 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Dropdown, Flex, MenuProps } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -60,9 +61,7 @@ function DynamicColumnTable({

 	const onToggleHandler =
 		(index: number, column: ColumnGroupType<any> | ColumnType<any>) =>
-		(checked: boolean, event: React.MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-
+		(checked: boolean): void => {
 			if (shouldSendAlertsLogEvent) {
 				logEvent('Alert: Column toggled', {
 					column: column?.title,
@@ -88,10 +87,14 @@ function DynamicColumnTable({
 	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
 			label: (
-				<div className="dynamicColumnsTable-items">
+				<div
+					className="dynamicColumnsTable-items"
+					onClick={(e): void => e.stopPropagation()}
+					role="presentation"
+				>
 					<div>{column.title?.toString()}</div>
 					<Switch
-						checked={columnsData?.findIndex((c) => c.key === column.key) !== -1}
+						value={columnsData?.findIndex((c) => c.key === column.key) !== -1}
 						onChange={onToggleHandler(index, column)}
 					/>
 				</div>
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
@@ -127,7 +127,6 @@ function KeyFormPhase({
 					>
 						<Button
 							type="submit"
-							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
@@ -190,7 +190,6 @@ function EditKeyForm({
 					>
 						<Button
 							type="submit"
-							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"
--- a/frontend/src/components/createGuardedRoute/createGuardedRoute.authz.test.tsx
+++ b/frontend/src/components/createGuardedRoute/createGuardedRoute.authz.test.tsx
@@ -204,7 +204,7 @@ describe('createGuardedRoute', () => {
 		).not.toBeInTheDocument();
 	});

-	it('should render error fallback when API error occurs', async () => {
+	it('should render the component when API error occurs (fail open)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
 				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
@@ -230,12 +230,8 @@ describe('createGuardedRoute', () => {
 		render(<GuardedComponent {...props} />);

 		await waitFor(() => {
-			expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
 		});
-
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
 	});

 	it('should render no permissions fallback when permission is denied', async () => {
--- a/frontend/src/components/createGuardedRoute/createGuardedRoute.tsx
+++ b/frontend/src/components/createGuardedRoute/createGuardedRoute.tsx
@@ -9,14 +9,11 @@ import { parsePermission } from 'hooks/useAuthZ/utils';

 import noDataUrl from '@/assets/Icons/no-data.svg';

-import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import AppLoading from '../AppLoading/AppLoading';
 import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';

 import './createGuardedRoute.styles.scss';

-const onErrorFallback = (): JSX.Element => <ErrorBoundaryFallback />;
-
 function OnNoPermissionsFallback(response: {
 	requiredPermissionName: BrandedPermission;
 }): ReactElement {
@@ -63,7 +60,6 @@ export function createGuardedRoute<P extends object, R extends AuthZRelation>(
 				relation={relation}
 				object={resolvedObject}
 				fallbackOnLoading={<AppLoading />}
-				fallbackOnError={onErrorFallback}
 				fallbackOnNoPermissions={(response): ReactElement => (
 					<OnNoPermissionsFallback {...response} />
 				)}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
-import { Spin, Switch, Table, Tooltip } from 'antd';
+import { Spin, Table, Tooltip } from 'antd';
 import { Info, Loader } from '@signozhq/icons';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
@@ -170,11 +171,7 @@ function TopErrors({
 					/>
 				</div>
 				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-					<Switch
-						checked={showStatusCodeErrors}
-						onChange={setShowStatusCodeErrors}
-						size="small"
-					/>
+					<Switch value={showStatusCodeErrors} onChange={setShowStatusCodeErrors} />
 					<span style={{ color: 'white', fontSize: '14px' }}>
 						Status Message Exists
 					</span>
--- a/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
@@ -1,4 +1,5 @@
-import { Button, Flex, SelectProps, Switch } from 'antd';
+import { Button, Flex, SelectProps } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
@@ -419,8 +420,8 @@ export function RoutingPolicyBanner({
 			</Typography.Text>
 			<div className="routing-policies-info-banner-right">
 				<Switch
-					checked={notificationSettings.routingPolicies}
-					data-testid="routing-policies-switch"
+					value={notificationSettings.routingPolicies}
+					testId="routing-policies-switch"
 					onChange={(value): void => {
 						setNotificationSettings({
 							type: 'SET_ROUTING_POLICIES',
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { Info } from '@signozhq/icons';

@@ -49,7 +50,7 @@ function AdvancedOptionItem({
 				>
 					{input}
 				</div>
-				<Switch onChange={handleOnToggle} checked={showInput} />
+				<Switch onChange={handleOnToggle} value={showInput} />
 			</div>
 		</div>
 	);
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
@@ -5,7 +5,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select, Switch, Tag } from 'antd';
+import { Button, Collapse, Input, Select, Tag } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
@@ -763,7 +764,7 @@ function VariableItem({
 									</Typography>
 								</LabelContainer>
 								<Switch
-									checked={variableMultiSelect}
+									value={variableMultiSelect}
 									onChange={(e): void => {
 										setVariableMultiSelect(e);
 										if (!e) {
@@ -780,7 +781,7 @@ function VariableItem({
 										</Typography>
 									</LabelContainer>
 									<Switch
-										checked={variableShowALLOption}
+										value={variableShowALLOption}
 										onChange={(e): void => setVariableShowALLOption(e)}
 									/>
 								</VariableItemRow>
--- a/frontend/src/container/DashboardContainer/DashboardSettings/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/index.tsx
@@ -1,4 +1,5 @@
-import { Button, Tabs, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { Tabs } from '@signozhq/ui/tabs';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Braces, Globe, Table } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -73,7 +74,7 @@ function DashboardSettings({
 		...(enablePublicDashboard ? [publicDashboardItem] : []),
 	];

-	return <Tabs items={items} animated className="settings-tabs" />;
+	return <Tabs items={items} className="settings-tabs" />;
 }

 export default DashboardSettings;
--- a/frontend/src/container/FormAlertChannels/index.tsx
+++ b/frontend/src/container/FormAlertChannels/index.tsx
@@ -1,6 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select, Switch } from 'antd';
+import { Form, FormInstance, Input, Select } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
@@ -82,8 +83,8 @@ function FormAlertChannels({
 					name="send_resolved"
 				>
 					<Switch
-						defaultChecked={initialValue?.send_resolved}
-						data-testid="field-send-resolved-checkbox"
+						defaultValue={initialValue?.send_resolved}
+						testId="field-send-resolved-checkbox"
 						onChange={(value): void => {
 							setSelectedConfig((state) => ({
 								...state,
--- a/frontend/src/container/FormAlertRules/BasicInfo.tsx
+++ b/frontend/src/container/FormAlertRules/BasicInfo.tsx
@@ -2,7 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { Plus } from '@signozhq/icons';
-import { Button, Flex, Form, Select, Switch, Tooltip } from 'antd';
+import { Button, Flex, Form, Select, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -198,10 +199,10 @@ function BasicInfo({
 						placement="right"
 					>
 						<Switch
-							checked={shouldBroadCastToAllChannels}
+							value={shouldBroadCastToAllChannels}
 							onChange={handleBroadcastToAllChannels}
 							disabled={noChannels || !!isLoading}
-							data-testid="alert-broadcast-to-all-channels"
+							testId="alert-broadcast-to-all-channels"
 						/>
 					</Tooltip>
 				</FormItemMedium>
--- a/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
+++ b/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
@@ -15,13 +15,13 @@ import {
 	Modal,
 	Row,
 	Select,
-	Switch,
 	Table,
 	TablePaginationConfig,
 	TableProps as AntDTableProps,
 	Tag,
 	Tooltip,
 } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import type { CollapseProps } from 'antd/lib';
@@ -1180,8 +1180,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					<div className="limit-enable-disable-toggle">
 																						<Form.Item name="enableDailyLimit">
 																							<Switch
-																								size="small"
-																								checked={activeSignal?.config?.day?.enabled}
+																								value={activeSignal?.config?.day?.enabled}
 																								onChange={(value): void => {
 																									setActiveSignal((prev) =>
 																										prev
@@ -1270,8 +1269,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					<div className="limit-enable-disable-toggle">
 																						<Form.Item name="enableSecondLimit">
 																							<Switch
-																								size="small"
-																								checked={activeSignal?.config?.second?.enabled}
+																								value={activeSignal?.config?.second?.enabled}
 																								onChange={(value): void => {
 																									setActiveSignal((prev) =>
 																										prev
--- a/frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx
+++ b/frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx
@@ -1,4 +1,5 @@
-import { Button, Tabs, TabsProps } from 'antd';
+import { Button } from 'antd';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import { Typography } from '@signozhq/ui/typography';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { CableCar, Group } from '@signozhq/icons';
@@ -22,7 +23,7 @@ function IntegrationDetailContent(
 ): JSX.Element {
 	const { activeDetailTab, integrationData, integrationId, setActiveDetailTab } =
 		props;
-	const items: TabsProps['items'] = [
+	const items: TabItemProps[] = [
 		{
 			key: 'overview',
 			label: (
@@ -81,11 +82,7 @@ function IntegrationDetailContent(
 	];
 	return (
 		<div className="integration-detail-container">
-			<Tabs
-				activeKey={activeDetailTab}
-				items={items}
-				onChange={setActiveDetailTab}
-			/>
+			<Tabs value={activeDetailTab} items={items} onChange={setActiveDetailTab} />
 		</div>
 	);
 }
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -21,11 +21,11 @@ import {
 	Modal,
 	Popover,
 	Skeleton,
-	Switch,
 	Table,
 	Tag,
 	Tooltip,
 } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { TableProps } from 'antd/lib';
 import getLocalStorageKey from 'api/browser/localstorage/get';
@@ -965,8 +965,7 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
-									checked
+									value
 									disabled
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
@@ -985,9 +984,8 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
 									disabled
-									checked
+									value
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
 											...prev,
@@ -1005,8 +1003,7 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
-									checked={visibleColumns.updatedAt}
+									value={visibleColumns.updatedAt}
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
 											...prev,
@@ -1024,8 +1021,7 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
-									checked={visibleColumns.updatedBy}
+									value={visibleColumns.updatedBy}
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
 											...prev,
--- a/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
@@ -228,9 +228,8 @@ function LiveLogsContainer({
 					<div className="live-logs-frequency-chart-view-controller">
 						<Typography>Frequency chart</Typography>
 						<Switch
-							size="small"
-							checked={showLiveLogsFrequencyChart}
-							defaultChecked
+							value={showLiveLogsFrequencyChart}
+							defaultValue
 							onChange={handleToggleFrequencyChart}
 						/>
 					</div>
--- a/frontend/src/container/LogDetailedView/JsonView.tsx
+++ b/frontend/src/container/LogDetailedView/JsonView.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { useIsDarkMode } from 'hooks/useDarkMode';

@@ -81,7 +81,7 @@ function JSONView({ logData }: JSONViewProps): JSX.Element {
 				<div className="log-switch">
 					<div className="wrap-word-switch">
 						<Typography.Text>Wrap text</Typography.Text>
-						<Switch checked={isWrapWord} onChange={handleWrapWord} size="small" />
+						<Switch value={isWrapWord} onChange={handleWrapWord} />
 					</div>
 				</div>
 			</div>
--- a/frontend/src/container/LogDetailedView/Overview.tsx
+++ b/frontend/src/container/LogDetailedView/Overview.tsx
@@ -2,7 +2,8 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Collapse, Divider, Input, Switch, Tag } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Collapse, Divider, Input, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -136,7 +137,7 @@ function Overview({
 								<div className="log-switch">
 									<div className="wrap-word-switch">
 										<Typography.Text>Wrap text</Typography.Text>
-										<Switch checked={isWrapWord} onChange={handleWrapWord} size="small" />
+										<Switch value={isWrapWord} onChange={handleWrapWord} />
 									</div>
 								</div>
 							</div>
--- a/frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx
+++ b/frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx
@@ -1,4 +1,4 @@
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
@@ -69,9 +69,8 @@ function LogsActionsContainer({
 						<div className="frequency-chart-view-controller">
 							<Typography>Frequency chart</Typography>
 							<Switch
-								size="small"
-								checked={showFrequencyChart}
-								defaultChecked
+								value={showFrequencyChart}
+								defaultValue
 								onChange={handleToggleFrequencyChart}
 							/>
 						</div>
--- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
+++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
@@ -5,11 +5,11 @@ import { useParams } from 'react-router-dom';
 import { Search } from '@signozhq/icons';
 import {
 	InputRef,
-	Switch,
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 	Tooltip,
 } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { ResizeTable } from 'components/ResizeTable';
 import TextToolTip from 'components/TextToolTip';
@@ -212,11 +212,7 @@ function TopOperationsTable({
 					/>
 				</div>
 				<div className="top-operation__entry-point">
-					<Switch
-						checked={isEntryPoint}
-						onChange={onEntryPointToggle}
-						size="small"
-					/>
+					<Switch value={isEntryPoint} onChange={onEntryPointToggle} />
 					<span className="top-operation__entry-point-label">Entrypoint Spans</span>
 					<TextToolTip
 						text={entryPointSpanInfo.text}
--- a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Switch, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -358,10 +359,9 @@ function Explorer(): JSX.Element {
 							title={oneChartPerQueryDisabledTooltip}
 						>
 							<Switch
-								checked={showOneChartPerQuery}
+								value={showOneChartPerQuery}
 								onChange={handleToggleShowOneChartPerQuery}
 								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
-								size="small"
 							/>
 						</Tooltip>
 					</div>
--- a/frontend/src/container/MetricsExplorer/Inspect/GraphView.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/GraphView.tsx
@@ -2,7 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Skeleton, Switch } from 'antd';
+import { Button, Skeleton } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import Uplot from 'components/Uplot';
@@ -206,7 +207,7 @@ function GraphView({
 				</Button.Group>
 				<div className="view-toggle-button">
 					<Switch
-						checked={viewType === 'graph'}
+						value={viewType === 'graph'}
 						onChange={(checked): void => {
 							const newViewType = checked ? 'graph' : 'table';
 							setViewType(newViewType);
--- a/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx
+++ b/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import { Delete } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
@@ -49,10 +49,10 @@ function TimezoneAdaptation(): JSX.Element {
 			<div className="timezone-adaption__header">
 				<h2 className="timezone-adaption__title">Adapt to my timezone</h2>
 				<Switch
-					checked={isAdaptationEnabled}
+					value={isAdaptationEnabled}
 					onChange={handleSwitchChange}
 					style={getSwitchStyles()}
-					data-testid="timezone-adaptation-switch"
+					testId="timezone-adaptation-switch"
 				/>
 			</div>

--- a/frontend/src/container/MySettings/UserInfo/UserInfo.styles.scss
+++ b/frontend/src/container/MySettings/UserInfo/UserInfo.styles.scss
@@ -127,6 +127,12 @@
 				flex-direction: column;
 				gap: 8px;
 				padding-bottom: 16px;
+
+				.password-error-text {
+					font-size: var(--font-size-xs);
+					color: var(--bg-cherry-400);
+					margin-top: 2px;
+				}
 			}

 			.ant-color-picker-trigger {
--- a/frontend/src/container/MySettings/UserInfo/index.tsx
+++ b/frontend/src/container/MySettings/UserInfo/index.tsx
@@ -1,25 +1,27 @@
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import {
 	updateMyPassword,
 	useUpdateMyUserV2,
 } from 'api/generated/services/users';
-import { useNotifications } from 'hooks/useNotifications';
+import { toast } from '@signozhq/ui/sonner';
 import { Check, FileTerminal, Mail, User } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { ErrorV2Resp } from 'types/api';
+import { AxiosError } from 'axios';

 import '../MySettings.styles.scss';
 import './UserInfo.styles.scss';

 function UserInfo(): JSX.Element {
 	const { user, org, updateUser } = useAppContext();
-	const { t } = useTranslation(['routes', 'settings', 'common']);

-	const { notifications } = useNotifications();
+	const { showErrorModal } = useErrorModal();
 	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();

 	const [currentPassword, setCurrentPassword] = useState<string>('');
@@ -47,6 +49,8 @@ function UserInfo(): JSX.Element {

 	const hideResetPasswordModal = (): void => {
 		setIsResetPasswordModalOpen(false);
+		setCurrentPassword('');
+		setUpdatePassword('');
 	};

 	const onChangePasswordClickHandler = async (): Promise<void> => {
@@ -57,27 +61,29 @@ function UserInfo(): JSX.Element {
 				newPassword: updatePassword,
 				oldPassword: currentPassword,
 			});
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
+			toast.success('Password updated successfully');
 			hideResetPasswordModal();
 			setIsLoading(false);
 		} catch (error) {
 			setIsLoading(false);
-			notifications.error({
-				message: (error as APIError).error.error.code,
-				description: (error as APIError).error.error.message,
-			});
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
 		}
 	};

+	const passwordsMatch =
+		currentPassword.length > 0 &&
+		updatePassword.length > 0 &&
+		currentPassword === updatePassword;
+
 	const isResetPasswordDisabled =
 		isLoading ||
 		currentPassword.length === 0 ||
 		updatePassword.length === 0 ||
-		currentPassword === updatePassword;
+		passwordsMatch;

 	const onSaveHandler = async (): Promise<void> => {
 		void logEvent('Account Settings: Name Updated', {
@@ -94,11 +100,7 @@ function UserInfo(): JSX.Element {
 			setIsLoading(true);
 			await updateMyUser({ data: { displayName: changedName } });

-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
+			toast.success('Name updated successfully');
 			updateUser({
 				...user,
 				displayName: changedName,
@@ -106,10 +108,11 @@ function UserInfo(): JSX.Element {
 			setIsLoading(false);
 			hideUpdateNameModal();
 		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
 		}
 		setIsLoading(false);
 	};
@@ -166,7 +169,7 @@ function UserInfo(): JSX.Element {
 						type="primary"
 						icon={<Check size={16} />}
 						onClick={onSaveHandler}
-						disabled={isLoading}
+						loading={isLoading}
 						data-testid="update-name-btn"
 					>
 						Update name
@@ -178,7 +181,11 @@ function UserInfo(): JSX.Element {
 					<Input
 						placeholder="e.g. John Doe"
 						value={changedName}
+						disabled={isLoading}
 						onChange={(e): void => setChangedName(e.target.value)}
+						onPressEnter={(): void => {
+							void onSaveHandler();
+						}}
 					/>
 				</div>
 			</Modal>
@@ -188,6 +195,7 @@ function UserInfo(): JSX.Element {
 				title={<span className="title">Reset password</span>}
 				open={isResetPasswordModalOpen}
 				closable
+				destroyOnClose
 				onCancel={hideResetPasswordModal}
 				footer={[
 					<Button
@@ -197,7 +205,8 @@ function UserInfo(): JSX.Element {
 						}`}
 						icon={<Check size={16} />}
 						onClick={onChangePasswordClickHandler}
-						disabled={isLoading || isResetPasswordDisabled}
+						loading={isLoading}
+						disabled={isResetPasswordDisabled}
 						data-testid="reset-password-btn"
 					>
 						Reset password
@@ -218,6 +227,11 @@ function UserInfo(): JSX.Element {
 							type="password"
 							autoComplete="off"
 							visibilityToggle
+							onPressEnter={(): void => {
+								if (!isResetPasswordDisabled) {
+									void onChangePasswordClickHandler();
+								}
+							}}
 						/>
 					</div>

@@ -235,7 +249,18 @@ function UserInfo(): JSX.Element {
 							type="password"
 							autoComplete="off"
 							visibilityToggle={false}
+							status={passwordsMatch ? 'error' : ''}
+							onPressEnter={(): void => {
+								if (!isResetPasswordDisabled) {
+									void onChangePasswordClickHandler();
+								}
+							}}
 						/>
+						{passwordsMatch && (
+							<span className="password-error-text">
+								New password must be different from current password
+							</span>
+						)}
 					</div>
 				</div>
 			</Modal>
--- a/frontend/src/container/MySettings/tests/MySettings.test.tsx
+++ b/frontend/src/container/MySettings/tests/MySettings.test.tsx
@@ -8,11 +8,23 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import APIError from 'types/api/error';
+import { toast } from '@signozhq/ui/sonner';

 const toggleThemeFunction = jest.fn();
 const logEventFunction = jest.fn();
 const copyToClipboardFn = jest.fn();
 const editUserFn = jest.fn();
+const updateMyPasswordFn = jest.fn();
+const showErrorModalFn = jest.fn();
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));

 jest.mock('react-use', () => ({
 	__esModule: true,
@@ -24,12 +36,21 @@ jest.mock('react-use', () => ({

 jest.mock('api/generated/services/users', () => ({
 	...jest.requireActual('api/generated/services/users'),
+	updateMyPassword: (...args: unknown[]): Promise<unknown> =>
+		updateMyPasswordFn(...args),
 	useUpdateMyUserV2: jest.fn(() => ({
 		mutateAsync: (...args: unknown[]): Promise<unknown> => editUserFn(...args),
 		isLoading: false,
 	})),
 }));

+jest.mock('providers/ErrorModalProvider', () => ({
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal: showErrorModalFn,
+	})),
+}));
+
 jest.mock('hooks/useDarkMode', () => ({
 	__esModule: true,
 	useIsDarkMode: jest.fn(() => true),
@@ -65,12 +86,12 @@ const NEW_PASSWORD_TEST_ID = 'new-password-textbox';
 const UPDATE_NAME_BUTTON_TEST_ID = 'update-name-btn';
 const RESET_PASSWORD_BUTTON_TEST_ID = 'reset-password-btn';
 const UPDATE_NAME_BUTTON_TEXT = 'Update name';
-const PASSWORD_VALIDATION_MESSAGE_TEST_ID = 'password-validation-message';

 describe('MySettings Flows', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		editUserFn.mockResolvedValue({});
+		updateMyPasswordFn.mockResolvedValue({});
 		render(<MySettingsContainer />);
 	});

@@ -152,9 +173,7 @@ describe('MySettings Flows', () => {
 			fireEvent.click(modalUpdateNameButton);

 			await waitFor(() =>
-				expect(successNotification).toHaveBeenCalledWith({
-					message: 'success',
-				}),
+				expect(toast.success).toHaveBeenCalledWith('Name updated successfully'),
 			);
 		});
 	});
@@ -181,22 +200,131 @@ describe('MySettings Flows', () => {
 			expect(screen.getByTestId(NEW_PASSWORD_TEST_ID)).toBeInTheDocument();
 		});

-		it('Should display validation error if password is less than 8 characters', async () => {
+		it('Should show inline error when new password matches current password', async () => {
 			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
 			fireEvent.click(resetPasswordButtons[0]);

-			const currentPasswordTextbox = screen.getByTestId(CURRENT_PASSWORD_TEST_ID);
 			act(() => {
-				fireEvent.change(currentPasswordTextbox, { target: { value: '123' } });
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
 			});

+			expect(
+				screen.getByText('New password must be different from current password'),
+			).toBeInTheDocument();
+			expect(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID)).toBeDisabled();
+		});
+
+		it('Should hide inline error when passwords are changed to be different', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+			});
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'differentPassword1' },
+				});
+			});
+
+			expect(
+				screen.queryByText('New password must be different from current password'),
+			).not.toBeInTheDocument();
+		});
+
+		it('Should show error modal when password reset API returns an error', async () => {
+			updateMyPasswordFn.mockRejectedValue(
+				new Error('Current password is incorrect'),
+			);
+
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'oldPassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'newPassword1' },
+				});
+			});
+
+			fireEvent.click(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID));
+
 			await waitFor(() => {
-				// Use getByTestId for the validation message (if present in your modal/component)
-				if (screen.queryByTestId(PASSWORD_VALIDATION_MESSAGE_TEST_ID)) {
-					expect(
-						screen.getByTestId(PASSWORD_VALIDATION_MESSAGE_TEST_ID),
-					).toBeInTheDocument();
-				}
+				expect(showErrorModalFn).toHaveBeenCalledWith(expect.any(APIError));
+			});
+		});
+
+		it('Should show success toast and close modal on successful password reset', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'oldPassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'newPassword1' },
+				});
+			});
+
+			fireEvent.click(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID));
+
+			await waitFor(() => {
+				expect(toast.success).toHaveBeenCalledWith('Password updated successfully');
+				expect(
+					screen.queryByTestId(CURRENT_PASSWORD_TEST_ID),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('Should clear password fields when modal is cancelled', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'somePassword' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'otherPassword' },
+				});
+			});
+
+			expect(screen.getByTestId(CURRENT_PASSWORD_TEST_ID)).toHaveValue(
+				'somePassword',
+			);
+
+			// Close the modal
+			const closeButton = document.querySelector(
+				'.reset-password-modal .ant-modal-close',
+			) as HTMLElement;
+			fireEvent.click(closeButton);
+
+			// Reopen the modal
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId(CURRENT_PASSWORD_TEST_ID),
+				).not.toBeInTheDocument();
+			});
+
+			fireEvent.click(screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT)[0]);
+
+			await waitFor(() => {
+				expect(screen.getByTestId(CURRENT_PASSWORD_TEST_ID)).toHaveValue('');
+				expect(screen.getByTestId(NEW_PASSWORD_TEST_ID)).toHaveValue('');
 			});
 		});

--- a/frontend/src/container/MySettings/index.tsx
+++ b/frontend/src/container/MySettings/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Radio, RadioChangeEvent, Switch, Tag } from 'antd';
+import { Radio, RadioChangeEvent, Tag } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -218,10 +219,10 @@ function MySettings(): JSX.Element {
 						<div className="user-preference-section-content-item-title-action">
 							Keep the primary sidebar always open{' '}
 							<Switch
-								checked={sideNavPinned}
+								value={sideNavPinned}
 								onChange={handleSideNavPinnedChange}
-								loading={isUpdatingUserPreference}
-								data-testid="side-nav-pinned-switch"
+								disabled={isUpdatingUserPreference}
+								testId="side-nav-pinned-switch"
 							/>
 						</div>

--- a/frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	FillMode,
@@ -73,7 +73,7 @@ export default function ChartAppearanceSection({
 							Display individual data points on the chart
 						</Typography.Text>
 					</div>
-					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
+					<Switch value={showPoints} onChange={setShowPoints} />
 				</section>
 			)}
 			{allowSpanGaps && (
--- a/frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { InputNumber, Switch } from 'antd';
+import { InputNumber } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';

 import SettingsSection from '../../components/SettingsSection/SettingsSection';
@@ -61,8 +62,7 @@ export default function HistogramBucketsSection({
 						</span>
 					</Typography.Text>
 					<Switch
-						checked={combineHistogram}
-						size="small"
+						value={combineHistogram}
 						onChange={(checked): void => setCombineHistogram(checked)}
 					/>
 				</section>
--- a/frontend/src/container/NewWidget/RightContainer/SettingSections/VisualizationSettingsSection/VisualizationSettingsSection.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/SettingSections/VisualizationSettingsSection/VisualizationSettingsSection.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Select, Switch } from 'antd';
+import { Select } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -104,8 +105,7 @@ export default function VisualizationSettingsSection({
 				<section className="stack-chart control-container">
 					<Typography.Text className="section-heading">Stack series</Typography.Text>
 					<Switch
-						checked={stackedBarChart}
-						size="small"
+						value={stackedBarChart}
 						onChange={(checked): void => setStackedBarChart(checked)}
 					/>
 				</section>
@@ -120,8 +120,7 @@ export default function VisualizationSettingsSection({
 						</Typography.Text>
 					</div>
 					<Switch
-						checked={isFillSpans}
-						size="small"
+						value={isFillSpans}
 						onChange={(checked): void => setIsFillSpans(checked)}
 					/>
 				</section>
--- a/frontend/src/container/NewWidget/test/NewWidget.test.tsx
+++ b/frontend/src/container/NewWidget/test/NewWidget.test.tsx
@@ -341,10 +341,10 @@ describe('Stacking bar in new panel', () => {
 		const section = container.querySelector('.stack-chart');
 		expect(section).toBeInTheDocument();

-		// Verify switch is present and enabled (ant-switch-checked)
-		const switchBtn = section?.querySelector('.ant-switch');
+		// Verify switch is present and enabled
+		const switchBtn = section?.querySelector('[role="switch"]');
 		expect(switchBtn).toBeInTheDocument();
-		expect(switchBtn).toHaveClass('ant-switch-checked');
+		expect(switchBtn).toHaveAttribute('data-state', 'checked');

 		// Check that stack series is present and checked
 		checkStackSeriesState(container, true);
--- a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
-import { Flex, Form, Input, Space, Switch, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Flex, Form, Input, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';

 import { PREDEFINED_MAPPING } from '../config';
@@ -58,11 +59,7 @@ function JsonFlattening({
 				initialValue={isAdd ? true : selectedProcessorData?.enable_paths}
 			>
 				<Space>
-					<Switch
-						size="small"
-						checked={enablePaths}
-						onChange={handleEnablePathsChange}
-					/>
+					<Switch value={enablePaths} onChange={handleEnablePathsChange} />
 					Enable Paths
 				</Space>
 			</Form.Item>
@@ -79,11 +76,7 @@ function JsonFlattening({

 			<Form.Item className="json-flattening-form__item">
 				<Space>
-					<Switch
-						size="small"
-						checked={enableMapping}
-						onChange={handleEnableMappingChange}
-					/>
+					<Switch value={enableMapping} onChange={handleEnableMappingChange} />
 					<Flex gap="8px" align="center">
 						Enable Mapping
 						<Tooltip title="The order of filled keys will determine the priority of keys i.e. earlier keys have higher precedence">
--- a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, Select, Space, Switch } from 'antd';
+import { Form, Input, Select, Space } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';

@@ -92,8 +93,7 @@ function ProcessorFieldInput({
 					>
 						<Space>
 							<Switch
-								size="small"
-								checked={form.getFieldValue('enable_flattening')}
+								value={form.getFieldValue('enable_flattening')}
 								onChange={(checked: boolean): void => {
 									form.setFieldValue('enable_flattening', checked);
 								}}
--- a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/DragAction.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/DragAction.tsx
@@ -1,5 +1,5 @@
 import { GripVertical } from '@signozhq/icons';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';

 import { holdIconStyle } from '../config';
 import { LastActionColumn } from '../styles';
@@ -7,7 +7,7 @@ import { LastActionColumn } from '../styles';
 function DragAction({ isEnabled, onChange }: DragActionProps): JSX.Element {
 	return (
 		<LastActionColumn>
-			<Switch defaultChecked={isEnabled} onChange={onChange} />
+			<Switch defaultValue={isEnabled} onChange={onChange} />
 			<GripVertical size="lg" style={holdIconStyle} />
 		</LastActionColumn>
 	);
--- a/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx
@@ -191,7 +191,7 @@ describe('PipelinePage container test', () => {
 		await fireEvent.click(expandIcon[0]);

 		const switchToggle = document.querySelector(
-			'.ant-table-expanded-row .ant-switch',
+			'.ant-table-expanded-row [role="switch"]',
 		);

 		expect(switchToggle).toBeChecked();
@@ -244,7 +244,7 @@ describe('PipelinePage container test', () => {
 		const addNewPipelineBtn = getByText('add_new_pipeline');
 		expect(addNewPipelineBtn).toBeInTheDocument();

-		const switchToggle = document.querySelectorAll('.ant-switch');
+		const switchToggle = document.querySelectorAll('[role="switch"]');

 		expect(switchToggle[0]).not.toBeChecked();
 		await fireEvent.click(switchToggle[0] as HTMLElement);
--- a/frontend/src/container/PipelinePage/tests/snapshots/DragAction.test.tsx.snap
+++ b/frontend/src/container/PipelinePage/tests/snapshots/DragAction.test.tsx.snap
@@ -21,26 +21,25 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
 <div
    class="c0"
  >
-    <button
-      aria-checked="true"
-      class="ant-switch css-dev-only-do-not-override-2i2tap ant-switch-checked"
-      role="switch"
-      type="button"
+    <div
+      class="_switch-wrapper_jbsv7_1"
    >
-      <div
-        class="ant-switch-handle"
-      />
-      <span
-        class="ant-switch-inner"
+      <button
+        aria-checked="true"
+        class="_switch_jbsv7_1"
+        data-color="robin"
+        data-state="checked"
+        id=":r0:"
+        role="switch"
+        type="button"
+        value="on"
      >
        <span
-          class="ant-switch-inner-checked"
+          class="_switch__thumb_jbsv7_59"
+          data-state="checked"
        />
-        <span
-          class="ant-switch-inner-unchecked"
-        />
-      </span>
-    </button>
+      </button>
+    </div>
    <svg
      style="font-size: 1rem; cursor: move;"
    />
--- a/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.authz.test.tsx
--- a/frontend/src/container/RolesSettings/tests/RolesSettings.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/tests/RolesSettings.authz.test.tsx
--- a/frontend/src/container/RolesSettings/tests/utils.authz.test.ts
+++ b/frontend/src/container/RolesSettings/tests/utils.authz.test.ts
--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.authz.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.authz.test.tsx
--- a/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.authz.integration.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.authz.integration.test.tsx
--- a/frontend/src/hooks/useAuthZ/useAuthZ.authz.test.tsx
+++ b/frontend/src/hooks/useAuthZ/useAuthZ.authz.test.tsx
@@ -48,11 +48,10 @@ describe('useAuthZ', () => {
 			expect(result.current.isLoading).toBe(false);
 		});

-		expect(result.current.error).toBeNull();
 		expect(result.current.permissions).toStrictEqual(expectedResponse);
 	});

-	it('should handle API errors', async () => {
+	it('should return error and null permissions when API errors', async () => {
 		const permission = buildPermission('read', 'role:*');

 		server.use(
@@ -191,7 +190,6 @@ describe('useAuthZ', () => {
 		});

 		expect(result.current.isLoading).toBe(false);
-		expect(result.current.error).toBeNull();
 		expect(result.current.permissions).toStrictEqual({});
 	});

--- a/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx
+++ b/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Divider, Dropdown, MenuProps, Switch, Tooltip } from 'antd';
+import { Divider, Dropdown, MenuProps, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
 import {
@@ -132,11 +133,7 @@ function AlertActionButtons({
 			<div className="alert-action-buttons">
 				<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
 					{isAlertRuleDisabled !== undefined && (
-						<Switch
-							size="small"
-							onChange={toggleAlertRule}
-							checked={!isAlertRuleDisabled}
-						/>
+						<Switch onChange={toggleAlertRule} value={!isAlertRuleDisabled} />
 					)}
 				</Tooltip>
 				<CopyToClipboard textToCopy={window.location.href} />
--- a/frontend/src/pages/MetricsApplication/MetricsApplication.tsx
+++ b/frontend/src/pages/MetricsApplication/MetricsApplication.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import { Tabs, TabsProps } from 'antd';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import { QueryParams } from 'constants/query';
 import DBCall from 'container/MetricsApplication/Tabs/DBCall';
 import External from 'container/MetricsApplication/Tabs/External';
@@ -24,7 +24,7 @@ function MetricsApplication(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const { safeNavigate } = useSafeNavigate();

-	const items: TabsProps['items'] = [
+	const items: TabItemProps[] = [
 		{
 			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
 			key: MetricsApplicationTab.OVER_METRICS,
@@ -53,9 +53,8 @@ function MetricsApplication(): JSX.Element {
 			<ApDexApplication />
 			<Tabs
 				items={items}
-				activeKey={activeKey}
+				value={activeKey}
 				className="service-route-tab"
-				destroyInactiveTabPane
 				onChange={onTabChange}
 			/>
 		</div>
--- a/frontend/src/pages/Pipelines/index.tsx
+++ b/frontend/src/pages/Pipelines/index.tsx
@@ -2,8 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import * as Sentry from '@sentry/react';
-import type { TabsProps } from 'antd';
-import { Tabs } from 'antd';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import getPipeline from 'api/pipeline/get';
 import Spinner from 'components/Spinner';
 import ChangeHistory from 'container/PipelinePage/Layouts/ChangeHistory';
@@ -46,7 +45,7 @@ function Pipelines(): JSX.Element {
 		refetchInterval: pipelineRefetchInterval,
 	});

-	const tabItems: TabsProps['items'] = useMemo(
+	const tabItems: TabItemProps[] = useMemo(
 		() => [
 			{
 				key: 'pipelines',
@@ -83,11 +82,7 @@ function Pipelines(): JSX.Element {

 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<Tabs
-				className="pipeline-tabs"
-				defaultActiveKey="pipelines"
-				items={tabItems}
-			/>
+			<Tabs className="pipeline-tabs" defaultValue="pipelines" items={tabItems} />
 		</Sentry.ErrorBoundary>
 	);
 }
--- a/frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx
+++ b/frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx
@@ -5,7 +5,8 @@ import {
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/resizable';
-import { Button, Tabs } from 'antd';
+import { Button } from 'antd';
+import { Tabs } from '@signozhq/ui/tabs';
 import FlamegraphImg from 'assets/TraceDetail/Flamegraph';
 import cx from 'classnames';
 import TraceFlamegraph from 'container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph';
@@ -146,7 +147,7 @@ function TraceDetailsV2(): JSX.Element {
 					notFound={noData}
 				/>
 				{!noData ? (
-					<Tabs items={items} animated className="trace-visualisation-tabs" />
+					<Tabs items={items} className="trace-visualisation-tabs" />
 				) : (
 					<NoData />
 				)}
--- a/frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx
+++ b/frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx
@@ -6,9 +6,9 @@ import {
 	Form,
 	MenuProps,
 	Space,
-	Switch,
 	Tooltip,
 } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import cx from 'classnames';
 import { FilterSelect } from 'components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions';
 import { QueryParams } from 'constants/query';
@@ -201,8 +201,7 @@ function FunnelStep({
 					<div className="error">
 						<Switch
 							className="error__switch"
-							size="small"
-							checked={stepData.has_errors}
+							value={stepData.has_errors}
 							disabled={!hasEditPermission}
 							onChange={(): void =>
 								onStepChange(index, { has_errors: !stepData.has_errors })
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
-import type { TabsProps } from 'antd';
+import type { TabItemProps } from '@signozhq/ui/tabs';
 import {
 	Alert,
 	Button,
@@ -14,8 +14,8 @@ import {
 	Row,
 	Skeleton,
 	Space,
-	Tabs,
 } from 'antd';
+import { Tabs } from '@signozhq/ui/tabs';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -154,7 +154,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 				/>
 			));

-	const tabItems: TabsProps['items'] = [
+	const tabItems: TabItemProps[] = [
 		{
 			key: 'whyChooseSignoz',
 			label: t('whyChooseSignoz'),
@@ -398,8 +398,8 @@ export default function WorkspaceBlocked(): JSX.Element {
 							<div className="workspace-locked__tabs">
 								<Tabs
 									items={tabItems}
-									defaultActiveKey="youAreInGoodCompany"
-									onTabClick={handleTabClick}
+									defaultValue="youAreInGoodCompany"
+									onChange={handleTabClick}
 								/>
 							</div>
 						</>
--- a/frontend/src/periscope/components/JsonView/JsonView.tsx
+++ b/frontend/src/periscope/components/JsonView/JsonView.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { useIsDarkMode } from 'hooks/useDarkMode';

@@ -72,9 +72,8 @@ function JsonView({ data, height = '575px' }: JsonViewProps): JSX.Element {
 				<div className="json-view__wrap-toggle">
 					<Typography.Text>Wrap text</Typography.Text>
 					<Switch
-						checked={isWrapWord}
+						value={isWrapWord}
 						onChange={(checked): void => setIsWrapWord(checked)}
-						size="small"
 					/>
 				</div>
 			</div>
--- a/frontend/src/periscope/components/PrettyView/PrettyView.tsx
+++ b/frontend/src/periscope/components/PrettyView/PrettyView.tsx
@@ -227,10 +227,8 @@ function PrettyView({
 						menu={{ items: menuItems }}
 						align="start"
 						className="pretty-view-actions-dropdown"
-						// onClick on the dropdown content is forwarded to the underlying div via ...props
-						// but is not in the public type. Stop click bubbling so item clicks don't reach
-						// clickable ancestors of the trigger through the React tree.
-						// @ts-expect-error see comment above
+						// Stop click bubbling so item clicks don't reach clickable ancestors
+						// of the trigger through the React tree.
 						onClick={(e: React.MouseEvent): void => e.stopPropagation()}
 					>
 						<span
--- a/frontend/src/providers/App/App.tsx
+++ b/frontend/src/providers/App/App.tsx
@@ -129,14 +129,13 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 	const {
 		permissions: permissionsResult,
 		isFetching: isFetchingPermissions,
-		error: errorOnPermissions,
 		refetchPermissions,
 	} = useAuthZ([IsAdminPermission, IsEditorPermission, IsViewerPermission], {
 		enabled: isLoggedIn,
 	});

 	const isFetchingUser = isFetchingUserData || isFetchingPermissions;
-	const userFetchError = userFetchDataError || errorOnPermissions;
+	const userFetchError = userFetchDataError;

 	const userRole = useMemo(() => {
 		if (permissionsResult?.[IsAdminPermission]?.isGranted) {
--- a/frontend/src/providers/App/tests/App.test.tsx
+++ b/frontend/src/providers/App/tests/App.test.tsx
@@ -298,9 +298,32 @@ describe('AppProvider when authz/check fails', () => {
 	beforeEach(() => {
 		queryClient.clear();
 		setLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN, 'true');
+		server.use(
+			rest.get(MY_USER_URL, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						data: {
+							id: 'u-1',
+							displayName: 'Test User',
+							email: 'test@signoz.io',
+							orgId: 'org-1',
+							isRoot: false,
+							status: 'active',
+						},
+					}),
+				),
+			),
+			rest.get(MY_ORG_URL, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ data: { id: 'org-1', displayName: 'Org' } }),
+				),
+			),
+		);
 	});

-	it('sets userFetchError when authz/check returns 500 (same as user fetch error)', async () => {
+	it('does not set userFetchError when authz/check returns 500 (authz errors are ignored)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_, res, ctx) =>
 				res(ctx.status(500), ctx.json({ error: 'Internal Server Error' })),
@@ -314,13 +337,13 @@ describe('AppProvider when authz/check fails', () => {

 		await waitFor(
 			() => {
-				expect(result.current.userFetchError).toBeTruthy();
+				expect(result.current.userFetchError).toBeFalsy();
 			},
 			{ timeout: 2000 },
 		);
 	});

-	it('sets userFetchError when authz/check fails with network error (same as user fetch error)', async () => {
+	it('does not set userFetchError when authz/check fails with network error (authz errors are ignored)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_, res) => res.networkError('Network error')),
 		);
@@ -332,7 +355,7 @@ describe('AppProvider when authz/check fails', () => {

 		await waitFor(
 			() => {
-				expect(result.current.userFetchError).toBeTruthy();
+				expect(result.current.userFetchError).toBeFalsy();
 			},
 			{ timeout: 2000 },
 		);
--- a/pkg/types/inframonitoringtypes/clusters.go
+++ b/pkg/types/inframonitoringtypes/clusters.go
@@ -10,7 +10,7 @@ import (

 type Clusters struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []ClusterRecord        `json:"records" required:"true"`
+	Records                []ClusterRecord        `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/daemonsets.go
+++ b/pkg/types/inframonitoringtypes/daemonsets.go
@@ -10,7 +10,7 @@ import (

 type DaemonSets struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []DaemonSetRecord      `json:"records" required:"true"`
+	Records                []DaemonSetRecord      `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/deployments.go
+++ b/pkg/types/inframonitoringtypes/deployments.go
@@ -10,7 +10,7 @@ import (

 type Deployments struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []DeploymentRecord     `json:"records" required:"true"`
+	Records                []DeploymentRecord     `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/hosts.go
+++ b/pkg/types/inframonitoringtypes/hosts.go
@@ -10,7 +10,7 @@ import (

 type Hosts struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []HostRecord           `json:"records" required:"true"`
+	Records                []HostRecord           `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/jobs.go
+++ b/pkg/types/inframonitoringtypes/jobs.go
@@ -10,7 +10,7 @@ import (

 type Jobs struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []JobRecord            `json:"records" required:"true"`
+	Records                []JobRecord            `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/namespaces.go
+++ b/pkg/types/inframonitoringtypes/namespaces.go
@@ -10,7 +10,7 @@ import (

 type Namespaces struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []NamespaceRecord      `json:"records" required:"true"`
+	Records                []NamespaceRecord      `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/nodes.go
+++ b/pkg/types/inframonitoringtypes/nodes.go
@@ -10,7 +10,7 @@ import (

 type Nodes struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []NodeRecord           `json:"records" required:"true"`
+	Records                []NodeRecord           `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/pods.go
+++ b/pkg/types/inframonitoringtypes/pods.go
@@ -10,7 +10,7 @@ import (

 type Pods struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []PodRecord            `json:"records" required:"true"`
+	Records                []PodRecord            `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/statefulsets.go
+++ b/pkg/types/inframonitoringtypes/statefulsets.go
@@ -10,7 +10,7 @@ import (

 type StatefulSets struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []StatefulSetRecord    `json:"records" required:"true"`
+	Records                []StatefulSetRecord    `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
--- a/pkg/types/inframonitoringtypes/volumes.go
+++ b/pkg/types/inframonitoringtypes/volumes.go
@@ -10,7 +10,7 @@ import (

 type Volumes struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []VolumeRecord         `json:"records" required:"true"`
+	Records                []VolumeRecord         `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
Author	SHA1	Message	Date
Yunus M	0f0cceb927	refactor: replace antd Tabs with @signozhq/ui Tabs Migrates Tabs usage from antd to the @signozhq/ui Tabs component across dashboard settings, integration details, metrics application, pipelines, trace detail, and workspace-locked pages. API differences (activeKey → value, defaultActiveKey → defaultValue, TabsProps['items'] → TabItemProps[]) are updated to match the new component.	2026-05-22 14:33:12 +05:30
Yunus M	67e4c4611c	refactor: replace Ant Design Switch with Signoz UI Switch across mult… (#11223 ) * refactor: replace Ant Design Switch with Signoz UI Switch across multiple components * fix: update snapshot of failing test * feat: update snapshot * refactor: update imports to use Signoz UI Switch from the new path across multiple components * refactor: update banned components to use Signoz UI imports for Typography and Switch * refactor: replace Ant Design Switch with Signoz UI Switch	2026-05-22 08:50:41 +00:00
SagarRajput-7	7274421895	chore: fga ui feedbacks (#11403 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: updated the signozhq version and removed ts-expect-error from button * chore: renamed authz test with authz.test.tsx * chore: remove error from useAuthZ public API and fallbackOnError from GuardAuthZ * chore: updated test cases * chore: updated test cases * chore: restore error to useAuthZ API with fail-open default in GuardAuthZ * chore: updated test cases	2026-05-21 23:49:44 +00:00
SagarRajput-7	9c6656d6b9	fix(user-info): surfaced errors for reset password and fixed issues (#11389 ) * fix(user-info): surfaced errors for reset password and fixed issues * fix(user-info): removed notification from atnd and used toast and showerrormodal in userinfo * fix(user-info): refactor and added tests * fix(user-info): code refactor	2026-05-21 17:24:31 +00:00
Nikhil Mantri	5c54a2537c	chore: arrays non-nullable (#11388 )	2026-05-21 17:22:25 +00:00