Admin panel user search enhancements

packages/client-core/i18n/en/admin.json

@@ -369,6 +369,7 @@
       "avatarRequired": "Avatar is required",
       "scopeTypeRequired": "Scope type is required",
       "hideGuests": "Hide guests",
+      "id": "Id",
       "name": "Name",
       "avatar": "Avatar",
       "grantScope": "Grant Scope",
@@ -378,7 +379,17 @@
       "confirmUserDelete": "Do you want to delete user",
       "isGuest": "Is guest",
       "selectAllScopes": "Select All Scopes",
-      "clearAllScopes": "Clear All Scopes"
+      "clearAllScopes": "Clear All Scopes",
+      "userSearch": "user by id, name or account identifier",
+      "linkedAccounts": "Linked Accounts",
+      "discord": "Discord",
+      "facebook": "Facebook",
+      "google": "Google",
+      "github": "Github",
+      "linkedIn": "LinkedIn",
+      "twitter": "Twitter",
+      "sms": "SMS",
+      "email": "Email"
     },
     "server": {
       "loading": "Fetching Server Info",

packages/client-core/src/admin/common/variables/user.ts

@@ -1,13 +1,15 @@
 export interface UserColumn {
-  id: 'name' | 'avatarId' | 'isGuest' | 'location' | 'inviteCode' | 'instanceId' | 'action'
+  id: 'id' | 'name' | 'avatarId' | 'accountIdentifier' | 'isGuest' | 'location' | 'inviteCode' | 'instanceId' | 'action'
   label: string
   minWidth?: number
   align?: 'right'
 }
 
 export const userColumns: UserColumn[] = [
+  { id: 'id', label: 'User Id', minWidth: 65 },
   { id: 'name', label: 'Name', minWidth: 65 },
   { id: 'avatarId', label: 'Avatar', minWidth: 65 },
+  { id: 'accountIdentifier', label: 'Linked Accounts', minWidth: 65 },
   {
     id: 'isGuest',
     label: 'Is Guest',
@@ -45,6 +47,7 @@ export interface UserData {
   el: any
   name: string
   avatarId: string | JSX.Element
+  accountIdentifier: string | JSX.Element
   isGuest: string
   location: string | JSX.Element
   inviteCode: string | JSX.Element

packages/client-core/src/admin/components/Users/UserDrawer.tsx

@@ -4,13 +4,24 @@ import { useTranslation } from 'react-i18next'
 import { AdminScopeType } from '@xrengine/common/src/interfaces/AdminScopeType'
 import { CreateEditUser, UserInterface } from '@xrengine/common/src/interfaces/User'
 
+import EmailIcon from '@mui/icons-material/Email'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import PhoneIcon from '@mui/icons-material/Phone'
 import Button from '@mui/material/Button'
 import Checkbox from '@mui/material/Checkbox'
 import Container from '@mui/material/Container'
 import DialogActions from '@mui/material/DialogActions'
 import DialogTitle from '@mui/material/DialogTitle'
 import FormControlLabel from '@mui/material/FormControlLabel'
-
+import Grid from '@mui/material/Grid'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+
+import { DiscordIcon } from '../../../common/components/Icons/DiscordIcon'
+import { FacebookIcon } from '../../../common/components/Icons/FacebookIcon'
+import { GoogleIcon } from '../../../common/components/Icons/GoogleIcon'
+import { LinkedInIcon } from '../../../common/components/Icons/LinkedInIcon'
+import { TwitterIcon } from '../../../common/components/Icons/TwitterIcon'
 import { NotificationService } from '../../../common/services/NotificationService'
 import { useAuthState } from '../../../user/services/AuthService'
 import AutoComplete, { AutoCompleteData } from '../../common/AutoComplete'
@@ -36,6 +47,7 @@ interface Props {
 }
 
 const defaultState = {
+  id: '',
   name: '',
   avatar: '',
   isGuest: true,
@@ -72,6 +84,16 @@ const UserDrawer = ({ open, mode, selectedUser, onClose }: Props) => {
     }
   })
 
+  const nonGuestLinkedIP = selectedUser?.identity_providers?.filter((ip) => ip.type !== 'guest')
+  const discordIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'discord')
+  const googleIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'google')
+  const facebookIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'facebook')
+  const twitterIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'twitter')
+  const linkedinIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'linkedin')
+  const githubIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'github')
+  const emailIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'email')
+  const smsIp = selectedUser?.identity_providers?.find((ip) => ip.type === 'sms')
+
   if (selectedUser) {
     for (const scope of selectedUser.scopes || []) {
       const scopeExists = scopeMenu.find((item) => item.type === scope.type)
@@ -104,6 +126,7 @@ const UserDrawer = ({ open, mode, selectedUser, onClose }: Props) => {
     if (selectedUser) {
       setState({
         ...defaultState,
+        id: selectedUser.id,
         name: selectedUser.name || '',
         avatar: selectedUser.avatarId || '',
         isGuest: selectedUser.isGuest,
@@ -201,6 +224,8 @@ const UserDrawer = ({ open, mode, selectedUser, onClose }: Props) => {
           {mode === UserDrawerMode.ViewEdit && !editMode && selectedUser?.name}
         </DialogTitle>
 
+        <InputText name="id" label={t('admin:components.user.id')} value={state.id} disabled />
+
         <InputText
           name="name"
           label={t('admin:components.user.name')}
@@ -238,6 +263,104 @@ const UserDrawer = ({ open, mode, selectedUser, onClose }: Props) => {
           />
         )}
 
+        {nonGuestLinkedIP && nonGuestLinkedIP.length > 0 && (
+          <Grid container spacing={1} sx={{ marginTop: 2, marginBottom: 4 }}>
+            <Grid item md={12}>
+              <Typography variant="body1">{t('admin:components.user.linkedAccounts')}</Typography>
+            </Grid>
+            {discordIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.discord')} arrow>
+                  <span>
+                    <DiscordIcon width="20px" height="20px" viewBox="0 0 40 40" />
+                  </span>
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {discordIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+            {googleIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.google')} arrow>
+                  <span>
+                    <GoogleIcon width="20px" height="20px" viewBox="0 0 40 40" />
+                  </span>
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {googleIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+            {facebookIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.facebook')} arrow>
+                  <span>
+                    <FacebookIcon width="20px" height="20px" viewBox="0 0 40 40" />
+                  </span>
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {facebookIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+            {twitterIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.twitter')} arrow>
+                  <span>
+                    <TwitterIcon width="20px" height="20px" viewBox="0 0 40 40" />
+                  </span>
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {twitterIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+            {linkedinIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.linkedIn')} arrow>
+                  <span>
+                    <LinkedInIcon width="20px" height="20px" viewBox="0 0 40 40" />
+                  </span>
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {linkedinIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+            {githubIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.github')} arrow>
+                  <GitHubIcon width="20px" height="20px" />
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {githubIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+            {emailIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.email')} arrow>
+                  <EmailIcon width="20px" height="20px" />
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {emailIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+            {smsIp && (
+              <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Tooltip title={t('admin:components.user.sms')} arrow>
+                  <PhoneIcon width="20px" height="20px" />
+                </Tooltip>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                  {smsIp.accountIdentifier!}
+                </Typography>
+              </Grid>
+            )}
+          </Grid>
+        )}
+
         {viewMode && (
           <AutoComplete data={scopeMenu} label={t('admin:components.user.grantScope')} value={state.scopes} disabled />
         )}

packages/client-core/src/admin/components/Users/UserTable.tsx

@@ -1,10 +1,20 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { IdentityProvider } from '@xrengine/common/src/interfaces/IdentityProvider'
 import { UserInterface } from '@xrengine/common/src/interfaces/User'
 
+import EmailIcon from '@mui/icons-material/Email'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import PhoneIcon from '@mui/icons-material/Phone'
 import Box from '@mui/material/Box'
+import Tooltip from '@mui/material/Tooltip'
 
+import { DiscordIcon } from '../../../common/components/Icons/DiscordIcon'
+import { FacebookIcon } from '../../../common/components/Icons/FacebookIcon'
+import { GoogleIcon } from '../../../common/components/Icons/GoogleIcon'
+import { LinkedInIcon } from '../../../common/components/Icons/LinkedInIcon'
+import { TwitterIcon } from '../../../common/components/Icons/TwitterIcon'
 import { useAuthState } from '../../../user/services/AuthService'
 import ConfirmDialog from '../../common/ConfirmDialog'
 import TableComponent from '../../common/Table'
@@ -60,16 +70,80 @@ const UserTable = ({ className, search }: UserProps) => {
     el: UserInterface,
     name: string,
     avatarId: string | JSX.Element,
+    identityProviders: IdentityProvider[],
     isGuest: string,
     location: string | JSX.Element,
     inviteCode: string | JSX.Element,
     instanceId: string | JSX.Element
   ): UserData => {
+    const discordIp = identityProviders.find((ip) => ip.type === 'discord')
+    const googleIp = identityProviders.find((ip) => ip.type === 'google')
+    const facebookIp = identityProviders.find((ip) => ip.type === 'facebook')
+    const twitterIp = identityProviders.find((ip) => ip.type === 'twitter')
+    const linkedinIp = identityProviders.find((ip) => ip.type === 'linkedin')
+    const githubIp = identityProviders.find((ip) => ip.type === 'github')
+    const emailIp = identityProviders.find((ip) => ip.type === 'email')
+    const smsIp = identityProviders.find((ip) => ip.type === 'sms')
+
     return {
       id,
       el,
       name,
       avatarId,
+      accountIdentifier: (
+        <Box sx={{ display: 'flex', gap: 1.5 }}>
+          {discordIp && (
+            <Tooltip title={discordIp.accountIdentifier!} arrow>
+              <span>
+                <DiscordIcon width="20px" height="20px" viewBox="0 0 40 40" />
+              </span>
+            </Tooltip>
+          )}
+          {googleIp && (
+            <Tooltip title={googleIp.accountIdentifier!} arrow>
+              <span>
+                <GoogleIcon width="20px" height="20px" viewBox="0 0 40 40" />
+              </span>
+            </Tooltip>
+          )}
+          {facebookIp && (
+            <Tooltip title={facebookIp.accountIdentifier!} arrow>
+              <span>
+                <FacebookIcon width="20px" height="20px" viewBox="0 0 40 40" />
+              </span>
+            </Tooltip>
+          )}
+          {twitterIp && (
+            <Tooltip title={twitterIp.accountIdentifier!} arrow>
+              <span>
+                <TwitterIcon width="20px" height="20px" viewBox="0 0 40 40" />
+              </span>
+            </Tooltip>
+          )}
+          {linkedinIp && (
+            <Tooltip title={linkedinIp.accountIdentifier!} arrow>
+              <span>
+                <LinkedInIcon width="20px" height="20px" viewBox="0 0 40 40" />
+              </span>
+            </Tooltip>
+          )}
+          {githubIp && (
+            <Tooltip title={githubIp.accountIdentifier!} arrow>
+              <GitHubIcon width="20px" height="20px" />
+            </Tooltip>
+          )}
+          {emailIp && (
+            <Tooltip title={emailIp.accountIdentifier!} arrow>
+              <EmailIcon width="20px" height="20px" />
+            </Tooltip>
+          )}
+          {smsIp && (
+            <Tooltip title={smsIp.accountIdentifier!} arrow>
+              <PhoneIcon width="20px" height="20px" />
+            </Tooltip>
+          )}
+        </Box>
+      ),
       isGuest,
       location,
       inviteCode,
@@ -106,10 +180,11 @@ const UserTable = ({ className, search }: UserProps) => {
 
   const rows = adminUsers.map((el) => {
     return createData(
-      el.id || '',
+      el.id,
       el,
       el.name,
       el.avatarId || <span className={styles.spanNone}>{t('admin:components.common.none')}</span>,
+      el.identity_providers || [],
       el.isGuest.toString(),
       el.instance && el.instance.location ? (
         el.instance.location.name

packages/client-core/src/admin/components/Users/index.tsx

@@ -48,7 +48,7 @@ const Users = () => {
     <div>
       <Grid container spacing={1} className={styles.mb10px}>
         <Grid item sm={8} xs={12}>
-          <Search text="user" handleChange={handleChange} />
+          <Search text={t('admin:components.user.userSearch')} handleChange={handleChange} />
         </Grid>
         <Grid item sm={4} xs={8}>
           <Box sx={{ display: 'flex' }}>

packages/client-core/src/admin/services/UserService.ts

@@ -169,27 +169,6 @@ export const AdminUserService = {
     const result = (await API.instance.client.service('user').remove(id)) as UserInterface
     dispatchAction(AdminUserActions.userAdminRemoved({ data: result }))
   },
-  searchUserAction: async (data: any) => {
-    try {
-      const userState = accessUserState()
-      const skip = userState.skip.value
-      const limit = userState.limit.value
-      const userResult = (await API.instance.client.service('user').find({
-        query: {
-          $sort: {
-            name: 1
-          },
-          $skip: skip || 0,
-          $limit: limit,
-          action: 'search',
-          data
-        }
-      })) as Paginated<UserInterface>
-      dispatchAction(AdminUserActions.searchedUser({ userResult }))
-    } catch (err) {
-      NotificationService.dispatchNotify(err.message, { variant: 'error' })
-    }
-  },
   setSkipGuests: async (skipGuests: boolean) => {
     dispatchAction(AdminUserActions.setSkipGuests({ skipGuests }))
   },

packages/common/src/dbmodels/IdentityProvider.ts

@@ -3,6 +3,7 @@ import { UserId } from '../interfaces/UserId'
 export interface IdentityProviderInterface {
   id: string
   token: string
+  accountIdentifier: string
   password: string
   isVerified: string
   verifyToken: string

packages/common/src/interfaces/IdentityProvider.ts

@@ -3,6 +3,7 @@ import { UserId } from './UserId'
 export interface IdentityProvider {
   id: number
   token: string
+  accountIdentifier?: string
   type: string
   isVerified: boolean
   userId: UserId