feat: show allowed group count on oidc client list (#567)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/services/oidc-service.ts

@@ -1,10 +1,11 @@
 import type {
 	AuthorizeResponse,
-	OidcDeviceCodeInfo,
 	OidcClient,
 	OidcClientCreate,
 	OidcClientMetaData,
-	OidcClientWithAllowedUserGroups
+	OidcClientWithAllowedUserGroups,
+	OidcClientWithAllowedUserGroupsCount,
+	OidcDeviceCodeInfo
 } from '$lib/types/oidc.type';
 import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';
@@ -43,7 +44,7 @@ class OidcService extends APIService {
 		const res = await this.api.get('/oidc/clients', {
 			params: options
 		});
-		return res.data as Paginated<OidcClient>;
+		return res.data as Paginated<OidcClientWithAllowedUserGroupsCount>;
 	}
 
 	async createClient(client: OidcClientCreate) {

frontend/src/lib/types/oidc.type.ts

@@ -17,6 +17,10 @@ export type OidcClientWithAllowedUserGroups = OidcClient & {
 	allowedUserGroups: UserGroup[];
 };
 
+export type OidcClientWithAllowedUserGroupsCount = OidcClient & {
+	allowedUserGroupsCount: number;
+};
+
 export type OidcClientCreate = Omit<OidcClient, 'id' | 'logoURL' | 'hasLogo'>;
 
 export type OidcClientCreateWithLogo = OidcClientCreate & {

frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte

@@ -5,7 +5,7 @@
 	import * as Table from '$lib/components/ui/table';
 	import { m } from '$lib/paraglide/messages';
 	import OIDCService from '$lib/services/oidc-service';
-	import type { OidcClient } from '$lib/types/oidc.type';
+	import type { OidcClient, OidcClientWithAllowedUserGroupsCount } from '$lib/types/oidc.type';
 	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucidePencil, LucideTrash } from '@lucide/svelte';
@@ -15,7 +15,7 @@
 		clients = $bindable(),
 		requestOptions
 	}: {
-		clients: Paginated<OidcClient>;
+		clients: Paginated<OidcClientWithAllowedUserGroupsCount>;
 		requestOptions: SearchPaginationSortRequest;
 	} = $props();
 
@@ -49,6 +49,7 @@
 	columns={[
 		{ label: m.logo() },
 		{ label: m.name(), sortColumn: 'name' },
+		{ label: m.oidc_allowed_group_count(), sortColumn: 'allowedUserGroupsCount' },
 		{ label: m.actions(), hidden: true }
 	]}
 >
@@ -67,6 +68,11 @@
 			{/if}
 		</Table.Cell>
 		<Table.Cell class="font-medium">{item.name}</Table.Cell>
+		<Table.Cell class="font-medium"
+			>{item.allowedUserGroupsCount > 0
+				? item.allowedUserGroupsCount
+				: m.unrestricted()}</Table.Cell
+		>
 		<Table.Cell class="flex justify-end gap-1">
 			<Button
 				href="/settings/admin/oidc-clients/{item.id}"