feat(console): user icon (#857)

packages/console/src/components/ItemPreview/index.tsx

@@ -15,12 +15,7 @@ type Props = {
 const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) => {
   return (
     <div className={classNames(styles.item, styles[size])}>
-      {icon &&
-        (typeof icon === 'string' ? (
-          <img className={styles.icon} src={icon} />
-        ) : (
-          <div className={styles.icon}>{icon}</div>
-        ))}
+      {icon && <div className={styles.icon}>{icon}</div>}
       <div className={styles.content}>
         {to && (
           <Link

packages/console/src/consts/avatars.ts

@@ -0,0 +1,25 @@
+import avatar001 from '@/assets/avatars/avatar-001.png';
+import avatar002 from '@/assets/avatars/avatar-002.png';
+import avatar003 from '@/assets/avatars/avatar-003.png';
+import avatar004 from '@/assets/avatars/avatar-004.png';
+import avatar005 from '@/assets/avatars/avatar-005.png';
+import avatar006 from '@/assets/avatars/avatar-006.png';
+import avatar007 from '@/assets/avatars/avatar-007.png';
+import avatar008 from '@/assets/avatars/avatar-008.png';
+import avatar009 from '@/assets/avatars/avatar-009.png';
+import avatar010 from '@/assets/avatars/avatar-010.png';
+
+export const Avatars = [
+  avatar001,
+  avatar002,
+  avatar003,
+  avatar004,
+  avatar005,
+  avatar006,
+  avatar007,
+  avatar008,
+  avatar009,
+  avatar010,
+];
+
+export const getAvatarById = (id: string) => Avatars[(id.codePointAt(0) ?? 0) % Avatars.length];

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

@@ -113,7 +113,11 @@ const ApiResources = () => {
                 }}
               >
                 <td>
-                  <ItemPreview title={name} icon={apiResourceIcon} to={buildDetailsLink(id)} />
+                  <ItemPreview
+                    title={name}
+                    icon={<img src={apiResourceIcon} />}
+                    to={buildDetailsLink(id)}
+                  />
                 </td>
                 <td>
                   <CopyToClipboard value={indicator} variant="text" />

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

@@ -113,7 +113,7 @@ const Applications = () => {
                   <ItemPreview
                     title={name}
                     subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
-                    icon={ApplicationIcon[type]}
+                    icon={<img src={ApplicationIcon[type]} />}
                     to={`/applications/${id}`}
                   />
                 </td>

packages/console/src/pages/UserDetails/index.module.scss

@@ -14,8 +14,12 @@
     margin-left: _.unit(6);
   }
 
-  .imagePlaceholder {
+  .avatar {
     margin-left: _.unit(2);
+    border-radius: 8px;
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
   }
 
   .metadata {

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

@@ -16,10 +16,10 @@ import CodeEditor from '@/components/CodeEditor';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import FormField from '@/components/FormField';
-import ImagePlaceholder from '@/components/ImagePlaceholder';
 import LinkButton from '@/components/LinkButton';
 import TabNav, { TabNavItem } from '@/components/TabNav';
 import TextInput from '@/components/TextInput';
+import { getAvatarById } from '@/consts/avatars';
 import useApi, { RequestError } from '@/hooks/use-api';
 import Back from '@/icons/Back';
 import Delete from '@/icons/Delete';
@@ -117,9 +117,7 @@ const UserDetails = () => {
       {id && data && (
         <>
           <Card className={styles.header}>
-            <div className={styles.imagePlaceholder}>
-              <ImagePlaceholder size={60} borderRadius={16} />
-            </div>
+            <img className={styles.avatar} src={data.avatar ?? getAvatarById(id)} />
             <div className={styles.metadata}>
               <div className={styles.name}>{data.name ?? '-'}</div>
               <div>

packages/console/src/pages/Users/index.module.scss

@@ -22,6 +22,13 @@
   min-height: 32px;
 }
 
+.avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
 .userName {
   width: 360px;
 }

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

@@ -11,13 +11,13 @@ import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import DateTime from '@/components/DateTime';
-import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import Pagination from '@/components/Pagination';
 import Search from '@/components/Search';
 import TableEmpty from '@/components/Table/TableEmpty';
 import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
+import { getAvatarById } from '@/consts/avatars';
 import { RequestError } from '@/hooks/use-api';
 import Plus from '@/icons/Plus';
 import * as modalStyles from '@/scss/modal.module.scss';
@@ -114,7 +114,7 @@ const Users = () => {
                 />
               </TableEmpty>
             )}
-            {users?.map(({ id, name, username, lastSignInAt, applicationId }) => (
+            {users?.map(({ id, name, username, avatar, lastSignInAt, applicationId }) => (
               <tr
                 key={id}
                 className={tableStyles.clickable}
@@ -126,7 +126,7 @@ const Users = () => {
                   <ItemPreview
                     title={name ?? t('users.unnamed')}
                     subtitle={conditionalString(username)}
-                    icon={<ImagePlaceholder size={24} />}
+                    icon={<img className={styles.avatar} src={avatar ?? getAvatarById(id)} />}
                     to={`/users/${id}`}
                     size="compact"
                   />