fix(form-alert-rules): confirm modal broken (#11347)

* feat(role-fga): added feature flag gate on roles fga - create and details page

* feat(role-fga): updated tests

* feat(role-fga): added is role gate fetching logic including feature flag loading

* feat(role-fga): fix the rolesselect search not working for the dropdown options

* feat(role-fga): updated tests and refactor

ee/query-service/app/api/featureFlags.go

@@ -80,6 +80,15 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	fineGrainedAuthz := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseFineGrainedAuthz, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureUseFineGrainedAuthz.String()),
+		Active:     fineGrainedAuthz,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

frontend/orval.config.ts

@@ -10,6 +10,13 @@ export default defineConfig({
 	signoz: {
 		input: {
 			target: '../docs/api/openapi.yml',
+			// Perses' `common.JSONRef` (used by `DashboardGridItem.content`) has a
+			// field tagged `json:"$ref"`, so our spec contains a property literally
+			// named `$ref`.
+			// Orval v8's validator (`@scalar/openapi-parser`) treats every `$ref` key
+			// as a JSON Reference and aborts with `INVALID_REFERENCE` when the value isn't a URI string.
+			// Safe to disable: yes, the spec is generated by `cmd/openapi.go` and gated by backend CI, not hand-edited.
+			unsafeDisableValidation: true,
 		},
 		output: {
 			target: './src/api/generated/services',

frontend/src/api/generated/services/alerts/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/authdomains/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/authz/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/channels/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/cloudintegration/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/dashboard/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/downtimeschedules/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/features/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/fields/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/gateway/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/global/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/health/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/inframonitoring/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/llmpricingrules/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/logs/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/metrics/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/orgs/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/preferences/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/querier/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/role/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/routepolicies/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/rules/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/serviceaccount/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/sessions/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 export interface AlertmanagertypesChannelDTO {
 	/**

frontend/src/api/generated/services/spanmapper/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/tracedetail/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/users/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/zeus/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -144,6 +144,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 				loading={loading}
 				notFoundContent={notFoundContent}
 				options={options}
+				optionFilterProp="label"
 				optionRender={(option): JSX.Element => (
 					<Checkbox
 						checked={value.includes(option.value as string)}
@@ -162,6 +163,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	return (
 		<Select
 			id={id}
+			showSearch
 			value={value || undefined}
 			onChange={onChange}
 			placeholder={placeholder}
@@ -170,6 +172,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 			loading={loading}
 			notFoundContent={notFoundContent}
 			options={options}
+			optionFilterProp="label"
 			getPopupContainer={getPopupContainer}
 			disabled={disabled}
 		/>

frontend/src/constants/features.ts

@@ -10,4 +10,5 @@ export enum FeatureKeys {
 	ONBOARDING_V3 = 'onboarding_v3',
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
+	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
 }

frontend/src/container/FormAlertRules/index.tsx

@@ -5,7 +5,8 @@ import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { BellDot, CircleAlert, ExternalLink, Save } from '@signozhq/icons';
-import { Button, FormInstance, Modal, SelectProps } from 'antd';
+import { Button, FormInstance, SelectProps } from 'antd';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -162,6 +163,7 @@ function FormAlertRules({
 	const alertTypeFromURL = urlQuery.get(QueryParams.ruleType);
 
 	const [detectionMethod, setDetectionMethod] = useState<string | null>(null);
+	const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
 
 	useEffect(() => {
 		if (!isEqual(currentQuery.unit, yAxisUnit)) {
@@ -577,19 +579,16 @@ function FormAlertRules({
 			});
 
 			// invalidate rule in cache
-			ruleCache.invalidateQueries([
+			await ruleCache.invalidateQueries([
 				REACT_QUERY_KEY.ALERT_RULE_DETAILS,
 				`${ruleId}`,
 			]);
 
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			setTimeout(() => {
-				urlQuery.delete(QueryParams.compositeQuery);
-				urlQuery.delete(QueryParams.panelTypes);
-				urlQuery.delete(QueryParams.ruleId);
-				urlQuery.delete(QueryParams.relativeTime);
-				safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
-			}, 2000);
+			urlQuery.delete(QueryParams.compositeQuery);
+			urlQuery.delete(QueryParams.panelTypes);
+			urlQuery.delete(QueryParams.ruleId);
+			urlQuery.delete(QueryParams.relativeTime);
+			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
 		} catch (e) {
 			const apiError = convertToApiError(e as AxiosError<RenderErrorResponseDTO>);
 			logData = {
@@ -625,24 +624,9 @@ function FormAlertRules({
 		urlQuery,
 	]);
 
-	const onSaveHandler = useCallback(async () => {
-		const content = (
-			<Typography.Text>
-				{' '}
-				{t('confirm_save_content_part1')}{' '}
-				<QueryTypeTag queryType={currentQuery.queryType} />{' '}
-				{t('confirm_save_content_part2')}
-			</Typography.Text>
-		);
-		Modal.confirm({
-			icon: <CircleAlert size="md" />,
-			title: t('confirm_save_title'),
-			centered: true,
-			content,
-			onOk: saveRule,
-			className: 'create-alert-modal',
-		});
-	}, [t, saveRule, currentQuery]);
+	const onSaveHandler = useCallback(() => {
+		setIsConfirmSaveOpen(true);
+	}, []);
 
 	const onTestRuleHandler = useCallback(async () => {
 		if (!isFormValid()) {
@@ -988,6 +972,27 @@ function FormAlertRules({
 					</ButtonContainer>
 				</MainFormContainer>
 			</div>
+
+			<ConfirmDialog
+				open={isConfirmSaveOpen}
+				onOpenChange={setIsConfirmSaveOpen}
+				title={t('confirm_save_title')}
+				titleIcon={<CircleAlert size={14} />}
+				confirmText="OK"
+				confirmColor="primary"
+				onConfirm={async (): Promise<boolean> => {
+					await saveRule();
+					return true;
+				}}
+				onCancel={() => setIsConfirmSaveOpen(false)}
+				width="narrow"
+			>
+				<Typography.Text>
+					{t('confirm_save_content_part1')}{' '}
+					<QueryTypeTag queryType={currentQuery.queryType} />{' '}
+					{t('confirm_save_content_part2')}
+				</Typography.Text>
+			</ConfirmDialog>
 		</>
 	);
 }

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

@@ -21,14 +21,13 @@ import {
 	buildRoleUpdatePermission,
 } from 'hooks/useAuthZ/permissions/role.permissions';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 
 import type { AuthzResources } from '../utils';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ROUTES from 'constants/routes';
 import { capitalize } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { handleApiError, toAPIError } from 'utils/errorUtils';
 
@@ -54,7 +53,8 @@ function RoleDetailsPage(): JSX.Element {
 
 	const queryClient = useQueryClient();
 	const { showErrorModal } = useErrorModal();
-	const { activeLicense, isFetchingActiveLicense } = useAppContext();
+	const { isRolesEnabled, isLoading: isRolesGateLoading } =
+		useRolesFeatureGate();
 
 	const authzResources: AuthzResources = permissionsType.data;
 
@@ -161,7 +161,7 @@ function RoleDetailsPage(): JSX.Element {
 		},
 	});
 
-	if (isFetchingActiveLicense) {
+	if (isRolesGateLoading) {
 		return (
 			<div className="role-details-page">
 				<Skeleton
@@ -173,7 +173,7 @@ function RoleDetailsPage(): JSX.Element {
 		);
 	}
 
-	if (activeLicense?.status !== LicenseStatus.VALID) {
+	if (!isRolesEnabled) {
 		return <Redirect to={ROUTES.ROLES_SETTINGS} />;
 	}
 

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

@@ -7,6 +7,7 @@ import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { Route, Switch } from 'react-router-dom';
 import {
+	defaultFeatureFlags,
 	fireEvent,
 	render,
 	screen,
@@ -14,6 +15,7 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import { FeatureKeys } from 'constants/features';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import {
 	invalidLicense,
@@ -254,6 +256,34 @@ describe('RoleDetailsPage', () => {
 		).resolves.toBeInTheDocument();
 	});
 
+	it('redirects to the roles list when fine-grained authz flag is inactive', async () => {
+		render(
+			<Switch>
+				<Route path="/settings/roles/:roleId">
+					<RoleDetailsPage />
+				</Route>
+				<Route path="/settings/roles" exact>
+					<div data-testid="roles-list-redirect-target" />
+				</Route>
+			</Switch>,
+			undefined,
+			{
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+				appContextOverrides: {
+					featureFlags: defaultFeatureFlags.map((f) =>
+						f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
+							? { ...f, active: false }
+							: f,
+					),
+				},
+			},
+		);
+
+		await expect(
+			screen.findByTestId('roles-list-redirect-target'),
+		).resolves.toBeInTheDocument();
+	});
+
 	describe('permission side panel', () => {
 		beforeEach(() => {
 			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.

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

@@ -9,11 +9,10 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
-import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { toAPIError } from 'utils/errorUtils';
 
@@ -32,8 +31,7 @@ interface RolesListingTableProps {
 function RolesListingTable({
 	searchQuery,
 }: RolesListingTableProps): JSX.Element {
-	const { activeLicense } = useAppContext();
-	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+	const { isRolesEnabled } = useRolesFeatureGate();
 
 	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
 		RoleListPermission,
@@ -208,11 +206,11 @@ function RolesListingTable({
 	const renderRow = (role: AuthtypesRoleDTO): JSX.Element => (
 		<div
 			key={role.id}
-			className={`roles-table-row${isValidLicense ? ' roles-table-row--clickable' : ''}`}
-			role={isValidLicense ? 'button' : undefined}
-			tabIndex={isValidLicense ? 0 : undefined}
+			className={`roles-table-row${isRolesEnabled ? ' roles-table-row--clickable' : ''}`}
+			role={isRolesEnabled ? 'button' : undefined}
+			tabIndex={isRolesEnabled ? 0 : undefined}
 			onClick={
-				isValidLicense
+				isRolesEnabled
 					? (): void => {
 							if (role.id) {
 								navigateToRole(role.id, role.name);
@@ -221,7 +219,7 @@ function RolesListingTable({
 					: undefined
 			}
 			onKeyDown={
-				isValidLicense
+				isRolesEnabled
 					? (e): void => {
 							if ((e.key === 'Enter' || e.key === ' ') && role.id) {
 								navigateToRole(role.id, role.name);

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -4,8 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
-import { useAppContext } from 'providers/App/App';
-import { LicenseStatus } from 'types/api/licensesV3/getActive';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 
 import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';
@@ -15,8 +14,7 @@ import './RolesSettings.styles.scss';
 function RolesSettings(): JSX.Element {
 	const [searchQuery, setSearchQuery] = useState('');
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-	const { activeLicense } = useAppContext();
-	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+	const { isRolesEnabled } = useRolesFeatureGate();
 
 	return (
 		<div className="roles-settings" data-testid="roles-settings">
@@ -42,7 +40,7 @@ function RolesSettings(): JSX.Element {
 						value={searchQuery}
 						onChange={(e): void => setSearchQuery(e.target.value)}
 					/>
-					{isValidLicense && (
+					{isRolesEnabled && (
 						<AuthZTooltip checks={[RoleCreatePermission]}>
 							<Button
 								variant="solid"

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

@@ -4,7 +4,13 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { fireEvent, render, screen } from 'tests/test-utils';
+import {
+	defaultFeatureFlags,
+	fireEvent,
+	render,
+	screen,
+} from 'tests/test-utils';
+import { FeatureKeys } from 'constants/features';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
@@ -176,6 +182,30 @@ describe('RolesSettings', () => {
 		}
 	});
 
+	it('hides the create button and disables row clicks when fine-grained authz flag is inactive', async () => {
+		render(<RolesSettings />, undefined, {
+			appContextOverrides: {
+				featureFlags: defaultFeatureFlags.map((f) =>
+					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
+						? { ...f, active: false }
+						: f,
+				),
+			},
+		});
+
+		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
+
+		expect(
+			screen.queryByRole('button', { name: /custom role/i }),
+		).not.toBeInTheDocument();
+
+		const rows = document.querySelectorAll('.roles-table-row');
+		rows.forEach((row) => {
+			expect(row).not.toHaveClass('roles-table-row--clickable');
+			expect(row.getAttribute('role')).not.toBe('button');
+		});
+	});
+
 	it('hides the create button and disables row clicks when license is not valid', async () => {
 		render(<RolesSettings />, undefined, {
 			appContextOverrides: { activeLicense: invalidLicense },

frontend/src/hooks/useRolesFeatureGate.ts

@@ -0,0 +1,27 @@
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';
+
+export const useRolesFeatureGate = (): {
+	isRolesEnabled: boolean;
+	isLoading: boolean;
+} => {
+	const {
+		activeLicense,
+		featureFlags,
+		isFetchingActiveLicense,
+		isFetchingFeatureFlags,
+	} = useAppContext();
+
+	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+	const isFineGrainedAuthzEnabled =
+		featureFlags?.find((f) => f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ)
+			?.active ?? false;
+
+	return {
+		isRolesEnabled: isValidLicense && isFineGrainedAuthzEnabled,
+		isLoading:
+			(isFetchingActiveLicense && !activeLicense) ||
+			(isFetchingFeatureFlags && !featureFlags),
+	};
+};

frontend/src/tests/test-utils.tsx

@@ -105,6 +105,59 @@ jest.mock('react-i18next', () => ({
 	}),
 }));
 
+export const defaultFeatureFlags = [
+	{ name: FeatureKeys.SSO, active: true, usage: 0, usage_limit: -1, route: '' },
+	{
+		name: FeatureKeys.USE_SPAN_METRICS,
+		active: false,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.GATEWAY,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.PREMIUM_SUPPORT,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.ANOMALY_DETECTION,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.ONBOARDING,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.CHAT_SUPPORT,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.USE_FINE_GRAINED_AUTHZ,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+];
+
 export function getAppContextMock(
 	role: string,
 	appContextOverrides?: Partial<IAppContext>,
@@ -168,57 +221,7 @@ export function getAppContextMock(
 		hasEditPermission: role === USER_ROLES.ADMIN || role === USER_ROLES.EDITOR,
 		isFetchingUser: false,
 		userFetchError: null,
-		featureFlags: [
-			{
-				name: FeatureKeys.SSO,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.USE_SPAN_METRICS,
-				active: false,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.GATEWAY,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.PREMIUM_SUPPORT,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.ANOMALY_DETECTION,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.ONBOARDING,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.CHAT_SUPPORT,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-		],
+		featureFlags: defaultFeatureFlags,
 		isFetchingFeatureFlags: false,
 		featureFlagsFetchError: null,
 		hostsData: null,

pkg/flagger/registry.go

@@ -9,7 +9,8 @@ var (
 	FeatureGetMetersFromZeus = featuretypes.MustNewName("get_meters_from_zeus")
 	FeaturePutMetersInZeus   = featuretypes.MustNewName("put_meters_in_zeus")
 	FeatureUseMeterReporter  = featuretypes.MustNewName("use_meter_reporter")
-	FeatureUseJSONBody       = featuretypes.MustNewName("use_json_body")
+	FeatureUseJSONBody            = featuretypes.MustNewName("use_json_body")
+	FeatureUseFineGrainedAuthz    = featuretypes.MustNewName("use_fine_grained_authz")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -70,6 +71,14 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
+		&featuretypes.Feature{
+			Name:           FeatureUseFineGrainedAuthz,
+			Kind:           featuretypes.KindBoolean,
+			Stage:          featuretypes.StageExperimental,
+			Description:    "Controls whether fine-grained authorization is enabled",
+			DefaultVariant: featuretypes.MustNewName("disabled"),
+			Variants:       featuretypes.NewBooleanVariants(),
+		},
 	)
 	if err != nil {
 		panic(err)

pkg/query-service/app/http_handler.go

@@ -1784,6 +1784,15 @@ func (aH *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	fineGrainedAuthz := aH.Signoz.Flagger.BooleanOrEmpty(r.Context(), flagger.FeatureUseFineGrainedAuthz, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureUseFineGrainedAuthz.String()),
+		Active:     fineGrainedAuthz,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {