feat: list allowed groups when hovering over allowed group count (#1671)

frontend/src/lib/components/table/advanced-table-column-selection.svelte

@@ -28,20 +28,20 @@
 			<DropdownMenu.Separator />
 			{#each columns as column (column)}
 				{#if column.label}
-				<DropdownMenu.CheckboxItem
-					closeOnSelect={false}
-					checked={selectedColumns.includes(column.column ?? column.key!)}
-					onCheckedChange={(v) => {
-						const key = column.column ?? column.key!;
-						if (v) {
-							selectedColumns = [...selectedColumns, key];
-						} else {
-							selectedColumns = selectedColumns.filter((c) => c !== key);
-						}
-					}}
-				>
-					{column.label}
-				</DropdownMenu.CheckboxItem>
+					<DropdownMenu.CheckboxItem
+						closeOnSelect={false}
+						checked={selectedColumns.includes(column.column ?? column.key!)}
+						onCheckedChange={(v) => {
+							const key = column.column ?? column.key!;
+							if (v) {
+								selectedColumns = [...selectedColumns, key];
+							} else {
+								selectedColumns = selectedColumns.filter((c) => c !== key);
+							}
+						}}
+					>
+						{column.label}
+					</DropdownMenu.CheckboxItem>
 				{/if}
 			{/each}
 		</DropdownMenu.Group>

frontend/src/lib/components/ui/scroll-area/index.ts

@@ -0,0 +1,10 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar
+};

frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils/style.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
+	{orientation}
+	class={cn(
+		'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="rounded-full relative flex-1 bg-border"
+	/>
+</ScrollAreaPrimitive.Scrollbar>

frontend/src/lib/components/ui/scroll-area/scroll-area.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils/style.js';
+	import { Scrollbar } from './index.js';
+
+	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		scrollbarXClasses = '',
+		scrollbarYClasses = '',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn('relative', className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === 'vertical' || orientation === 'both'}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === 'horizontal' || orientation === 'both'}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

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

@@ -11,8 +11,8 @@ import type {
 	OidcClientSecret,
 	OidcClientSecretCreated,
 	OidcClientUpdate,
+	OidcClientWithAllowedGroups,
 	OidcClientWithAllowedUserGroups,
-	OidcClientWithAllowedUserGroupsCount,
 	OidcDeviceCodeInfo
 } from '$lib/types/oidc.type';
 import type { ScimServiceProvider } from '$lib/types/scim.type';
@@ -38,7 +38,7 @@ class OidcService extends APIService {
 		const res = await this.api.get('/oidc/clients', {
 			params: options
 		});
-		return res.data as Paginated<OidcClientWithAllowedUserGroupsCount>;
+		return res.data as Paginated<OidcClientWithAllowedGroups>;
 	};
 
 	createClient = async (client: OidcClientCreate) =>

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

@@ -1,4 +1,4 @@
-import type { UserGroup } from './user-group.type';
+import type { UserGroup, UserGroupMinimal } from './user-group.type';
 
 export type OidcClientType = 'standard' | 'cimd';
 
@@ -74,8 +74,8 @@ export type OidcClientWithAllowedUserGroups = OidcClient & {
 	allowedUserGroups: UserGroup[];
 };
 
-export type OidcClientWithAllowedUserGroupsCount = OidcClient & {
-	allowedUserGroupsCount: number;
+export type OidcClientWithAllowedGroups = OidcClient & {
+	allowedUserGroups: UserGroupMinimal[];
 };
 
 export type OidcClientUpdate = Omit<

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

@@ -3,13 +3,15 @@
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import ImageBox from '$lib/components/image-box.svelte';
 	import AdvancedTable from '$lib/components/table/advanced-table.svelte';
+	import { ScrollArea } from '$lib/components/ui/scroll-area';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { m } from '$lib/paraglide/messages';
 	import OIDCService from '$lib/services/oidc-service';
 	import type {
 		AdvancedTableColumn,
 		CreateAdvancedTableActions
 	} from '$lib/types/advanced-table.type';
-	import type { OidcClient, OidcClientWithAllowedUserGroupsCount } from '$lib/types/oidc.type';
+	import type { OidcClient, OidcClientWithAllowedGroups } from '$lib/types/oidc.type';
 	import { cachedOidcClientLogo } from '$lib/utils/cached-image-util';
 	import { encodeClientIdParam } from '$lib/utils/client-id-util';
 	import { axiosErrorToast } from '$lib/utils/error-util';
@@ -18,7 +20,7 @@
 	import { toast } from 'svelte-sonner';
 
 	const oidcService = new OIDCService();
-	let tableRef: AdvancedTable<OidcClientWithAllowedUserGroupsCount>;
+	let tableRef: AdvancedTable<OidcClientWithAllowedGroups>;
 
 	export function refresh() {
 		return tableRef?.refresh();
@@ -36,15 +38,15 @@
 		{ label: m.client_type_metadata_document(), value: 'cimd' }
 	];
 
-	const columns: AdvancedTableColumn<OidcClientWithAllowedUserGroupsCount>[] = [
+	const columns: AdvancedTableColumn<OidcClientWithAllowedGroups>[] = [
 		{ label: 'ID', column: 'id', hidden: true },
 		{ label: m.logo(), key: 'logo', cell: LogoCell },
 		{ label: m.name(), column: 'name', sortable: true },
 		{
 			label: m.oidc_allowed_group_count(),
-			column: 'allowedUserGroupsCount',
+			column: 'allowedUserGroups',
 			sortable: true,
-			value: (item) => (item.isGroupRestricted ? item.allowedUserGroupsCount : '-')
+			cell: AllowedGroupCountCell
 		},
 		{
 			label: m.restricted(),
@@ -93,7 +95,7 @@
 		}
 	];
 
-	const actions: CreateAdvancedTableActions<OidcClientWithAllowedUserGroupsCount> = (client) => [
+	const actions: CreateAdvancedTableActions<OidcClientWithAllowedGroups> = (client) => [
 		{
 			label: m.edit(),
 			primary: true,
@@ -145,7 +147,35 @@
 	}
 </script>
 
-{#snippet LogoCell({ item }: { item: OidcClientWithAllowedUserGroupsCount })}
+{#snippet AllowedGroupCountCell({ item }: { item: OidcClientWithAllowedGroups })}
+	{#if !item.isGroupRestricted}
+		-
+	{:else if item.allowedUserGroups.length === 0}
+		{item.allowedUserGroups.length}
+	{:else}
+		<Tooltip.Provider>
+			<Tooltip.Root>
+				<Tooltip.Trigger class="cursor-default underline decoration-dotted underline-offset-4">
+					{item.allowedUserGroups.length}
+				</Tooltip.Trigger>
+				<Tooltip.Content side="right" class="flex-col items-start">
+					<ScrollArea
+						class="[&>[data-slot=scroll-area-viewport]]:max-h-48"
+						scrollbarYClasses="[&>[data-slot=scroll-area-thumb]]:bg-background/40"
+					>
+						<div class="flex flex-col gap-0.5 pr-3">
+							{#each item.allowedUserGroups as group (group.id)}
+								<span>{group.friendlyName}</span>
+							{/each}
+						</div>
+					</ScrollArea>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	{/if}
+{/snippet}
+
+{#snippet LogoCell({ item }: { item: OidcClientWithAllowedGroups })}
 	{#if item.hasLogo}
 		<ImageBox
 			class="size-12 rounded-lg"

frontend/src/routes/settings/admin/user-groups/[id]/oidc-client-selection.svelte

@@ -5,7 +5,7 @@
 	import OidcService from '$lib/services/oidc-service';
 	import type { AdvancedTableColumn } from '$lib/types/advanced-table.type';
 	import type { ListRequestOptions } from '$lib/types/list-request.type';
-	import type { OidcClient, OidcClientWithAllowedUserGroupsCount } from '$lib/types/oidc.type';
+	import type { OidcClient, OidcClientWithAllowedGroups } from '$lib/types/oidc.type';
 	import { cachedOidcClientLogo } from '$lib/utils/cached-image-util';
 	import { mode } from 'mode-watcher';
 
@@ -17,7 +17,7 @@
 
 	const oidcClientService = new OidcService();
 
-	let tableRef: AdvancedTable<OidcClientWithAllowedUserGroupsCount>;
+	let tableRef: AdvancedTable<OidcClientWithAllowedGroups>;
 
 	export function refresh() {
 		return tableRef?.refresh();
@@ -25,16 +25,16 @@
 
 	const isLightMode = $derived(mode.current === 'light');
 
-	const columns: AdvancedTableColumn<OidcClientWithAllowedUserGroupsCount>[] = [
+	const columns: AdvancedTableColumn<OidcClientWithAllowedGroups>[] = [
 		{ label: 'ID', column: 'id', hidden: true },
 		{ label: m.logo(), key: 'logo', cell: LogoCell },
 		{ label: m.name(), column: 'name', sortable: true },
 		{
 			label: m.oidc_allowed_group_count(),
-			column: 'allowedUserGroupsCount',
+			column: 'allowedUserGroups',
 			sortable: true,
 
-			value: (item) => (item.isGroupRestricted ? item.allowedUserGroupsCount : '-')
+			value: (item) => (item.isGroupRestricted ? item.allowedUserGroups.length : '-')
 		},
 		{
 			label: m.restricted(),