From c6821aab77ec2235ba98848e54359511c485469e Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 23 May 2023 16:30:45 +0800
Subject: [PATCH] feat(console): add hover tooltip for micro user avatars
 (#3861)

---
 .../components/SourceUserItem/index.tsx       |  7 +--
 .../components/TargetUserItem/index.tsx       |  7 +--
 .../Tip/TipBubble/index.module.scss           |  1 +
 .../components/UserAvatar/index.module.scss   | 28 +++++++++++
 .../src/components/UserAvatar/index.tsx       | 49 ++++++++++++++++---
 .../src/components/UserName/index.module.scss | 15 +++---
 .../console/src/components/UserName/index.tsx | 13 ++---
 .../src/pages/AuditLogDetails/index.tsx       |  2 +-
 .../src/pages/RoleDetails/RoleUsers/index.tsx |  2 +-
 .../components/AssignRolesModal/index.tsx     |  3 +-
 .../console/src/pages/UserDetails/index.tsx   |  2 +-
 packages/console/src/pages/Users/index.tsx    |  2 +-
 packages/console/src/utils/user.ts            | 11 +++--
 13 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx
index 5ebc0e5b3..19b537b9e 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx
@@ -1,5 +1,4 @@
 import type { User } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
 
 import Checkbox from '@/components/Checkbox';
 import UserAvatar from '@/components/UserAvatar';
@@ -16,8 +15,6 @@ type Props = {
 };
 
 function SourceUserItem({ user, isSelected, onSelect }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
   return (
     <div
       role="button"
@@ -36,8 +33,8 @@ function SourceUserItem({ user, isSelected, onSelect }: Props) {
           onSelect();
         }}
       />
-      <UserAvatar user={user} size="micro" />
-      <div className={styles.title}>{getUserTitle(user) ?? t('users.unnamed')}</div>
+      <UserAvatar hasTooltip user={user} size="micro" />
+      <div className={styles.title}>{getUserTitle(user)}</div>
       {user.isSuspended && <SuspendedTag className={styles.suspended} />}
     </div>
   );
diff --git a/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx
index 446a50a28..7b3cde2e6 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx
@@ -1,5 +1,4 @@
 import type { User } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
 
 import Close from '@/assets/images/close.svg';
 import IconButton from '@/components/IconButton';
@@ -15,13 +14,11 @@ type Props = {
 };
 
 function TargetUserItem({ user, onDelete }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
   return (
     <div className={styles.item}>
       <div className={styles.meta}>
-        <UserAvatar user={user} size="micro" />
-        <div className={styles.title}>{getUserTitle(user) ?? t('users.unnamed')}</div>
+        <UserAvatar hasTooltip user={user} size="micro" />
+        <div className={styles.title}>{getUserTitle(user)}</div>
         {user.isSuspended && <SuspendedTag className={styles.suspended} />}
       </div>
       <IconButton
diff --git a/packages/console/src/components/Tip/TipBubble/index.module.scss b/packages/console/src/components/Tip/TipBubble/index.module.scss
index d6c833923..96da327a2 100644
--- a/packages/console/src/components/Tip/TipBubble/index.module.scss
+++ b/packages/console/src/components/Tip/TipBubble/index.module.scss
@@ -9,6 +9,7 @@
   padding: _.unit(2) _.unit(3);
   font: var(--font-body-2);
   max-width: 300px;
+  z-index: 200;
 
   &.successful {
     background: var(--color-success-60);
diff --git a/packages/console/src/components/UserAvatar/index.module.scss b/packages/console/src/components/UserAvatar/index.module.scss
index 9fcaae8ef..a4a86c13a 100644
--- a/packages/console/src/components/UserAvatar/index.module.scss
+++ b/packages/console/src/components/UserAvatar/index.module.scss
@@ -1,3 +1,5 @@
+@use '@/scss/underscore' as _;
+
 .wrapper {
   position: relative;
   width: 48px;
@@ -65,3 +67,29 @@
     transform: scale(1.25);
   }
 }
+
+.tooltip {
+  padding: _.unit(2.5);
+  font: var(--font-body-2);
+
+  .row {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    + .row {
+      margin-top: _.unit(1);
+    }
+  }
+
+  .label {
+    // Fixed font color should used in Tooltip component as the color does not change when theme changes.
+    color: #a9acac;
+  }
+
+  .value {
+    // Fixed font color should used in Tooltip component as the color does not change when theme changes.
+    color: #f7f8f8;
+    margin-left: _.unit(1);
+  }
+}
diff --git a/packages/console/src/components/UserAvatar/index.tsx b/packages/console/src/components/UserAvatar/index.tsx
index 62878698a..72b7969c9 100644
--- a/packages/console/src/components/UserAvatar/index.tsx
+++ b/packages/console/src/components/UserAvatar/index.tsx
@@ -1,20 +1,52 @@
 import type { User } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 import DefaultAvatar from '@/assets/images/default-avatar.svg';
+import { formatToInternationalPhoneNumber } from '@/utils/phone';
 
 import ImageWithErrorFallback from '../ImageWithErrorFallback';
+import { Tooltip } from '../Tip';
 
 import * as styles from './index.module.scss';
 
+type UserInfo = Pick<User, 'name' | 'username' | 'avatar' | 'primaryEmail' | 'primaryPhone'>;
+
 type Props = {
   className?: string;
   size?: 'micro' | 'small' | 'medium' | 'large' | 'xlarge';
-  user?: Partial<Pick<User, 'name' | 'username' | 'avatar' | 'primaryEmail'>>;
+  user?: Partial<UserInfo>;
+  hasTooltip?: boolean;
 };
 
-function UserAvatar({ className, size = 'medium', user }: Props) {
+function UserInfoTipContent({ user }: { user: Partial<UserInfo> }) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { name, primaryEmail, primaryPhone, username } = user;
+  const itemsToDisplay = [
+    { label: t('user_details.field_name'), value: name },
+    { label: t('user_details.field_email'), value: primaryEmail },
+    {
+      label: t('user_details.field_phone'),
+      value: conditional(primaryPhone && formatToInternationalPhoneNumber(primaryPhone)),
+    },
+    { label: t('user_details.field_username'), value: username },
+  ];
+  return (
+    <>
+      {itemsToDisplay
+        .filter(({ value }) => Boolean(value))
+        .map(({ label, value }) => (
+          <div key={label} className={styles.row}>
+            <span className={styles.label}>{label}:</span>
+            <span className={styles.value}>{value}</span>
+          </div>
+        ))}
+    </>
+  );
+}
+
+function UserAvatar({ className, size = 'medium', user, hasTooltip = false }: Props) {
   const avatarClassName = classNames(styles.avatar, styles[size]);
   const wrapperClassName = classNames(styles.wrapper, styles[size], className);
   const defaultColorPalette = [
@@ -61,11 +93,16 @@ function UserAvatar({ className, size = 'medium', user }: Props) {
   );
 
   return (
-    <div className={wrapperClassName}>
-      <div className={avatarClassName} style={{ backgroundColor: color }}>
-        {nameToDisplay ? nameToDisplay.charAt(0) : <DefaultAvatar />}
+    <Tooltip
+      className={styles.tooltip}
+      content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)}
+    >
+      <div className={wrapperClassName}>
+        <div className={avatarClassName} style={{ backgroundColor: color }}>
+          {nameToDisplay ? nameToDisplay.charAt(0) : <DefaultAvatar />}
+        </div>
       </div>
-    </div>
+    </Tooltip>
   );
 }
 
diff --git a/packages/console/src/components/UserName/index.module.scss b/packages/console/src/components/UserName/index.module.scss
index 1256a043e..bd9461ce4 100644
--- a/packages/console/src/components/UserName/index.module.scss
+++ b/packages/console/src/components/UserName/index.module.scss
@@ -5,21 +5,18 @@
   color: var(--color-text);
 
   .title {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     max-width: 100%;
     @include _.text-ellipsis;
-    margin-right: _.unit(1);
-  }
 
-  .id {
-    display: inline-block;
-    font: var(--body-small);
-    color: var(--color-text-secondary);
-    @include _.text-ellipsis;
+    span {
+      margin-left: _.unit(2);
+    }
   }
 
   .link {
-    display: inline-block;
+    display: inline-flex;
     text-decoration: none;
     color: var(--color-text-link);
   }
diff --git a/packages/console/src/components/UserName/index.tsx b/packages/console/src/components/UserName/index.tsx
index ee9e19be5..77c3fd8e8 100644
--- a/packages/console/src/components/UserName/index.tsx
+++ b/packages/console/src/components/UserName/index.tsx
@@ -1,10 +1,13 @@
 import type { User } from '@logto/schemas';
+import { conditionalString } from '@silverhand/essentials';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import useSWR from 'swr';
 
 import type { RequestError } from '@/hooks/use-api';
+import { getUserTitle } from '@/utils/user';
+
+import UserAvatar from '../UserAvatar';
 
 import * as styles from './index.module.scss';
 
@@ -15,10 +18,8 @@ type Props = {
 
 function UserName({ userId, isLink = false }: Props) {
   const { data, error } = useSWR<User, RequestError>(`api/users/${userId}`);
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
   const isLoading = !data && !error;
-  const name = data?.name ?? t('users.unnamed');
+  const name = conditionalString(data && getUserTitle(data));
 
   if (isLoading) {
     return null;
@@ -28,12 +29,12 @@ function UserName({ userId, isLink = false }: Props) {
     <div className={styles.userName}>
       {isLink ? (
         <Link to={`/users/${userId}`} className={classNames(styles.title, styles.link)}>
-          {name}
+          <UserAvatar hasTooltip size="micro" user={data} />
+          <span>{name}</span>
         </Link>
       ) : (
         <div className={styles.title}>{name}</div>
       )}
-      <div className={styles.id}>{userId}</div>
     </div>
   );
 }
diff --git a/packages/console/src/pages/AuditLogDetails/index.tsx b/packages/console/src/pages/AuditLogDetails/index.tsx
index 7aa10ab69..d96c3acf5 100644
--- a/packages/console/src/pages/AuditLogDetails/index.tsx
+++ b/packages/console/src/pages/AuditLogDetails/index.tsx
@@ -43,7 +43,7 @@ function AuditLogDetails() {
     conditional(
       userId &&
         t('log_details.back_to', {
-          name: conditional(userData && getUserTitle(userData)) ?? t('users.unnamed'),
+          name: getUserTitle(userData),
         })
     ) ??
     conditional(
diff --git a/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx b/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx
index d4ef30110..c074e8b7e 100644
--- a/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx
+++ b/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx
@@ -98,7 +98,7 @@ function RoleUsers() {
 
               return (
                 <ItemPreview
-                  title={getUserTitle(user) ?? t('users.unnamed')}
+                  title={getUserTitle(user)}
                   subtitle={getUserSubtitle(user)}
                   icon={<UserAvatar size="large" user={user} />}
                   to={`/users/${id}`}
diff --git a/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx b/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx
index 98e497426..e6110c26c 100644
--- a/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx
@@ -10,6 +10,7 @@ import ModalLayout from '@/components/ModalLayout';
 import UserRolesTransfer from '@/components/UserRolesTransfer';
 import useApi from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
+import { getUserTitle } from '@/utils/user';
 
 type Props = {
   user: User;
@@ -19,7 +20,7 @@ type Props = {
 function AssignRolesModal({ user, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
-  const userName = user.name ?? t('users.unnamed');
+  const userName = getUserTitle(user);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [roles, setRoles] = useState<RoleResponse[]>([]);
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index b3cde4362..20215ba37 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -114,7 +114,7 @@ function UserDetails() {
           <Card className={styles.header}>
             <UserAvatar user={data} size="xlarge" />
             <div className={styles.metadata}>
-              <div className={styles.title}>{getUserTitle(data) ?? t('users.unnamed')}</div>
+              <div className={styles.title}>{getUserTitle(data)}</div>
               <div>
                 {isSuspendedUser && <SuspendedTag />}
                 {userSubtitle && (
diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx
index 8c85f31fb..f6d10bffb 100644
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@@ -84,7 +84,7 @@ function Users() {
 
               return (
                 <ItemPreview
-                  title={getUserTitle(user) ?? t('users.unnamed')}
+                  title={getUserTitle(user)}
                   subtitle={getUserSubtitle(user)}
                   icon={<UserAvatar size="large" user={user} />}
                   to={buildDetailsPathname(id)}
diff --git a/packages/console/src/utils/user.ts b/packages/console/src/utils/user.ts
index 417f39ef6..cd30b291d 100644
--- a/packages/console/src/utils/user.ts
+++ b/packages/console/src/utils/user.ts
@@ -1,16 +1,19 @@
 import type { User } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
+import { t } from 'i18next';
 
 import { formatToInternationalPhoneNumber } from './phone';
 
-const getUserIdentity = (user: User) => {
-  const { primaryEmail, primaryPhone, username } = user;
+const getSecondaryUserInfo = (user?: User) => {
+  const { primaryEmail, primaryPhone, username } = user ?? {};
   const formattedPhoneNumber = conditional(
     primaryPhone && formatToInternationalPhoneNumber(primaryPhone)
   );
   return primaryEmail ?? formattedPhoneNumber ?? username;
 };
 
-export const getUserTitle = (user: User) => user.name ?? getUserIdentity(user);
+export const getUserTitle = (user?: User) =>
+  user?.name ?? getSecondaryUserInfo(user) ?? t('admin_console.users.unnamed');
 
-export const getUserSubtitle = (user: User) => conditional(user.name && getUserIdentity(user));
+export const getUserSubtitle = (user?: User) =>
+  conditional(user?.name && getSecondaryUserInfo(user));