Use email instead of username in org member list (#36122)

* Use email instead of username in org member list

* Minor clean up

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/Organization/Organization.utils.ts

@@ -1,5 +1,3 @@
-import type { OrganizationMember } from 'data/organizations/organization-members-query'
-
 // Invite is expired if older than 24hrs
 export function isInviteExpired(timestamp: string) {
   const inviteDate = new Date(timestamp)
@@ -10,10 +8,3 @@ export function isInviteExpired(timestamp: string) {
   }
   return true
 }
-
-export const getUserDisplayName = (user?: OrganizationMember) => {
-  if (!user) return ''
-
-  const { username, primary_email, invited_id } = user || {}
-  return invited_id !== undefined ? primary_email : username || ''
-}

apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx

@@ -1,4 +1,5 @@
 import { ArrowRight, Check, Minus, User, X } from 'lucide-react'
+import Link from 'next/link'
 
 import Table from 'components/to-be-cleaned/Table'
 import PartnerIcon from 'components/ui/PartnerIcon'
@@ -9,7 +10,6 @@ import { useProjectsQuery } from 'data/projects/projects-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { getGitHubProfileImgUrl } from 'lib/github'
 import { useProfile } from 'lib/profile'
-import Link from 'next/link'
 import {
   Badge,
   HoverCardContent_Shadcn_,
@@ -19,7 +19,7 @@ import {
   cn,
 } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
-import { getUserDisplayName, isInviteExpired } from '../Organization.utils'
+import { isInviteExpired } from '../Organization.utils'
 import { MemberActions } from './MemberActions'
 
 interface MemberRowProps {
@@ -73,7 +73,7 @@ export const MemberRow = ({ member }: MemberRowProps) => {
       <Table.td>
         <div className="flex items-center gap-x-4">
           <ProfileImage
-            alt={member.username}
+            alt={member.primary_email ?? member.username ?? ''}
             src={profileImageUrl}
             className="border rounded-full w-[32px] h-[32px] md:w-[40px] md:h-[40px]"
             placeholder={
@@ -88,11 +88,7 @@ export const MemberRow = ({ member }: MemberRowProps) => {
             }
           />
           <div className="flex item-center gap-x-2">
-            {isInvitedUser === undefined ? (
-              <p className="text-foreground-light truncate">{member.primary_email}</p>
-            ) : (
-              <p className="text-foreground truncate">{getUserDisplayName(member)}</p>
-            )}
+            <p className="text-foreground-light truncate">{member.primary_email}</p>
             {member.primary_email === profile?.primary_email && <Badge color="scale">You</Badge>}
           </div>