fix(issues): Derive activity timeline connectors from layout (#121578)

fixes missing activity timeline connectors around collapsed activity
rollups

<img width="393" height="101" alt="image"
src="https://github.com/user-attachments/assets/0d85da38-70c4-4f69-8e20-8533afe9724f"
/>

Author: scttcper

static/app/views/issueDetails/activitySection/activityLineItem.stories.tsx

@@ -476,14 +476,12 @@ function ActivityFeedExamples({items}: {items: ActivityFeedItem[]}) {
             group={group}
             inputVariant="compact"
             onDelete={async () => {}}
-            showConnector={index < items.length - 1}
           />
         ) : (
           <ActivityLine
             key={`${item.activity.id}-${index}`}
             group={group}
             item={item}
-            showConnector={index < items.length - 1}
             timestampUnitStyle="short"
           />
         )

static/app/views/issueDetails/activitySection/activityLineItem/index.tsx

@@ -12,16 +12,10 @@ import {ActivityLineMarker} from './progressMarker';
 interface ActivityLineProps {
   group: Group;
   item: ActivityFeedItem;
-  showConnector?: boolean;
   timestampUnitStyle?: React.ComponentProps<typeof TimeSince>['unitStyle'];
 }
 
-export function ActivityLine({
-  item,
-  group,
-  showConnector,
-  timestampUnitStyle,
-}: ActivityLineProps) {
+export function ActivityLine({item, group, timestampUnitStyle}: ActivityLineProps) {
   const organization = useOrganization();
   const showProgress = organization.features.includes('issue-activity-progress');
   const {issueCategory, project} = group;
@@ -47,7 +41,7 @@ export function ActivityLine({
   }
 
   return (
-    <ActivityLineRow showConnector={showConnector}>
+    <ActivityLineRow>
       <ActivityLineMarker
         actorItem={actorActivity}
         item={activity}

static/app/views/issueDetails/activitySection/activityLineItem/layout.tsx

@@ -1,5 +1,4 @@
 import {Fragment} from 'react';
-import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Flex} from '@sentry/scraps/layout';
@@ -51,9 +50,7 @@ export function ActivityLineHeadline({
   );
 }
 
-export const ActivityLineRow = styled('div', {
-  shouldForwardProp: prop => prop !== 'showConnector',
-})<{showConnector?: boolean}>`
+export const ActivityLineRow = styled('div')`
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
@@ -65,18 +62,15 @@ export const ActivityLineRow = styled('div', {
     column-gap: ${p => p.theme.space.sm};
   }
 
-  ${p =>
-    p.showConnector &&
-    css`
-      &::before {
-        content: '';
-        position: absolute;
-        left: 10.5px;
-        top: 11px;
-        bottom: calc(-${p.theme.space.md} - 11px);
-        border-left: 1px solid ${p.theme.tokens.border.transparent.neutral.muted};
-      }
-    `}
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    left: 10.5px;
+    top: 11px;
+    bottom: calc(-${p => p.theme.space.md} - 11px);
+    border-left: 1px solid
+      ${p => p.theme.tokens.border.transparent.neutral.muted};
+  }
 `;
 
 const ActivityLineSentence = styled('span')`

static/app/views/issueDetails/activitySection/activityLineItem/note.tsx

@@ -24,7 +24,6 @@ interface ActivityLineNoteProps {
   inputVariant: ActivityLineVariant;
   onDelete: () => Promise<void>;
   onCommentEdited?: (activity: GroupActivity[]) => void;
-  showConnector?: boolean;
   timestampUnitStyle?: React.ComponentProps<typeof TimeSince>['unitStyle'];
 }
 
@@ -38,7 +37,6 @@ export function ActivityLineNote({
   inputVariant,
   onDelete,
   onCommentEdited,
-  showConnector,
   timestampUnitStyle,
 }: ActivityLineNoteProps) {
   const [editing, setEditing] = useState(false);
@@ -49,7 +47,7 @@ export function ActivityLineNote({
   );
 
   return (
-    <ActivityLineRow showConnector={showConnector}>
+    <ActivityLineRow>
       <ActivityLineMarker item={activity} showProgress={showProgress} />
       <ActivityLineNoteHeadline
         title={t('%s commented', getActivityNoteAuthor(activity))}

static/app/views/issueDetails/activitySection/index.tsx

@@ -38,7 +38,6 @@ interface ActivityFeedRowProps {
   inputVariant: 'compact' | 'full';
   item: DisplayedActivityFeedItem;
   onCommentEdited?: (activity: GroupActivity[]) => void;
-  showConnector?: boolean;
   timestampUnitStyle?: React.ComponentProps<typeof TimeSince>['unitStyle'];
 }
 
@@ -48,7 +47,6 @@ function ActivityFeedRow({
   onCommentEdited,
   group,
   inputVariant,
-  showConnector,
   timestampUnitStyle,
 }: ActivityFeedRowProps) {
   if (item.type === 'collapsed_status_activities') {
@@ -73,12 +71,7 @@ function ActivityFeedRow({
 
   if (!isActivityNote(activity)) {
     return (
-      <ActivityLine
-        item={item}
-        group={group}
-        showConnector={showConnector}
-        timestampUnitStyle={timestampUnitStyle}
-      />
+      <ActivityLine item={item} group={group} timestampUnitStyle={timestampUnitStyle} />
     );
   }
 
@@ -89,7 +82,6 @@ function ActivityFeedRow({
       inputVariant={inputVariant}
       onDelete={() => handleDelete(activity)}
       onCommentEdited={onCommentEdited}
-      showConnector={showConnector}
       timestampUnitStyle={timestampUnitStyle}
     />
   );
@@ -189,18 +181,14 @@ export function ActivitySection({
   const inputVariant = isStandalone ? 'full' : 'compact';
   const timestampUnitStyle = isStandalone ? undefined : 'short';
 
-  const renderActivityItem = (
-    item: DisplayedActivityFeedItem,
-    showConnector: boolean
-  ) => (
+  const renderActivityItem = (item: DisplayedActivityFeedItem) => (
     <ActivityFeedRow
       item={item}
       handleDelete={handleDelete}
       onCommentEdited={onCommentEdited}
       group={group}
       key={item.activity.id}
       inputVariant={inputVariant}
-      showConnector={showConnector}
       timestampUnitStyle={timestampUnitStyle}
     />
   );
@@ -220,9 +208,7 @@ export function ActivitySection({
 
   const timeline = (
     <ActivityLineList data-test-id="activity-timeline">
-      {displayedActivities.map((item, index) =>
-        renderActivityItem(item, index < displayedActivities.length - 1)
-      )}
+      {displayedActivities.map(renderActivityItem)}
     </ActivityLineList>
   );
   const hiddenActivityCount =
@@ -231,7 +217,7 @@ export function ActivitySection({
     hiddenActivityCount > 0 ? displayedActivities.slice(0, 3) : displayedActivities;
   const sidebarActivityItems = (
     <Fragment>
-      {sidebarVisibleActivities.map(item => renderActivityItem(item, true))}
+      {sidebarVisibleActivities.map(renderActivityItem)}
       <MoreActivityRow>
         <MoreActivityIcon>
           <RotatedEllipsisIcon direction="up" />

static/app/views/issueList/progressActivityTooltip.tsx

@@ -66,41 +66,30 @@ function getProgressActivities(activities: GroupActivity[]): GroupActivity[] {
   return activities.slice(0, MAX_ITEMS).toReversed();
 }
 
-function ProgressActivityItem({
-  group,
-  item,
-  showConnector,
-}: {
-  group: Group;
-  item: GroupActivity;
-  showConnector: boolean;
-}) {
+function ProgressActivityItem({group, item}: {group: Group; item: GroupActivity}) {
   if (isActivityNote(item)) {
-    return <ProgressActivityNote item={item} showConnector={showConnector} />;
+    return <ProgressActivityNote item={item} />;
   }
 
   return (
     <ActivityLine
       group={group}
       item={{type: 'activity', activity: item}}
-      showConnector={showConnector}
       timestampUnitStyle="extraShort"
     />
   );
 }
 
 function ProgressActivityNote({
   item,
-  showConnector,
 }: {
   item: Extract<GroupActivity, {type: GroupActivityType.NOTE}>;
-  showConnector: boolean;
 }) {
   const organization = useOrganization();
   const showProgress = organization.features.includes('issue-activity-progress');
 
   return (
-    <ActivityLineRow showConnector={showConnector}>
+    <ActivityLineRow>
       <ActivityLineMarker item={item} showProgress={showProgress} />
       <ActivityLineHeadline
         title={getActivityNoteAuthor(item)}
@@ -161,13 +150,8 @@ function ProgressActivityBody({group}: {group: Group}) {
   return (
     <ActivityListContainer>
       <ActivityLineList>
-        {items.map((item, index) => (
-          <ProgressActivityItem
-            key={item.id}
-            group={group}
-            item={item}
-            showConnector={index < items.length - 1}
-          />
+        {items.map(item => (
+          <ProgressActivityItem key={item.id} group={group} item={item} />
         ))}
       </ActivityLineList>
     </ActivityListContainer>