permissions: flatten catalog response and derive groups on frontend

Backend now returns { actions: [...] } instead of pre-grouped categories.
Group names ('Connection', 'ActionEvent', etc.) and group ordering live in
permission-display.ts on the frontend, where groupNameForAction(value)
derives them from the action prefix. UsersService computes
availablePermissionGroups from the flat list at read time.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: gugu

backend/src/entities/permission/application/data-structures/available-permissions.ds.ts

@@ -8,15 +8,7 @@ export class AvailablePermissionDs {
 	resource?: string;
 }
 
-export class AvailablePermissionGroupDs {
-	@ApiProperty()
-	group: string;
-
+export class AvailablePermissionsResponseDs {
 	@ApiProperty({ isArray: true, type: AvailablePermissionDs })
 	actions: Array<AvailablePermissionDs>;
 }
-
-export class AvailablePermissionsResponseDs {
-	@ApiProperty({ isArray: true, type: AvailablePermissionGroupDs })
-	groups: Array<AvailablePermissionGroupDs>;
-}

backend/src/entities/permission/permission-catalog.builder.ts

@@ -1,39 +1,11 @@
 import { CEDAR_SCHEMA } from '../cedar-authorization/cedar-schema.js';
-import {
-	AvailablePermissionDs,
-	AvailablePermissionGroupDs,
-} from './application/data-structures/available-permissions.ds.js';
+import { AvailablePermissionDs } from './application/data-structures/available-permissions.ds.js';
 
-const PREFIX_TO_GROUP: Record<string, string> = {
-	connection: 'Connection',
-	group: 'Group',
-	table: 'Table',
-	actionEvent: 'ActionEvent',
-	dashboard: 'Dashboard',
-	panel: 'Panel',
-};
-
-const GROUP_ORDER = ['Connection', 'Group', 'Table', 'ActionEvent', 'Dashboard', 'Panel'];
-
-export function buildPermissionCatalog(): Array<AvailablePermissionGroupDs> {
+export function buildPermissionCatalog(): Array<AvailablePermissionDs> {
 	const schemaActions = (CEDAR_SCHEMA as SchemaShape).RocketAdmin.actions;
-	const grouped = new Map<string, Array<AvailablePermissionDs>>();
-
-	for (const [value, definition] of Object.entries(schemaActions)) {
-		const action = buildAction(value, definition.appliesTo.resourceTypes);
-		const groupName = resolveGroupName(value);
-		const list = grouped.get(groupName);
-		if (list) {
-			list.push(action);
-		} else {
-			grouped.set(groupName, [action]);
-		}
-	}
-
-	return GROUP_ORDER.filter((name) => grouped.has(name)).map((name) => ({
-		group: name,
-		actions: grouped.get(name)!,
-	}));
+	return Object.entries(schemaActions).map(([value, definition]) =>
+		buildAction(value, definition.appliesTo.resourceTypes),
+	);
 }
 
 function buildAction(value: string, resourceTypes: Array<string>): AvailablePermissionDs {
@@ -51,11 +23,6 @@ function deriveResource(resourceTypes: Array<string>): string | undefined {
 	return first.charAt(0).toLowerCase() + first.slice(1);
 }
 
-function resolveGroupName(actionValue: string): string {
-	const prefix = actionValue.split(':')[0];
-	return PREFIX_TO_GROUP[prefix] ?? prefix.charAt(0).toUpperCase() + prefix.slice(1);
-}
-
 type SchemaShape = {
 	RocketAdmin: {
 		actions: Record<string, { appliesTo: { principalTypes: Array<string>; resourceTypes: Array<string> } }>;

backend/src/entities/permission/permission.controller.ts

@@ -37,15 +37,15 @@ export class PermissionController {
 		private readonly createOrUpdatePermissionsUseCase: ICreateOrUpdatePermissions,
 	) {}
 
-	@ApiOperation({ summary: 'List available permissions with display metadata' })
+	@ApiOperation({ summary: 'List available permissions derived from the Cedar schema' })
 	@ApiResponse({
 		status: 200,
-		description: 'Catalog of permissions grouped by category.',
+		description: 'Flat list of permissions with their resource scope.',
 		type: AvailablePermissionsResponseDs,
 	})
 	@Get('permissions/available')
 	async getAvailablePermissions(): Promise<AvailablePermissionsResponseDs> {
-		return { groups: buildPermissionCatalog() };
+		return { actions: buildPermissionCatalog() };
 	}
 
 	@ApiOperation({ summary: 'Create or update permissions in group' })

backend/test/ava-tests/non-saas-tests/non-saas-permission-catalog-e2e.test.ts

@@ -57,17 +57,13 @@ test.serial('GET /permissions/available returns catalog covering every CedarActi
 	t.is(response.status, 200);
 
 	const body = response.body as {
-		groups: Array<{
-			group: string;
-			actions: Array<{ value: string; resource?: string }>;
-		}>;
+		actions: Array<{ value: string; resource?: string }>;
 	};
 
-	t.true(Array.isArray(body.groups));
-	t.true(body.groups.length > 0);
+	t.true(Array.isArray(body.actions));
+	t.true(body.actions.length > 0);
 
-	const flatActions = body.groups.flatMap((g) => g.actions);
-	const values = new Set(flatActions.map((a) => a.value));
+	const values = new Set(body.actions.map((a) => a.value));
 
 	for (const cedarValue of Object.values(CedarAction)) {
 		t.true(values.has(cedarValue), `catalog missing CedarAction ${cedarValue}`);
@@ -77,7 +73,7 @@ test.serial('GET /permissions/available returns catalog covering every CedarActi
 	t.false(values.has('table:*'), 'catalog must NOT include synthesized wildcards');
 	t.false(values.has('dashboard:*'), 'catalog must NOT include synthesized wildcards');
 
-	const byValue = new Map(flatActions.map((a) => [a.value, a]));
+	const byValue = new Map(body.actions.map((a) => [a.value, a]));
 
 	t.is(byValue.get('connection:read')!.resource, 'connection');
 	t.is(byValue.get('group:edit')!.resource, 'group');
@@ -87,7 +83,7 @@ test.serial('GET /permissions/available returns catalog covering every CedarActi
 	t.is(byValue.get('dashboard:create')!.resource, 'dashboard');
 	t.is(byValue.get('panel:read')!.resource, 'panel');
 
-	for (const action of flatActions) {
+	for (const action of body.actions) {
 		t.is(Object.hasOwn(action, 'label'), false, `action ${action.value} should not have label`);
 		t.is(Object.hasOwn(action, 'shortLabel'), false, `action ${action.value} should not have shortLabel`);
 		t.is(Object.hasOwn(action, 'icon'), false, `action ${action.value} should not have icon`);

frontend/src/app/lib/permission-display.spec.ts

@@ -1,4 +1,4 @@
-import { actionIcon, actionLabel, actionShortLabel } from './permission-display';
+import { actionIcon, actionLabel, actionShortLabel, groupNameForAction } from './permission-display';
 
 describe('permission-display', () => {
 	describe('actionLabel', () => {
@@ -40,6 +40,21 @@ describe('permission-display', () => {
 		});
 	});
 
+	describe('groupNameForAction', () => {
+		it('maps known prefixes', () => {
+			expect(groupNameForAction('connection:read')).toBe('Connection');
+			expect(groupNameForAction('group:edit')).toBe('Group');
+			expect(groupNameForAction('table:read')).toBe('Table');
+			expect(groupNameForAction('actionEvent:trigger')).toBe('ActionEvent');
+			expect(groupNameForAction('dashboard:read')).toBe('Dashboard');
+			expect(groupNameForAction('panel:read')).toBe('Panel');
+		});
+
+		it('falls back to capitalized prefix for unknown actions', () => {
+			expect(groupNameForAction('foo:bar')).toBe('Foo');
+		});
+	});
+
 	describe('actionIcon', () => {
 		it('maps known verbs', () => {
 			expect(actionIcon('connection:read')).toBe('visibility');

frontend/src/app/lib/permission-display.ts

@@ -7,6 +7,22 @@ const PREFIX_TO_LABEL: Record<string, string> = {
 	panel: 'Panel',
 };
 
+const PREFIX_TO_GROUP_NAME: Record<string, string> = {
+	connection: 'Connection',
+	group: 'Group',
+	table: 'Table',
+	actionEvent: 'ActionEvent',
+	dashboard: 'Dashboard',
+	panel: 'Panel',
+};
+
+export const PERMISSION_GROUP_ORDER = ['Connection', 'Group', 'Table', 'ActionEvent', 'Dashboard', 'Panel'];
+
+export function groupNameForAction(value: string): string {
+	const prefix = value.split(':')[0];
+	return PREFIX_TO_GROUP_NAME[prefix] ?? capitalize(prefix);
+}
+
 const VERB_TO_ICON: Record<string, string> = {
 	read: 'visibility',
 	edit: 'edit',

frontend/src/app/services/users.service.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpResourceRef } from '@angular/common/http';
 import { computed, Injectable, inject, signal } from '@angular/core';
 import { catchError, EMPTY, map } from 'rxjs';
 import { PolicyAction, PolicyActionGroup } from 'src/app/lib/cedar-policy-items';
+import { groupNameForAction, PERMISSION_GROUP_ORDER } from 'src/app/lib/permission-display';
 import { GroupUser, Permissions, UserGroup, UserGroupInfo } from 'src/app/models/user';
 import { ApiService } from './api.service';
 import { NotificationsService } from './notifications.service';
@@ -45,18 +46,27 @@ export class UsersService {
 	});
 	public readonly groupsLoading = computed(() => this._groupsResource.isLoading());
 
-	private _availablePermissionsResource: HttpResourceRef<{ groups: PolicyActionGroup[] } | undefined> =
-		this._api.resource<{
-			groups: PolicyActionGroup[];
-		}>(() => '/permissions/available');
+	private _availablePermissionsResource: HttpResourceRef<{ actions: PolicyAction[] } | undefined> = this._api.resource<{
+		actions: PolicyAction[];
+	}>(() => '/permissions/available');
 
-	public readonly availablePermissionGroups = computed<PolicyActionGroup[]>(
-		() => this._availablePermissionsResource.value()?.groups ?? [],
+	public readonly availablePermissions = computed<PolicyAction[]>(
+		() => this._availablePermissionsResource.value()?.actions ?? [],
 	);
 
-	public readonly availablePermissions = computed<PolicyAction[]>(() =>
-		this.availablePermissionGroups().flatMap((g) => g.actions),
-	);
+	public readonly availablePermissionGroups = computed<PolicyActionGroup[]>(() => {
+		const byGroup = new Map<string, PolicyAction[]>();
+		for (const action of this.availablePermissions()) {
+			const groupName = groupNameForAction(action.value);
+			const list = byGroup.get(groupName);
+			if (list) list.push(action);
+			else byGroup.set(groupName, [action]);
+		}
+		return PERMISSION_GROUP_ORDER.filter((name) => byGroup.has(name)).map((name) => ({
+			group: name,
+			actions: byGroup.get(name)!,
+		}));
+	});
 
 	// Group users - managed imperatively (per-group parallel fetch)
 	private _groupUsers = signal<Record<string, GroupUser[] | 'empty'>>({});