Admin: use username instead of userJid in user view URL (#883)

Change the admin user view page URL from `/admin/users/JIDUSER123` to
`/admin/users/andi` for human-readable URLs.

- Add `GET /api/v2/users/username/{username}` backend endpoint
- Add corresponding feign client method
- Update frontend route, query, and components to use username param

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

Author: fushar

judgels-backends/judgels-server-app/src/main/java/judgels/jophiel/user/UserResource.java

@@ -168,6 +168,20 @@ public User getUser(
         return checkFound(userStore.getUserByJid(userJid));
     }
 
+    @GET
+    @Path("/username/{username}")
+    @Produces(APPLICATION_JSON)
+    @UnitOfWork(readOnly = true)
+    public User getUserByUsername(
+            @HeaderParam(AUTHORIZATION) AuthHeader authHeader,
+            @PathParam("username") String username) {
+
+        String actorJid = actorChecker.check(authHeader);
+        checkAllowed(roleChecker.canAdminister(actorJid));
+
+        return checkFound(userStore.getUserByUsername(username));
+    }
+
     @GET
     @Path("/me")
     @Produces(APPLICATION_JSON)

judgels-backends/judgels-server-feign/src/main/java/judgels/jophiel/UserClient.java

@@ -26,6 +26,10 @@ public interface UserClient {
     @Headers("Authorization: Bearer {token}")
     User getUser(@Param("token") String token, @Param("userJid") String userJid);
 
+    @RequestLine("GET /api/v2/users/username/{username}")
+    @Headers("Authorization: Bearer {token}")
+    User getUserByUsername(@Param("token") String token, @Param("username") String username);
+
     @RequestLine("GET /api/v2/users/me")
     @Headers("Authorization: Bearer {token}")
     User getMyself(@Param("token") String token);

judgels-client/src/modules/api/jophiel/user.js

@@ -14,6 +14,10 @@ export const userAPI = {
     return get(`${baseUsersURL}/${userJid}`, token);
   },
 
+  getUserByUsername: (token, username) => {
+    return get(`${baseUsersURL}/username/${username}`, token);
+  },
+
   getMyself: token => {
     return get(`${baseUsersURL}/me`, token);
   },

judgels-client/src/modules/queries/user.js

@@ -10,6 +10,12 @@ export const userQueryOptions = userJid =>
     queryFn: () => userAPI.getUser(getToken(), userJid),
   });
 
+export const userByUsernameQueryOptions = username =>
+  queryOptions({
+    queryKey: ['user', 'username', username],
+    queryFn: () => userAPI.getUserByUsername(getToken(), username),
+  });
+
 export const usersQueryOptions = params => {
   const { page, orderBy, orderDir } = params || {};
   return queryOptions({

judgels-client/src/routes/admin/routes.jsx

@@ -2,7 +2,7 @@ import { Navigate, createRoute, lazyRouteComponent } from '@tanstack/react-route
 
 import { isTLX } from '../../conf';
 import { retryImport } from '../../lazy';
-import { userQueryOptions } from '../../modules/queries/user';
+import { userByUsernameQueryOptions } from '../../modules/queries/user';
 import { userInfoQueryOptions } from '../../modules/queries/userInfo';
 import { queryClient } from '../../modules/queryClient';
 import { createDocumentTitle } from '../../utils/title';
@@ -33,11 +33,11 @@ export const createAdminRoutes = appRoute => {
 
   const adminUserViewRoute = createRoute({
     getParentRoute: () => adminRoute,
-    path: 'users/$userJid',
+    path: 'users/$username',
     component: lazyRouteComponent(retryImport(() => import('./users/UserViewPage/UserViewPage'))),
-    loader: async ({ params: { userJid } }) => {
-      await queryClient.ensureQueryData(userQueryOptions(userJid));
-      await queryClient.ensureQueryData(userInfoQueryOptions(userJid));
+    loader: async ({ params: { username } }) => {
+      const user = await queryClient.ensureQueryData(userByUsernameQueryOptions(username));
+      await queryClient.ensureQueryData(userInfoQueryOptions(user.jid));
     },
   });
 

judgels-client/src/routes/admin/users/UserViewPage/UserViewPage.jsx

@@ -7,19 +7,19 @@ import { useState } from 'react';
 
 import { ContentCard } from '../../../../components/ContentCard/ContentCard';
 import { FormTable } from '../../../../components/forms/FormTable/FormTable';
-import { userQueryOptions } from '../../../../modules/queries/user';
+import { userByUsernameQueryOptions } from '../../../../modules/queries/user';
 import { updateUserInfoMutationOptions, userInfoQueryOptions } from '../../../../modules/queries/userInfo';
 import UserEditInfoForm from '../UserEditInfoForm/UserEditInfoForm';
 
 import * as toastActions from '../../../../modules/toast/toastActions';
 
 export default function UserViewPage() {
-  const { userJid } = useParams({ strict: false });
+  const { username } = useParams({ strict: false });
 
-  const { data: user } = useSuspenseQuery(userQueryOptions(userJid));
-  const { data: userInfo } = useSuspenseQuery(userInfoQueryOptions(userJid));
+  const { data: user } = useSuspenseQuery(userByUsernameQueryOptions(username));
+  const { data: userInfo } = useSuspenseQuery(userInfoQueryOptions(user.jid));
 
-  const updateUserInfoMutation = useMutation(updateUserInfoMutationOptions(userJid));
+  const updateUserInfoMutation = useMutation(updateUserInfoMutationOptions(user.jid));
 
   const [isEditingInfo, setIsEditingInfo] = useState(false);
 

judgels-client/src/routes/admin/users/UserViewPage/UserViewPage.test.jsx

@@ -14,7 +14,7 @@ describe('UserViewPage', () => {
   });
 
   const renderComponent = async () => {
-    nockJophiel().get('/users/JIDUSER123').reply(200, {
+    nockJophiel().get('/users/username/andi').reply(200, {
       jid: 'JIDUSER123',
       username: 'andi',
       email: 'andi@example.com',
@@ -29,7 +29,7 @@ describe('UserViewPage', () => {
     await act(async () =>
       render(
         <QueryClientProviderWrapper>
-          <TestRouter initialEntries={['/admin/users/JIDUSER123']} path="/admin/users/$userJid">
+          <TestRouter initialEntries={['/admin/users/andi']} path="/admin/users/$username">
             <UserViewPage />
           </TestRouter>
         </QueryClientProviderWrapper>

judgels-client/src/routes/admin/users/UsersTable/UsersTable.jsx

@@ -7,7 +7,7 @@ export function UsersTable({ users, lastSessionTimesMap }) {
   const rows = users.map(user => (
     <tr key={user.jid}>
       <td>
-        <Link to={`/admin/users/${user.jid}`}>{user.username}</Link>
+        <Link to={`/admin/users/${user.username}`}>{user.username}</Link>
       </td>
       <td>{user.email}</td>
       <td>{lastSessionTimesMap[user.jid] ? <FormattedDate value={lastSessionTimesMap[user.jid]} /> : '-'}</td>