feat(console): add application column in user management (#728)

packages/console/src/pages/Users/components/ApplicationName/index.tsx

@@ -0,0 +1,15 @@
+import { Application } from '@logto/schemas';
+import React from 'react';
+import useSWR from 'swr';
+
+type Props = {
+  applicationId: string;
+};
+
+const ApplicationName = ({ applicationId }: Props) => {
+  const { data } = useSWR<Application>(`/api/applications/${applicationId}`);
+
+  return <span>{data?.name ?? '-'}</span>;
+};
+
+export default ApplicationName;

packages/console/src/pages/Users/index.tsx

@@ -23,6 +23,7 @@ import Plus from '@/icons/Plus';
 import * as modalStyles from '@/scss/modal.module.scss';
 import * as tableStyles from '@/scss/table.module.scss';
 
+import ApplicationName from './components/ApplicationName';
 import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
 
@@ -113,7 +114,7 @@ const Users = () => {
                 />
               </TableEmpty>
             )}
-            {users?.map(({ id, name, username, lastSignInAt }) => (
+            {users?.map(({ id, name, username, lastSignInAt, applicationId }) => (
               <tr
                 key={id}
                 className={tableStyles.clickable}
@@ -130,7 +131,7 @@ const Users = () => {
                     size="compact"
                   />
                 </td>
-                <td>Application</td>
+                <td>{applicationId ? <ApplicationName applicationId={applicationId} /> : '-'}</td>
                 <td>
                   <DateTime>{lastSignInAt}</DateTime>
                 </td>

packages/schemas/src/types/user.ts

@@ -11,6 +11,7 @@ export const userInfoSelectFields = Object.freeze([
   'customData',
   'identities',
   'lastSignInAt',
+  'applicationId',
 ] as const);
 
 export type UserInfo<Keys extends keyof CreateUser = typeof userInfoSelectFields[number]> = Pick<