fix: time ranger picker dropdown resize according to query builder height (#4699)

Author: ChitlangeSahas

src/shared/components/TimeRangeDropdown.tsx

@@ -40,6 +40,7 @@ interface Props {
   timeZone: TimeZone
   onSetTimeRange: (timeRange: TimeRange) => void
   width?: number
+  maxHeight?: number
 }
 
 interface State {
@@ -58,6 +59,8 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
   public render() {
     const timeRange = this.timeRange
     const timeRangeLabel = getTimeRangeLabel(timeRange, this.props.timeZone)
+    const {maxHeight} = this.props
+
     return (
       <>
         <Popover
@@ -98,6 +101,7 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
               <Dropdown.Menu
                 onCollapse={onCollapse}
                 style={{width: `${this.dropdownWidth}px`}}
+                maxHeight={maxHeight}
               >
                 <Dropdown.Divider
                   key="Time Range"

src/timeMachine/components/Queries.tsx

@@ -47,11 +47,17 @@ type RouterProps = RouteComponentProps<{
   dashboardID: string
   orgID: string
 }>
-type Props = ReduxProps & RouterProps
+
+type OwnProps = {
+  maxHeight: number
+}
+
+type Props = ReduxProps & RouterProps & OwnProps
 
 class TimeMachineQueries extends PureComponent<Props> {
   public render() {
-    const {timeRange, isInCheckOverlay, activeQuery} = this.props
+    const {timeRange, isInCheckOverlay, activeQuery, maxHeight} = this.props
+    const dropdownMaxHeight = maxHeight * 0.5
 
     return (
       <div className="time-machine-queries">
@@ -72,6 +78,7 @@ class TimeMachineQueries extends PureComponent<Props> {
                 <TimeRangeDropdown
                   timeRange={timeRange}
                   onSetTimeRange={this.handleSetTimeRange}
+                  maxHeight={dropdownMaxHeight}
                 />
                 <TimeMachineQueriesSwitcher />
               </>

src/timeMachine/components/TimeMachine.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {useState, FunctionComponent} from 'react'
+import React, {useState, FunctionComponent, useRef} from 'react'
 import {useSelector} from 'react-redux'
 import classnames from 'classnames'
 
@@ -26,11 +26,15 @@ const TimeMachine: FunctionComponent = () => {
     'time-machine--split': isViewingVisOptions,
   })
 
-  let bottomContents: JSX.Element = null
-  if (activeTab === 'alerting') {
-    bottomContents = <TimeMachineAlerting />
-  } else if (activeTab === 'queries') {
-    bottomContents = <TimeMachineQueries />
+  const bottomContentRef = useRef(null)
+
+  const bottomContents = (): JSX.Element => {
+    if (activeTab === 'alerting') {
+      return <TimeMachineAlerting />
+    } else if (activeTab === 'queries') {
+      const bottomContentsMaxHeight = bottomContentRef.current?.clientHeight
+      return <TimeMachineQueries maxHeight={bottomContentsMaxHeight} />
+    }
   }
 
   return (
@@ -53,8 +57,11 @@ const TimeMachine: FunctionComponent = () => {
                 className="time-machine--bottom"
                 data-testid="time-machine--bottom"
               >
-                <div className="time-machine--bottom-contents">
-                  {bottomContents}
+                <div
+                  className="time-machine--bottom-contents"
+                  ref={bottomContentRef}
+                >
+                  {bottomContents()}
                 </div>
               </div>
             </ErrorBoundary>