ref(pageTimeRangeSelector): Use new selector component (#58308)

Use the new `TimeRangeSelector` component for `PageTimeRangeSelector`.

**Before ——** 
<img width="480" alt="Screenshot 2023-10-17 at 4 31 45 PM"
src="https://github.com/getsentry/sentry/assets/44172267/1bbacf50-9b4c-4d2a-ac87-b9ebdc7c7817">


**After ——**
<img width="480" alt="Screenshot 2023-10-17 at 4 31 19 PM"
src="https://github.com/getsentry/sentry/assets/44172267/a9d6244c-820c-45a4-9336-965dba232adc">

static/app/components/pageTimeRangeSelector.tsx

@@ -1,64 +1,32 @@
 import styled from '@emotion/styled';
 
-import TimeRangeSelector from 'sentry/components/organizations/timeRangeSelector';
-import Panel from 'sentry/components/panels/panel';
+import {TimeRangeSelector} from 'sentry/components/timeRangeSelector';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 
-type Props = React.ComponentProps<typeof TimeRangeSelector> & {className?: string};
+type PageTimeRangeSelectorProps = React.ComponentProps<typeof TimeRangeSelector>;
 
-function PageTimeRangeSelector({className, ...props}: Props) {
+function PageTimeRangeSelector(props: PageTimeRangeSelectorProps) {
   return (
-    <DropdownDate className={className}>
-      <TimeRangeSelector
-        key={`period:${props.relative}-start:${props.start}-end:${props.end}-utc:${props.utc}-defaultPeriod:${props.defaultPeriod}`}
-        label={<DropdownLabel>{t('Date Range:')}</DropdownLabel>}
-        detached
-        {...props}
-      />
-    </DropdownDate>
+    <StyledTimeRangeSelector
+      key={`period:${props.relative}-start:${props.start}-end:${props.end}-utc:${props.utc}-defaultPeriod:${props.defaultPeriod}`}
+      triggerProps={{icon: null, prefix: t('Date Range')}}
+      // Use relative option labels (e.g. "Last 7 days") not keys ("7D")
+      triggerLabel={
+        props.relativeOptions && props.relative
+          ? props.relativeOptions[props.relative]
+          : null
+      }
+      menuWiderThanTrigger
+      {...props}
+    />
   );
 }
 
-const DropdownDate = styled(Panel)`
-  padding: 0;
-  margin: 0;
+const StyledTimeRangeSelector = styled(TimeRangeSelector)`
+  width: 100%;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: ${p => p.theme.form.md.height}px;
-  background: ${p => p.theme.background};
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-
-  font-size: ${p => p.theme.fontSizeMedium};
-  color: ${p => p.theme.textColor};
-
-  > div {
+  button[aria-haspopup='listbox'] {
     width: 100%;
-    align-self: stretch;
-  }
-  /* StyledItemHeader used to show selected value of TimeRangeSelector */
-  > div > div:first-child > div {
-    padding: 0 ${space(2)};
-  }
-  /* Menu that dropdowns from TimeRangeSelector */
-  > div > div:last-child:not(:first-child) {
-    /* Remove awkward 1px width difference on dropdown due to border */
-    min-width: calc(100% + 2px);
-    transform: translateX(-1px);
-    right: auto;
-  }
-`;
-
-const DropdownLabel = styled('span')`
-  text-align: left;
-  font-weight: 600;
-  color: ${p => p.theme.textColor};
-
-  > span:last-child {
-    font-weight: 400;
   }
 `;
 

static/app/components/timeRangeSelector.tsx

@@ -342,11 +342,12 @@ export function TimeRangeSelector({
 
               return (
                 <DropdownButton
-                  {...triggerProps}
                   isOpen={isOpen}
                   size={selectProps.size}
                   icon={<IconCalendar />}
                   data-test-id="page-filter-timerange-selector"
+                  {...triggerProps}
+                  {...selectProps.triggerProps}
                 >
                   <TriggerLabel>{selectProps.triggerLabel ?? defaultLabel}</TriggerLabel>
                 </DropdownButton>

static/app/views/alerts/rules/issue/details/ruleDetails.spec.tsx

@@ -120,9 +120,10 @@ describe('AlertRuleDetails', () => {
   it('should reset pagination cursor on date change', async () => {
     createWrapper();
 
-    expect(await screen.findByText('Last 7 days')).toBeInTheDocument();
-    await userEvent.click(screen.getByText('Last 7 days'));
-    await userEvent.click(screen.getByText('Last 24 hours'));
+    const dateSelector = await screen.findByText('7D');
+    expect(dateSelector).toBeInTheDocument();
+    await userEvent.click(dateSelector);
+    await userEvent.click(screen.getByRole('option', {name: 'Last 24 hours'}));
 
     expect(context.router.push).toHaveBeenCalledWith(
       expect.objectContaining({

static/app/views/alerts/rules/issue/details/ruleDetails.tsx

@@ -462,12 +462,11 @@ function AlertRuleDetails({params, location, router}: AlertRuleDetailsProps) {
             </Alert>
           )}
           <StyledPageTimeRangeSelector
-            organization={organization}
             relative={period ?? ''}
             start={start ?? null}
             end={end ?? null}
             utc={utc ?? null}
-            onUpdate={handleUpdateDatetime}
+            onChange={handleUpdateDatetime}
           />
           <ErrorBoundary>
             <IssueAlertDetailsChart

static/app/views/alerts/rules/metric/details/body.tsx

@@ -189,12 +189,11 @@ export default function MetricDetailsBody({
             </Alert>
           )}
           <StyledPageTimeRangeSelector
-            organization={organization}
             relative={timePeriod.period ?? ''}
             start={(timePeriod.custom && timePeriod.start) || null}
             end={(timePeriod.custom && timePeriod.end) || null}
             utc={null}
-            onUpdate={handleTimePeriodChange}
+            onChange={handleTimePeriodChange}
             relativeOptions={relativeOptions}
             showAbsolute={false}
             disallowArbitraryRelativeRanges

static/app/views/organizationStats/index.tsx

@@ -337,12 +337,11 @@ export class OrganizationStats extends Component<OrganizationStatsProps> {
         />
 
         <StyledPageTimeRangeSelector
-          organization={organization}
           relative={period ?? ''}
           start={start ?? null}
           end={end ?? null}
           utc={utc ?? null}
-          onUpdate={this.handleUpdateDatetime}
+          onChange={this.handleUpdateDatetime}
           relativeOptions={omit(DEFAULT_RELATIVE_PERIODS, ['1h'])}
         />
       </SelectorGrid>

static/app/views/organizationStats/teamInsights/controls.tsx

@@ -209,12 +209,11 @@ function TeamStatsControls({
         />
       )}
       <StyledPageTimeRangeSelector
-        organization={organization}
         relative={period ?? ''}
         start={start ?? null}
         end={end ?? null}
         utc={utc ?? null}
-        onUpdate={handleUpdateDatetime}
+        onChange={handleUpdateDatetime}
         showAbsolute={false}
         relativeOptions={{
           '14d': t('Last 2 weeks'),