Merge branch 'main' into platform-tests-refactor

frontend/src/components/AuthZTooltip/AuthZTooltip.module.scss

@@ -1,21 +0,0 @@
-.wrapper {
-	cursor: not-allowed;
-}
-
-.disabledFieldset {
-	border: none;
-	margin: 0;
-	padding: 0;
-	display: contents;
-}
-
-.errorContent {
-	background: var(--callout-error-background) !important;
-	border-color: var(--callout-error-border) !important;
-	backdrop-filter: blur(15px);
-	border-radius: 4px !important;
-	color: var(--foreground) !important;
-	font-style: normal;
-	font-weight: 400;
-	white-space: nowrap;
-}

frontend/src/components/AuthZTooltip/AuthZTooltip.test.tsx

@@ -1,205 +0,0 @@
-import { ReactElement } from 'react';
-import {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ENVIRONMENT } from 'constants/env';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, waitFor } from 'tests/test-utils';
-import AuthZTooltip from './AuthZTooltip';
-
-const BASE_URL = ENVIRONMENT.baseURL || '';
-const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
-const TestButton = (): ReactElement => <button type="button">Action</button>;
-
-describe('AuthZTooltip — single check', () => {
-	it('renders child unchanged when permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		render(
-			<AuthZTooltip
-				relation="create"
-				object="serviceaccount"
-				permissionName="serviceaccount:create"
-			>
-				<TestButton />
-			</AuthZTooltip>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByRole('button', { name: 'Action' })).not.toBeDisabled();
-		});
-	});
-
-	it('disables child when permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		render(
-			<AuthZTooltip
-				relation="create"
-				object="serviceaccount"
-				permissionName="serviceaccount:create"
-			>
-				<TestButton />
-			</AuthZTooltip>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
-		});
-	});
-
-	it('does not disable child while loading (no premature disabled flash)', () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) =>
-				res(
-					ctx.delay('infinite'),
-					ctx.status(200),
-					ctx.json({ data: [], status: 'success' }),
-				),
-			),
-		);
-
-		render(
-			<AuthZTooltip
-				relation="create"
-				object="serviceaccount"
-				permissionName="serviceaccount:create"
-			>
-				<TestButton />
-			</AuthZTooltip>,
-		);
-
-		expect(screen.getByRole('button', { name: 'Action' })).not.toBeDisabled();
-	});
-});
-
-describe('AuthZTooltip — multi-check (checks array)', () => {
-	it('renders child enabled when all checks are granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [true, true])),
-				);
-			}),
-		);
-
-		render(
-			<AuthZTooltip
-				checks={[
-					{
-						relation: 'attach',
-						object: 'serviceaccount:sa-1',
-						permissionName: 'serviceaccount:attach',
-					},
-					{ relation: 'attach', object: 'role:*', permissionName: 'role:attach' },
-				]}
-			>
-				<TestButton />
-			</AuthZTooltip>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByRole('button', { name: 'Action' })).not.toBeDisabled();
-		});
-	});
-
-	it('disables child when first check is denied, second granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, true])),
-				);
-			}),
-		);
-
-		render(
-			<AuthZTooltip
-				checks={[
-					{
-						relation: 'attach',
-						object: 'serviceaccount:sa-1',
-						permissionName: 'serviceaccount:attach',
-					},
-					{ relation: 'attach', object: 'role:*', permissionName: 'role:attach' },
-				]}
-			>
-				<TestButton />
-			</AuthZTooltip>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
-		});
-	});
-
-	it('disables child when both checks are denied and message lists all denied permissions', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, false])),
-				);
-			}),
-		);
-
-		render(
-			<AuthZTooltip
-				checks={[
-					{
-						relation: 'attach',
-						object: 'serviceaccount:sa-1',
-						permissionName: 'serviceaccount:attach',
-					},
-					{ relation: 'attach', object: 'role:*', permissionName: 'role:attach' },
-				]}
-			>
-				<TestButton />
-			</AuthZTooltip>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
-		});
-
-		// Tooltip wrapper span should contain the denied permission names as data attr
-		const wrapper = screen.getByRole('button', { name: 'Action' }).parentElement;
-		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(
-			'serviceaccount:attach',
-		);
-		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(
-			'role:attach',
-		);
-	});
-});

frontend/src/components/AuthZTooltip/AuthZTooltip.tsx

@@ -1,111 +0,0 @@
-import { ReactElement, cloneElement, useMemo } from 'react';
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import type {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-} from 'hooks/useAuthZ/types';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { buildPermission } from 'hooks/useAuthZ/utils';
-import styles from './AuthZTooltip.module.scss';
-
-type AuthZCheck = {
-	relation: AuthZRelation;
-	object: string;
-	permissionName: string;
-};
-
-interface AuthZTooltipProps {
-	relation?: AuthZRelation;
-	object?: string;
-	permissionName?: string;
-	checks?: AuthZCheck[];
-	children: ReactElement;
-	enabled?: boolean;
-}
-
-function buildPermissionFromCheck(check: AuthZCheck): BrandedPermission {
-	return buildPermission(
-		check.relation,
-		check.object as AuthZObject<typeof check.relation>,
-	);
-}
-
-function AuthZTooltip({
-	relation,
-	object,
-	permissionName,
-	checks,
-	children,
-	enabled = true,
-}: AuthZTooltipProps): JSX.Element {
-	const normalisedChecks: AuthZCheck[] = useMemo(() => {
-		if (checks && checks.length > 0) {
-			return checks;
-		}
-		if (relation && object && permissionName) {
-			return [{ relation, object, permissionName }];
-		}
-		return [];
-	}, [checks, relation, object, permissionName]);
-
-	const permissions = useMemo(
-		() => normalisedChecks.map(buildPermissionFromCheck),
-		[normalisedChecks],
-	);
-
-	const { permissions: authZResult, isLoading } = useAuthZ(
-		permissions as BrandedPermission[],
-		{ enabled: enabled && normalisedChecks.length > 0 },
-	);
-
-	const deniedChecks = useMemo(() => {
-		if (isLoading || !authZResult) {
-			return [];
-		}
-		return normalisedChecks.filter((c) => {
-			const perm = buildPermissionFromCheck(c);
-			return authZResult[perm as BrandedPermission]?.isGranted === false;
-		});
-	}, [authZResult, isLoading, normalisedChecks]);
-
-	if (isLoading || deniedChecks.length === 0) {
-		return children;
-	}
-
-	const deniedNames = deniedChecks.map((c) => c.permissionName);
-	const tooltipMessage =
-		deniedNames.length === 1
-			? `You don't have ${deniedNames[0]} permission`
-			: `You don't have ${deniedNames.join(', ')} permissions`;
-
-	return (
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<span className={styles.wrapper}>
-						<fieldset
-							disabled
-							className={styles.disabledFieldset}
-							data-denied-permissions={deniedNames.join(',')}
-						>
-							{cloneElement(children, {
-								disabled: true,
-							})}
-						</fieldset>
-					</span>
-				</TooltipTrigger>
-				<TooltipContent className={styles.errorContent}>
-					{tooltipMessage}
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
-	);
-}
-
-export default AuthZTooltip;

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -2,7 +2,6 @@ import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import { toast } from '@signozhq/ui/sonner';
@@ -133,23 +132,17 @@ function CreateServiceAccountModal(): JSX.Element {
 					Cancel
 				</Button>
 
-				<AuthZTooltip
-					relation="create"
-					object="serviceaccount"
-					permissionName="serviceaccount:create"
+				<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"
+					loading={isSubmitting}
+					disabled={!isValid}
 				>
-					<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"
-						loading={isSubmitting}
-						disabled={!isValid}
-					>
-						Create Service Account
-					</Button>
-				</AuthZTooltip>
+					Create Service Account
+				</Button>
 			</DialogFooter>
 		</DialogWrapper>
 	);

frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.module.scss

@@ -1,4 +0,0 @@
-.callout {
-	box-sizing: border-box;
-	width: 100%;
-}

frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx

@@ -1,22 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import PermissionDeniedCallout from './PermissionDeniedCallout';
-
-describe('PermissionDeniedCallout', () => {
-	it('renders the permission name in the callout message', () => {
-		render(<PermissionDeniedCallout permissionName="serviceaccount:attach" />);
-
-		expect(screen.getByText(/You don't have/)).toBeInTheDocument();
-		expect(screen.getByText(/serviceaccount:attach/)).toBeInTheDocument();
-		expect(screen.getByText(/permission/)).toBeInTheDocument();
-	});
-
-	it('accepts an optional className', () => {
-		const { container } = render(
-			<PermissionDeniedCallout
-				permissionName="serviceaccount:read"
-				className="custom-class"
-			/>,
-		);
-		expect(container.firstChild).toHaveClass('custom-class');
-	});
-});

frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx

@@ -1,26 +0,0 @@
-import { Callout } from '@signozhq/ui/callout';
-import cx from 'classnames';
-import styles from './PermissionDeniedCallout.module.scss';
-
-interface PermissionDeniedCalloutProps {
-	permissionName: string;
-	className?: string;
-}
-
-function PermissionDeniedCallout({
-	permissionName,
-	className,
-}: PermissionDeniedCalloutProps): JSX.Element {
-	return (
-		<Callout
-			type="error"
-			showIcon
-			size="small"
-			className={cx(styles.callout, className)}
-		>
-			{`You don't have ${permissionName} permission`}
-		</Callout>
-	);
-}
-
-export default PermissionDeniedCallout;

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.module.scss

@@ -1,44 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
-	min-height: 50vh;
-	padding: var(--spacing-10);
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: var(--spacing-2);
-	max-width: 512px;
-}
-
-.icon {
-	margin-bottom: var(--spacing-1);
-}
-
-.title {
-	margin: 0;
-	font-size: var(--label-base-500-font-size);
-	font-weight: var(--label-base-500-font-weight);
-	line-height: var(--line-height-18);
-	letter-spacing: -0.07px;
-	color: var(--l1-foreground);
-}
-
-.subtitle {
-	margin: 0;
-	font-size: var(--label-base-400-font-size);
-	font-weight: var(--label-base-400-font-weight);
-	line-height: var(--line-height-18);
-	letter-spacing: -0.07px;
-	color: var(--l2-foreground);
-}
-
-.permission {
-	font-family: monospace;
-	color: var(--l2-foreground);
-}

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx

@@ -1,21 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import PermissionDeniedFullPage from './PermissionDeniedFullPage';
-
-describe('PermissionDeniedFullPage', () => {
-	it('renders the title and subtitle with the permissionName interpolated', () => {
-		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
-
-		expect(
-			screen.getByText("Uh-oh! You don't have permission to view this page."),
-		).toBeInTheDocument();
-		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
-		expect(
-			screen.getByText(/Ask your SigNoz administrator to grant access/),
-		).toBeInTheDocument();
-	});
-
-	it('renders with a different permissionName', () => {
-		render(<PermissionDeniedFullPage permissionName="role:read" />);
-		expect(screen.getByText(/role:read/)).toBeInTheDocument();
-	});
-});

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx

@@ -1,31 +0,0 @@
-import { CircleSlash2 } from '@signozhq/icons';
-
-import styles from './PermissionDeniedFullPage.module.scss';
-import { Style } from '@signozhq/design-tokens';
-
-interface PermissionDeniedFullPageProps {
-	permissionName: string;
-}
-
-function PermissionDeniedFullPage({
-	permissionName,
-}: PermissionDeniedFullPageProps): JSX.Element {
-	return (
-		<div className={styles.container}>
-			<div className={styles.content}>
-				<span className={styles.icon}>
-					<CircleSlash2 color={Style.CALLOUT_WARNING_TITLE} size={14} />
-				</span>
-				<p className={styles.title}>
-					Uh-oh! You don&apos;t have permission to view this page.
-				</p>
-				<p className={styles.subtitle}>
-					You need <code className={styles.permission}>{permissionName}</code> to
-					view this page. Ask your SigNoz administrator to grant access.
-				</p>
-			</div>
-		</div>
-	);
-}
-
-export default PermissionDeniedFullPage;

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -80,7 +80,6 @@ interface BaseProps {
 	isError?: boolean;
 	error?: APIError;
 	onRefetch?: () => void;
-	disabled?: boolean;
 }
 
 interface SingleProps extends BaseProps {
@@ -124,7 +123,6 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		isError = internalError,
 		error = convertToApiError(internalErrorObj),
 		onRefetch = externalRoles === undefined ? internalRefetch : undefined,
-		disabled,
 	} = props;
 
 	const notFoundContent = isError ? (
@@ -153,7 +151,6 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 					</Checkbox>
 				)}
 				getPopupContainer={getPopupContainer}
