fix(issues): Sort last seen activity (#79115)

this pr updates the activity sidebar to sort the last seen into its
correct place.

static/app/types/group.tsx

@@ -379,6 +379,7 @@ export enum GroupActivityType {
   UNMERGE_SOURCE = 'unmerge_source',
   UNMERGE_DESTINATION = 'unmerge_destination',
   FIRST_SEEN = 'first_seen',
+  LAST_SEEN = 'last_seen',
   ASSIGNED = 'assigned',
   UNASSIGNED = 'unassigned',
   MERGE = 'merge',
@@ -484,6 +485,11 @@ interface GroupActivityFirstSeen extends GroupActivityBase {
   type: GroupActivityType.FIRST_SEEN;
 }
 
+interface GroupActivityLastSeen extends GroupActivityBase {
+  data: Record<string, any>;
+  type: GroupActivityType.LAST_SEEN;
+}
+
 interface GroupActivityMarkReviewed extends GroupActivityBase {
   data: Record<string, any>;
   type: GroupActivityType.MARK_REVIEWED;
@@ -679,7 +685,8 @@ export type GroupActivity =
   | GroupActivityAutoSetOngoing
   | GroupActivitySetEscalating
   | GroupActivitySetPriority
-  | GroupActivityDeletedAttachment;
+  | GroupActivityDeletedAttachment
+  | GroupActivityLastSeen;
 
 export type Activity = GroupActivity;
 

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

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useState} from 'react';
+import {Fragment, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
@@ -7,7 +7,6 @@ import {NoteInputWithStorage} from 'sentry/components/activity/note/inputWithSto
 import useMutateActivity from 'sentry/components/feedback/useMutateActivity';
 import Timeline from 'sentry/components/timeline';
 import TimeSince from 'sentry/components/timeSince';
-import {IconFlag} from 'sentry/icons/iconFlag';
 import {t} from 'sentry/locale';
 import GroupStore from 'sentry/stores/groupStore';
 import {space} from 'sentry/styles/space';
@@ -83,6 +82,37 @@ function StreamlinedActivitySection({group}: {group: Group}) {
     [group.activity, mutators, group.id]
   );
 
+  const activities = useMemo(() => {
+    const lastSeenActivity: GroupActivity = {
+      type: GroupActivityType.LAST_SEEN,
+      id: uniqueId(),
+      dateCreated: group.lastSeen,
+      project: group.project,
+      data: {},
+    };
+
+    const groupActivities = [...group.activity, lastSeenActivity];
+    return groupActivities.sort((a, b) => {
+      const dateA = new Date(a.dateCreated).getTime();
+      const dateB = new Date(b.dateCreated).getTime();
+      if (
+        a.type === GroupActivityType.FIRST_SEEN &&
+        b.type === GroupActivityType.LAST_SEEN
+      ) {
+        return 1;
+      }
+      if (
+        a.type === GroupActivityType.LAST_SEEN &&
+        b.type === GroupActivityType.FIRST_SEEN
+      ) {
+        return -1;
+      }
+
+      return dateB - dateA;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [group.activity.length, group.lastSeen, group.project]);
+
   return (
     <Fragment>
       <Timeline.Container>
@@ -97,12 +127,7 @@ function StreamlinedActivitySection({group}: {group: Group}) {
           source="issue-details"
           {...noteProps}
         />
-        <ActivityTimelineItem
-          title={t('Last Seen')}
-          icon={<IconFlag size="xs" />}
-          timestamp={<SmallTimestamp date={group.lastSeen} />}
-        />
-        {group.activity.map(item => {
+        {activities.map(item => {
           const authorName = item.user ? item.user.name : 'Sentry';
           const {title, message} = getGroupActivityItem(
             item,

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

@@ -65,4 +65,5 @@ export const groupActivityTypeIconMapping: Record<
   },
   [GroupActivityType.SET_PRIORITY]: {Component: IconEdit, defaultProps: {}},
   [GroupActivityType.DELETED_ATTACHMENT]: {Component: IconDelete, defaultProps: {}},
+  [GroupActivityType.LAST_SEEN]: {Component: IconFlag, defaultProps: {}},
 };

static/app/views/issueDetails/streamline/groupActivityItem.tsx

@@ -588,6 +588,11 @@ export default function getGroupActivityItem(
           title: t('First Seen'),
           message: null,
         };
+      case GroupActivityType.LAST_SEEN:
+        return {
+          title: t('Last Seen'),
+          message: null,
+        };
       case GroupActivityType.ASSIGNED: {
         return getAssignedMessage(activity);
       }