Make event timestamp copyable (#2647)

Author: laurakwhit

Diff for: src/lib/components/event/event-summary-row.svelte

@@ -4,6 +4,7 @@
   import { page } from '$app/stores';
 
   import Badge from '$lib/holocene/badge.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
@@ -114,6 +115,13 @@
     secondaryAttribute?.key &&
     secondaryAttribute?.key !== primaryAttribute?.key &&
     !currentEvent?.userMetadata?.summary;
+  $: eventTime = formatDate(currentEvent?.eventTime, $timeFormat, {
+    relative: $relativeTime,
+  });
+  $: abbrEventTime = formatDate(currentEvent?.eventTime, $timeFormat, {
+    relative: $relativeTime,
+    abbrFormat: true,
+  });
 </script>
 
 <tr
@@ -160,10 +168,13 @@
       text={isEventGroup(event) ? `Duration: ${duration}` : `+${elapsedTime}`}
       bottom
     >
-      {formatDate(currentEvent?.eventTime, $timeFormat, {
-        relative: $relativeTime,
-        abbrFormat: true,
-      })}
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={abbrEventTime}
+      >
+        {abbrEventTime}
+      </Copyable>
     </Tooltip>
   </td>
   <td class="hidden text-right md:block">
@@ -172,9 +183,13 @@
       text={isEventGroup(event) ? `Duration: ${duration}` : `+${elapsedTime}`}
       bottom
     >
-      {formatDate(currentEvent?.eventTime, $timeFormat, {
-        relative: $relativeTime,
-      })}
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={eventTime}
+      >
+        {eventTime}
+      </Copyable>
     </Tooltip>
   </td>
   <td class="truncate md:min-w-fit">