feat(no-auth): added more authguard

cmd/authz.go

@@ -66,10 +66,9 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():              true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesServiceAccount).String(): true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                        true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesRole).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():    true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():              true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesRole).String(): true,
 	}
 
 	allowedTypes := map[string]bool{}

docs/api/openapi.yml

@@ -448,7 +448,6 @@ components:
       - delete
       - list
       - assignee
-      - attach
       type: string
     AuthtypesRole:
       properties:
@@ -9495,9 +9494,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:list
+        - ADMIN
       - tokenizer:
-        - serviceaccount:list
+        - ADMIN
       summary: List service accounts
       tags:
       - serviceaccount
@@ -9557,9 +9556,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:create
+        - ADMIN
       - tokenizer:
-        - serviceaccount:create
+        - ADMIN
       summary: Create service account
       tags:
       - serviceaccount
@@ -9607,9 +9606,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:delete
+        - ADMIN
       - tokenizer:
-        - serviceaccount:delete
+        - ADMIN
       summary: Deletes a service account
       tags:
       - serviceaccount
@@ -9664,9 +9663,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:read
+        - ADMIN
       - tokenizer:
-        - serviceaccount:read
+        - ADMIN
       summary: Gets a service account
       tags:
       - serviceaccount
@@ -9724,9 +9723,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:update
+        - ADMIN
       - tokenizer:
-        - serviceaccount:update
+        - ADMIN
       summary: Updates a service account
       tags:
       - serviceaccount
@@ -9778,9 +9777,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:read
+        - ADMIN
       - tokenizer:
-        - serviceaccount:read
+        - ADMIN
       summary: List service account keys
       tags:
       - serviceaccount
@@ -9846,9 +9845,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:update
+        - ADMIN
       - tokenizer:
-        - serviceaccount:update
+        - ADMIN
       summary: Create a service account key
       tags:
       - serviceaccount
@@ -9901,9 +9900,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:update
+        - ADMIN
       - tokenizer:
-        - serviceaccount:update
+        - ADMIN
       summary: Revoke a service account key
       tags:
       - serviceaccount
@@ -9966,9 +9965,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:update
+        - ADMIN
       - tokenizer:
-        - serviceaccount:update
+        - ADMIN
       summary: Updates a service account key
       tags:
       - serviceaccount
@@ -10027,9 +10026,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:read
+        - ADMIN
       - tokenizer:
-        - serviceaccount:read
+        - ADMIN
       summary: Gets service account roles
       tags:
       - serviceaccount
@@ -10089,11 +10088,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       summary: Create service account role
       tags:
       - serviceaccount
@@ -10140,11 +10137,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       summary: Delete service account role
       tags:
       - serviceaccount

frontend/jest.config.ts

@@ -28,7 +28,7 @@ const config: Config.InitialOptions = {
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/(?!ui(?:/|$))([^/]+)$':
+		'^@signozhq/(?!ui$)([^/]+)$':
 			'<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
 	},
 	extensionsToTreatAsEsm: ['.ts'],

frontend/package.json

