feat(performance): Add copy icon to event id in discover/performance (#25688)

Discover and performance is only showing the short id of an event. This isn't
useful because the short id can't be used to search for the event anywhere. This
change adds a copy icon next to the event id to allow the user to copy the full
event id to the clipboard that can be used to search for it in other places.

static/app/views/performance/transactionDetails/eventMetas.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
+import Clipboard from 'app/components/clipboard';
 import DateTime from 'app/components/dateTime';
 import ProjectBadge from 'app/components/idBadge/projectBadge';
 import TimeSince from 'app/components/timeSince';
+import Tooltip from 'app/components/tooltip';
+import {IconCopy} from 'app/icons';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {OrganizationSummary} from 'app/types';
@@ -108,7 +111,7 @@ class EventMetas extends React.Component<Props, State> {
         <MetaData
           headingText={t('Event ID')}
           tooltipText={t('The unique ID assigned to this %s.', type)}
-          bodyText={getShortEventId(event.eventID)}
+          bodyText={<EventID event={event} />}
           subtext={projectBadge}
         />
         {isTransaction(event) ? (
@@ -186,6 +189,29 @@ const QuickTraceContainer = styled('div')`
   }
 `;
 
+function EventID({event}: {event: Event}) {
+  return (
+    <Clipboard value={event.eventID}>
+      <EventIDContainer>
+        <EventIDWrapper>{getShortEventId(event.eventID)}</EventIDWrapper>
+        <Tooltip title={event.eventID} position="top">
+          <IconCopy color="subText" />
+        </Tooltip>
+      </EventIDContainer>
+    </Clipboard>
+  );
+}
+
+const EventIDContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const EventIDWrapper = styled('span')`
+  margin-right: ${space(1)};
+`;
+
 function HttpStatus({event}: {event: Event}) {
   const {tags} = event;