feat(frontend): Add timestamp on issue public share page (#73326)

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

---------

Co-authored-by: Scott Cooper <scttcper@gmail.com>
Co-authored-by: Michael Sun <55160142+MichaelSun48@users.noreply.github.com>

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());
   });
 });

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} />
+                </Tooltip>
+              </EventTimeLabel>
+            </TimeStamp>
+          )}
         </TitleWrap>
         <EventMessage
           showUnhandled={group.isUnhandled}
@@ -81,3 +104,15 @@ 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};
+  margin-top: ${space(0.25)};
+`;
+
+const EventTimeLabel = styled('span')`
+  color: ${p => p.theme.subText};
+  margin-left: ${space(0.25)};
+`;