@@ -50,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.18",
+    "@signozhq/ui": "0.0.17",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -165,6 +165,8 @@ function createMockAppContext(
 		orgPreferences: createMockOrgPreferences(),
 		userPreferences: [],
 		isLoggedIn: true,
+		isNoAuthMode: false,
+		isPreflightLoading: false,
 		org: [{ createdAt: 0, id: 'org-id', displayName: 'Test Org' }],
 		isFetchingUser: false,
 		isFetchingActiveLicense: false,

frontend/src/AppRoutes/index.tsx

@@ -58,6 +58,7 @@ function App(): JSX.Element {
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
+		isPreflightLoading,
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 
@@ -355,6 +356,10 @@ function App(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isCloudUser, isEnterpriseSelfHostedUser]);
 
+	if (isPreflightLoading) {
+		return <Spinner tip="Loading..." />;
+	}
+
 	// if the user is in logged in state
 	if (isLoggedInState) {
 		// if the setup calls are loading then return a spinner

frontend/src/api/__tests__/interceptorRejected.no-auth.test.ts

@@ -0,0 +1,72 @@
+import axios from 'axios';
+import { getIsNoAuthMode } from 'utils/noAuthMode';
+
+import { interceptorRejected } from '../index';
+
+jest.mock('utils/noAuthMode', () => ({
+	getIsNoAuthMode: jest.fn(),
+}));
+
+jest.mock('api/v2/sessions/rotate/post', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('AppRoutes/utils', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('../utils', () => ({
+	Logout: jest.fn(),
+}));
+
+// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
+const post = require('api/v2/sessions/rotate/post').default;
+// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
+const { Logout } = require('../utils');
+
+describe('interceptorRejected — no-auth mode', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.spyOn(axios, 'isAxiosError').mockReturnValue(true);
+	});
+
+	it('does NOT call rotate or Logout when no-auth mode is enabled on 401', async () => {
+		(getIsNoAuthMode as jest.Mock).mockReturnValue(true);
+
+		const error = {
+			isAxiosError: true,
+			response: {
+				status: 401,
+				config: { url: '/dashboards', method: 'get' },
+			},
+			config: { url: '/dashboards', headers: {} },
+		};
+
+		await interceptorRejected(error as any).catch(() => {});
+
+		expect(post).not.toHaveBeenCalled();
+		expect(Logout).not.toHaveBeenCalled();
+	});
+
+	it('DOES attempt rotate when no-auth mode is disabled on 401', async () => {
+		(getIsNoAuthMode as jest.Mock).mockReturnValue(false);
+		(post as jest.Mock).mockResolvedValue({
+			data: { accessToken: 'a', refreshToken: 'b' },
+		});
+
+		const error = {
+			isAxiosError: true,
+			response: {
+				status: 401,
+				config: { url: '/dashboards', method: 'get' },
+			},
+			config: { url: '/dashboards', headers: {} },
+		};
+
+		await interceptorRejected(error as any).catch(() => {});
+
+		expect(post).toHaveBeenCalled();
+	});
+});

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -1839,7 +1839,6 @@ export enum AuthtypesRelationDTO {
 	delete = 'delete',
 	list = 'list',
 	assignee = 'assignee',
-	attach = 'attach',
 }
 export interface AuthtypesRoleDTO {
 	/**

frontend/src/api/index.ts

@@ -13,6 +13,7 @@ import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
+import { getIsNoAuthMode } from 'utils/noAuthMode';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
 import { Logout } from './utils';
@@ -108,7 +109,10 @@ export const interceptorRejected = async (
 		if (axios.isAxiosError(value) && value.response) {
 			const { response } = value;
 
+			const isNoAuthMode = getIsNoAuthMode();
+
 			if (
+				!isNoAuthMode &&
 				response.status === 401 &&
 				// if the session rotate call or the create session errors out with 401 or the delete sessions call returns 401 then we do not retry!
 				response.config.url !== '/sessions/rotate' &&
@@ -140,16 +144,20 @@ export const interceptorRejected = async (
 						return await Promise.resolve(reResponse);
 					} catch (error) {
 						if ((error as AxiosError)?.response?.status === 401) {
-							Logout();
+							void Logout();
 						}
 					}
 				} catch (error) {
-					Logout();
+					void Logout();
 				}
 			}
 
-			if (response.status === 401 && response.config.url === '/sessions/rotate') {
-				Logout();
+			if (
+				!isNoAuthMode &&
+				response.status === 401 &&
+				response.config.url === '/sessions/rotate'
+			) {
+				void Logout();
 			}
 		}
 		return await Promise.reject(value);

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -15,7 +15,7 @@ import {
 	TableColumnType,
 	Tooltip,
 } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,6 +1,6 @@
 import { useHistory, useLocation } from 'react-router-dom';
 import { Select, Spin } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Divider, Drawer } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Card } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,10 +1,13 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/sonner';
+import {
+	Button,
+	DialogFooter,
+	DialogWrapper,
+	Input,
+	toast,
+} from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,

frontend/src/components/CreateServiceAccountModal/__tests__/CreateServiceAccountModal.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/sonner';
+import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import {
@@ -11,8 +11,8 @@ import {
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@signozhq/ui/calendar';
+import { Calendar } from '@signozhq/ui';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import { X } from '@signozhq/icons';
 
 import './DetailsHeader.styles.scss';

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -1,4 +1,4 @@
-import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { DrawerWrapper } from '@signozhq/ui';
 
 import './DetailsPanelDrawer.styles.scss';
 

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Button, Popover, Radio, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, DownloadIcon, Loader2 } from 'lucide-react';

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,6 +1,5 @@
 import { Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Button, DialogWrapper } from '@signozhq/ui';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 
 interface DeleteMemberDialogProps {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,11 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/sonner';
+import { Badge, Button, DrawerWrapper, Input, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -19,6 +15,7 @@ import {
 } from 'api/generated/services/users';
 import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
+import { NoAuthGuard } from 'components/NoAuthGuard';
 import RolesSelect, { useRoles } from 'components/RolesSelect';
 import SaveErrorItem from 'components/ServiceAccountDrawer/SaveErrorItem';
 import type { SaveError } from 'components/ServiceAccountDrawer/utils';
@@ -596,39 +593,43 @@ function EditMemberDrawer({
 					<div className="edit-member-drawer__footer-left">
 						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
 							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									onClick={(): void => setShowDeleteConfirm(true)}
-									disabled={isRootUser || isSelf}
-									variant="link"
-									color="destructive"
-								>
-									<Trash2 size={12} />
-									{isInvited ? 'Revoke Invite' : 'Delete Member'}
-								</Button>
+								<NoAuthGuard>
+									<Button
+										onClick={(): void => setShowDeleteConfirm(true)}
+										disabled={isRootUser || isSelf}
+										variant="link"
+										color="destructive"
+									>
+										<Trash2 size={12} />
+										{isInvited ? 'Revoke Invite' : 'Delete Member'}
+									</Button>
+								</NoAuthGuard>
 							</span>
 						</Tooltip>
 
 						<div className="edit-member-drawer__footer-divider" />
 						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
 							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-									variant="link"
-									color="warning"
-								>
-									<RefreshCw size={12} />
-									{isGeneratingLink
-										? 'Generating...'
-										: isInvited
-											? getInviteButtonLabel(
-													isLoadingTokenStatus,
-													existingToken,
-													isTokenExpired,
-													tokenNotFound,
-												)
-											: 'Generate Password Reset Link'}
-								</Button>
+								<NoAuthGuard>
+									<Button
+										onClick={handleGenerateResetLink}
+										disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+										variant="link"
+										color="warning"
+									>
+										<RefreshCw size={12} />
+										{isGeneratingLink
+											? 'Generating...'
+											: isInvited
+												? getInviteButtonLabel(
+														isLoadingTokenStatus,
+														existingToken,
+														isTokenExpired,
+														tokenNotFound,
+													)
+												: 'Generate Password Reset Link'}
+									</Button>
+								</NoAuthGuard>
 							</span>
 						</Tooltip>
 					</div>
@@ -639,15 +640,17 @@ function EditMemberDrawer({
 							Cancel
 						</Button>
 
-						<Button
-							variant="solid"
-							color="primary"
-							disabled={!isDirty || isSaving || isRootUser}
-							onClick={handleSave}
-							loading={isSaving}
-						>
-							{isSaving ? 'Saving...' : 'Save Member Details'}
-						</Button>
+						<NoAuthGuard>
+							<Button
+								variant="solid"
+								color="primary"
+								disabled={!isDirty || isSaving || isRootUser}
+								onClick={handleSave}
+								loading={isSaving}
+							>
+								{isSaving ? 'Saving...' : 'Save Member Details'}
+							</Button>
+						</NoAuthGuard>
 					</div>
 				</>
 			)}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,6 +1,5 @@
 import { Check, Copy } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Button, DialogWrapper } from '@signozhq/ui';
 
 interface ResetLinkDialogProps {
 	open: boolean;

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { toast } from '@signozhq/ui/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	useCreateResetPasswordToken,
@@ -34,8 +34,8 @@ jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
 	convertToApiError: jest.fn(),
 }));
 
-jest.mock('@signozhq/ui/drawer', () => ({
-	...jest.requireActual('@signozhq/ui/drawer'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	DrawerWrapper: ({
 		children,
 		footer,
@@ -51,10 +51,6 @@ jest.mock('@signozhq/ui/drawer', () => ({
 				{footer}
 			</div>
 		) : null,
-}));
-
-jest.mock('@signozhq/ui/dialog', () => ({
-	...jest.requireActual('@signozhq/ui/dialog'),
 	DialogWrapper: ({
 		children,
 		footer,
@@ -75,10 +71,6 @@ jest.mock('@signozhq/ui/dialog', () => ({
 	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
 		<div>{children}</div>
 	),
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -16,7 +16,7 @@ import {
 	Select,
 	Space,
 } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,7 +1,7 @@
 import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Col, Row, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Card, Form, Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';

frontend/src/components/HeaderRightSection/AnnouncementsModal.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 
 function AnnouncementsModal(): JSX.Element {
 	return (

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui/sonner';
+import { toast } from '@signozhq/ui';
 import { Button, Input, Radio, RadioChangeEvent } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -5,7 +5,7 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Switch } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,6 +1,6 @@
 // Mock dependencies before imports
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui/sonner';
+import { toast } from '@signozhq/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
@@ -19,8 +19,8 @@ jest.mock('react-router-dom', () => ({
 	useLocation: jest.fn(),
 }));
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CheckCircle2, HandPlatter } from 'lucide-react';

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui';
 
 type BadgeColor =
 	| 'vanilla'

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { X } from 'lucide-react';
 

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,11 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Style } from '@signozhq/design-tokens';
 import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Callout } from '@signozhq/ui/callout';
-import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/sonner';
+import {
+	Button,
+	Callout,
+	DialogFooter,
+	DialogWrapper,
+	Input,
+	toast,
+} from '@signozhq/ui';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';

frontend/src/components/InviteMembersModal/__tests__/InviteMembersModal.test.tsx

@@ -14,8 +14,8 @@ const makeApiError = (message: string, code = StatusCodes.CONFLICT): APIError =>
 
 jest.mock('api/v1/invite/create');
 jest.mock('api/v1/invite/bulk/create');
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';

frontend/src/components/LogDetail/index.tsx

@@ -3,9 +3,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import { Divider, Drawer, Radio, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';

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

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const CategoryHeadingText = styled(Typography.Text)`

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

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';

frontend/src/components/MembersTable/MembersTable.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui';
 import { Table, Tooltip } from 'antd';
 import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -14,7 +14,7 @@ import {
 } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Checkbox, Select } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/components/NoAuthBanner/NoAuthBanner.module.scss

@@ -0,0 +1,3 @@
+.banner {
+	height: var(--spacing-20);
+}

frontend/src/components/NoAuthBanner/NoAuthBanner.tsx

@@ -0,0 +1,18 @@
+import { PersistedAnnouncementBanner } from '@signozhq/ui';
+
+import styles from './NoAuthBanner.module.scss';
+
+export function NoAuthBanner(): JSX.Element {
+	return (
+		<PersistedAnnouncementBanner
+			type="warning"
+			storageKey="no-auth-banner-v1"
+			testId="no-auth-banner"
+			className={styles.banner}
+		>
+			No-auth mode: authentication is disabled, network is the trust boundary.
+		</PersistedAnnouncementBanner>
+	);
+}
+
+export default NoAuthBanner;

frontend/src/components/NoAuthBanner/__tests__/NoAuthBanner.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from 'tests/test-utils';
+
+import { NoAuthBanner } from '../NoAuthBanner';
+
+describe('NoAuthBanner', () => {
+	it('renders the no-auth message', () => {
+		render(<NoAuthBanner />);
+		expect(
+			screen.getByText(/No-auth mode: authentication is disabled/i),
+		).toBeInTheDocument();
+	});
+
+	it('renders with the warning test id', () => {
+		render(<NoAuthBanner />);
+		expect(screen.getByTestId('no-auth-banner')).toBeInTheDocument();
+	});
+});

frontend/src/components/NoAuthGuard/NoAuthGuard.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tooltip, TooltipProvider } from '@signozhq/ui';
+import { useAppContext } from 'providers/App/App';
+
+export const DEFAULT_MESSAGE = 'Not available in no-auth mode';
+
+interface NoAuthGuardProps {
+	children: React.ReactElement;
+	message?: string;
+}
+
+export function NoAuthGuard({
+	children,
+	message = DEFAULT_MESSAGE,
+}: NoAuthGuardProps): JSX.Element {
+	const { isNoAuthMode } = useAppContext();
+
+	if (!isNoAuthMode) {
+		return children;
+	}
+
+	const disabledChild = React.cloneElement(children, { disabled: true });
+
+	return (
+		<TooltipProvider>
+			<Tooltip title={message} arrow>
+				<span
+					data-no-auth-trigger
+					style={{ display: 'inline-flex', cursor: 'not-allowed' }}
+				>
+					{disabledChild}
+				</span>
+			</Tooltip>
+		</TooltipProvider>
+	);
+}

frontend/src/components/NoAuthGuard/__tests__/NoAuthGuard.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render } from 'tests/test-utils';
+
+import { DEFAULT_MESSAGE, NoAuthGuard } from '..';
+
+describe('NoAuthGuard', () => {
+	it('renders children unchanged when isNoAuthMode is false', () => {
+		const { getByRole } = render(
+			<NoAuthGuard>
+				<button type="button">Action</button>
+			</NoAuthGuard>,
+			undefined,
+			{ appContextOverrides: { isNoAuthMode: false } },
+		);
+		expect(getByRole('button', { name: 'Action' })).not.toBeDisabled();
+	});
+
+	it('does not intercept onClick when isNoAuthMode is false', () => {
+		const handleClick = jest.fn();
+		const { getByRole } = render(
+			<NoAuthGuard>
+				<button type="button" onClick={handleClick}>
+					Action
+				</button>
+			</NoAuthGuard>,
+			undefined,
+			{ appContextOverrides: { isNoAuthMode: false } },
+		);
+		getByRole('button', { name: 'Action' }).click();
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('disables children when isNoAuthMode is true', () => {
+		const { getByRole } = render(
+			<NoAuthGuard>
+				<button type="button">Action</button>
+			</NoAuthGuard>,
+			undefined,
+			{ appContextOverrides: { isNoAuthMode: true } },
+		);
+		expect(getByRole('button', { name: 'Action' })).toBeDisabled();
+	});
+
+	it('renders a tooltip trigger wrapper when isNoAuthMode is true', () => {
+		const { container } = render(
+			<NoAuthGuard>
+				<button type="button">Action</button>
+			</NoAuthGuard>,
+			undefined,
+			{ appContextOverrides: { isNoAuthMode: true } },
+		);
+		expect(
+			container.querySelector('span[data-no-auth-trigger]'),
+		).toBeInTheDocument();
+	});
+
+	it('overrides existing disabled prop — no-auth always wins', () => {
+		const { getByRole } = render(
+			// eslint-disable-next-line react/button-has-type
+			<NoAuthGuard>
+				<button type="button" disabled={false}>
+					Action
+				</button>
+			</NoAuthGuard>,
+			undefined,
+			{ appContextOverrides: { isNoAuthMode: true } },
+		);
+		expect(getByRole('button', { name: 'Action' })).toBeDisabled();
+	});
+
+	it('exports DEFAULT_MESSAGE as a non-empty string', () => {
+		expect(typeof DEFAULT_MESSAGE).toBe('string');
+		expect(DEFAULT_MESSAGE.length).toBeGreaterThan(0);
+	});
+});

frontend/src/components/NoAuthGuard/index.ts

@@ -0,0 +1 @@
+export { DEFAULT_MESSAGE, NoAuthGuard } from './NoAuthGuard';

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 
 import styles from './QueryCancelledPlaceholder.module.scss';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
 import { Button, Checkbox, Input, Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -11,9 +11,9 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from '@signozhq/ui/combobox';
+} from '@signozhq/ui';
 import { Skeleton, Switch, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import classNames from 'classnames';
 import { Check, X } from 'lucide-react';
 

frontend/src/components/ResizeTable/TableComponent/DateComponent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 
 import Time from './Time';
 

frontend/src/components/ResizeTable/TableComponent/Time.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { useTimezone } from 'providers/Timezone';
 

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -1,7 +1,5 @@
 import { Check, Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Callout } from '@signozhq/ui/callout';
+import { Badge, Button, Callout } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
 
 export interface KeyCreatedPhaseProps {

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -1,8 +1,6 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import { Button, Input, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import { popupContainer } from 'utils/selectPopupContainer';
 

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/sonner';
+import { DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,8 +1,6 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/sonner';
+import { Button, DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -1,10 +1,13 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import {
+	Badge,
+	Button,
+	Input,
+	ToggleGroup,
+	ToggleGroupItem,
+} from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { popupContainer } from 'utils/selectPopupContainer';

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/sonner';
+import { DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import { Skeleton, Table, Tooltip } from 'antd';
+import { DEFAULT_MESSAGE, NoAuthGuard } from 'components/NoAuthGuard';
+import { useAppContext } from 'providers/App/App';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -23,6 +25,7 @@ interface KeysTabProps {
 
 interface BuildColumnsParams {
 	isDisabled: boolean;
+	isNoAuthMode: boolean;
 	onRevokeClick: (keyId: string) => void;
 	handleformatLastObservedAt: (
 		lastObservedAt: Date | null | undefined,
@@ -42,6 +45,7 @@ function formatExpiry(expiresAt: number): JSX.Element {
 
 function buildColumns({
 	isDisabled,
+	isNoAuthMode,
 	onRevokeClick,
 	handleformatLastObservedAt,
 }: BuildColumnsParams): ColumnsType<ServiceaccounttypesGettableFactorAPIKeyDTO> {
@@ -92,23 +96,30 @@ function buildColumns({
 			key: 'action',
 			width: 48,
 			align: 'right' as const,
-			render: (_, record): JSX.Element => (
-				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
-					<Button
-						variant="ghost"
-						size="sm"
-						color="destructive"
-						disabled={isDisabled}
-						onClick={(e): void => {
-							e.stopPropagation();
-							onRevokeClick(record.id);
-						}}
-						className="keys-tab__revoke-btn"
-					>
-						<X size={12} />
-					</Button>
-				</Tooltip>
-			),
+			render: (_, record): JSX.Element => {
+				const tooltipTitle = isDisabled
+					? 'Service account disabled'
+					: isNoAuthMode
+						? DEFAULT_MESSAGE
+						: 'Revoke Key';
+				return (
+					<Tooltip title={tooltipTitle}>
+						<Button
+							variant="ghost"
+							size="sm"
+							color="destructive"
+							disabled={isDisabled || isNoAuthMode}
+							onClick={(e): void => {
+								e.stopPropagation();
+								onRevokeClick(record.id);
+							}}
+							className="keys-tab__revoke-btn"
+						>
+							<X size={12} />
+						</Button>
+					</Tooltip>
+				);
+			},
 		},
 	];
 }
@@ -134,6 +145,7 @@ function KeysTab({
 		parseAsString.withDefault(''),
 	);
 	const editKey = keys.find((k) => k.id === editKeyId) ?? null;
+	const { isNoAuthMode } = useAppContext();
 
 	const handleformatLastObservedAt = useCallback(
 		(lastObservedAt: Date | null | undefined): string =>
@@ -143,14 +155,20 @@ function KeysTab({
 
 	const onRevokeClick = useCallback(
 		(keyId: string): void => {
-			setRevokeKeyId(keyId);
+			void setRevokeKeyId(keyId);
 		},
 		[setRevokeKeyId],
 	);
 
 	const columns = useMemo(
-		() => buildColumns({ isDisabled, onRevokeClick, handleformatLastObservedAt }),
-		[isDisabled, onRevokeClick, handleformatLastObservedAt],
+		() =>
+			buildColumns({
+				isDisabled,
+				isNoAuthMode,
+				onRevokeClick,
+				handleformatLastObservedAt,
+			}),
+		[isDisabled, isNoAuthMode, onRevokeClick, handleformatLastObservedAt],
 	);
 
 	if (isLoading) {
@@ -176,16 +194,18 @@ function KeysTab({
 						Learn more
 					</a>
 				</p>
-				<Button
-					variant="link"
-					color="primary"
-					onClick={async (): Promise<void> => {
-						await setIsAddKeyOpen(true);
-					}}
-					disabled={isDisabled}
-				>
-					+ Add your first key
-				</Button>
+				<NoAuthGuard>
+					<Button
+						variant="link"
+						color="primary"
+						onClick={async (): Promise<void> => {
+							await setIsAddKeyOpen(true);
+						}}
+						disabled={isDisabled}
+					>
+						+ Add your first key
+					</Button>
+				</NoAuthGuard>
 			</div>
 		);
 	}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { LockKeyhole } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Input } from '@signozhq/ui/input';
+import { Badge, Input } from '@signozhq/ui';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,8 +1,6 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/sonner';
+import { Button, DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { ChevronDown, ChevronUp, CircleAlert, RotateCw } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
+import { Button } from '@signozhq/ui';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { toast } from '@signozhq/ui/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import {
+	Button,
+	DrawerWrapper,
+	toast,
+	ToggleGroup,
+	ToggleGroupItem,
+} from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -39,6 +42,7 @@ import {
 import APIError from 'types/api/error';
 import { retryOn429, toAPIError } from 'utils/errorUtils';
 
+import { NoAuthGuard } from 'components/NoAuthGuard';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -407,18 +411,20 @@ function ServiceAccountDrawer({
 					</ToggleGroupItem>
 				</ToggleGroup>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<Button
-						variant="outlined"
-						size="sm"
-						color="secondary"
-						disabled={isDeleted}
-						onClick={(): void => {
-							void setIsAddKeyOpen(true);
-						}}
-					>
-						<Plus size={12} />
-						Add Key
-					</Button>
+					<NoAuthGuard>
+						<Button
+							variant="outlined"
+							size="sm"
+							color="secondary"
+							disabled={isDeleted}
+							onClick={(): void => {
+								void setIsAddKeyOpen(true);
+							}}
+						>
+							<Plus size={12} />
+							Add Key
+						</Button>
+					</NoAuthGuard>
 				)}
 			</div>
 
@@ -497,16 +503,18 @@ function ServiceAccountDrawer({
 			) : (
 				<>
 					{!isDeleted && (
-						<Button
-							variant="link"
-							color="destructive"
-							onClick={(): void => {
-								void setIsDeleteOpen(true);
-							}}
-						>
-							<Trash2 size={12} />
-							Delete Service Account
-						</Button>
+						<NoAuthGuard>
+							<Button
+								variant="link"
+								color="destructive"
+								onClick={(): void => {
+									void setIsDeleteOpen(true);
+								}}
+							>
+								<Trash2 size={12} />
+								Delete Service Account
+							</Button>
+						</NoAuthGuard>
 					)}
 					{!isDeleted && (
 						<div className="sa-drawer__footer-right">
@@ -514,15 +522,17 @@ function ServiceAccountDrawer({
 								<X size={14} />
 								Cancel
 							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								loading={isSaving}
-								disabled={!isDirty}
-								onClick={handleSave}
-							>
-								Save Changes
-							</Button>
+							<NoAuthGuard>
+								<Button
+									variant="solid"
+									color="primary"
+									loading={isSaving}
+									disabled={!isDirty}
+									onClick={handleSave}
+								>
+									Save Changes
+								</Button>
+							</NoAuthGuard>
 						</div>
 					)}
 				</>

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/sonner';
+import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import {
@@ -11,8 +11,8 @@ import {
 
 import AddKeyModal from '../AddKeyModal';
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/sonner';
+import { toast } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -6,8 +6,8 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditKeyModal from '../EditKeyModal';
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/sonner';
+import { toast } from '@signozhq/ui';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -6,8 +6,8 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import KeysTab from '../KeysTab';
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.test.tsx

@@ -6,8 +6,8 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/ui/drawer', () => ({
-	...jest.requireActual('@signozhq/ui/drawer'),
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	DrawerWrapper: ({
 		children,
 		footer,
@@ -23,10 +23,6 @@ jest.mock('@signozhq/ui/drawer', () => ({
 				{footer}
 			</div>
 		) : null,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountsTable/utils.tsx

@@ -1,5 +1,5 @@
 import { ScanSearch } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui';
 import { Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Popover } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';

frontend/src/components/Styled/index.ts

@@ -16,7 +16,7 @@ import {
 	Typography,
 	TypographyTextProps,
 	TypographyTitleProps,
-} from '@signozhq/ui/typography';
+} from '@signozhq/ui';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -6,7 +6,7 @@ import type {
 import { useCallback, useMemo } from 'react';
 import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
 import { useSortable } from '@dnd-kit/sortable';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import cx from 'classnames';
 import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical } from 'lucide-react';

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -16,9 +16,12 @@ import {
 	horizontalListSortingStrategy,
 	SortableContext,
 } from '@dnd-kit/sortable';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { Pagination } from '@signozhq/ui/pagination';
+import {
+	ComboboxSimple,
+	ComboboxSimpleItem,
+	TooltipProvider,
+} from '@signozhq/ui';
+import { Pagination } from '@signozhq/ui';
 import type { Row } from '@tanstack/react-table';
 import {
 	ColumnDef,

frontend/src/components/TanStackTableView/__tests__/testUtils.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { TooltipProvider } from '@signozhq/ui';
 import { render, RenderResult } from '@testing-library/react';
 import { NuqsTestingAdapter, OnUrlUpdateFunction } from 'nuqs/adapters/testing';
 

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { DownOutlined } from '@ant-design/icons';
 import { Button, Dropdown } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,

frontend/src/components/Uplot/Uplot.tsx

@@ -8,7 +8,7 @@ import {
 	useRef,
 } from 'react';
 import * as Sentry from '@sentry/react';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';

frontend/src/components/ValueGraph/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -7,7 +7,7 @@ import {
 	CommandItem,
 	CommandList,
 	CommandShortcut,
-} from '@signozhq/ui/command';
+} from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { useThemeMode } from 'hooks/useDarkMode';
 import history from 'lib/history';

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -4,6 +4,7 @@ import { useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import deleteChannel from 'api/channels/delete';
+import { NoAuthGuard } from 'components/NoAuthGuard';
 import APIError from 'types/api/error';
 
 function Delete({ notifications, id }: DeleteProps): JSX.Element {
@@ -35,14 +36,16 @@ function Delete({ notifications, id }: DeleteProps): JSX.Element {
 	};
 
 	return (
-		<Button
-			loading={loading}
-			disabled={loading}
-			type="link"
-			onClick={onClickHandler}
-		>
-			Delete
-		</Button>
+		<NoAuthGuard>
+			<Button
+				loading={loading}
+				disabled={loading}
+				type="link"
+				onClick={onClickHandler}
+			>
+				Delete
+			</Button>
+		</NoAuthGuard>
 	);
 }
 

frontend/src/container/AllAlertChannels/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';

frontend/src/container/AllError/index.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Checkbox, Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useResizeObserver } from 'hooks/useDimensions';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Switch, Table, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton, Table, TablePaginationConfig } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { QueryParams } from 'constants/query';
 import {
 	dependentServicesColumns,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Progress, Skeleton, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Progress, Skeleton, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import {
 	getDisplayValue,
 	getFormattedEndPointMetricsData,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import { RotateCw } from 'lucide-react';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Card, Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeTable.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Table } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Typography } from '@signozhq/ui';
 import {
 	endPointStatusCodeColumns,
 	getFormattedEndPointStatusCodeData,