feat(sa-fga): changed the id from kind to kind+type

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

@@ -29,18 +29,6 @@
 		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,39 +78,50 @@ function ResourceRow({
 							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</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>
+						{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>
+						)}
 					</RadioGroup>
 
-					{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>
-					)}
+					{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>
+						)}
 				</div>
 			)}
 		</div>
@@ -213,13 +224,13 @@ function PermissionSidePanel({
 			<div className="permission-side-panel">
 				<div className="permission-side-panel__header">
 					<Button
-						variant="ghost"
+						variant="link"
+						color="secondary"
 						size="icon"
-						className="permission-side-panel__close"
 						onClick={onClose}
 						aria-label="Close panel"
 					>
-						<X size={16} />
+						<X size={14} />
 					</Button>
 					<span className="permission-side-panel__header-divider" />
 					<span className="permission-side-panel__title">

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

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

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

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

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

@@ -285,12 +285,19 @@
 			}
 		}
 
-		// todo: https://github.com/SigNoz/components/issues/116
-		input,
+		input {
+			&::placeholder {
+				opacity: 0.4;
+			}
+		}
+
 		textarea {
 			width: 100%;
-			background: var(--l3-background);
-			border: 1px solid var(--l1-border);
+			box-sizing: border-box;
+			min-height: 100px;
+			resize: vertical;
+			background: var(--input-background, transparent);
+			border: 1px solid var(--border);
 			border-radius: 2px;
 			padding: 6px 8px;
 			font-family: Inter;
@@ -303,7 +310,7 @@
 			box-shadow: none;
 
 			&::placeholder {
-				color: var(--l3-foreground);
+				color: var(--muted-foreground);
 				opacity: 0.4;
 			}
 
@@ -313,25 +320,6 @@
 				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__/utils.test.ts

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

frontend/src/container/RolesSettings/utils.tsx

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