feat(ui): Add label and callback to TimeRangeSelector (#25663)

static/app/components/organizations/timeRangeSelector/index.tsx

@@ -107,6 +107,11 @@ type Props = ReactRouter.WithRouterProps & {
    */
   utc: boolean | null;
 
+  /**
+   * Replace the default calendar icon for label
+   */
+  label?: React.ReactNode;
+
   /**
    * Callback when value changes
    */
@@ -117,6 +122,11 @@ type Props = ReactRouter.WithRouterProps & {
    */
   onUpdate: (data: ChangeData) => void;
 
+  /**
+   * Callback when opening/closing dropdown date selector
+   */
+  onToggleSelector?: (isOpen: boolean) => void;
+
   /**
    * Just used for metrics
    */
@@ -165,6 +175,15 @@ class TimeRangeSelector extends React.PureComponent<Props, State> {
     };
   }
 
+  componentDidUpdate(_prevProps, prevState) {
+    const {onToggleSelector} = this.props;
+    const currState = this.state;
+
+    if (onToggleSelector && prevState.isOpen !== currState.isOpen) {
+      onToggleSelector(currState.isOpen);
+    }
+  }
+
   callCallback = (callback: Props['onChange'], datetime: ChangeData) => {
     if (typeof callback !== 'function') {
       return;
@@ -332,7 +351,14 @@ class TimeRangeSelector extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const {defaultPeriod, showAbsolute, showRelative, organization, hint} = this.props;
+    const {
+      defaultPeriod,
+      showAbsolute,
+      showRelative,
+      organization,
+      hint,
+      label,
+    } = this.props;
     const {start, end, relative} = this.state;
 
     const shouldShowAbsolute = showAbsolute;
@@ -359,7 +385,7 @@ class TimeRangeSelector extends React.PureComponent<Props, State> {
           <TimeRangeRoot {...getRootProps()}>
             <StyledHeaderItem
               data-test-id="global-header-timerange-selector"
-              icon={<IconCalendar />}
+              icon={label ?? <IconCalendar />}
               isOpen={isOpen}
               hasSelected={
                 (!!this.props.relative && this.props.relative !== defaultPeriod) ||