From 8021c9bbf881ccd043bcb612b9ddead4b29622c3 Mon Sep 17 00:00:00 2001 From: Evan Purkhiser Date: Tue, 16 Apr 2024 15:12:24 -0400 Subject: [PATCH 1/2] feat(ui): Add ActorBadge --- static/app/components/idBadge/actorBadge.tsx | 22 ++++++++++++++ static/app/components/idBadge/baseBadge.tsx | 5 +++- static/app/components/idBadge/getBadge.tsx | 12 +++++++- .../app/components/idBadge/index.stories.tsx | 29 ++++++++++++++++++- 4 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 static/app/components/idBadge/actorBadge.tsx diff --git a/static/app/components/idBadge/actorBadge.tsx b/static/app/components/idBadge/actorBadge.tsx new file mode 100644 index 00000000000000..d7fb9ede3392d2 --- /dev/null +++ b/static/app/components/idBadge/actorBadge.tsx @@ -0,0 +1,22 @@ +import {Actor} from 'sentry/types'; + +import BadgeDisplayName from './badgeDisplayName'; +import {BaseBadge, type BaseBadgeProps} from './baseBadge'; + +export interface ActorBadgeProps extends BaseBadgeProps { + actor: Actor; +} + +function ActorBadge({actor, ...props}: ActorBadgeProps) { + const title = actor.type === 'team' ? `#${actor.name}` : actor.name || actor.email; + + return ( + {title}} + actor={actor} + {...props} + /> + ); +} + +export default ActorBadge; diff --git a/static/app/components/idBadge/baseBadge.tsx b/static/app/components/idBadge/baseBadge.tsx index d963f062496dc2..f1f2bb1f53db4a 100644 --- a/static/app/components/idBadge/baseBadge.tsx +++ b/static/app/components/idBadge/baseBadge.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import Avatar from 'sentry/components/avatar'; import {space} from 'sentry/styles/space'; -import type {AvatarProject, AvatarUser, Organization, Team} from 'sentry/types'; +import type {Actor, AvatarProject, AvatarUser, Organization, Team} from 'sentry/types'; export interface BaseBadgeProps { avatarProps?: Record; @@ -17,6 +17,7 @@ export interface BaseBadgeProps { interface AllBaseBadgeProps extends BaseBadgeProps { displayName: React.ReactNode; + actor?: Actor; organization?: Organization; project?: AvatarProject; team?: Team; @@ -35,6 +36,7 @@ export const BaseBadge = memo( user, organization, project, + actor, className, }: AllBaseBadgeProps) => ( @@ -46,6 +48,7 @@ export const BaseBadge = memo( user={user} organization={organization} project={project} + actor={actor} /> )} diff --git a/static/app/components/idBadge/getBadge.tsx b/static/app/components/idBadge/getBadge.tsx index 675b3dfc3069ef..cf6ac833c16df4 100644 --- a/static/app/components/idBadge/getBadge.tsx +++ b/static/app/components/idBadge/getBadge.tsx @@ -1,3 +1,4 @@ +import ActorBadge, {ActorBadgeProps} from './actorBadge'; import type {BaseBadgeProps} from './baseBadge'; import MemberBadge, {type MemberBadgeProps} from './memberBadge'; import OrganizationBadge, {type OrganizationBadgeProps} from './organizationBadge'; @@ -34,12 +35,18 @@ interface GetProjectBadgeProps ProjectBadgeProps, AddedBaseBadgeProps {} +interface GetActorBadgeProps + extends Omit, + ActorBadgeProps, + AddedBaseBadgeProps {} + export type GetBadgeProps = | GetOrganizationBadgeProps | GetTeamBadgeProps | GetProjectBadgeProps | GetUserBadgeProps - | GetMemberBadgeProps; + | GetMemberBadgeProps + | GetActorBadgeProps; function getBadge(props): React.ReactElement | null { if (props.organization) { @@ -54,6 +61,9 @@ function getBadge(props): React.ReactElement | null { if (props.user) { return ; } + if (props.actor) { + return ; + } if (props.member) { return ; } diff --git a/static/app/components/idBadge/index.stories.tsx b/static/app/components/idBadge/index.stories.tsx index ed4c64b00feafc..925c2303d05429 100644 --- a/static/app/components/idBadge/index.stories.tsx +++ b/static/app/components/idBadge/index.stories.tsx @@ -1,11 +1,13 @@ import LoadingIndicator from 'sentry/components/loadingIndicator'; import storyBook from 'sentry/stories/storyBook'; -import type {Member} from 'sentry/types'; +import type {Actor, Member} from 'sentry/types'; import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; import {useTeams} from 'sentry/utils/useTeams'; import {useUser} from 'sentry/utils/useUser'; +import SideBySide from '../stories/sideBySide'; + import IdBadge from '.'; export default storyBook(IdBadge, story => { @@ -81,4 +83,29 @@ export default storyBook(IdBadge, story => { return ; }); + + story('Actor', () => { + const user = useUser(); + const {teams} = useTeams(); + + const userActor: Actor = { + type: 'user', + id: user.id, + name: user.name, + email: user.email, + }; + + const teamActor: Actor = { + type: 'team', + id: teams[0].id, + name: teams[0].name, + }; + + return ( + + + + + ); + }); }); From 54a13e72fa68a79f78fe06da62a1e34082d522ae Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Tue, 16 Apr 2024 19:32:14 +0000 Subject: [PATCH 2/2] :hammer_and_wrench: apply pre-commit fixes --- static/app/components/idBadge/actorBadge.tsx | 2 +- static/app/components/idBadge/getBadge.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/idBadge/actorBadge.tsx b/static/app/components/idBadge/actorBadge.tsx index d7fb9ede3392d2..26b7972493ce4f 100644 --- a/static/app/components/idBadge/actorBadge.tsx +++ b/static/app/components/idBadge/actorBadge.tsx @@ -1,4 +1,4 @@ -import {Actor} from 'sentry/types'; +import type {Actor} from 'sentry/types'; import BadgeDisplayName from './badgeDisplayName'; import {BaseBadge, type BaseBadgeProps} from './baseBadge'; diff --git a/static/app/components/idBadge/getBadge.tsx b/static/app/components/idBadge/getBadge.tsx index cf6ac833c16df4..4fe882432accf4 100644 --- a/static/app/components/idBadge/getBadge.tsx +++ b/static/app/components/idBadge/getBadge.tsx @@ -1,4 +1,4 @@ -import ActorBadge, {ActorBadgeProps} from './actorBadge'; +import ActorBadge, {type ActorBadgeProps} from './actorBadge'; import type {BaseBadgeProps} from './baseBadge'; import MemberBadge, {type MemberBadgeProps} from './memberBadge'; import OrganizationBadge, {type OrganizationBadgeProps} from './organizationBadge';