feat(auth): profile picture (#4724)

app/schema.graphql

@@ -1469,6 +1469,7 @@ type User implements Node {
   passwordNeedsReset: Boolean!
   email: String!
   username: String
+  profilePictureUrl: String
   createdAt: DateTime!
   authMethod: AuthMethod!
   role: UserRole!

app/src/pages/profile/ProfilePicture.tsx → app/src/components/user/UserPicture.tsx

@@ -4,7 +4,18 @@ import { css } from "@emotion/react";
 
 import { useWordColor } from "@phoenix/hooks/useWordColor";
 
-export function ProfilePicture({ name }: { name: string }) {
+export function UserPicture({
+  name,
+  profilePictureUrl,
+  size = 75,
+}: {
+  name: string;
+  profilePictureUrl: string | null;
+  /**
+   * The diameter of the profile picture
+   **/
+  size?: number;
+}) {
   const firstLetter = name.length ? name[0].toUpperCase() : "?";
   const wordColor = useWordColor(name);
   const gradientColors: [string, string] = useMemo(() => {
@@ -14,10 +25,10 @@ export function ProfilePicture({ name }: { name: string }) {
   return (
     <div
       css={css`
-        width: 75px;
-        height: 75px;
+        width: ${size}px;
+        height: ${size}px;
         border-radius: 50%;
-        font-size: 36px;
+        font-size: ${Math.floor(size / 2)}px;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -29,9 +40,15 @@ export function ProfilePicture({ name }: { name: string }) {
           ${gradientColors[0]},
           ${gradientColors[1]}
         );
+        overflow: hidden;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
       `}
     >
-      {firstLetter}
+      {profilePictureUrl ? <img src={profilePictureUrl} /> : firstLetter}
     </div>
   );
 }

app/src/contexts/ViewerContext.tsx

@@ -38,6 +38,7 @@ export function ViewerProvider({
           id
           username
           email
+          profilePictureUrl
           role {
             name
           }

app/src/pages/profile/ViewerProfileCard.tsx

@@ -14,11 +14,11 @@ import {
   View,
 } from "@arizeai/components";
 
+import { UserPicture } from "@phoenix/components/user/UserPicture";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { useViewer } from "@phoenix/contexts/ViewerContext";
 
 import { ViewerProfileCardMutation } from "./__generated__/ViewerProfileCardMutation.graphql";
-import { ProfilePicture } from "./ProfilePicture";
 
 type EditProfileFormParams = {
   username: string;
@@ -94,7 +94,10 @@ export function ViewerProfileCard() {
     >
       <View paddingTop="size-200" paddingStart="size-200" paddingEnd="size-200">
         <Flex direction="row" gap="size-200" alignItems="center">
-          <ProfilePicture name={viewer.username || viewer.email} />
+          <UserPicture
+            name={viewer.username || viewer.email}
+            profilePictureUrl={viewer.profilePictureUrl}
+          />
           <Flex direction="column" gap="size-50">
             <Heading level={2} weight="heavy">
               {viewer.username || viewer.email}

app/src/pages/settings/UsersTable.tsx

@@ -21,6 +21,7 @@ import { RolePicker } from "@phoenix/components/settings/RolePicker";
 import { tableCSS } from "@phoenix/components/table/styles";
 import { TableEmpty } from "@phoenix/components/table/TableEmpty";
 import { TimestampCell } from "@phoenix/components/table/TimestampCell";
+import { UserPicture } from "@phoenix/components/user/UserPicture";
 import { isUserRole, normalizeUserRole } from "@phoenix/constants";
 
 import { UsersTable_users$key } from "./__generated__/UsersTable_users.graphql";
@@ -30,6 +31,15 @@ import { UserRoleChangeDialog } from "./UserRoleChangeDialog";
 
 const USER_TABLE_ROW_HEIGHT = 55;
 
+const emailLinkCSS = css`
+  text-decoration: none;
+  color: var(--ac-global-color-grey-600);
+  font-size: 12px;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 /**
  * Rows may render different content depending on the user so we normalize the height
  */
@@ -59,6 +69,7 @@ export function UsersTable({ query }: { query: UsersTable_users$key }) {
               username
               createdAt
               authMethod
+              profilePictureUrl
               role {
                 name
               }
@@ -75,6 +86,7 @@ export function UsersTable({ query }: { query: UsersTable_users$key }) {
       id: user.id,
       email: user.email,
       username: user.username,
+      profilePictureUrl: user.profilePictureUrl,
       createdAt: user.createdAt,
       role: user.role.name,
       authMethod: user.authMethod,
@@ -91,12 +103,27 @@ export function UsersTable({ query }: { query: UsersTable_users$key }) {
   const columns = useMemo((): ColumnDef<TableRow>[] => {
     return [
       {
-        header: "email",
-        accessorKey: "email",
+        header: "user",
+        accessorKey: "username",
+        cell: ({ row }) => (
+          <Flex direction="row" gap="size-50" alignItems="center">
+            <UserPicture
+              name={row.original.username || row.original.email}
+              profilePictureUrl={row.original.profilePictureUrl}
+              size={20}
+            />
+            <span>{row.original.username || "--"}</span>
+            <a href={`mailto:${row.original.email}`} css={emailLinkCSS}>
+              {row.original.email}
+            </a>
+          </Flex>
+        ),
       },
       {
-        header: "username",
-        accessorKey: "username",
+        header: "method",
+        accessorKey: "authMethod",
+        size: 10,
+        cell: ({ row }) => row.original.authMethod.toLowerCase(),
       },
       {
         header: "role",