-				disabled={disabled}
 			/>
 		);
 	}
@@ -171,7 +168,6 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 			notFoundContent={notFoundContent}
 			options={options}
 			getPopupContainer={getPopupContainer}
-			disabled={disabled}
 		/>
 	);
 }

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

@@ -4,7 +4,6 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { disabledDate } from '../utils';
@@ -19,7 +18,6 @@ export interface KeyFormPhaseProps {
 	isValid: boolean;
 	onSubmit: () => void;
 	onClose: () => void;
-	accountId?: string;
 }
 
 function KeyFormPhase({
@@ -30,7 +28,6 @@ function KeyFormPhase({
 	isValid,
 	onSubmit,
 	onClose,
-	accountId,
 }: KeyFormPhaseProps): JSX.Element {
 	return (
 		<>
@@ -114,24 +111,17 @@ function KeyFormPhase({
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						Cancel
 					</Button>
-					<AuthZTooltip
-						relation="update"
-						object={`serviceaccount:${accountId ?? ''}`}
-						permissionName="serviceaccount:update"
-						enabled={!!accountId}
+					<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"
+						loading={isSubmitting}
+						disabled={!isValid}
 					>
-						<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"
-							loading={isSubmitting}
-							disabled={!isValid}
-						>
-							Create Key
-						</Button>
-					</AuthZTooltip>
+						Create Key
+					</Button>
 				</div>
 			</div>
 		</>

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

@@ -161,7 +161,6 @@ function AddKeyModal(): JSX.Element {
 					isValid={isValid}
 					onSubmit={handleSubmit(handleCreate)}
 					onClose={handleClose}
-					accountId={accountId ?? undefined}
 				/>
 			)}
 

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,7 +1,6 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -83,22 +82,15 @@ function DeleteAccountModal(): JSX.Element {
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZTooltip
-				relation="delete"
-				object={`serviceaccount:${accountId}`}
-				permissionName="serviceaccount:delete"
-				enabled={!!accountId}
+			<Button
+				variant="solid"
+				color="destructive"
+				loading={isDeleting}
+				onClick={handleConfirm}
 			>
-				<Button
-					variant="solid"
-					color="destructive"
-					loading={isDeleting}
-					onClick={handleConfirm}
-				>
-					<Trash2 size={12} />
-					Delete
-				</Button>
-			</AuthZTooltip>
+				<Trash2 size={12} />
+				Delete
+			</Button>
 		</div>
 	);
 

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

@@ -7,7 +7,6 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { disabledDate, formatLastObservedAt } from '../utils';
@@ -25,8 +24,6 @@ export interface EditKeyFormProps {
 	onClose: () => void;
 	onRevokeClick: () => void;
 	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string;
-	canUpdate?: boolean;
-	accountId?: string;
 }
 
 function EditKeyForm({
@@ -40,8 +37,6 @@ function EditKeyForm({
 	onClose,
 	onRevokeClick,
 	formatTimezoneAdjustedTimestamp,
-	canUpdate = true,
-	accountId = '',
 }: EditKeyFormProps): JSX.Element {
 	return (
 		<>
@@ -54,7 +49,6 @@ function EditKeyForm({
 						id="edit-key-name"
 						className="edit-key-modal__input"
 						placeholder="Enter key name"
-						disabled={!canUpdate}
 						{...register('name')}
 					/>
 				</div>
@@ -79,22 +73,21 @@ function EditKeyForm({
 								type="single"
 								value={field.value}
 								onChange={(val): void => {
-									if (val && canUpdate) {
+									if (val) {
 										field.onChange(val);
 									}
 								}}
+								size="sm"
 								className="edit-key-modal__expiry-toggle"
 							>
 								<ToggleGroupItem
 									value={ExpiryMode.NONE}
-									disabled={!canUpdate}
 									className="edit-key-modal__expiry-toggle-btn"
 								>
 									No Expiration
 								</ToggleGroupItem>
 								<ToggleGroupItem
 									value={ExpiryMode.DATE}
-									disabled={!canUpdate}
 									className="edit-key-modal__expiry-toggle-btn"
 								>
 									Set Expiration Date
@@ -121,7 +114,6 @@ function EditKeyForm({
 										popupClassName="edit-key-modal-datepicker-popup"
 										getPopupContainer={popupContainer}
 										disabledDate={disabledDate}
-										disabled={!canUpdate}
 									/>
 								)}
 							/>
@@ -141,40 +133,26 @@ function EditKeyForm({
 			</form>
 
 			<div className="edit-key-modal__footer">
-				<AuthZTooltip
-					relation="update"
-					object={`serviceaccount:${accountId}`}
-					permissionName="serviceaccount:update"
-					enabled={!!accountId}
-				>
-					<Button variant="link" color="destructive" onClick={onRevokeClick}>
-						<Trash2 size={12} />
-						Revoke Key
-					</Button>
-				</AuthZTooltip>
+				<Button variant="link" color="destructive" onClick={onRevokeClick}>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
 				<div className="edit-key-modal__footer-right">
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
-					<AuthZTooltip
-						relation="update"
-						object={`serviceaccount:${accountId}`}
-						permissionName="serviceaccount:update"
-						enabled={!!accountId}
+					<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"
+						loading={isSaving}
+						disabled={!isDirty}
 					>
-						<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"
-							loading={isSaving}
-							disabled={!isDirty}
-						>
-							Save Changes
-						</Button>
-					</AuthZTooltip>
+						Save Changes
+					</Button>
 				</div>
 			</div>
 		</>

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

@@ -16,8 +16,6 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
-import { buildSAUpdatePermission } from 'hooks/useAuthZ/serviceAccountPermissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
@@ -71,15 +69,6 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 
 	const expiryMode = watch('expiryMode');
 
-	const { permissions: editPermissions } = useAuthZ(
-		selectedAccountId ? [buildSAUpdatePermission(selectedAccountId)] : [],
-		{ enabled: !!selectedAccountId },
-	);
-
-	const canUpdate =
-		editPermissions?.[buildSAUpdatePermission(selectedAccountId ?? '')]
-			?.isGranted ?? true;
-
 	const { mutate: updateKey, isLoading: isSaving } = useUpdateServiceAccountKey({
 		mutation: {
 			onSuccess: async () => {
@@ -180,7 +169,6 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 						isRevoking={isRevoking}
 						onCancel={(): void => setIsRevokeConfirmOpen(false)}
 						onConfirm={handleRevoke}
-						accountId={selectedAccountId ?? undefined}
 					/>
 				) : undefined
 			}
@@ -202,8 +190,6 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 					onClose={handleClose}
 					onRevokeClick={(): void => setIsRevokeConfirmOpen(true)}
 					formatTimezoneAdjustedTimestamp={formatTimezoneAdjustedTimestamp}
-					canUpdate={canUpdate}
-					accountId={selectedAccountId ?? ''}
 				/>
 			)}
 		</DialogWrapper>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,10 +1,9 @@
 import { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Skeleton, Table } from 'antd';
+import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs';
@@ -18,15 +17,12 @@ interface KeysTabProps {
 	keys: ServiceaccounttypesGettableFactorAPIKeyDTO[];
 	isLoading: boolean;
 	isDisabled?: boolean;
-	canUpdate?: boolean;
-	accountId?: string;
 	currentPage: number;
 	pageSize: number;
 }
 
 interface BuildColumnsParams {
 	isDisabled: boolean;
-	accountId: string;
 	onRevokeClick: (keyId: string) => void;
 	handleformatLastObservedAt: (
 		lastObservedAt: Date | null | undefined,
@@ -46,7 +42,6 @@ function formatExpiry(expiresAt: number): JSX.Element {
 
 function buildColumns({
 	isDisabled,
-	accountId,
 	onRevokeClick,
 	handleformatLastObservedAt,
 }: BuildColumnsParams): ColumnsType<ServiceaccounttypesGettableFactorAPIKeyDTO> {
@@ -98,12 +93,7 @@ function buildColumns({
 			width: 48,
 			align: 'right' as const,
 			render: (_, record): JSX.Element => (
-				<AuthZTooltip
-					relation="update"
-					object={`serviceaccount:${accountId}`}
-					permissionName="serviceaccount:update"
-					enabled={!isDisabled && !!accountId}
-				>
+				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
 					<Button
 						variant="ghost"
 						size="sm"
@@ -117,7 +107,7 @@ function buildColumns({
 					>
 						<X size={12} />
 					</Button>
-				</AuthZTooltip>
+				</Tooltip>
 			),
 		},
 	];
@@ -127,7 +117,6 @@ function KeysTab({
 	keys,
 	isLoading,
 	isDisabled = false,
-	accountId = '',
 	currentPage,
 	pageSize,
 }: KeysTabProps): JSX.Element {
@@ -160,14 +149,8 @@ function KeysTab({
 	);
 
 	const columns = useMemo(
-		() =>
-			buildColumns({
-				isDisabled,
-				accountId,
-				onRevokeClick,
-				handleformatLastObservedAt,
-			}),
-		[isDisabled, accountId, onRevokeClick, handleformatLastObservedAt],
+		() => buildColumns({ isDisabled, onRevokeClick, handleformatLastObservedAt }),
+		[isDisabled, onRevokeClick, handleformatLastObservedAt],
 	);
 
 	if (isLoading) {
@@ -193,23 +176,16 @@ function KeysTab({
 						Learn more
 					</a>
 				</p>
-				<AuthZTooltip
-					relation="update"
-					object={`serviceaccount:${accountId}`}
-					permissionName="serviceaccount:update"
-					enabled={!isDisabled && !!accountId}
+				<Button
+					variant="link"
+					color="primary"
+					onClick={async (): Promise<void> => {
+						await setIsAddKeyOpen(true);
+					}}
+					disabled={isDisabled}
 				>
-					<Button
-						variant="link"
-						color="primary"
-						onClick={async (): Promise<void> => {
-							await setIsAddKeyOpen(true);
-						}}
-						disabled={isDisabled}
-					>
-						+ Add your first key
-					</Button>
-				</AuthZTooltip>
+					+ Add your first key
+				</Button>
 			</div>
 		);
 	}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -3,7 +3,6 @@ import { LockKeyhole } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Input } from '@signozhq/ui/input';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
@@ -20,7 +19,6 @@ interface OverviewTabProps {
 	localRoles: string[];
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
-	canUpdate?: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
@@ -36,7 +34,6 @@ function OverviewTab({
 	localRoles,
 	onRolesChange,
 	isDisabled,
-	canUpdate = true,
 	availableRoles,
 	rolesLoading,
 	rolesError,
@@ -66,7 +63,7 @@ function OverviewTab({
 				<label className="sa-drawer__label" htmlFor="sa-name">
 					Name
 				</label>
-				{isDisabled || !canUpdate ? (
+				{isDisabled ? (
 					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 						<span className="sa-drawer__input-text">{localName || '—'}</span>
 						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
@@ -114,33 +111,18 @@ function OverviewTab({
 						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 					</div>
 				) : (
-					<AuthZTooltip
-						checks={[
-							{
-								relation: 'attach',
-								object: `serviceaccount:${account.id}`,
-								permissionName: 'serviceaccount:attach',
-							},
-							{
-								relation: 'attach',
-								object: 'role:*',
-								permissionName: 'role:attach',
-							},
-						]}
-					>
-						<RolesSelect
-							id="sa-roles"
-							mode="multiple"
-							roles={availableRoles}
-							loading={rolesLoading}
-							isError={rolesError}
-							error={rolesErrorObj}
-							onRefetch={onRefetchRoles}
-							value={localRoles}
-							onChange={onRolesChange}
-							placeholder="Select roles"
-						/>
-					</AuthZTooltip>
+					<RolesSelect
+						id="sa-roles"
+						mode="multiple"
+						roles={availableRoles}
+						loading={rolesLoading}
+						isError={rolesError}
+						error={rolesErrorObj}
+						onRefetch={onRefetchRoles}
+						value={localRoles}
+						onChange={onRolesChange}
+						placeholder="Select roles"
+					/>
 				)}
 			</div>
 

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,7 +1,6 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -24,14 +23,12 @@ export interface RevokeKeyFooterProps {
 	isRevoking: boolean;
 	onCancel: () => void;
 	onConfirm: () => void;
-	accountId?: string;
 }
 
 export function RevokeKeyFooter({
 	isRevoking,
 	onCancel,
 	onConfirm,
-	accountId,
 }: RevokeKeyFooterProps): JSX.Element {
 	return (
 		<>
@@ -39,22 +36,15 @@ export function RevokeKeyFooter({
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZTooltip
-				relation="update"
-				object={`serviceaccount:${accountId ?? ''}`}
-				permissionName="serviceaccount:update"
-				enabled={!!accountId}
+			<Button
+				variant="solid"
+				color="destructive"
+				loading={isRevoking}
+				onClick={onConfirm}
 			>
-				<Button
-					variant="solid"
-					color="destructive"
-					loading={isRevoking}
-					onClick={onConfirm}
-				>
-					<Trash2 size={12} />
-					Revoke Key
-				</Button>
-			</AuthZTooltip>
+				<Trash2 size={12} />
+				Revoke Key
+			</Button>
 		</>
 	);
 }
@@ -125,7 +115,6 @@ function RevokeKeyModal(): JSX.Element {
 					isRevoking={isRevoking}
 					onCancel={handleCancel}
 					onConfirm={handleConfirm}
-					accountId={accountId ?? undefined}
 				/>
 			}
 		>

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -16,8 +16,6 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import { GuardAuthZ } from 'components/GuardAuthZ/GuardAuthZ';
-import PermissionDeniedCallout from 'components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -29,13 +27,6 @@ import {
 	RoleUpdateFailure,
 	useServiceAccountRoleManager,
 } from 'hooks/serviceAccount/useServiceAccountRoleManager';
-import {
-	buildSAAttachPermission,
-	buildSADeletePermission,
-	buildSAUpdatePermission,
-	RoleAttachWildcardPermission,
-} from 'hooks/useAuthZ/serviceAccountPermissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -46,7 +37,6 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
 
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -175,22 +165,6 @@ function ServiceAccountDrawer({
 		refetch: refetchRoles,
 	} = useRoles();
 
-	const { permissions: drawerPermissions } = useAuthZ(
-		selectedAccountId
-			? [
-					buildSAUpdatePermission(selectedAccountId),
-					buildSADeletePermission(selectedAccountId),
-					buildSAAttachPermission(selectedAccountId),
-					RoleAttachWildcardPermission,
-				]
-			: [],
-		{ enabled: !!selectedAccountId },
-	);
-
-	const canUpdate =
-		drawerPermissions?.[buildSAUpdatePermission(selectedAccountId ?? '')]
-			?.isGranted ?? true;
-
 	const { data: keysData, isLoading: keysLoading } = useListServiceAccountKeys(
 		{ id: selectedAccountId ?? '' },
 		{ query: { enabled: !!selectedAccountId } },
@@ -418,25 +392,18 @@ function ServiceAccountDrawer({
 					</ToggleGroupItem>
 				</ToggleGroup>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<AuthZTooltip
-						relation="update"
-						object={`serviceaccount:${selectedAccountId ?? ''}`}
-						permissionName="serviceaccount:update"
-						enabled={!isDeleted && !!selectedAccountId}
+					<Button
+						variant="outlined"
+						size="sm"
+						color="secondary"
+						disabled={isDeleted}
+						onClick={(): void => {
+							void setIsAddKeyOpen(true);
+						}}
 					>
-						<Button
-							variant="outlined"
-							size="sm"
-							color="secondary"
-							disabled={isDeleted}
-							onClick={(): void => {
-								void setIsAddKeyOpen(true);
-							}}
-						>
-							<Plus size={12} />
-							Add Key
-						</Button>
-					</AuthZTooltip>
+						<Plus size={12} />
+						Add Key
+					</Button>
 				)}
 			</div>
 
@@ -454,49 +421,37 @@ function ServiceAccountDrawer({
 						)}
 					/>
 				)}
-				{!isAccountLoading && !isAccountError && selectedAccountId && (
-					<GuardAuthZ
-						relation="read"
-						// object={`serviceaccount:${selectedAccountId}`}
-						object={`serviceaccount:*`}
-						fallbackOnNoPermissions={(): JSX.Element => (
-							<PermissionDeniedCallout permissionName="serviceaccount:read" />
+				{!isAccountLoading && !isAccountError && (
+					<>
+						{activeTab === ServiceAccountDrawerTab.Overview && account && (
+							<OverviewTab
+								account={account}
+								localName={localName}
+								onNameChange={handleNameChange}
+								localRoles={localRoles}
+								onRolesChange={(roles): void => {
+									setLocalRoles(roles);
+									clearRoleErrors();
+								}}
+								isDisabled={isDeleted}
+								availableRoles={availableRoles}
+								rolesLoading={rolesLoading}
+								rolesError={rolesError}
+								rolesErrorObj={rolesErrorObj}
+								onRefetchRoles={refetchRoles}
+								saveErrors={saveErrors}
+							/>
 						)}
-					>
-						<>
-							{activeTab === ServiceAccountDrawerTab.Overview && account && (
-								<OverviewTab
-									account={account}
-									localName={localName}
-									onNameChange={handleNameChange}
-									localRoles={localRoles}
-									onRolesChange={(roles): void => {
-										setLocalRoles(roles);
-										clearRoleErrors();
-									}}
-									isDisabled={isDeleted}
-									canUpdate={canUpdate}
-									availableRoles={availableRoles}
-									rolesLoading={rolesLoading}
-									rolesError={rolesError}
-									rolesErrorObj={rolesErrorObj}
-									onRefetchRoles={refetchRoles}
-									saveErrors={saveErrors}
-								/>
-							)}
-							{activeTab === ServiceAccountDrawerTab.Keys && (
-								<KeysTab
-									keys={keys}
-									isLoading={keysLoading}
-									isDisabled={isDeleted}
-									canUpdate={canUpdate}
-									accountId={selectedAccountId}
-									currentPage={keysPage}
-									pageSize={PAGE_SIZE}
-								/>
-							)}
-						</>
-					</GuardAuthZ>
+						{activeTab === ServiceAccountDrawerTab.Keys && (
+							<KeysTab
+								keys={keys}
+								isLoading={keysLoading}
+								isDisabled={isDeleted}
+								currentPage={keysPage}
+								pageSize={PAGE_SIZE}
+							/>
+						)}
+					</>
 				)}
 			</div>
 		</div>
@@ -527,23 +482,16 @@ function ServiceAccountDrawer({
 			) : (
 				<>
 					{!isDeleted && (
-						<AuthZTooltip
-							relation="delete"
-							object={`serviceaccount:${selectedAccountId ?? ''}`}
-							permissionName="serviceaccount:delete"
-							enabled={!!selectedAccountId}
+						<Button
+							variant="link"
+							color="destructive"
+							onClick={(): void => {
+								void setIsDeleteOpen(true);
+							}}
 						>
-							<Button
-								variant="link"
-								color="destructive"
-								onClick={(): void => {
-									void setIsDeleteOpen(true);
-								}}
-							>
-								<Trash2 size={12} />
-								Delete Service Account
-							</Button>
-						</AuthZTooltip>
+							<Trash2 size={12} />
+							Delete Service Account
+						</Button>
 					)}
 					{!isDeleted && (
 						<div className="sa-drawer__footer-right">
@@ -551,22 +499,15 @@ function ServiceAccountDrawer({
 								<X size={14} />
 								Cancel
 							</Button>
-							<AuthZTooltip
-								relation="update"
-								object={`serviceaccount:${selectedAccountId ?? ''}`}
-								permissionName="serviceaccount:update"
-								enabled={!!selectedAccountId}
+							<Button
+								variant="solid"
+								color="primary"
+								loading={isSaving}
+								disabled={!isDirty}
+								onClick={handleSave}
 							>
-								<Button
-									variant="solid"
-									color="primary"
-									loading={isSaving}
-									disabled={!isDirty}
-									onClick={handleSave}
-								>
-									Save Changes
-								</Button>
-							</AuthZTooltip>
+								Save Changes
+							</Button>
 						</div>
 					)}
 				</>

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

@@ -1,9 +1,4 @@
 import type { ReactNode } from 'react';
-import {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ENVIRONMENT } from 'constants/env';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -11,23 +6,6 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-const BASE_URL = ENVIRONMENT.baseURL || '';
-const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
 jest.mock('@signozhq/ui/drawer', () => ({
 	...jest.requireActual('@signozhq/ui/drawer'),
 	DrawerWrapper: ({
@@ -120,18 +98,6 @@ describe('ServiceAccountDrawer', () => {
 			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => true),
-						),
-					),
-				);
-			}),
 		);
 	});
 
@@ -356,106 +322,6 @@ describe('ServiceAccountDrawer', () => {
 			),
 		).resolves.toBeInTheDocument();
 	});
-
-	it('shows PermissionDeniedCallout inside drawer when read permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => false),
-						),
-					),
-				);
-			}),
-		);
-
-		renderDrawer();
-
-		await waitFor(() => {
-			expect(screen.getByText(/serviceaccount:read/)).toBeInTheDocument();
-		});
-	});
-
-	it('shows drawer content when read permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => true),
-						),
-					),
-				);
-			}),
-		);
-
-		renderDrawer();
-
-		await screen.findByDisplayValue('CI Bot');
-		expect(screen.queryByText(/serviceaccount:read/)).not.toBeInTheDocument();
-	});
-
-	it('disables Save button when update permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				// Deny update, grant everything else (match by relation+object)
-				return res(
-					ctx.status(200),
-					ctx.json({
-						data: payload.map((txn: { relation: string; object: string }) => ({
-							relation: txn.relation,
-							object: txn.object,
-							authorized: !(txn.relation === 'update'),
-						})),
-						status: 'success',
-					}),
-				);
-			}),
-		);
-
-		renderDrawer();
-		// When update is denied, name renders as read-only text (not an input)
-		await screen.findByText('CI Bot');
-
-		const saveBtn = screen.getByRole('button', { name: /Save Changes/i });
-		await waitFor(() => expect(saveBtn).toBeDisabled());
-	});
-
-	it('disables Delete button when delete permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				// Deny delete, grant everything else (match by relation+object)
-				return res(
-					ctx.status(200),
-					ctx.json({
-						data: payload.map((txn: { relation: string; object: string }) => ({
-							relation: txn.relation,
-							object: txn.object,
-							authorized: !(txn.relation === 'delete'),
-						})),
-						status: 'success',
-					}),
-				);
-			}),
-		);
-
-		renderDrawer();
-		await screen.findByDisplayValue('CI Bot');
-
-		const deleteBtn = screen.getByRole('button', {
-			name: /Delete Service Account/i,
-		});
-		await waitFor(() => expect(deleteBtn).toBeDisabled());
-	});
 });
 
 describe('ServiceAccountDrawer – save-error UX', () => {
@@ -493,18 +359,6 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => true),
-						),
-					),
-				);
-			}),
 		);
 	});
 

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

@@ -1,6 +1,6 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import CustomDomainSettings from '../CustomDomainSettings';
 
@@ -44,18 +44,20 @@ const mockHostsResponse: GetHosts200 = {
 };
 
 describe('CustomDomainSettings', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(mockHostsResponse)),
+			),
+		);
+	});
+
 	afterEach(() => {
 		server.resetHandlers();
 		mockToastCustom.mockClear();
 	});
 
 	it('renders active host URL in the trigger button', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
 		render(<CustomDomainSettings />);
 
 		// The active host is the non-default one (custom-host)
@@ -63,20 +65,11 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('opens edit modal when clicking the edit button', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		expect(
 			screen.getByRole('dialog', { name: /edit workspace link/i }),
@@ -89,28 +82,20 @@ describe('CustomDomainSettings', () => {
 		let capturedBody: Record<string, unknown> = {};
 
 		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
 			rest.put(ZEUS_HOSTS_ENDPOINT, async (req, res, ctx) => {
 				capturedBody = await req.json<Record<string, unknown>>();
 				return res(ctx.status(200), ctx.json({}));
 			}),
 		);
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
-		// The input is inside the modal — find it by its role
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'myteam' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		await waitFor(() => {
 			expect(capturedBody).toStrictEqual({ name: 'myteam' });
@@ -119,9 +104,6 @@ describe('CustomDomainSettings', () => {
 
 	it('shows contact support option when domain update returns 409', async () => {
 		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
 			rest.put(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(
 					ctx.status(409),
@@ -130,18 +112,14 @@ describe('CustomDomainSettings', () => {
 			),
 		);
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'myteam' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		await expect(
 			screen.findByRole('button', { name: /contact support/i }),
@@ -149,24 +127,14 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows validation error when subdomain is less than 3 characters', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'ab');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'ab' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		expect(
 			screen.getByText(/minimum 3 characters required/i),
@@ -174,19 +142,12 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows all workspace URLs as links in the dropdown', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
 		// Open the URL dropdown
-		await user.click(
+		fireEvent.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 
@@ -207,26 +168,19 @@ describe('CustomDomainSettings', () => {
 
 	it('calls toast.custom with new URL after successful domain update', async () => {
 		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
 			rest.put(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({})),
 			),
 		);
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'myteam' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		// Verify toast.custom was called
 		await waitFor(() => {
@@ -243,12 +197,6 @@ describe('CustomDomainSettings', () => {
 
 	describe('Workspace Name rendering', () => {
 		it('renders org displayName when available from appContext', async () => {
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(mockHostsResponse)),
-				),
-			);
-
 			render(<CustomDomainSettings />, undefined, {
 				appContextOverrides: {
 					org: [{ id: 'xyz', displayName: 'My Org Name', createdAt: 0 }],
@@ -259,12 +207,6 @@ describe('CustomDomainSettings', () => {
 		});
 
 		it('falls back to customDomainSubdomain when org displayName is missing', async () => {
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(mockHostsResponse)),
-				),
-			);
-
 			render(<CustomDomainSettings />, undefined, {
 				appContextOverrides: { org: [] },
 			});

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

@@ -1,12 +1,6 @@
 import setRetentionApiV2 from 'api/settings/setRetentionV2';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import { IDiskType } from 'types/api/disks/getDisks';
 import {
 	PayloadPropsLogs,
@@ -115,8 +109,6 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 
 	describe('Test 1: S3 Enabled - Only Days in Dropdown', () => {
 		it('should show only Days option for S3 retention and send correct API payload', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(
 				<GeneralSettings
 					metricsTtlValuesPayload={mockMetricsRetention}
@@ -159,8 +151,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			fireEvent.click(document.body);
 
 			// Change S3 retention value to 5 days
-			await user.clear(s3Input);
-			await user.type(s3Input, '5');
+			fireEvent.change(s3Input, { target: { value: '5' } });
 
 			// Find the save button in the Logs row
 			const saveButton = logsRow.querySelector(
@@ -217,8 +208,6 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 
 	describe('Test 2: S3 Disabled - Field Hidden', () => {
 		it('should hide S3 retention field and send empty S3 values to API', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(
 				<GeneralSettings
 					metricsTtlValuesPayload={mockMetricsRetention}
@@ -245,7 +234,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			const totalDropdown = logsRow.querySelector(
 				'.ant-select-selector',
 			) as HTMLElement;
-			await user.click(totalDropdown);
+			fireEvent.mouseDown(totalDropdown);
 
 			// Wait for dropdown options to appear
 			await waitFor(() => {
@@ -259,11 +248,10 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 				opt.textContent?.includes('Days'),
 			);
 			expect(daysOption).toBeInTheDocument();
-			await user.click(daysOption as HTMLElement);
+			fireEvent.click(daysOption as HTMLElement);
 
 			// Now change the value
-			await user.clear(totalInput);
-			await user.type(totalInput, '60');
+			fireEvent.change(totalInput, { target: { value: '60' } });
 
 			// Find the save button
 			const saveButton = logsRow.querySelector(
@@ -277,14 +265,14 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			});
 
 			// Click save button
-			await user.click(saveButton);
+			fireEvent.click(saveButton);
 
 			// Wait for modal to appear
 			const okButton = await screen.findByRole('button', { name: /ok/i });
 			expect(okButton).toBeInTheDocument();
 
 			// Click OK button
-			await user.click(okButton);
+			fireEvent.click(okButton);
 
 			// Verify API was called with empty S3 values (60 days)
 			await waitFor(() => {
@@ -333,8 +321,6 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 
 	describe('Test 4: Save Button State with S3 Disabled', () => {
 		it('should disable save button when cold_storage_ttl_days is -1 and no changes made', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(
 				<GeneralSettings
 					metricsTtlValuesPayload={mockMetricsRetention}
@@ -365,8 +351,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			const totalInput = inputs[0] as HTMLInputElement;
 
 			// Change total retention value to trigger button enable
-			await user.clear(totalInput);
-			await user.type(totalInput, '60');
+			fireEvent.change(totalInput, { target: { value: '60' } });
 
 			// Button should now be enabled after change
 			await waitFor(() => {
@@ -374,8 +359,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			});
 
 			// Revert to original value (30 days displays as 1 Month)
-			await user.clear(totalInput);
-			await user.type(totalInput, '1');
+			fireEvent.change(totalInput, { target: { value: '1' } });
 
 			// Button should be disabled again (back to original state)
 			await waitFor(() => {

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -1,6 +1,6 @@
 import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { fireEvent, render, screen } from 'tests/test-utils';
 
 import MembersSettings from '../MembersSettings';
 
@@ -76,32 +76,27 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('filters to pending invites via the filter dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.click(screen.getByRole('button', { name: /all members/i }));
+		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		await user.click(pendingOption);
+		fireEvent.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();
 	});
 
 	it('filters members by name using the search input', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.type(
-			screen.getByPlaceholderText(/Search by name or email/i),
-			'bob',
-		);
+		fireEvent.change(screen.getByPlaceholderText(/Search by name or email/i), {
+			target: { value: 'bob' },
+		});
 
 		await screen.findByText('Bob Jones');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();
@@ -109,31 +104,25 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('opens EditMemberDrawer when an active member row is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
-		await user.click(await screen.findByText('Alice Smith'));
+		fireEvent.click(await screen.findByText('Alice Smith'));
 
 		await screen.findByText('Member Details');
 	});
 
 	it('opens EditMemberDrawer when a deleted member row is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
-		await user.click(await screen.findByText('Dave Deleted'));
+		fireEvent.click(await screen.findByText('Dave Deleted'));
 
 		expect(screen.queryByText('Member Details')).toBeInTheDocument();
 	});
 
 	it('opens InviteMembersModal when "Invite member" button is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
-		await user.click(screen.getByRole('button', { name: /invite member/i }));
+		fireEvent.click(screen.getByRole('button', { name: /invite member/i }));
 
 		await expect(
 			screen.findAllByPlaceholderText('john@signoz.io'),

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

@@ -117,8 +117,7 @@ describe('CreateEdit Modal', () => {
 		});
 	});
 
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Form Validation', () => {
+	describe('Form Validation', () => {
 		it('shows validation error when submitting without required fields', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -127,7 +126,7 @@ describe('CreateEdit Modal', () => {
 			const configureButtons = await screen.findAllByRole('button', {
 				name: /configure/i,
 			});
-			await user.click(configureButtons[0]);
+			fireEvent.click(configureButtons[0]);
 
 			const saveButton = await screen.findByRole('button', {
 				name: /save changes/i,
@@ -338,11 +337,8 @@ describe('CreateEdit Modal', () => {
 		});
 	});
 
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Modal Actions', () => {
-		it('calls onClose when cancel button is clicked', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
+	describe('Modal Actions', () => {
+		it('calls onClose when cancel button is clicked', () => {
 			render(
 				<CreateEdit
 					isCreate={false}
@@ -352,7 +348,7 @@ describe('CreateEdit Modal', () => {
 			);
 
 			const cancelButton = screen.getByRole('button', { name: /cancel/i });
-			await user.click(cancelButton);
+			fireEvent.click(cancelButton);
 
 			expect(mockOnClose).toHaveBeenCalled();
 		});

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.styles.scss

@@ -29,6 +29,18 @@
 		border-bottom: 1px solid var(--l1-border);
 	}
 
+	&__close {
+		width: 16px;
+		height: 16px;
+		padding: 0;
+		color: var(--foreground);
+		flex-shrink: 0;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
 	&__header-divider {
 		display: block;
 		width: 1px;

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.tsx

@@ -78,50 +78,39 @@ function ResourceRow({
 							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</RadioGroupLabel>
 						</div>
 
-						{resource.type === 'metaresources' ? (
-							<div className="psp-resource__radio-item">
-								<RadioGroupItem
-									value={PermissionScope.ONLY_SELECTED}
-									id={`${resource.id}-none`}
-								/>
-								<RadioGroupLabel htmlFor={`${resource.id}-none`}>None</RadioGroupLabel>
-							</div>
-						) : (
-							<div className="psp-resource__radio-item">
-								<RadioGroupItem
-									value={PermissionScope.ONLY_SELECTED}
-									id={`${resource.id}-only-selected`}
-								/>
-								<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
-									Only selected
-								</RadioGroupLabel>
-							</div>
-						)}
+						<div className="psp-resource__radio-item">
+							<RadioGroupItem
+								value={PermissionScope.ONLY_SELECTED}
+								id={`${resource.id}-only-selected`}
+							/>
+							<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
+								Only selected
+							</RadioGroupLabel>
+						</div>
 					</RadioGroup>
 
-					{config.scope === PermissionScope.ONLY_SELECTED &&
-						resource.type !== 'metaresources' && (
-							<div className="psp-resource__select-wrapper">
-								{/* TODO: right now made to only accept user input, we need to give it proper resource based value fetching from APIs */}
-								<Select
-									mode="tags"
-									value={config.selectedIds}
-									onChange={(vals: string[]): void =>
-										onSelectedIdsChange(resource.id, vals)
-									}
-									options={resource.options ?? []}
-									placeholder="Select resources..."
-									className="psp-resource__select"
-									popupClassName="psp-resource__select-popup"
-									showSearch
-									filterOption={(input, option): boolean =>
-										String(option?.label ?? '')
-											.toLowerCase()
-											.includes(input.toLowerCase())
-									}
-								/>
-							</div>
-						)}
+					{config.scope === PermissionScope.ONLY_SELECTED && (
+						<div className="psp-resource__select-wrapper">
+							{/* TODO: right now made to only accept user input, we need to give it proper resource based value fetching from APIs */}
+							<Select
+								mode="tags"
+								value={config.selectedIds}
+								onChange={(vals: string[]): void =>
+									onSelectedIdsChange(resource.id, vals)
+								}
+								options={resource.options ?? []}
+								placeholder="Select resources..."
+								className="psp-resource__select"
+								popupClassName="psp-resource__select-popup"
+								showSearch
+								filterOption={(input, option): boolean =>
+									String(option?.label ?? '')
+										.toLowerCase()
+										.includes(input.toLowerCase())
+								}
+							/>
+						</div>
+					)}
 				</div>
 			)}
 		</div>
@@ -224,13 +213,13 @@ function PermissionSidePanel({
 			<div className="permission-side-panel">
 				<div className="permission-side-panel__header">
 					<Button
-						variant="link"
-						color="secondary"
+						variant="ghost"
 						size="icon"
+						className="permission-side-panel__close"
 						onClick={onClose}
 						aria-label="Close panel"
 					>
-						<X size={14} />
+						<X size={16} />
 					</Button>
 					<span className="permission-side-panel__header-divider" />
 					<span className="permission-side-panel__title">

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.types.ts

@@ -5,8 +5,6 @@ export interface ResourceOption {
 
 export interface ResourceDefinition {
 	id: string;
-	kind: string;
-	type: string;
 	label: string;
 	options?: ResourceOption[];
 }

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.styles.scss

@@ -282,6 +282,30 @@
 	}
 }
 
+.role-details-delete-action-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	min-width: 32px;
+	border: none;
+	border-radius: 2px;
+	background: transparent;
+	color: var(--destructive);
+	opacity: 0.6;
+	padding: 0;
+	transition:
+		background-color 0.2s,
+		opacity 0.2s;
+	box-shadow: none;
+
+	&:hover {
+		background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+		opacity: 0.9;
+	}
+}
+
 .role-details-delete-modal {
 	width: calc(100% - 30px) !important;
 	max-width: 384px;

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx

@@ -110,6 +110,7 @@ function RoleDetailsPage(): JSX.Element {
 				getGetObjectsQueryKey({ id: roleId, relation: activePermission }),
 			);
 		}
+		setActivePermission(null);
 	};
 
 	const { mutate: patchObjects, isLoading: isSaving } = usePatchObjects({
@@ -212,16 +213,18 @@ function RoleDetailsPage(): JSX.Element {
 				{!isManaged && (
 					<div className="role-details-actions">
 						<Button
-							variant="link"
+							variant="ghost"
 							color="destructive"
+							className="role-details-delete-action-btn"
 							onClick={(): void => setIsDeleteModalOpen(true)}
 							aria-label="Delete role"
 						>
-							<Trash2 size={12} />
+							<Trash2 size={14} />
 						</Button>
 						<Button
 							variant="solid"
 							color="secondary"
+							size="sm"
 							onClick={(): void => setIsEditModalOpen(true)}
 						>
 							Edit Role Details

frontend/src/container/RolesSettings/RoleDetails/__tests__/RoleDetailsPage.test.tsx

@@ -1,13 +1,20 @@
-// Ungate feature flag for all tests in this file
 jest.mock('../../config', () => ({ IS_ROLE_DETAILS_AND_CRUD_ENABLED: true }));
 
+import * as roleApi from 'api/generated/services/role';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	within,
+} from 'tests/test-utils';
 
 import RoleDetailsPage from '../RoleDetailsPage';
 
@@ -22,7 +29,7 @@ const allScopeObjectsResponse = {
 	status: 'success',
 	data: [
 		{
-			resource: { name: 'dashboard', type: 'dashboard' },
+			resource: { kind: 'role', type: 'metaresources' },
 			selectors: ['*'],
 		},
 	],
@@ -44,8 +51,7 @@ afterEach(() => {
 	server.resetHandlers();
 });
 
-// Todo: to fixed properly - failing with - due to timeout > 5000ms
-describe.skip('RoleDetailsPage', () => {
+describe('RoleDetailsPage', () => {
 	it('renders custom role header, tabs, description, permissions, and action buttons', async () => {
 		setupDefaultHandlers();
 
@@ -57,20 +63,16 @@ describe.skip('RoleDetailsPage', () => {
 			screen.findByText('Role — billing-manager'),
 		).resolves.toBeInTheDocument();
 
-		// Tab navigation
 		expect(screen.getByText('Overview')).toBeInTheDocument();
 		expect(screen.getByText('Members')).toBeInTheDocument();
 
-		// Role description (OverviewTab)
 		expect(
 			screen.getByText('Custom role for managing billing and invoices.'),
 		).toBeInTheDocument();
 
-		// Permission items derived from mocked authz relations
 		expect(screen.getByText('Create')).toBeInTheDocument();
 		expect(screen.getByText('Read')).toBeInTheDocument();
 
-		// Action buttons present for custom role
 		expect(
 			screen.getByRole('button', { name: /edit role details/i }),
 		).toBeInTheDocument();
@@ -96,14 +98,13 @@ describe.skip('RoleDetailsPage', () => {
 			),
 		).toBeInTheDocument();
 
-		// Action buttons absent for managed role
 		expect(screen.queryByText('Edit Role Details')).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole('button', { name: /delete role/i }),
 		).not.toBeInTheDocument();
 	});
 
-	it('edit flow: modal opens pre-filled and calls PATCH on save and verify', async () => {
+	it('edit flow: modal opens pre-filled and calls PATCH on save', async () => {
 		const patchSpy = jest.fn();
 		let description = customRoleResponse.data.description;
 		server.use(
@@ -138,21 +139,16 @@ describe.skip('RoleDetailsPage', () => {
 
 		await screen.findByText('Role — billing-manager');
 
-		// Open the edit modal
 		await user.click(screen.getByRole('button', { name: /edit role details/i }));
 		await expect(
-			screen.findByText('Edit Role Details', {
-				selector: '.ant-modal-title',
-			}),
+			screen.findByText('Edit Role Details', { selector: '.ant-modal-title' }),
 		).resolves.toBeInTheDocument();
 
-		// Name field is disabled in edit mode (role rename is not allowed)
 		const nameInput = screen.getByPlaceholderText(
 			'Enter role name e.g. : Service Owner',
 		);
 		expect(nameInput).toBeDisabled();
 
-		// Update description and save
 		const descField = screen.getByPlaceholderText(
 			'A helpful description of the role',
 		);
@@ -168,9 +164,7 @@ describe.skip('RoleDetailsPage', () => {
 
 		await waitFor(() =>
 			expect(
-				screen.queryByText('Edit Role Details', {
-					selector: '.ant-modal-title',
-				}),
+				screen.queryByText('Edit Role Details', { selector: '.ant-modal-title' }),
 			).not.toBeInTheDocument(),
 		);
 
@@ -219,58 +213,61 @@ describe.skip('RoleDetailsPage', () => {
 	});
 
 	describe('permission side panel', () => {
-		async function openCreatePanel(
-			user: ReturnType<typeof userEvent.setup>,
-		): Promise<void> {
+		beforeEach(() => {
+			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.
+			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
+				data: customRoleResponse,
+				isLoading: false,
+				isFetching: false,
+				isError: false,
+				error: null,
+			} as any);
+			jest
+				.spyOn(roleApi, 'useGetObjects')
+				.mockReturnValue({ data: emptyObjectsResponse, isLoading: false } as any);
+		});
+
+		afterEach(() => {
+			jest.restoreAllMocks();
+		});
+
+		async function openCreatePanel(): Promise<HTMLElement> {
 			await screen.findByText('Role — billing-manager');
-			await user.click(screen.getByText('Create'));
+			fireEvent.click(screen.getByText('Create'));
 			await screen.findByText('Edit Create Permissions');
-			await screen.findByRole('button', { name: /dashboard/i });
+			const panel = document.querySelector(
+				'.permission-side-panel',
+			) as HTMLElement;
+			await within(panel).findByRole('button', { name: 'Role' });
+			return panel;
 		}
 
 		it('Save Changes is disabled until a resource scope is changed', async () => {
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
-
-			// No change yet — config matches initial, unsavedCount = 0
-			expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled();
-
-			// Expand Dashboard and flip to All — now Save is enabled
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
+			const panel = await openCreatePanel();
 
 			expect(
-				screen.getByRole('button', { name: /save changes/i }),
-			).not.toBeDisabled();
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).toBeDisabled();
 
-			// check for what shown now - unsavedCount = 1
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('All'));
+
+			expect(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).not.toBeDisabled();
 			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
 		});
 
 		it('set scope to All → patchObjects additions: ["*"], deletions: null', async () => {
 			const patchSpy = jest.fn();
 
-			setupDefaultHandlers();
 			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
 				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
+					`${rolesApiBase}/:id/relations/:relation/objects`,
 					async (req, res, ctx) => {
 						patchSpy(await req.json());
 						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
@@ -278,23 +275,23 @@ describe.skip('RoleDetailsPage', () => {
 				),
 			);
 
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('All'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
 
 			await waitFor(() =>
 				expect(patchSpy).toHaveBeenCalledWith({
 					additions: [
 						{
-							resource: { name: 'dashboard', type: 'dashboard' },
+							resource: { kind: 'role', type: 'role' },
 							selectors: ['*'],
 						},
 					],
@@ -306,14 +303,9 @@ describe.skip('RoleDetailsPage', () => {
 		it('set scope to Only selected with IDs → patchObjects additions contain those IDs', async () => {
 			const patchSpy = jest.fn();
 
-			setupDefaultHandlers();
 			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
 				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
+					`${rolesApiBase}/:id/relations/:relation/objects`,
 					async (req, res, ctx) => {
 						patchSpy(await req.json());
 						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
@@ -321,29 +313,28 @@ describe.skip('RoleDetailsPage', () => {
 				),
 			);
 
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
 
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-			await user.type(combobox, 'dash-1');
-			await user.keyboard('{Enter}');
+			const combobox = within(panel).getByRole('combobox');
+			fireEvent.change(combobox, { target: { value: 'role-001' } });
+			fireEvent.keyDown(combobox, { key: 'Enter', keyCode: 13 });
 
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
 
 			await waitFor(() =>
 				expect(patchSpy).toHaveBeenCalledWith({
 					additions: [
 						{
-							resource: { name: 'dashboard', type: 'dashboard' },
-							selectors: ['dash-1'],
+							resource: { kind: 'role', type: 'role' },
+							selectors: ['role-001'],
 						},
 					],
 					deletions: null,
@@ -354,15 +345,13 @@ describe.skip('RoleDetailsPage', () => {
 		it('existing All scope changed to Only selected (empty) → patchObjects deletions: ["*"], additions: null', async () => {
 			const patchSpy = jest.fn();
 
-			setupDefaultHandlers();
+			jest.spyOn(roleApi, 'useGetObjects').mockReturnValue({
+				data: allScopeObjectsResponse,
+				isLoading: false,
+			} as any);
 			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) =>
-						res(ctx.status(200), ctx.json(allScopeObjectsResponse)),
-				),
 				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
+					`${rolesApiBase}/:id/relations/:relation/objects`,
 					async (req, res, ctx) => {
 						patchSpy(await req.json());
 						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
@@ -370,26 +359,24 @@ describe.skip('RoleDetailsPage', () => {
 				),
 			);
 
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('Only selected'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
 
-			await user.click(screen.getByText('Only selected'));
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
-
-			// Should delete the '*' selector and add nothing
 			await waitFor(() =>
 				expect(patchSpy).toHaveBeenCalledWith({
 					additions: null,
 					deletions: [
 						{
-							resource: { name: 'dashboard', type: 'dashboard' },
+							resource: { kind: 'role', type: 'role' },
 							selectors: ['*'],
 						},
 					],
@@ -398,36 +385,25 @@ describe.skip('RoleDetailsPage', () => {
 		});
 
 		it('unsaved changes counter shown on scope change, Discard resets it', async () => {
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			// No unsaved changes indicator yet
 			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
 
-			// Change dashboard scope to "All"
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('All'));
 
 			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
 
-			// Discard reverts to initial config — counter disappears, Save re-disabled
-			await user.click(screen.getByRole('button', { name: /discard/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: /discard/i }));
 
 			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled();
+			expect(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).toBeDisabled();
 		});
 	});
 });

frontend/src/container/RolesSettings/RolesComponents/DeleteRoleModal.tsx

@@ -27,8 +27,9 @@ function DeleteRoleModal({
 				<Button
 					key="cancel"
 					className="cancel-btn"
-					prefix={<X size={14} />}
+					prefix={<X size={16} />}
 					onClick={onCancel}
+					size="sm"
 					variant="solid"
 					color="secondary"
 				>
@@ -37,9 +38,10 @@ function DeleteRoleModal({
 				<Button
 					key="delete"
 					className="delete-btn"
-					prefix={<Trash2 size={14} />}
+					prefix={<Trash2 size={16} />}
 					onClick={onConfirm}
 					loading={isDeleting}
+					size="sm"
 					variant="solid"
 					color="destructive"
 				>

frontend/src/container/RolesSettings/RolesSettings.styles.scss

@@ -285,23 +285,16 @@
 			}
 		}
 
-		input {
-			&::placeholder {
-				opacity: 0.4;
-			}
-		}
-
+		// todo: https://github.com/SigNoz/components/issues/116
+		input,
 		textarea {
 			width: 100%;
-			box-sizing: border-box;
-			min-height: 100px;
-			resize: vertical;
-			background: var(--input-background, transparent);
-			border: 1px solid var(--border);
+			background: var(--l3-background);
+			border: 1px solid var(--l1-border);
 			border-radius: 2px;
 			padding: 6px 8px;
 			font-family: Inter;
-			font-size: var(--font-size-xs);
+			font-size: 14px;
 			font-weight: 400;
 			line-height: 18px;
 			letter-spacing: -0.07px;
@@ -310,7 +303,7 @@
 			box-shadow: none;
 
 			&::placeholder {
-				color: var(--muted-foreground);
+				color: var(--l3-foreground);
 				opacity: 0.4;
 			}
 
@@ -320,6 +313,25 @@
 				box-shadow: none;
 			}
 		}
+
+		input {
+			height: 32px;
+		}
+
+		input:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+
+			&:hover {
+				border-color: var(--l1-border);
+				box-shadow: none;
+			}
+		}
+
+		textarea {
+			min-height: 100px;
+			resize: vertical;
+		}
 	}
 
 	.ant-modal-footer {

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

@@ -4,24 +4,27 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { fireEvent, render, screen } from 'tests/test-utils';
 
 import RolesSettings from '../RolesSettings';
 
 const rolesApiURL = 'http://localhost/api/v1/roles';
 
 describe('RolesSettings', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders the header and search input', () => {
+	beforeEach(() => {
 		server.use(
 			rest.get(rolesApiURL, (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
 			),
 		);
+	});
 
+	afterEach(() => {
+		jest.clearAllMocks();
+		server.resetHandlers();
+	});
+
+	it('renders the header and search input', () => {
 		render(<RolesSettings />);
 
 		expect(screen.getByText('Roles')).toBeInTheDocument();
@@ -34,12 +37,6 @@ describe('RolesSettings', () => {
 	});
 
 	it('displays roles grouped by managed and custom sections', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
@@ -68,20 +65,13 @@ describe('RolesSettings', () => {
 	});
 
 	it('filters roles by search query on name', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const searchInput = screen.getByPlaceholderText('Search for roles...');
-
-		await user.type(searchInput, 'billing');
+		fireEvent.change(screen.getByPlaceholderText('Search for roles...'), {
+			target: { value: 'billing' },
+		});
 
 		await expect(
 			screen.findByText('billing-manager'),
@@ -92,20 +82,13 @@ describe('RolesSettings', () => {
 	});
 
 	it('filters roles by search query on description', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const searchInput = screen.getByPlaceholderText('Search for roles...');
-
-		await user.type(searchInput, 'read-only');
+		fireEvent.change(screen.getByPlaceholderText('Search for roles...'), {
+			target: { value: 'read-only' },
+		});
 
 		await expect(screen.findByText('signoz-viewer')).resolves.toBeInTheDocument();
 		expect(screen.queryByText('signoz-admin')).not.toBeInTheDocument();
@@ -113,20 +96,13 @@ describe('RolesSettings', () => {
 	});
 
 	it('shows empty state when search matches nothing', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const searchInput = screen.getByPlaceholderText('Search for roles...');
-
-		await user.type(searchInput, 'nonexistentrole');
+		fireEvent.change(screen.getByPlaceholderText('Search for roles...'), {
+			target: { value: 'nonexistentrole' },
+		});
 
 		await expect(
 			screen.findByText('No roles match your search.'),
@@ -183,12 +159,6 @@ describe('RolesSettings', () => {
 	});
 
 	it('renders descriptions for all roles', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();

frontend/src/container/RolesSettings/__tests__/utils.test.ts

@@ -58,18 +58,8 @@ const baseAuthzResources: AuthzResources = {
 };
 
 const resourceDefs: ResourceDefinition[] = [
-	{
-		id: 'metaresource:dashboard',
-		kind: 'dashboard',
-		type: 'metaresource',
-		label: 'Dashboard',
-	},
-	{
-		id: 'metaresource:alert',
-		kind: 'alert',
-		type: 'metaresource',
-		label: 'Alert',
-	},
+	{ id: 'dashboard', label: 'Dashboard' },
+	{ id: 'alert', label: 'Alert' },
 ];
 
 const ID_A = 'aaaaaaaa-0000-0000-0000-000000000001';
@@ -79,24 +69,15 @@ const ID_C = 'cccccccc-0000-0000-0000-000000000003';
 describe('buildPatchPayload', () => {
 	it('sends only the added selector as an addition', () => {
 		const initial: PermissionConfig = {
-			'metaresource:dashboard': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A],
-			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 		const newConfig: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 
 		const result = buildPatchPayload({
@@ -114,24 +95,18 @@ describe('buildPatchPayload', () => {
 
 	it('sends only the removed selector as a deletion', () => {
 		const initial: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B, ID_C],
 			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 		const newConfig: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_C],
 			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 
 		const result = buildPatchPayload({
@@ -149,24 +124,18 @@ describe('buildPatchPayload', () => {
 
 	it('treats selector order as irrelevant — produces no payload when IDs are identical', () => {
 		const initial: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 		const newConfig: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_B, ID_A],
 			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 
 		const result = buildPatchPayload({
@@ -182,21 +151,15 @@ describe('buildPatchPayload', () => {
 
 	it('replaces wildcard with specific IDs when switching all → only_selected', () => {
 		const initial: PermissionConfig = {
-			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 		const newConfig: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 
 		const result = buildPatchPayload({
@@ -216,21 +179,12 @@ describe('buildPatchPayload', () => {
 
 	it('only deletes wildcard when switching all → only_selected with empty selector list', () => {
 		const initial: PermissionConfig = {
-			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 		const newConfig: PermissionConfig = {
-			'metaresource:dashboard': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 
 		const result = buildPatchPayload({
@@ -248,18 +202,12 @@ describe('buildPatchPayload', () => {
 
 	it('only includes resources that actually changed', () => {
 		const initial: PermissionConfig = {
-			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A],
-			},
+			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
 		};
 		const newConfig: PermissionConfig = {
-			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] }, // unchanged
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_B],
-			}, // added ID_B
+			dashboard: { scope: PermissionScope.ALL, selectedIds: [] }, // unchanged
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A, ID_B] }, // added ID_B
 		};
 
 		const result = buildPatchPayload({
@@ -284,7 +232,7 @@ describe('objectsToPermissionConfig', () => {
 
 		const result = objectsToPermissionConfig(objects, resourceDefs);
 
-		expect(result['metaresource:dashboard']).toStrictEqual({
+		expect(result.dashboard).toStrictEqual({
 			scope: PermissionScope.ALL,
 			selectedIds: [],
 		});
@@ -297,7 +245,7 @@ describe('objectsToPermissionConfig', () => {
 
 		const result = objectsToPermissionConfig(objects, resourceDefs);
 
-		expect(result['metaresource:dashboard']).toStrictEqual({
+		expect(result.dashboard).toStrictEqual({
 			scope: PermissionScope.ONLY_SELECTED,
 			selectedIds: [ID_A, ID_B],
 		});
@@ -306,11 +254,11 @@ describe('objectsToPermissionConfig', () => {
 	it('defaults to ONLY_SELECTED with empty selectedIds when resource is absent from API response', () => {
 		const result = objectsToPermissionConfig([], resourceDefs);
 
-		expect(result['metaresource:dashboard']).toStrictEqual({
+		expect(result.dashboard).toStrictEqual({
 			scope: PermissionScope.ONLY_SELECTED,
 			selectedIds: [],
 		});
-		expect(result['metaresource:alert']).toStrictEqual({
+		expect(result.alert).toStrictEqual({
 			scope: PermissionScope.ONLY_SELECTED,
 			selectedIds: [],
 		});
@@ -320,11 +268,8 @@ describe('objectsToPermissionConfig', () => {
 describe('configsEqual', () => {
 	it('returns true for identical configs', () => {
 		const config: PermissionConfig = {
-			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
-			'metaresource:alert': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A],
-			},
+			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
+			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
 		};
 
 		expect(configsEqual(config, { ...config })).toBe(true);
@@ -332,25 +277,22 @@ describe('configsEqual', () => {
 
 	it('returns false when configs differ', () => {
 		const a: PermissionConfig = {
-			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
 		};
 		const b: PermissionConfig = {
-			'metaresource:dashboard': {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			},
+			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
 		};
 
 		expect(configsEqual(a, b)).toBe(false);
 
 		const c: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_C, ID_B],
 			},
 		};
 		const d: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
@@ -361,13 +303,13 @@ describe('configsEqual', () => {
 
 	it('returns true when selectedIds are the same but in different order', () => {
 		const a: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
 		};
 		const b: PermissionConfig = {
-			'metaresource:dashboard': {
+			dashboard: {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_B, ID_A],
 			},
@@ -380,25 +322,23 @@ describe('configsEqual', () => {
 describe('buildConfig', () => {
 	it('uses initial values when provided and defaults for resources not in initial', () => {
 		const initial: PermissionConfig = {
-			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
 		};
 
 		const result = buildConfig(resourceDefs, initial);
 
-		expect(result['metaresource:dashboard']).toStrictEqual({
+		expect(result.dashboard).toStrictEqual({
 			scope: PermissionScope.ALL,
 			selectedIds: [],
 		});
-		expect(result['metaresource:alert']).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
+		expect(result.alert).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
 	});
 
 	it('applies DEFAULT_RESOURCE_CONFIG to all resources when no initial is provided', () => {
 		const result = buildConfig(resourceDefs);
 
-		expect(result['metaresource:dashboard']).toStrictEqual(
-			DEFAULT_RESOURCE_CONFIG,
-		);
-		expect(result['metaresource:alert']).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
+		expect(result.dashboard).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
+		expect(result.alert).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
 	});
 });
 
@@ -435,10 +375,7 @@ describe('deriveResourcesForRelation', () => {
 		const result = deriveResourcesForRelation(baseAuthzResources, 'create');
 
 		expect(result).toHaveLength(2);
-		expect(result.map((r) => r.id)).toStrictEqual([
-			'metaresource:dashboard',
-			'metaresource:alert',
-		]);
+		expect(result.map((r) => r.id)).toStrictEqual(['dashboard', 'alert']);
 	});
 
 	it('returns an empty array when authzResources is null', () => {

frontend/src/container/RolesSettings/config.ts

@@ -1 +1 @@
-export const IS_ROLE_DETAILS_AND_CRUD_ENABLED = true;
+export const IS_ROLE_DETAILS_AND_CRUD_ENABLED = false;

frontend/src/container/RolesSettings/utils.tsx

@@ -70,9 +70,7 @@ export function deriveResourcesForRelation(
 	return authzResources.resources
 		.filter((r) => supportedTypes.includes(r.type))
 		.map((r) => ({
-			id: `${r.type}:${r.kind}`,
-			kind: r.kind,
-			type: r.type,
+			id: r.kind,
 			label: capitalize(r.kind).replaceAll('_', ' '),
 			options: [],
 		}));
@@ -84,9 +82,7 @@ export function objectsToPermissionConfig(
 ): PermissionConfig {
 	const config: PermissionConfig = {};
 	for (const res of resources) {
-		const obj = objects.find(
-			(o) => o.resource.kind === res.kind && o.resource.type === res.type,
-		);
+		const obj = objects.find((o) => o.resource.kind === res.id);
 		if (!obj) {
 			config[res.id] = {
 				scope: PermissionScope.ONLY_SELECTED,
@@ -122,9 +118,7 @@ export function buildPatchPayload({
 	for (const res of resources) {
 		const initial = initialConfig[res.id];
 		const current = newConfig[res.id];
-		const resourceDef = authzRes.resources.find(
-			(r) => r.kind === res.kind && r.type === res.type,
-		);
+		const resourceDef = authzRes.resources.find((r) => r.kind === res.id);
 		if (!resourceDef) {
 			continue;
 		}

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.test.tsx

@@ -1,149 +0,0 @@
-import {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, waitFor } from 'tests/test-utils';
-import ServiceAccountsSettings from './ServiceAccountsSettings';
-
-const AUTHZ_CHECK_URL = 'http://localhost/api/v1/authz/check';
-const SA_LIST_URL = 'http://localhost/api/v1/service_accounts';
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
-function renderPage(): ReturnType<typeof render> {
-	return render(
-		<NuqsTestingAdapter searchParams={{}} hasMemory>
-			<ServiceAccountsSettings />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('ServiceAccountsSettings — FGA', () => {
-	beforeEach(() => {
-		server.use(
-			rest.get(SA_LIST_URL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: [] })),
-			),
-		);
-	});
-
-	it('shows PermissionDeniedFullPage when list permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => false),
-						),
-					),
-				);
-			}),
-		);
-
-		renderPage();
-
-		await waitFor(() => {
-			expect(
-				screen.getByText(/You don't have permission to view this page/),
-			).toBeInTheDocument();
-		});
-
-		expect(screen.queryByRole('table')).not.toBeInTheDocument();
-	});
-
-	it('shows table when list permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => true),
-						),
-					),
-				);
-			}),
-		);
-
-		renderPage();
-
-		await waitFor(() => {
-			expect(screen.getByRole('table')).toBeInTheDocument();
-		});
-
-		expect(
-			screen.queryByText(/You don't have permission to view this page/),
-		).not.toBeInTheDocument();
-	});
-
-	it('disables New Service Account button when create permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				// grant list, deny create — matched by relation name
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map((txn: AuthtypesTransactionDTO) => txn.relation === 'list'),
-						),
-					),
-				);
-			}),
-		);
-
-		renderPage();
-
-		await waitFor(() => {
-			expect(
-				screen.getByRole('button', { name: /New Service Account/i }),
-			).toBeDisabled();
-		});
-	});
-
-	it('enables New Service Account button when create permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => true),
-						),
-					),
-				);
-			}),
-		);
-
-		renderPage();
-
-		await waitFor(() => {
-			expect(
-				screen.getByRole('button', { name: /New Service Account/i }),
-			).not.toBeDisabled();
-		});
-	});
-});

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -5,15 +5,8 @@ import { Input } from '@signozhq/ui/input';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import { GuardAuthZ } from 'components/GuardAuthZ/GuardAuthZ';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
-import Spinner from 'components/Spinner';
-import type { AuthZObject } from 'hooks/useAuthZ/types';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { buildPermission } from 'hooks/useAuthZ/utils';
 import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
 import ServiceAccountsTable, {
 	PAGE_SIZE,
@@ -58,21 +51,13 @@ function ServiceAccountsSettings(): JSX.Element {
 		parseAsBoolean.withDefault(false),
 	);
 
-	const listPermission = buildPermission(
-		'list',
-		'serviceaccount' as AuthZObject<'list'>,
-	);
-	const { permissions: authZPermissions } = useAuthZ([listPermission]);
-	const hasListPermission =
-		authZPermissions?.[listPermission]?.isGranted ?? false;
-
 	const {
 		data: serviceAccountsData,
 		isLoading,
 		isError,
 		error,
 		refetch: handleCreateSuccess,
-	} = useListServiceAccounts({ query: { enabled: hasListPermission } });
+	} = useListServiceAccounts();
 
 	const allAccounts = useMemo(
 		(): ServiceAccountRow[] =>
@@ -127,9 +112,9 @@ function ServiceAccountsSettings(): JSX.Element {
 
 		const maxPage = Math.max(1, Math.ceil(filteredAccounts.length / PAGE_SIZE));
 		if (currentPage > maxPage) {
-			void setPage(maxPage);
+			setPage(maxPage);
 		} else if (currentPage < 1) {
-			void setPage(1);
+			setPage(1);
 		}
 	}, [filteredAccounts.length, currentPage, setPage]);
 
@@ -145,8 +130,8 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			),
 			onClick: (): void => {
-				void setFilterMode(FilterMode.All);
-				void setPage(1);
+				setFilterMode(FilterMode.All);
+				setPage(1);
 			},
 		},
 		{
@@ -158,8 +143,8 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			),
 			onClick: (): void => {
-				void setFilterMode(FilterMode.Active);
-				void setPage(1);
+				setFilterMode(FilterMode.Active);
+				setPage(1);
 			},
 		},
 		{
@@ -171,8 +156,8 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			),
 			onClick: (): void => {
-				void setFilterMode(FilterMode.Deleted);
-				void setPage(1);
+				setFilterMode(FilterMode.Deleted);
+				setPage(1);
 			},
 		},
 	];
@@ -191,7 +176,7 @@ function ServiceAccountsSettings(): JSX.Element {
 
 	const handleRowClick = useCallback(
 		(row: ServiceAccountRow): void => {
-			void setSelectedAccountId(row.id);
+			setSelectedAccountId(row.id);
 		},
 		[setSelectedAccountId],
 	);
@@ -199,9 +184,9 @@ function ServiceAccountsSettings(): JSX.Element {
 	const handleDrawerSuccess = useCallback(
 		(options?: { closeDrawer?: boolean }): void => {
 			if (options?.closeDrawer) {
-				void setSelectedAccountId(null);
+				setSelectedAccountId(null);
 			}
-			void handleCreateSuccess();
+			handleCreateSuccess();
 		},
 		[handleCreateSuccess, setSelectedAccountId],
 	);
@@ -223,84 +208,64 @@ function ServiceAccountsSettings(): JSX.Element {
 						</a>
 					</p>
 				</div>
-			</div>
 
-			<GuardAuthZ
-				relation="list"
-				object={'serviceaccount' as AuthZObject<'list'>}
-				fallbackOnLoading={<Spinner height="50vh" />}
-				fallbackOnNoPermissions={(): JSX.Element => (
-					<PermissionDeniedFullPage permissionName="serviceaccount:list" />
-				)}
-			>
-				<div className="sa-settings__list-section">
-					<div className="sa-settings__controls">
-						<Dropdown
-							menu={{ items: filterMenuItems }}
-							trigger={['click']}
-							overlayClassName="sa-settings-filter-dropdown"
+				<div className="sa-settings__controls">
+					<Dropdown
+						menu={{ items: filterMenuItems }}
+						trigger={['click']}
+						overlayClassName="sa-settings-filter-dropdown"
+					>
+						<Button
+							variant="solid"
+							color="secondary"
+							className="sa-settings-filter-trigger"
 						>
-							<Button
-								variant="solid"
-								color="secondary"
-								className="sa-settings-filter-trigger"
-							>
-								<span>{filterLabel}</span>
-								<ChevronDown
-									size={12}
-									className="sa-settings-filter-trigger__chevron"
-								/>
-							</Button>
-						</Dropdown>
+							<span>{filterLabel}</span>
+							<ChevronDown size={12} className="sa-settings-filter-trigger__chevron" />
+						</Button>
+					</Dropdown>
 
-						<div className="sa-settings__search">
-							<Input
-								type="search"
-								name="service-accounts-search"
-								placeholder="Search by name or email..."
-								value={searchQuery}
-								onChange={(e): void => {
-									void setSearchQuery(e.target.value);
-									void setPage(1);
-								}}
-								className="sa-settings-search-input"
-							/>
-						</div>
-
-						<AuthZTooltip
-							relation="create"
-							object="serviceaccount"
-							permissionName="serviceaccount:create"
-						>
-							<Button
-								variant="solid"
-								color="primary"
-								onClick={async (): Promise<void> => {
-									await setIsCreateModalOpen(true);
-								}}
-							>
-								<Plus size={12} />
-								New Service Account
-							</Button>
-						</AuthZTooltip>
+					<div className="sa-settings__search">
+						<Input
+							type="search"
+							name="service-accounts-search"
+							placeholder="Search by name or email..."
+							value={searchQuery}
+							onChange={(e): void => {
+								setSearchQuery(e.target.value);
+								setPage(1);
+							}}
+							className="sa-settings-search-input"
+						/>
 					</div>
 
-					{isError ? (
-						<ErrorInPlace
-							error={toAPIError(
-								error,
-								'An unexpected error occurred while fetching service accounts.',
-							)}
-						/>
-					) : (
-						<ServiceAccountsTable
-							data={filteredAccounts}
-							loading={isLoading}
-							onRowClick={handleRowClick}
-						/>
-					)}
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={async (): Promise<void> => {
+							await setIsCreateModalOpen(true);
+						}}
+					>
+						<Plus size={12} />
+						New Service Account
+					</Button>
 				</div>
-			</GuardAuthZ>
+			</div>
+
+			{isError ? (
+				<ErrorInPlace
+					error={toAPIError(
+						error,
+						'An unexpected error occurred while fetching service accounts.',
+					)}
+				/>
+			) : (
+				<ServiceAccountsTable
+					data={filteredAccounts}
+					loading={isLoading}
+					onRowClick={handleRowClick}
+				/>
+			)}
 
 			<CreateServiceAccountModal />
 

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.integration.test.tsx

@@ -1,14 +1,11 @@
 import type { ReactNode } from 'react';
-import type { AuthtypesTransactionDTO } from 'api/generated/services/sigNoz.schemas';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import ServiceAccountsSettings from '../ServiceAccountsSettings';
 
-const AUTHZ_CHECK_URL = 'http://localhost/api/v1/authz/check';
-
 const SA_LIST_ENDPOINT = '*/api/v1/service_accounts';
 const SA_ENDPOINT = '*/api/v1/service_accounts/:id';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
@@ -88,21 +85,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		server.use(
-			// Grant all authz permissions by default
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = (await req.json()) as AuthtypesTransactionDTO[];
-				return res(
-					ctx.status(200),
-					ctx.json({
-						data: payload.map((txn) => ({
-							relation: txn.relation,
-							object: txn.object,
-							authorized: true,
-						})),
-						status: 'success',
-					}),
-				);
-			}),
 			rest.get(SA_LIST_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ data: mockServiceAccountsAPI })),
 			),
@@ -141,8 +123,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -151,18 +131,16 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.click(screen.getByRole('button', { name: /All accounts/i }));
+		fireEvent.click(screen.getByRole('button', { name: /All accounts/i }));
 
 		const activeOption = await screen.findByText(/Active ⎯/i);
-		await user.click(activeOption);
+		fireEvent.click(activeOption);
 
 		await screen.findByText('CI Bot');
 		expect(screen.queryByText('Legacy Bot')).not.toBeInTheDocument();
 	});
 
 	it('search by name filters accounts in real-time', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -171,10 +149,9 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.type(
-			screen.getByPlaceholderText(/Search by name or email/i),
-			'legacy',
-		);
+		fireEvent.change(screen.getByPlaceholderText(/Search by name or email/i), {
+			target: { value: 'legacy' },
+		});
 
 		await screen.findByText('Legacy Bot');
 		expect(screen.queryByText('CI Bot')).not.toBeInTheDocument();
@@ -182,15 +159,13 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('clicking a row opens the drawer with account details visible', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter hasMemory>
 				<ServiceAccountsSettings />
 			</NuqsTestingAdapter>,
 		);
 
-		await user.click(
+		fireEvent.click(
 			await screen.findByRole('button', {
 				name: /View service account CI Bot/i,
 			}),
@@ -202,7 +177,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('saving changes in the drawer refetches the list', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const listRefetchSpy = jest.fn();
 
 		server.use(
@@ -224,15 +198,14 @@ describe('ServiceAccountsSettings (integration)', () => {
 		await screen.findByText('CI Bot');
 		listRefetchSpy.mockClear();
 
-		await user.click(
+		fireEvent.click(
 			await screen.findByRole('button', { name: /View service account CI Bot/i }),
 		);
 
 		const nameInput = await screen.findByDisplayValue('CI Bot');
-		await user.clear(nameInput);
-		await user.type(nameInput, 'CI Bot Updated');
+		fireEvent.change(nameInput, { target: { value: 'CI Bot Updated' } });
 
-		await user.click(screen.getByRole('button', { name: /Save Changes/i }));
+		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));
 
 		await screen.findByDisplayValue('CI Bot Updated');
 		await waitFor(() => {
@@ -241,8 +214,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('"New Service Account" button opens the Create Service Account modal', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter hasMemory>
 				<ServiceAccountsSettings />
@@ -251,9 +222,7 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.click(
-			screen.getByRole('button', { name: /New Service Account/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /New Service Account/i }));
 
 		await screen.findByRole('dialog', { name: /New Service Account/i });
 		expect(screen.getByPlaceholderText('Enter a name')).toBeInTheDocument();

frontend/src/hooks/useAuthZ/serviceAccountPermissions.ts

@@ -1,30 +0,0 @@
-// src/hooks/useAuthZ/serviceAccountPermissions.ts
-import { buildPermission } from './utils';
-import type { AuthZObject, BrandedPermission } from './types';
-
-// Metaresource-level — no specific ID needed
-export const SAListPermission = buildPermission(
-	'list',
-	'serviceaccount' as AuthZObject<'list'>,
-);
-export const SACreatePermission = buildPermission(
-	'create',
-	'serviceaccount' as AuthZObject<'create'>,
-);
-
-// Resource-level — require a specific SA id
-export const buildSAReadPermission = (id: string): BrandedPermission =>
-	buildPermission('read', `serviceaccount:${id}` as AuthZObject<'read'>);
-export const buildSAUpdatePermission = (id: string): BrandedPermission =>
-	buildPermission('update', `serviceaccount:${id}` as AuthZObject<'update'>);
-export const buildSADeletePermission = (id: string): BrandedPermission =>
-	buildPermission('delete', `serviceaccount:${id}` as AuthZObject<'delete'>);
-export const buildSAAttachPermission = (id: string): BrandedPermission =>
-	buildPermission('attach', `serviceaccount:${id}` as AuthZObject<'attach'>);
-
-// Wildcard role attach — used alongside buildSAAttachPermission for role selector guard.
-// Backend requires both serviceaccount:attach AND role:attach to assign/revoke roles on a SA.
-export const RoleAttachWildcardPermission = buildPermission(
-	'attach',
-	'role:*' as AuthZObject<'attach'>,
-);

frontend/src/pages/Settings/Settings.tsx

@@ -72,26 +72,18 @@ function SettingsPage(): JSX.Element {
 			}
 
 			if (isCloudUser) {
-				// Visible to all authenticated users
-				updatedItems = updatedItems.map((item) => ({
-					...item,
-					isEnabled:
-						item.key === ROUTES.ROLES_SETTINGS ||
-						item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
-							? true
-							: item.isEnabled,
-				}));
-
 				if (isAdmin) {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
+							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.ROLE_DETAILS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.SHORTCUTS ||
 							item.key === ROUTES.MCP_SERVER
 								? true
@@ -121,25 +113,17 @@ function SettingsPage(): JSX.Element {
 			}
 
 			if (isEnterpriseSelfHostedUser) {
-				// Visible to all authenticated users
-				updatedItems = updatedItems.map((item) => ({
-					...item,
-					isEnabled:
-						item.key === ROUTES.ROLES_SETTINGS ||
-						item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
-							? true
-							: item.isEnabled,
-				}));
-
 				if (isAdmin) {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
+							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.ROLE_DETAILS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.MCP_SERVER
 								? true
@@ -168,22 +152,14 @@ function SettingsPage(): JSX.Element {
 			}
 
 			if (!isCloudUser && !isEnterpriseSelfHostedUser) {
-				// Visible to all authenticated users
-				updatedItems = updatedItems.map((item) => ({
-					...item,
-					isEnabled:
-						item.key === ROUTES.ROLES_SETTINGS ||
-						item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
-							? true
-							: item.isEnabled,
-				}));
-
 				if (isAdmin) {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
+							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.ROLE_DETAILS
 								? true
 								: item.isEnabled,

frontend/src/pages/Settings/utils.ts

@@ -62,12 +62,13 @@ export const getRoutes = (
 
 	settings.push(...alertChannels(t));
 
-	// Visible to all authenticated users
-	settings.push(...serviceAccountsSettings(t), ...rolesSettings(t));
-
-	// Admin-only: members management and role detail/edit page
 	if (isAdmin) {
-		settings.push(...membersSettings(t), ...roleDetails(t));
+		settings.push(
+			...membersSettings(t),
+			...serviceAccountsSettings(t),
+			...rolesSettings(t),
+			...roleDetails(t),
+		);
 	}
 
 	if ((isCloudUser || isEnterpriseSelfHostedUser) && isAdmin) {

frontend/src/utils/permission/index.ts

@@ -98,10 +98,10 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	GET_STARTED_AZURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_LOCKED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_SUSPENDED: ['ADMIN', 'EDITOR', 'VIEWER'],
-	ROLES_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ROLES_SETTINGS: ['ADMIN'],
 	ROLE_DETAILS: ['ADMIN'],
 	MEMBERS_SETTINGS: ['ADMIN'],
-	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],