ref(pageFilters): Separate datePageFilter from pageTimeRangeSelector (#33768)

static/app/components/datePageFilter.tsx

@@ -6,7 +6,6 @@ import PageFilterDropdownButton from 'sentry/components/organizations/pageFilter
 import TimeRangeSelector, {
   ChangeData,
 } from 'sentry/components/organizations/timeRangeSelector';
-import PageTimeRangeSelector from 'sentry/components/pageTimeRangeSelector';
 import {IconCalendar} from 'sentry/icons';
 import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
@@ -68,7 +67,7 @@ function DatePageFilter({router, resetParamsOnChange, ...props}: Props) {
   };
 
   return (
-    <StyledPageTimeRangeSelector
+    <TimeRangeSelector
       organization={organization}
       start={start}
       end={end}
@@ -78,22 +77,12 @@ function DatePageFilter({router, resetParamsOnChange, ...props}: Props) {
       label={<IconCalendar color="textColor" />}
       customDropdownButton={customDropdownButton}
       showPin
+      detached
       {...props}
     />
   );
 }
 
-const StyledPageTimeRangeSelector = styled(PageTimeRangeSelector)`
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: fit-content;
-  position: relative;
-  height: 100%;
-  background: ${p => p.theme.background};
-  border: none;
-  box-shadow: none;
-`;
-
 const TitleContainer = styled('div')`
   overflow: hidden;
   white-space: nowrap;

static/app/components/pageTimeRangeSelector.tsx

@@ -1,33 +1,18 @@
-import {useState} from 'react';
 import styled from '@emotion/styled';
 
 import TimeRangeSelector from 'sentry/components/organizations/timeRangeSelector';
 import {Panel} from 'sentry/components/panels';
-import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
-import {defined} from 'sentry/utils';
 
-type Props = React.ComponentProps<typeof TimeRangeSelector> & {
-  className?: string;
-  showPin?: boolean;
-};
-
-function PageTimeRangeSelector({className, customDropdownButton, ...props}: Props) {
-  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+type Props = React.ComponentProps<typeof TimeRangeSelector> & {className?: string};
 
+function PageTimeRangeSelector({className, ...props}: Props) {
   return (
-    <DropdownDate
-      className={className}
-      isCalendarOpen={isCalendarOpen}
-      hasCustomButton={defined(customDropdownButton)}
-    >
+    <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>}
-        onToggleSelector={isOpen => setIsCalendarOpen(isOpen)}
-        relativeOptions={DEFAULT_RELATIVE_PERIODS}
-        customDropdownButton={customDropdownButton}
         detached
         {...props}
       />
@@ -35,40 +20,36 @@ function PageTimeRangeSelector({className, customDropdownButton, ...props}: Prop
   );
 }
 
-const DropdownDate = styled(Panel)<{hasCustomButton: boolean; isCalendarOpen: boolean}>`
+const DropdownDate = styled(Panel)`
   padding: 0;
   margin: 0;
 
-  ${p =>
-    !p.hasCustomButton &&
-    `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 42px;
-    background: ${p.theme.background};
-    border: 1px solid ${p.theme.border};
-    border-radius: ${p.theme.borderRadius};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 42px;
+  background: ${p => p.theme.background};
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
 
-    font-size: ${p.theme.fontSizeMedium};
-    color: ${p.theme.textColor};
+  font-size: ${p => p.theme.fontSizeMedium};
+  color: ${p => p.theme.textColor};
 
-    > div {
-      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;
-    }
-  `}
+  > div {
+    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')`