ref(ui): Simplify badges implementation

- The UserBadge no longer has a bunch of custom styling and uses the
  existing styles

- The MemberBadge delegates to the User badge now

Author: evanpurkhiser

static/app/components/idBadge/baseBadge.tsx

@@ -3,23 +3,27 @@ import styled from '@emotion/styled';
 
 import Avatar from 'sentry/components/avatar';
 import {space} from 'sentry/styles/space';
-import type {AvatarProject, Organization, Team} from 'sentry/types';
+import type {AvatarProject, AvatarUser, Organization, Team} from 'sentry/types';
 
 export interface BaseBadgeProps {
-  displayName: React.ReactNode;
   avatarProps?: Record<string, any>;
   avatarSize?: number;
   className?: string;
   description?: React.ReactNode;
   // Hides the main display name
   hideAvatar?: boolean;
   hideName?: boolean;
+}
+
+interface AllBaseBadgeProps extends BaseBadgeProps {
+  displayName: React.ReactNode;
   organization?: Organization;
   project?: AvatarProject;
   team?: Team;
+  user?: AvatarUser;
 }
 
-const BaseBadge = memo(
+export const BaseBadge = memo(
   ({
     displayName,
     hideName = false,
@@ -28,17 +32,18 @@ const BaseBadge = memo(
     avatarSize = 24,
     description,
     team,
+    user,
     organization,
     project,
     className,
-  }: BaseBadgeProps) => (
+  }: AllBaseBadgeProps) => (
     <Wrapper className={className}>
       {!hideAvatar && (
-        <StyledAvatar
+        <Avatar
           {...avatarProps}
           size={avatarSize}
-          hideName={hideName}
           team={team}
+          user={user}
           organization={organization}
           project={project}
           data-test-id="badge-styled-avatar"
@@ -57,19 +62,13 @@ const BaseBadge = memo(
   )
 );
 
-export default BaseBadge;
-
 const Wrapper = styled('div')`
   display: flex;
+  gap: ${space(1)};
   align-items: center;
   flex-shrink: 0;
 `;
 
-const StyledAvatar = styled(Avatar)<{hideName: boolean}>`
-  margin-right: ${p => (p.hideName ? 0 : space(1))};
-  flex-shrink: 0;
-`;
-
 const DisplayNameAndDescription = styled('div')`
   display: flex;
   flex-direction: column;

static/app/components/idBadge/getBadge.tsx

@@ -5,11 +5,10 @@ import ProjectBadge, {type ProjectBadgeProps} from './projectBadge';
 import {TeamBadge, type TeamBadgeProps} from './teamBadge';
 import UserBadge, {type UserBadgeProps} from './userBadge';
 
-type DisplayName = BaseBadgeProps['displayName'];
-
 interface AddedBaseBadgeProps {
-  displayName?: DisplayName;
+  displayName?: React.ReactNode;
 }
+
 interface GetOrganizationBadgeProps
   extends AddedBaseBadgeProps,
     Omit<BaseBadgeProps, 'displayName' | 'organization'>,

static/app/components/idBadge/memberBadge.spec.tsx

@@ -29,7 +29,7 @@ describe('MemberBadge', function () {
   });
 
   it('does not use a link when orgId = null', function () {
-    render(<MemberBadge member={member} useLink />);
+    render(<MemberBadge member={member} />);
 
     expect(screen.queryByRole('link', {name: 'Foo Bar'})).not.toBeInTheDocument();
     expect(screen.getByText('Foo Bar')).toBeInTheDocument();

static/app/components/idBadge/memberBadge.tsx

@@ -1,21 +1,14 @@
-import styled from '@emotion/styled';
-import omit from 'lodash/omit';
-
-import UserAvatar from 'sentry/components/avatar/userAvatar';
-import type {LinkProps} from 'sentry/components/links/link';
-import Link from 'sentry/components/links/link';
-import {space} from 'sentry/styles/space';
 import type {AvatarUser, Member} from 'sentry/types';
+import useOrganization from 'sentry/utils/useOrganization';
+
+import UserBadge, {UserBadgeProps} from './userBadge';
 
-export interface MemberBadgeProps {
+export interface MemberBadgeProps extends Omit<UserBadgeProps, 'user'> {
   member: Member;
-  avatarSize?: React.ComponentProps<typeof UserAvatar>['size'];
-  className?: string;
-  displayEmail?: string;
-  displayName?: React.ReactNode;
-  hideEmail?: boolean;
-  orgId?: string;
-  useLink?: boolean;
+  /**
+   * Do not link to the members page
+   */
+  disableLink?: boolean;
 }
 
 function getMemberUser(member: Member): AvatarUser {
@@ -32,82 +25,16 @@ function getMemberUser(member: Member): AvatarUser {
   };
 }
 
-function MemberBadge({
-  avatarSize = 24,
-  useLink = true,
-  hideEmail = false,
-  displayName,
-  displayEmail,
-  member,
-  orgId,
-  className,
-}: MemberBadgeProps) {
+function MemberBadge({member, disableLink, ...props}: MemberBadgeProps) {
   const user = getMemberUser(member);
-  const title =
-    displayName ||
-    user.name ||
-    user.email ||
-    user.username ||
-    user.ipAddress ||
-    // Because this can be used to render EventUser models, or User *interface*
-    // objects from serialized Event models. we try both ipAddress and ip_address.
-    user.ip_address;
-
-  return (
-    <StyledUserBadge className={className}>
-      <StyledAvatar user={user} size={avatarSize} />
-      <StyledNameAndEmail>
-        <StyledName
-          useLink={useLink && !!orgId}
-          hideEmail={hideEmail}
-          to={(member && orgId && `/settings/${orgId}/members/${member.id}/`) || ''}
-        >
-          {title}
-        </StyledName>
-        {!hideEmail && <StyledEmail>{displayEmail || user.email}</StyledEmail>}
-      </StyledNameAndEmail>
-    </StyledUserBadge>
-  );
-}
+  const org = useOrganization({allowNull: true});
 
-const StyledUserBadge = styled('div')`
-  display: flex;
-  align-items: center;
-`;
+  const membersUrl =
+    member && org && !disableLink
+      ? `/settings/${org.slug}/members/${member.id}/`
+      : undefined;
 
-const StyledNameAndEmail = styled('div')`
-  flex-shrink: 1;
-  min-width: 0;
-  line-height: 1;
-`;
-
-const StyledEmail = styled('div')`
-  font-size: 0.875em;
-  margin-top: ${space(0.25)};
-  color: ${p => p.theme.gray300};
-  ${p => p.theme.overflowEllipsis};
-`;
-
-interface NameProps {
-  hideEmail: boolean;
-  to: LinkProps['to'];
-  useLink: boolean;
-  children?: React.ReactNode;
+  return <UserBadge to={membersUrl} user={user} {...props} />;
 }
 
-const StyledName = styled(({useLink, to, ...props}: NameProps) => {
-  const forwardProps = omit(props, 'hideEmail');
-  return useLink ? <Link to={to} {...forwardProps} /> : <span {...forwardProps} />;
-})`
-  font-weight: ${(p: NameProps) => (p.hideEmail ? 'inherit' : 'bold')};
-  line-height: 1.15em;
-  ${p => p.theme.overflowEllipsis};
-`;
-
-const StyledAvatar = styled(UserAvatar)`
-  min-width: ${space(3)};
-  min-height: ${space(3)};
-  margin-right: ${space(1)};
-`;
-
 export default MemberBadge;

static/app/components/idBadge/organizationBadge.tsx

@@ -1,15 +1,13 @@
-import BadgeDisplayName from 'sentry/components/idBadge/badgeDisplayName';
-import BaseBadge from 'sentry/components/idBadge/baseBadge';
+import {Organization} from 'sentry/types';
 
-type BaseBadgeProps = React.ComponentProps<typeof BaseBadge>;
-type Organization = NonNullable<BaseBadgeProps['organization']>;
+import BadgeDisplayName from './badgeDisplayName';
+import {BaseBadge, type BaseBadgeProps} from './baseBadge';
 
-export interface OrganizationBadgeProps
-  extends Partial<Omit<BaseBadgeProps, 'project' | 'organization' | 'team'>> {
-  // A full organization is not used, but required to satisfy types with
-  // withOrganization()
+export interface OrganizationBadgeProps extends BaseBadgeProps {
   organization: Organization;
-  // If true, will use default max-width, or specify one as a string
+  /**
+   * When true will default max-width, or specify one as a string
+   */
   hideOverflow?: boolean | string;
 }
 

static/app/components/idBadge/projectBadge.tsx

@@ -1,20 +1,17 @@
 import {cloneElement} from 'react';
 import styled from '@emotion/styled';
 
-import BadgeDisplayName from 'sentry/components/idBadge/badgeDisplayName';
-import BaseBadge from 'sentry/components/idBadge/baseBadge';
 import type {LinkProps} from 'sentry/components/links/link';
 import Link from 'sentry/components/links/link';
+import {AvatarProject} from 'sentry/types';
 import getPlatformName from 'sentry/utils/getPlatformName';
 import useOrganization from 'sentry/utils/useOrganization';
 
-type BaseBadgeProps = React.ComponentProps<typeof BaseBadge>;
-type Project = NonNullable<BaseBadgeProps['project']>;
+import BadgeDisplayName from './badgeDisplayName';
+import {BaseBadge, type BaseBadgeProps} from './baseBadge';
 
-export interface ProjectBadgeProps
-  extends Partial<Omit<BaseBadgeProps, 'project' | 'organization' | 'team'>> {
-  project: Project;
-  className?: string;
+export interface ProjectBadgeProps extends BaseBadgeProps {
+  project: AvatarProject;
   /**
    * If true, this component will not be a link to project details page
    */

static/app/components/idBadge/teamBadge.tsx

@@ -3,10 +3,9 @@ import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import type {Team} from 'sentry/types';
 
 import BadgeDisplayName from './badgeDisplayName';
-import BaseBadge, {type BaseBadgeProps} from './baseBadge';
+import {BaseBadge, type BaseBadgeProps} from './baseBadge';
 
-export interface TeamBadgeProps
-  extends Partial<Omit<BaseBadgeProps, 'project' | 'organization' | 'team'>> {
+export interface TeamBadgeProps extends BaseBadgeProps {
   team: Team;
   /**
    * When true will default max-width, or specify one as a string

static/app/components/idBadge/userBadge.tsx

@@ -1,25 +1,28 @@
 import styled from '@emotion/styled';
 
-import UserAvatar from 'sentry/components/avatar/userAvatar';
 import {space} from 'sentry/styles/space';
 import type {AvatarUser} from 'sentry/types';
 
-export interface UserBadgeProps {
-  avatarSize?: React.ComponentProps<typeof UserAvatar>['size'];
-  className?: string;
+import Link from '../links/link';
+
+import BadgeDisplayName from './badgeDisplayName';
+import {BaseBadge, type BaseBadgeProps} from './baseBadge';
+
+export interface UserBadgeProps extends BaseBadgeProps {
   displayEmail?: React.ReactNode | string;
   displayName?: React.ReactNode;
   hideEmail?: boolean;
+  to?: string;
   user?: AvatarUser;
 }
 
 function UserBadge({
-  avatarSize = 24,
   hideEmail = false,
   displayName,
   displayEmail,
   user,
-  className,
+  to,
+  ...props
 }: UserBadgeProps) {
   const title =
     displayName ||
@@ -34,45 +37,33 @@ function UserBadge({
         user.ip ||
         user.id));
 
+  const name = <Name hideEmail={!!hideEmail}>{title}</Name>;
+
   return (
-    <StyledUserBadge className={className}>
-      <StyledAvatar user={user} size={avatarSize} />
-      <StyledNameAndEmail>
-        <StyledName hideEmail={!!hideEmail}>{title}</StyledName>
-        {!hideEmail && <StyledEmail>{displayEmail || user?.email}</StyledEmail>}
-      </StyledNameAndEmail>
-    </StyledUserBadge>
+    <BaseBadge
+      displayName={
+        <BadgeDisplayName>
+          {to ? <Link to={to}>{name}</Link> : name}
+          {!hideEmail && <Email>{displayEmail || user?.email}</Email>}
+        </BadgeDisplayName>
+      }
+      user={user}
+      {...props}
+    />
   );
 }
 
-const StyledUserBadge = styled('div')`
-  display: flex;
-  align-items: center;
-`;
-
-const StyledNameAndEmail = styled('div')`
-  flex-shrink: 1;
-  min-width: 0;
-  line-height: normal;
+const Name = styled('span')<{hideEmail: boolean}>`
+  font-weight: ${p => (p.hideEmail ? 'inherit' : 'bold')};
+  line-height: 1.15em;
+  ${p => p.theme.overflowEllipsis};
 `;
 
-const StyledEmail = styled('div')`
+const Email = styled('div')`
   font-size: 0.875em;
   margin-top: ${space(0.25)};
   color: ${p => p.theme.gray300};
   ${p => p.theme.overflowEllipsis};
 `;
 
-export const StyledName = styled('span')<{hideEmail: boolean}>`
-  font-weight: ${p => (p.hideEmail ? 'inherit' : 'bold')};
-  line-height: 1.15em;
-  ${p => p.theme.overflowEllipsis};
-`;
-
-const StyledAvatar = styled(UserAvatar)`
-  min-width: ${space(3)};
-  min-height: ${space(3)};
-  margin-right: ${space(1)};
-`;
-
 export default UserBadge;

static/app/components/replays/breadcrumbs/breadcrumbItem.tsx

@@ -155,7 +155,7 @@ function CrumbErrorIssue({frame}: {frame: FeedbackFrame | ErrorFrame}) {
   const {groupId} = useReplayGroupContext();
 
   const projectBadge = project ? (
-    <ProjectBadge project={project} avatarSize={16} disableLink displayName={false} />
+    <ProjectBadge project={project} avatarSize={16} disableLink hideName />
   ) : null;
 
   if (String(frame.data.groupId) === groupId) {

static/app/components/selectMembers/index.tsx

@@ -77,7 +77,7 @@ class SelectMembers extends Component<Props, State> {
   ];
 
   renderUserBadge = (user: User) => (
-    <IdBadge avatarSize={24} user={user} hideEmail useLink={false} />
+    <IdBadge avatarSize={24} user={user} hideEmail disableLink />
   );
 
   createMentionableUser = (user: User): MentionableUser => ({