Admin: show and edit all user info fields

Display and allow editing of home address, shirt size, and institution
fields (name, country, province, city) in the admin user view page.

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

Author: fushar

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

@@ -3,7 +3,9 @@ import { Field, Form } from 'react-final-form';
 
 import { countriesData } from '../../../../assets/data/countries';
 import { ActionButtons } from '../../../../components/ActionButtons/ActionButtons';
+import { HorizontalInnerDivider } from '../../../../components/HorizontalInnerDivider/HorizontalInnerDivider';
 import { FormTableSelect } from '../../../../components/forms/FormTableSelect/FormTableSelect';
+import { FormTableTextArea } from '../../../../components/forms/FormTableTextArea/FormTableTextArea';
 import { FormTableTextInput } from '../../../../components/forms/FormTableTextInput/FormTableTextInput';
 import { withSubmissionError } from '../../../../modules/form/submissionError';
 
@@ -22,6 +24,36 @@ const countryField = {
   label: 'Country',
 };
 
+const homeAddressField = {
+  name: 'homeAddress',
+  label: 'Home address',
+};
+
+const shirtSizeField = {
+  name: 'shirtSize',
+  label: 'Shirt size',
+};
+
+const institutionField = {
+  name: 'institutionName',
+  label: 'Institution name',
+};
+
+const institutionCountryField = {
+  name: 'institutionCountry',
+  label: 'Institution country',
+};
+
+const institutionProvinceField = {
+  name: 'institutionProvince',
+  label: 'Institution province/state',
+};
+
+const institutionCityField = {
+  name: 'institutionCity',
+  label: 'Institution city',
+};
+
 export default function UserEditInfoForm({ onSubmit, initialValues, onCancel }) {
   const countryOptions = countriesData.map(country => (
     <option key={country.code} value={country.code}>
@@ -45,6 +77,25 @@ export default function UserEditInfoForm({ onSubmit, initialValues, onCancel })
                 <option />
                 {countryOptions}
               </Field>
+              <Field component={FormTableTextArea} {...homeAddressField} />
+              <Field component={FormTableSelect} {...shirtSizeField}>
+                <option />
+                <option value="XXS">XXS</option>
+                <option value="XS">XS</option>
+                <option value="S">S</option>
+                <option value="M">M</option>
+                <option value="L">L</option>
+                <option value="XL">XL</option>
+                <option value="XXL">XXL</option>
+                <option value="XXXL">XXXL</option>
+              </Field>
+              <Field component={FormTableTextInput} {...institutionField} />
+              <Field component={FormTableSelect} {...institutionCountryField}>
+                <option />
+                {countryOptions}
+              </Field>
+              <Field component={FormTableTextInput} {...institutionProvinceField} />
+              <Field component={FormTableTextInput} {...institutionCityField} />
             </tbody>
           </HTMLTable>
           <hr />

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

@@ -5,8 +5,11 @@ import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import { useParams } from '@tanstack/react-router';
 import { useState } from 'react';
 
+import { getCountryName } from '../../../../assets/data/countries';
 import { ContentCard } from '../../../../components/ContentCard/ContentCard';
+import { HorizontalInnerDivider } from '../../../../components/HorizontalInnerDivider/HorizontalInnerDivider';
 import { FormTable } from '../../../../components/forms/FormTable/FormTable';
+import { userInfoGender } from '../../../../modules/api/jophiel/userInfo';
 import { userByUsernameQueryOptions } from '../../../../modules/queries/user';
 import { updateUserInfoMutationOptions, userInfoQueryOptions } from '../../../../modules/queries/userInfo';
 import UserEditInfoForm from '../UserEditInfoForm/UserEditInfoForm';
@@ -23,7 +26,7 @@ export default function UserViewPage() {
 
   const [isEditingInfo, setIsEditingInfo] = useState(false);
 
-  const keyStyles = { width: '200px' };
+  const keyStyles = { width: '220px' };
 
   const generalRows = [
     { key: 'jid', title: 'JID', value: user.jid },
@@ -40,9 +43,15 @@ export default function UserViewPage() {
   };
 
   const infoRows = [
-    { key: 'name', title: 'Name', value: userInfo.name || '-' },
-    { key: 'gender', title: 'Gender', value: userInfo.gender || '-' },
-    { key: 'country', title: 'Country', value: userInfo.country || '-' },
+    { key: 'name', title: 'Name', value: userInfo.name },
+    { key: 'gender', title: 'Gender', value: userInfo.gender && userInfoGender[userInfo.gender] },
+    { key: 'country', title: 'Country', value: getCountryName(userInfo.country) },
+    { key: 'homeAddress', title: 'Home address', value: userInfo.homeAddress },
+    { key: 'shirtSize', title: 'Shirt size', value: userInfo.shirtSize },
+    { key: 'institutionName', title: 'Institution name', value: userInfo.institutionName },
+    { key: 'institutionCountry', title: 'Institution country', value: getCountryName(userInfo.institutionCountry) },
+    { key: 'institutionProvince', title: 'Institution province/state', value: userInfo.institutionProvince },
+    { key: 'institutionCity', title: 'Institution city', value: userInfo.institutionCity },
   ];
 
   const updateUserInfo = data => {
@@ -69,6 +78,12 @@ export default function UserViewPage() {
           name: userInfo.name || '',
           gender: userInfo.gender || '',
           country: userInfo.country || '',
+          homeAddress: userInfo.homeAddress || '',
+          shirtSize: userInfo.shirtSize || '',
+          institutionName: userInfo.institutionName || '',
+          institutionCountry: userInfo.institutionCountry || '',
+          institutionProvince: userInfo.institutionProvince || '',
+          institutionCity: userInfo.institutionCity || '',
         };
         return (
           <UserEditInfoForm

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

@@ -24,6 +24,12 @@ describe('UserViewPage', () => {
       name: 'Andi Smith',
       gender: 'MALE',
       country: 'ID',
+      homeAddress: '123 Main St',
+      shirtSize: 'M',
+      institutionName: 'MIT',
+      institutionCountry: 'US',
+      institutionProvince: 'Massachusetts',
+      institutionCity: 'Cambridge',
     });
 
     await act(async () =>
@@ -65,8 +71,14 @@ describe('UserViewPage', () => {
         )
     ).toEqual([
       ['Name', 'Andi Smith'],
-      ['Gender', 'MALE'],
-      ['Country', 'ID'],
+      ['Gender', 'Male'],
+      ['Country', 'Indonesia'],
+      ['Home address', '123 Main St'],
+      ['Shirt size', 'M'],
+      ['Institution name', 'MIT'],
+      ['Institution country', 'United States'],
+      ['Institution province/state', 'Massachusetts'],
+      ['Institution city', 'Cambridge'],
     ]);
   });
 
@@ -78,29 +90,67 @@ describe('UserViewPage', () => {
     const button = await screen.findByRole('button', { name: /edit/i });
     await user.click(button);
 
-    const name = screen.getByRole('textbox', { name: /name/i });
-    expect(name).toHaveValue('Andi Smith');
-    await user.clear(name);
-    await user.type(name, 'Caca');
+    const names = screen.getAllByRole('textbox', { name: /name/i });
+    expect(names[0]).toHaveValue('Andi Smith');
+    await user.clear(names[0]);
+    await user.type(names[0], 'Caca');
 
     const gender = screen.getByRole('combobox', { name: /gender/i });
     expect(gender).toHaveValue('MALE');
     await user.selectOptions(gender, 'FEMALE');
 
-    const country = screen.getByRole('combobox', { name: /country/i });
-    expect(country).toHaveValue('ID');
-    await user.selectOptions(country, 'US');
+    const countries = screen.getAllByRole('combobox', { name: /country/i });
+    expect(countries[0]).toHaveValue('ID');
+    await user.selectOptions(countries[0], 'US');
+
+    const homeAddress = document.querySelector('textarea[name="homeAddress"]');
+    expect(homeAddress).toHaveValue('123 Main St');
+    await user.clear(homeAddress);
+    await user.type(homeAddress, '456 Oak Ave');
+
+    const shirtSize = screen.getByRole('combobox', { name: /shirt size/i });
+    expect(shirtSize).toHaveValue('M');
+    await user.selectOptions(shirtSize, 'L');
+
+    expect(names[1]).toHaveValue('MIT');
+    await user.clear(names[1]);
+    await user.type(names[1], 'Stanford');
+
+    expect(countries[1]).toHaveValue('US');
+    await user.selectOptions(countries[1], 'GB');
+
+    const institutionProvince = screen.getByRole('textbox', { name: /institution province/i });
+    expect(institutionProvince).toHaveValue('Massachusetts');
+    await user.clear(institutionProvince);
+    await user.type(institutionProvince, 'England');
+
+    const institutionCity = screen.getByRole('textbox', { name: /institution city/i });
+    expect(institutionCity).toHaveValue('Cambridge');
+    await user.clear(institutionCity);
+    await user.type(institutionCity, 'London');
 
     nockJophiel()
       .put('/users/JIDUSER123/info', {
         name: 'Caca',
         gender: 'FEMALE',
         country: 'US',
+        homeAddress: '456 Oak Ave',
+        shirtSize: 'L',
+        institutionName: 'Stanford',
+        institutionCountry: 'GB',
+        institutionProvince: 'England',
+        institutionCity: 'London',
       })
       .reply(200, {
         name: 'Caca',
         gender: 'FEMALE',
         country: 'US',
+        homeAddress: '456 Oak Ave',
+        shirtSize: 'L',
+        institutionName: 'Stanford',
+        institutionCountry: 'GB',
+        institutionProvince: 'England',
+        institutionCity: 'London',
       });
 
     await user.click(screen.getByRole('button', { name: /save/i }));