✨ Allow sentry apps to displays as themselves in comments

Author: leeandher

static/app/types/group.tsx

@@ -8,6 +8,7 @@ import type {FieldKind} from 'sentry/utils/fields';
 import type {Actor, TimeseriesValue} from './core';
 import type {Event, EventMetadata, EventOrGroupType, Level} from './event';
 import type {
+  AvatarSentryApp,
   Commit,
   ExternalIssue,
   PlatformExternalIssue,
@@ -472,6 +473,7 @@ interface GroupActivityBase {
   id: string;
   assignee?: string;
   issue?: Group;
+  sentry_app?: AvatarSentryApp;
   user?: null | User;
 }
 

static/app/views/issueDetails/streamline/sidebar/activitySection.spec.tsx

@@ -1,5 +1,6 @@
 import {GroupFixture} from 'sentry-fixture/group';
 import {ProjectFixture} from 'sentry-fixture/project';
+import {SentryAppFixture} from 'sentry-fixture/sentryApp';
 import {UserFixture} from 'sentry-fixture/user';
 
 import {
@@ -179,6 +180,44 @@ describe('StreamlinedActivitySection', function () {
     expect(indicators.addSuccessMessage).toHaveBeenCalledWith('Comment updated');
   });
 
+  it('renders note from a sentry app', async function () {
+    const newUser = UserFixture({name: 'sentry-app-proxy-user-abcd123'});
+    const sentryApp = SentryAppFixture({
+      name: 'Bug Bot',
+      avatars: [
+        {
+          avatarType: 'upload',
+          avatarUrl: 'https://example.com/avatar.png',
+          avatarUuid: '1234567890',
+          photoType: 'icon',
+          color: true,
+        },
+      ],
+    });
+    const newGroup = GroupFixture({
+      activity: [
+        {
+          type: GroupActivityType.NOTE,
+          id: 'note-1',
+          data: {text: 'This note came from my sentry app'},
+          dateCreated: '2020-01-01T00:00:00',
+          sentry_app: sentryApp,
+          user: newUser,
+        },
+      ],
+    });
+
+    render(<StreamlinedActivitySection group={newGroup} />);
+    expect(
+      await screen.findByText('This note came from my sentry app')
+    ).toBeInTheDocument();
+    const icon = screen.getByTestId('upload-avatar');
+    expect(icon).toHaveAttribute('title', sentryApp.name);
+    expect(screen.getByText(sentryApp.name)).toBeInTheDocument();
+    // We should not show the user, if a sentry app is attached
+    expect(screen.queryByText(newUser.name)).not.toBeInTheDocument();
+  });
+
   it('renders note but does not allow for deletion if written by someone else', async function () {
     const updatedActivityGroup = GroupFixture({
       id: '1338',

static/app/views/issueDetails/streamline/sidebar/activitySection.tsx

@@ -35,6 +35,16 @@ import {ViewButton} from 'sentry/views/issueDetails/streamline/sidebar/viewButto
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 
+function getAuthorName(item: GroupActivity) {
+  if (item.sentry_app) {
+    return item.sentry_app.name;
+  }
+  if (item.user) {
+    return item.user.name;
+  }
+  return 'Sentry';
+}
+
 function TimelineItem({
   item,
   handleDelete,
@@ -52,7 +62,7 @@ function TimelineItem({
 }) {
   const organization = useOrganization();
   const [editing, setEditing] = useState(false);
-  const authorName = item.user ? item.user.name : 'Sentry';
+  const authorName = getAuthorName(item);
   const {title, message} = getGroupActivityItem(
     item,
     organization,
@@ -63,7 +73,11 @@ function TimelineItem({
 
   const iconMapping = groupActivityTypeIconMapping[item.type];
   const Icon = iconMapping?.componentFunction
-    ? iconMapping.componentFunction(item.data, item.user)
+    ? iconMapping.componentFunction({
+        data: item.data,
+        user: item.user,
+        sentry_app: item.sentry_app,
+      })
     : (iconMapping?.Component ?? null);
 
   return (

static/app/views/issueDetails/streamline/sidebar/groupActivityIcons.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import {IconCellSignal} from 'sentry/components/badge/iconCellSignal';
+import {SentryAppAvatar} from 'sentry/components/core/avatar/sentryAppAvatar';
 import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
 import {
   IconAdd,
@@ -29,20 +30,20 @@ import {
 } from 'sentry/icons';
 import {space} from 'sentry/styles/space';
 import {
-  type Group,
+  GroupActivity,
   type GroupActivityCreateIssue,
   type GroupActivitySetPriority,
   GroupActivityType,
 } from 'sentry/types/group';
-import type {User} from 'sentry/types/user';
 
 interface IconWithDefaultProps {
   Component: React.ComponentType<any> | null;
   defaultProps: {locked?: boolean; type?: string};
-  componentFunction?: (
-    props: Group['activity'][number]['data'],
-    user?: User | null
-  ) => React.ComponentType<any>;
+  componentFunction?: (props: {
+    data: GroupActivity['data'];
+    sentry_app: GroupActivity['sentry_app'];
+    user: GroupActivity['user'];
+  }) => React.ComponentType<any>;
   propsFunction?: (props: any) => any;
 }
 
@@ -53,7 +54,13 @@ export const groupActivityTypeIconMapping: Record<
   [GroupActivityType.NOTE]: {
     Component: IconChat,
     defaultProps: {},
-    componentFunction: (_data, user) => {
+    componentFunction: ({user, sentry_app}) => {
+      if (sentry_app) {
+        return function () {
+          return <SentryAppAvatar sentryApp={sentry_app} />;
+        };
+      }
+
       return user ? () => <StyledUserAvatar user={user} /> : IconChat;
     },
   },
@@ -78,7 +85,7 @@ export const groupActivityTypeIconMapping: Record<
   [GroupActivityType.SET_REGRESSION]: {Component: IconFire, defaultProps: {}},
   [GroupActivityType.CREATE_ISSUE]: {
     Component: IconAdd,
-    componentFunction: data => {
+    componentFunction: ({data}) => {
       const provider = (data as GroupActivityCreateIssue['data']).provider;
       switch (provider) {
         case 'GitHub':