Merge pull request #16503 from athoik/user_groups_nav

feat: Allow navigating to user group from user edit

src/lib/components/admin/Users/Groups/GroupItem.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { toast } from 'svelte-sonner';
-	import { getContext } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	const i18n = getContext('i18n');
 
@@ -10,6 +10,7 @@
 	import User from '$lib/components/icons/User.svelte';
 	import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
 	import GroupModal from './EditGroupModal.svelte';
+	import { querystringValue } from '$lib/utils';
 
 	export let users = [];
 	export let group = {
@@ -44,6 +45,13 @@
 			setGroups();
 		}
 	};
+
+	onMount(() => {
+		const groupId = querystringValue('id');
+		if (groupId && groupId === group.id) {
+			showEdit = true;
+		}
+	});
 </script>
 
 <GroupModal

src/lib/components/admin/Users/UserList/EditUserModal.svelte

@@ -4,6 +4,8 @@
 	import { createEventDispatcher } from 'svelte';
 	import { onMount, getContext } from 'svelte';
 
+	import { goto } from '$app/navigation';
+
 	import { updateUserById, getUserGroupsById } from '$lib/apis/users';
 
 	import Modal from '$lib/components/common/Modal.svelte';
@@ -127,7 +129,13 @@
 										<div class="flex flex-wrap gap-1 my-0.5 -mx-1">
 											{#each userGroups as userGroup}
 												<span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-850 text-xs">
-													{userGroup.name}
+													<a
+														href={'/admin/users/groups?id=' + userGroup.id}
+														on:click|preventDefault={() =>
+															goto('/admin/users/groups?id=' + userGroup.id)}
+													>
+														{userGroup.name}
+													</a>
 												</span>
 											{/each}
 										</div>

src/lib/utils/index.ts

@@ -1583,3 +1583,9 @@ export const extractContentFromFile = async (file, pdfjsLib = null) => {
 		throw new Error('Unsupported or non-text file type: ' + (file.name || type));
 	}
 };
+
+export const querystringValue = (key: string): string | null => {
+	const querystring = window.location.search;
+	const urlParams = new URLSearchParams(querystring);
+	return urlParams.get(key);
+};

src/routes/auth/+page.svelte

@@ -14,7 +14,7 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user, socket } from '$lib/stores';
 
-	import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
+	import { generateInitialsImage, canvasPixelTest, querystringValue } from '$lib/utils';
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import OnBoarding from '$lib/components/OnBoarding.svelte';
@@ -33,12 +33,6 @@
 
 	let ldapUsername = '';
 
-	const querystringValue = (key) => {
-		const querystring = window.location.search;
-		const urlParams = new URLSearchParams(querystring);
-		return urlParams.get(key);
-	};
-
 	const setSessionUser = async (sessionUser) => {
 		if (sessionUser) {
 			console.log(sessionUser);