ref(dateFilter): Use `menuFooterMessage` for hints (#57856)

`hint` is an old prop that will no longer be supported in the new page
filter components.

**Before ——**
<img width="425" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/c5390e76-91ec-4d27-9886-76ff8ba4bc65">


**After ——**
<img width="274" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/1f8809e4-4328-41fc-a445-fc7319929b8a">

static/app/components/datePageFilter.tsx

@@ -23,6 +23,7 @@ type Props = Omit<
   React.ComponentProps<typeof TimeRangeSelector>,
   'organization' | 'start' | 'end' | 'utc' | 'relative' | 'onUpdate'
 > & {
+  menuFooterMessage?: string;
   /**
    * Reset these URL params when we fire actions (custom routing only)
    */

static/app/components/organizations/hybridFilter.tsx

@@ -217,7 +217,7 @@ export function HybridFilter<Value extends React.Key>({
         ? menuFooterMessage(hasStagedChanges)
         : menuFooterMessage;
 
-    return menuFooter || hasStagedChanges || showModifierTip
+    return menuFooter || footerMessage || hasStagedChanges || showModifierTip
       ? ({closeOverlay}) => (
           <Fragment>
             {footerMessage && <FooterMessage>{footerMessage}</FooterMessage>}
@@ -375,6 +375,11 @@ const FooterWrap = styled('div')`
   display: grid;
   grid-auto-flow: column;
   gap: ${space(2)};
+
+  /* If there's FooterMessage above */
+  &:not(:first-child) {
+    margin-top: ${space(1)};
+  }
 `;
 
 const FooterMessage = styled('p')`

static/app/components/timeRangeSelector.tsx

@@ -63,7 +63,6 @@ export interface TimeRangeSelectorProps
     | 'onChange'
     | 'onInteractOutside'
     | 'closeOnSelect'
-    | 'menuFooter'
     | 'onKeyDown'
   > {
   /**
@@ -91,6 +90,10 @@ export interface TimeRangeSelectorProps
    * The maximum number of days in the past you can pick
    */
   maxPickableDays?: number;
+  /**
+   * Message to show in the menu footer
+   */
+  menuFooterMessage?: React.ReactNode;
   onChange?: (data: ChangeData) => void;
   /**
    * Relative date value
@@ -149,6 +152,8 @@ export function TimeRangeSelector({
   trigger,
   menuWidth,
   menuBody,
+  menuFooter,
+  menuFooterMessage,
   ...selectProps
 }: TimeRangeSelectorProps) {
   const router = useRouter();
@@ -411,32 +416,43 @@ export function TimeRangeSelector({
             )
           }
           menuFooter={
-            showAbsoluteSelector &&
-            (({closeOverlay}) => (
-              <AbsoluteSelectorFooter>
-                {showRelative && (
-                  <Button
-                    size="xs"
-                    borderless
-                    icon={<IconArrow size="xs" direction="left" />}
-                    onClick={() => setShowAbsoluteSelector(false)}
-                  >
-                    {t('Back')}
-                  </Button>
-                )}
-                <Button
-                  size="xs"
-                  priority="primary"
-                  disabled={!hasChanges || hasDateRangeErrors}
-                  onClick={() => {
-                    commitChanges();
-                    closeOverlay();
-                  }}
-                >
-                  {t('Apply')}
-                </Button>
-              </AbsoluteSelectorFooter>
-            ))
+            menuFooter || menuFooterMessage || showAbsoluteSelector
+              ? ({closeOverlay}) => (
+                  <Fragment>
+                    {menuFooterMessage && (
+                      <FooterMessage>{menuFooterMessage}</FooterMessage>
+                    )}
+                    <FooterWrap>
+                      <FooterInnerWrap>{menuFooter}</FooterInnerWrap>
+                      {showAbsoluteSelector && (
+                        <AbsoluteSelectorFooter>
+                          {showRelative && (
+                            <Button
+                              size="xs"
+                              borderless
+                              icon={<IconArrow size="xs" direction="left" />}
+                              onClick={() => setShowAbsoluteSelector(false)}
+                            >
+                              {t('Back')}
+                            </Button>
+                          )}
+                          <Button
+                            size="xs"
+                            priority="primary"
+                            disabled={!hasChanges || hasDateRangeErrors}
+                            onClick={() => {
+                              commitChanges();
+                              closeOverlay();
+                            }}
+                          >
+                            {t('Apply')}
+                          </Button>
+                        </AbsoluteSelectorFooter>
+                      )}
+                    </FooterWrap>
+                  </Fragment>
+                )
+              : null
           }
         />
       )}
@@ -478,3 +494,45 @@ const AbsoluteSelectorFooter = styled('div')`
   gap: ${space(1)};
   justify-content: flex-end;
 `;
+
+const FooterMessage = styled('p')`
+  padding: ${space(0.75)} ${space(1)};
+  margin: ${space(0.5)} 0;
+  border-radius: ${p => p.theme.borderRadius};
+  border: solid 1px ${p => p.theme.alert.warning.border};
+  background: ${p => p.theme.alert.warning.backgroundLight};
+  color: ${p => p.theme.textColor};
+  font-size: ${p => p.theme.fontSizeSmall};
+`;
+
+const FooterWrap = styled('div')`
+  display: grid;
+  grid-auto-flow: column;
+  gap: ${space(2)};
+
+  /* If there's FooterMessage above */
+  &:not(:first-child) {
+    margin-top: ${space(1)};
+  }
+`;
+
+const FooterInnerWrap = styled('div')`
+  grid-row: -1;
+  display: grid;
+  grid-auto-flow: column;
+  gap: ${space(1)};
+
+  &:empty {
+    display: none;
+  }
+
+  &:last-of-type {
+    justify-self: end;
+    justify-items: end;
+  }
+  &:first-of-type,
+  &:only-child {
+    justify-self: start;
+    justify-items: start;
+  }
+`;

static/app/views/releases/list/index.tsx

@@ -546,7 +546,7 @@ class ReleasesList extends DeprecatedAsyncView<Props, State> {
                 <DatePageFilter
                   alignDropdown="left"
                   disallowArbitraryRelativeRanges
-                  hint={t(
+                  menuFooterMessage={t(
                     'Changing this date range will recalculate the release metrics.'
                   )}
                 />