feat(ui): Add actor to delegating Avatar component (#68933)

Author: evanpurkhiser

static/app/components/avatar/index.spec.tsx

@@ -1,3 +1,4 @@
+import {ActorFixture} from 'sentry-fixture/actor';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {SentryAppFixture} from 'sentry-fixture/sentryApp';
@@ -174,6 +175,15 @@ describe('Avatar', function () {
       );
     });
 
+    it('can display a actor Avatar', function () {
+      const actor = ActorFixture();
+
+      render(<AvatarComponent actor={actor} />);
+
+      expect(screen.getByTestId(`letter_avatar-avatar`)).toBeInTheDocument();
+      expect(screen.getByText('FB')).toBeInTheDocument();
+    });
+
     it('displays platform list icons for project Avatar', function () {
       const project = ProjectFixture({
         platform: 'java',

static/app/components/avatar/index.tsx

@@ -7,14 +7,18 @@ import SentryAppAvatar from 'sentry/components/avatar/sentryAppAvatar';
 import TeamAvatar from 'sentry/components/avatar/teamAvatar';
 import UserAvatar from 'sentry/components/avatar/userAvatar';
 import type {
+  Actor,
   AvatarProject,
   AvatarSentryApp,
   DocIntegration,
   OrganizationSummary,
   Team,
 } from 'sentry/types';
 
+import ActorAvatar from './actorAvatar';
+
 type Props = {
+  actor?: Actor;
   docIntegration?: DocIntegration;
   /**
    * True if the Avatar is full color, rather than B&W (Used for SentryAppAvatar)
@@ -33,6 +37,7 @@ type Props = {
 const Avatar = forwardRef(function Avatar(
   {
     hasTooltip = false,
+    actor,
     user,
     team,
     project,
@@ -47,6 +52,10 @@ const Avatar = forwardRef(function Avatar(
 ) {
   const commonProps = {hasTooltip, forwardedRef: ref, ...props};
 
+  if (actor) {
+    return <ActorAvatar actor={actor} {...commonProps} />;
+  }
+
   if (user) {
     return <UserAvatar user={user} {...commonProps} />;
   }