From a24ece45ca111614b32ad4a08e53263835a77fe8 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Sun, 19 Jul 2026 20:04:10 +0000
Subject: [PATCH 1/3] fix(coding-conventions): Make activity section icon
 component static

---
 .../activitySection/groupActivityIcons.tsx    | 26 +++++++++----------
 .../issueDetails/activitySection/index.tsx    | 24 ++++++++---------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx b/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx
index 779ce980fade..432501af96e6 100644
--- a/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx
+++ b/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx
@@ -44,11 +44,11 @@ import {GroupActivityType} from 'sentry/types/group';
 interface IconWithDefaultProps {
   Component: React.ComponentType<SVGIconProps> | null;
   defaultProps: {locked?: boolean; type?: string};
-  componentFunction?: (props: {
+  renderIcon?: (props: {
     data: GroupActivity['data'];
     sentry_app: GroupActivity['sentry_app'];
     user: GroupActivity['user'];
-  }) => React.ComponentType<SVGIconProps>;
+  }) => React.ReactNode;
   propsFunction?: (data: GroupActivity['data']) => Record<string, unknown>;
 }
 
@@ -59,13 +59,11 @@ export const groupActivityTypeIconMapping: Record<
   [GroupActivityType.NOTE]: {
     Component: IconChat,
     defaultProps: {},
-    componentFunction: ({user, sentry_app}) => {
+    renderIcon: ({user, sentry_app}) => {
       if (sentry_app) {
-        return function () {
-          return <SentryAppAvatar sentryApp={sentry_app} />;
-        };
+        return <SentryAppAvatar sentryApp={sentry_app} />;
       }
-      return user ? () => <StyledUserAvatar user={user} /> : IconChat;
+      return user ? <StyledUserAvatar user={user} /> : <IconChat size="xs" />;
     },
   },
   [GroupActivityType.SET_RESOLVED]: {Component: IconCheckmark, defaultProps: {}},
@@ -109,21 +107,21 @@ export const groupActivityTypeIconMapping: Record<
   [GroupActivityType.SET_REGRESSION]: {Component: IconFire, defaultProps: {}},
   [GroupActivityType.CREATE_ISSUE]: {
     Component: IconAdd,
-    componentFunction: ({data}) => {
+    renderIcon: ({data}) => {
       const provider = (data as GroupActivityCreateIssue['data']).provider;
       switch (provider) {
         case 'GitHub':
-          return IconGithub;
+          return <IconGithub size="xs" />;
         case 'GitLab':
-          return IconGitlab;
+          return <IconGitlab size="xs" />;
         case 'Bitbucket':
-          return IconBitbucket;
+          return <IconBitbucket size="xs" />;
         case 'Jira':
-          return IconJira;
+          return <IconJira size="xs" />;
         case 'Asana':
-          return IconAsana;
+          return <IconAsana size="xs" />;
         default:
-          return IconAdd;
+          return <IconAdd size="xs" />;
       }
     },
     defaultProps: {},
diff --git a/static/app/views/issueDetails/activitySection/index.tsx b/static/app/views/issueDetails/activitySection/index.tsx
index a85dd8c426d3..70a55ed421b7 100644
--- a/static/app/views/issueDetails/activitySection/index.tsx
+++ b/static/app/views/issueDetails/activitySection/index.tsx
@@ -134,14 +134,20 @@ function LegacyTimelineItem({
   );
 
   const iconMapping = groupActivityTypeIconMapping[item.type];
-  const componentFunction = iconMapping?.componentFunction;
-  const Icon = componentFunction
-    ? componentFunction({
+  const Icon = iconMapping?.Component ?? null;
+  const iconNode = iconMapping?.renderIcon
+    ? iconMapping.renderIcon({
         data: item.data,
         user: item.user,
         sentry_app: item.sentry_app,
       })
-    : (iconMapping?.Component ?? null);
+    : Icon && (
+        <Icon
+          {...iconMapping.defaultProps}
+          {...iconMapping.propsFunction?.(item.data)}
+          size="xs"
+        />
+      );
 
   return (
     <ActivityTimelineItem
@@ -160,15 +166,7 @@ function LegacyTimelineItem({
         </TitleRow>
       }
       timestamp={<Timestamp date={item.dateCreated} unitStyle={timestampUnitStyle} />}
-      icon={
-        Icon && (
-          <Icon
-            {...iconMapping.defaultProps}
-            {...iconMapping.propsFunction?.(item.data)}
-            size="xs"
-          />
-        )
-      }
+      icon={iconNode}
     >
       {item.type === GroupActivityType.NOTE && editing ? (
         <ActivityNoteInput

From fe6c6226872ce2ca7ac4125456b9d8efa07a8cb5 Mon Sep 17 00:00:00 2001
From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com>
Date: Sun, 19 Jul 2026 20:05:29 +0000
Subject: [PATCH 2/3] :hammer_and_wrench: apply pre-commit fixes

---
 .../views/issueDetails/activitySection/groupActivityIcons.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx b/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx
index 432501af96e6..3d00b2f02d4d 100644
--- a/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx
+++ b/static/app/views/issueDetails/activitySection/groupActivityIcons.tsx
@@ -44,12 +44,12 @@ import {GroupActivityType} from 'sentry/types/group';
 interface IconWithDefaultProps {
   Component: React.ComponentType<SVGIconProps> | null;
   defaultProps: {locked?: boolean; type?: string};
+  propsFunction?: (data: GroupActivity['data']) => Record<string, unknown>;
   renderIcon?: (props: {
     data: GroupActivity['data'];
     sentry_app: GroupActivity['sentry_app'];
     user: GroupActivity['user'];
   }) => React.ReactNode;
-  propsFunction?: (data: GroupActivity['data']) => Record<string, unknown>;
 }
 
 export const groupActivityTypeIconMapping: Record<

From 7618fe716218b1b79ba830fc5e98ed4b4f75b8a5 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 21 Jul 2026 15:11:02 +0000
Subject: [PATCH 3/3] fix: Update progressActivityTooltip to use renderIcon
 instead of componentFunction

- Replace deprecated componentFunction with renderIcon
- Change icon rendering to use ReactNode pattern instead of component type
- Matches the implementation in activitySection/index.tsx

Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
---
 .../issueList/progressActivityTooltip.tsx     | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/static/app/views/issueList/progressActivityTooltip.tsx b/static/app/views/issueList/progressActivityTooltip.tsx
index f81af33c2ac1..f52da9c320b4 100644
--- a/static/app/views/issueList/progressActivityTooltip.tsx
+++ b/static/app/views/issueList/progressActivityTooltip.tsx
@@ -77,15 +77,20 @@ function ProgressActivityItem({group, item}: {group: Group; item: GroupActivity}
   );
 
   const iconMapping = groupActivityTypeIconMapping[item.type];
-  const componentFunction =
-    item.type === GroupActivityType.NOTE ? undefined : iconMapping?.componentFunction;
-  const Icon = componentFunction
-    ? componentFunction({
+  const Icon = iconMapping?.Component ?? null;
+  const iconNode = iconMapping?.renderIcon
+    ? iconMapping.renderIcon({
         data: item.data,
         user: item.user,
         sentry_app: item.sentry_app,
       })
-    : (iconMapping?.Component ?? null);
+    : Icon && (
+        <Icon
+          {...iconMapping.defaultProps}
+          {...iconMapping.propsFunction?.(item.data)}
+          size="xs"
+        />
+      );
 
   return (
     <Timeline.Item
@@ -93,15 +98,7 @@ function ProgressActivityItem({group, item}: {group: Group; item: GroupActivity}
       timestamp={<Timestamp date={item.dateCreated} unitStyle="extraShort" />}
       marker={<ActivityMarker item={item} color={colorConfig.icon} />}
       colorConfig={colorConfig}
-      icon={
-        Icon && (
-          <Icon
-            {...iconMapping.defaultProps}
-            {...iconMapping.propsFunction?.(item.data)}
-            size="xs"
-          />
-        )
-      }
+      icon={iconNode}
     >
       {typeof message === 'string' ? (
         <NoteBody text={message} />