Repository: getsentry/sentry
Pull request: feat(frontend): Add timestamp on issue public share page
Added timestamp of latest event on the issue public share page. ![image](https://github.com/getsentry/sentry/assets/173110007/5d4eaea6-f940-430f-82e5-20323b716d7c)
The timestamp shows local time, and a tooltip with date occurred and date received in UTC appears on hover. 

resolves #71642

Problem statement:
Include Timestamp on Issue Public Share page
### Problem Statement

When I share an event with a public link, there is no timestamp, which makes it a lot less useful. Could you add the event timestamp to the public share page?

### Solution Brainstorm

_No response_

### Product Area

Issues

Hints from issue discussion:
Assigning to @getsentry/support for [routing](https://open.sentry.io/triage/#2-route) ⏲️
Routing to @getsentry/product-owners-issues for [triage](https://develop.sentry.dev/processing-tickets/#3-triage) ⏲️
Hi @keithbrink, since issues often have multiple events are you referring to the timestamp of the latest event?
That would be fine, or the timestamp of the event that I click the share button on.
Thanks! I've added this to our backlog - for transparency this isn't a super commonly used feature so it's not high on the priority list but it's likely a relatively quick add when we have a chance since we already have the last event timestamp available in the API response.

Commit message: removed duplicate

Patch to review:
diff --git a/static/app/views/sharedGroupDetails/index.spec.tsx b/static/app/views/sharedGroupDetails/index.spec.tsx
index 7c6c5e6d18e84f..0cc13775aa2872 100644
--- a/static/app/views/sharedGroupDetails/index.spec.tsx
+++ b/static/app/views/sharedGroupDetails/index.spec.tsx
@@ -81,5 +81,6 @@ describe('SharedGroupDetails', function () {
       {router}
     );
     await waitFor(() => expect(screen.getByText('Details')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByTestId('sgh-timestamp')).toBeInTheDocument());
   });
 });
diff --git a/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx b/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx
index 18a489503f63f0..f1e5a8f65d8a11 100644
--- a/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx
+++ b/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx
@@ -1,19 +1,27 @@
 import styled from '@emotion/styled';
 
 import FeatureBadge from 'sentry/components/badge/featureBadge';
+import {DateTime} from 'sentry/components/dateTime';
 import EventMessage from 'sentry/components/events/eventMessage';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import ShortId from 'sentry/components/shortId';
+import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Group} from 'sentry/types/group';
 import {IssueCategory} from 'sentry/types/group';
+import EventCreatedTooltip from 'sentry/views/issueDetails/eventCreatedTooltip';
 
 type Props = {
   group: Group;
 };
 
 function SharedGroupHeader({group}: Props) {
+  const date = new Date(
+    (group.latestEvent?.dateCreated ?? group.latestEvent?.dateReceived) as string
+  );
+  const event = group.latestEvent;
+
   return (
     <Wrapper>
       <Details>
@@ -33,6 +41,21 @@ function SharedGroupHeader({group}: Props) {
               />
             )}
           </ShortIdWrapper>
+          {event && (event.dateCreated ?? event.dateReceived) && (
+            <TimeStamp data-test-id="sgh-timestamp">
+              {t('Last seen ')}
+              <EventTimeLabel>
+                <Tooltip
+                  isHoverable
+                  showUnderline
+                  title={<EventCreatedTooltip event={event} />}
+                  overlayStyle={{maxWidth: 300}}
+                >
+                  <DateTime date={date.toLocaleString()} />
+                </Tooltip>
+              </EventTimeLabel>
+            </TimeStamp>
+          )}
         </TitleWrap>
         <EventMessage
           showUnhandled={group.isUnhandled}
@@ -81,3 +104,13 @@ const Title = styled('h3')`
     font-size: ${p => p.theme.headerFontSize};
   }
 `;
+
+const TimeStamp = styled('div')`
+  color: ${p => p.theme.headingColor};
+  font-size: ${p => p.theme.fontSizeMedium};
+  line-height: ${p => p.theme.text.lineHeightHeading};
+`;
+
+const EventTimeLabel = styled('span')`
+  color: ${p => p.theme.subText};
+`;


Code review comments:
diff_hunk: @@ -33,6 +41,21 @@ function SharedGroupHeader({group}: Props) {
               />
             )}
           </ShortIdWrapper>
+          {event && (event.dateCreated ?? event.dateReceived) && (
+            <TimeStamp data-test-id="sgh-timestamp">
+              {t('Last seen ')}
+              <EventTimeLabel>
+                <Tooltip
+                  isHoverable
+                  showUnderline
+                  title={<EventCreatedTooltip event={event} />}
+                  overlayStyle={{maxWidth: 300}}
+                >
+                  <DateTime date={date.toLocaleString()} />
path: static/app/views/sharedGroupDetails/sharedGroupHeader.tsx
text: @user1:
don't pass locale strings around should be able to pass the date object or toISOString. Mostly because i think the DateTime component attempts to parse it and its way harder to parse a locale string
```suggestion
                  <DateTime date={date} />
```