refactor(admin): use UserField to replace chat and file userId display

server/admin/app/ra/components/UserField.tsx

@@ -1,11 +1,28 @@
 import React from 'react';
-import { ReferenceField, ReferenceFieldProps, TextField } from 'react-admin';
+import {
+  ReferenceField,
+  ReferenceFieldProps,
+  TextField,
+  useRecordContext,
+} from 'react-admin';
+
+const SYSTEM_USERID = '000000000000000000000000';
 
 export const UserField: React.FC<Omit<ReferenceFieldProps, 'reference'>> =
   React.memo((props) => {
+    const record = useRecordContext(props);
+    if (props.source && record) {
+      if (record[props.source] === SYSTEM_USERID) {
+        return <div>System</div>;
+      }
+    }
+
     return (
       <ReferenceField link="show" {...props} reference="users">
-        <TextField source="nickname" />
+        <>
+          <TextField source="nickname" />
+          (<TextField source="email" />)
+        </>
       </ReferenceField>
     );
   });

server/admin/app/ra/resources/chat.tsx

@@ -9,6 +9,7 @@ import {
   SearchInput,
   useTranslate,
 } from 'react-admin';
+import { UserField } from '../components/UserField';
 
 export const MessageList: React.FC = () => {
   const translate = useTranslate();
@@ -27,7 +28,7 @@ export const MessageList: React.FC = () => {
       <Datagrid rowClick="show">
         <TextField source="id" sortable={true} sortByOrder="DESC" />
         <TextField source="content" />
-        <TextField source="author" />
+        <UserField source="author" />
         <ReferenceField source="groupId" reference="groups" />
         <TextField source="converseId" />
         <BooleanField source="hasRecall" />

server/admin/app/ra/resources/file.tsx

@@ -1,13 +1,7 @@
 import React from 'react';
-import {
-  Datagrid,
-  DateField,
-  List,
-  ReferenceField,
-  TextField,
-  UrlField,
-} from 'react-admin';
+import { Datagrid, DateField, List, TextField, UrlField } from 'react-admin';
 import { FilesizeField } from '../components/FilesizeField';
+import { UserField } from '../components/UserField';
 
 export const FileList: React.FC = () => (
   <List>
@@ -17,10 +11,7 @@ export const FileList: React.FC = () => (
       <FilesizeField source="size" noWrap={true} />
       <TextField source="metaData.content-type" />
       <TextField source="etag" />
-      <ReferenceField source="userId" reference="users">
-        <TextField source="nickname" />
-        (<TextField source="email" />)
-      </ReferenceField>
+      <UserField source="userId" />
       <DateField source="createdAt" />
     </Datagrid>
   </List>