feat(stat-detectors): Improve sampled events select options UI (#56090)

Some small tweaks to match the mock ups and standardize the dates
that appear.

The breakpoint chart doesn't currently adjust its labels/tooltips to
the proper timezone. We're going to tackle that separately since
we need to make fixes to the chart soon.

static/app/components/events/eventStatisticalDetector/eventComparison/eventDisplay.tsx

@@ -2,6 +2,7 @@ import {useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {CompactSelect} from 'sentry/components/compactSelect';
+import DateTime from 'sentry/components/dateTime';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import {EventTags} from 'sentry/components/events/eventTags';
 import {MINIMAP_HEIGHT} from 'sentry/components/events/interfaces/spans/constants';
@@ -66,7 +67,7 @@ function useFetchSampleEvents({
     dataset: DiscoverDatasets.DISCOVER,
     start: new Date(start * 1000).toISOString(),
     end: new Date(end * 1000).toISOString(),
-    fields: [{field: 'id'}],
+    fields: [{field: 'id'}, {field: 'timestamp'}],
     query: getSampleEventQuery({transaction, durationBaseline}),
 
     createdBy: undefined,
@@ -159,13 +160,20 @@ function EventDisplay({
           <CompactSelect
             size="sm"
             disabled={false}
-            options={eventIds.map(id => ({value: id, label: id}))}
+            options={eventIds.map(id => ({
+              value: id,
+              label: id,
+              details: <DateTime date={data?.data.find(d => d.id === id)?.timestamp} />,
+            }))}
             value={selectedEventId}
             onChange={({value}) => setSelectedEventId(value)}
             triggerLabel={
               <ButtonLabelWrapper>
                 <TextOverflow>
-                  {eventSelectLabel}: {getShortEventId(selectedEventId)}
+                  {eventSelectLabel}:{' '}
+                  <SelectionTextWrapper>
+                    {getShortEventId(selectedEventId)}
+                  </SelectionTextWrapper>
                 </TextOverflow>
               </ButtonLabelWrapper>
             }
@@ -253,3 +261,7 @@ const EmptyStateWrapper = styled('div')`
   justify-content: center;
   align-items: center;
 `;
+
+const SelectionTextWrapper = styled('span')`
+  font-weight: normal;
+`;

static/app/components/events/eventStatisticalDetector/regressionMessage.tsx

@@ -1,3 +1,4 @@
+import DateTime from 'sentry/components/dateTime';
 import {DataSection} from 'sentry/components/events/styles';
 import Link from 'sentry/components/links/link';
 import {t, tct} from 'sentry/locale';
@@ -28,12 +29,11 @@ function EventStatisticalDetectorMessage({event}: EventStatisticalDetectorMessag
   });
   const detectionTime = new Date(event?.occurrence?.evidenceData?.breakpoint * 1000);
 
-  // TODO: This messaging should respect selected locale in user settings
   return (
     <DataSection>
       <div style={{display: 'inline'}}>
         {tct(
-          '[detected] Based on the transaction [transactionName], there was a [amount] increase in duration (P95) around [date] at [time] UTC. Overall operation percentage changes indicate what may have changed in the regression.',
+          '[detected] Based on the transaction [transactionName], there was a [amount] increase in duration (P95) around [date] at [time]. Overall operation percentage changes indicate what may have changed in the regression.',
           {
             detected: <strong>{t('Detected:')}</strong>,
             transactionName: (
@@ -42,15 +42,8 @@ function EventStatisticalDetectorMessage({event}: EventStatisticalDetectorMessag
             amount: formatPercentage(
               event?.occurrence?.evidenceData?.trendPercentage - 1
             ),
-            date: detectionTime.toLocaleDateString(undefined, {
-              month: 'short',
-              day: 'numeric',
-            }),
-            time: detectionTime.toLocaleTimeString(undefined, {
-              hour12: true,
-              hour: 'numeric',
-              minute: 'numeric',
-            }),
+            date: <DateTime date={detectionTime} dateOnly />,
+            time: <DateTime date={detectionTime} timeOnly />,
           }
         )}
       </div>