feat(ui): add user ID to profile header

also adds some missing localized strings for the profile header

src/components/UserProfile/ProfileHeader/index.tsx

@@ -7,6 +7,10 @@ import Button from '../../Common/Button';
 const messages = defineMessages({
   settings: 'Edit Settings',
   profile: 'View Profile',
+  joindate: 'Joined {joindate}',
+  requests:
+    '{requestCount} {requestCount, plural, one {Request} other {Requests}}',
+  userid: 'User ID: {userid}',
 });
 
 interface ProfileHeaderProps {
@@ -21,6 +25,19 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   const intl = useIntl();
   const { user: loggedInUser, hasPermission } = useUser();
 
+  const subtextItems: React.ReactNode[] = [
+    intl.formatMessage(messages.joindate, {
+      joindate: intl.formatDate(user.createdAt),
+    }),
+    intl.formatMessage(messages.requests, {
+      requestCount: user.requestCount,
+    }),
+  ];
+
+  if (hasPermission(Permission.MANAGE_REQUESTS)) {
+    subtextItems.push(intl.formatMessage(messages.userid, { userid: user.id }));
+  }
+
   return (
     <div className="relative z-40 mt-6 mb-12 md:flex md:items-end md:justify-between md:space-x-5">
       <div className="flex items-end space-x-5 justify-items-end">
@@ -55,8 +72,11 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
             )}
           </h1>
           <p className="text-sm font-medium text-gray-400">
-            Joined {intl.formatDate(user.createdAt)} |{' '}
-            {intl.formatNumber(user.requestCount)} Requests
+            {subtextItems.reduce((prev, curr) => (
+              <>
+                {prev} | {curr}
+              </>
+            ))}
           </p>
         </div>
       </div>

src/i18n/locale/en.json

@@ -705,8 +705,11 @@
   "components.UserList.userssaved": "Users saved!",
   "components.UserList.validationEmail": "You must provide a valid email address",
   "components.UserList.validationpasswordminchars": "Password is too short; should be a minimum of 8 characters",
+  "components.UserProfile.ProfileHeader.joindate": "Joined {joindate}",
   "components.UserProfile.ProfileHeader.profile": "View Profile",
+  "components.UserProfile.ProfileHeader.requests": "{requestCount} {requestCount, plural, one {Request} other {Requests}}",
   "components.UserProfile.ProfileHeader.settings": "Edit Settings",
+  "components.UserProfile.ProfileHeader.userid": "User ID: {userid}",
   "components.UserProfile.UserSettings.UserGeneralSettings.accounttype": "Account Type",
   "components.UserProfile.UserSettings.UserGeneralSettings.admin": "Admin",
   "components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name",