fix(DWP-date): date selector refactored to popover and fixed reducer error (#15771)

* fix(DWP-date): refactored to popover and fixed functionality

* fix(position): popover position changed to match syntax

ui/src/shared/actions/predicates.ts

@@ -45,12 +45,12 @@ export const setBucketName = (bucketName: string): SetBucketName => ({
 })
 
 interface SetTimeRange {
-  type: 'SET_TIME_RANGE'
+  type: 'SET_DELETE_TIME_RANGE'
   timeRange: [number, number]
 }
 
 export const setTimeRange = (timeRange: [number, number]): SetTimeRange => ({
-  type: 'SET_TIME_RANGE',
+  type: 'SET_DELETE_TIME_RANGE',
   timeRange,
 })
 

ui/src/shared/components/DeleteDataForm/TimeRangeDropdown.tsx

@@ -1,7 +1,13 @@
 // Libraries
-import React, {useRef, useState, FunctionComponent} from 'react'
+import React, {useRef, useState, FC} from 'react'
 import moment from 'moment'
-import {Dropdown} from '@influxdata/clockface'
+import {
+  Dropdown,
+  Popover,
+  PopoverPosition,
+  PopoverInteraction,
+  PopoverType,
+} from '@influxdata/clockface'
 
 // Components
 import DateRangePicker from 'src/shared/components/dateRangePicker/DateRangePicker'
@@ -11,39 +17,43 @@ interface Props {
   onSetTimeRange: (timeRange: [number, number]) => any
 }
 
-const TimeRangeDropdown: FunctionComponent<Props> = ({
-  timeRange,
-  onSetTimeRange,
-}) => {
+const TimeRangeDropdown: FC<Props> = ({timeRange, onSetTimeRange}) => {
   const [pickerActive, setPickerActive] = useState(false)
   const buttonRef = useRef<HTMLDivElement>(null)
 
-  let datePickerPosition = null
-
-  if (buttonRef.current) {
-    const {right, top} = buttonRef.current.getBoundingClientRect()
-
-    datePickerPosition = {top: top, right: window.innerWidth - right}
-  }
-
   const lower = moment(timeRange[0]).format('YYYY-MM-DD HH:mm:ss')
   const upper = moment(timeRange[1]).format('YYYY-MM-DD HH:mm:ss')
 
+  const handleApplyTimeRange = (lower, upper) => {
+    onSetTimeRange([Date.parse(lower), Date.parse(upper)])
+    setPickerActive(false)
+  }
   return (
     <div ref={buttonRef}>
       <Dropdown.Button onClick={() => setPickerActive(!pickerActive)}>
         {lower} - {upper}
       </Dropdown.Button>
-      {pickerActive && (
-        <DateRangePicker
-          timeRange={{lower, upper}}
-          onSetTimeRange={({lower, upper}) =>
-            onSetTimeRange([Date.parse(lower), Date.parse(upper)])
-          }
-          position={datePickerPosition}
-          onClose={() => setPickerActive(false)}
-        />
-      )}
+      <Popover
+        type={PopoverType.Outline}
+        position={PopoverPosition.Below}
+        triggerRef={buttonRef}
+        visible={pickerActive}
+        showEvent={PopoverInteraction.None}
+        hideEvent={PopoverInteraction.None}
+        distanceFromTrigger={8}
+        testID="timerange-popover"
+        enableDefaultStyles={false}
+        contents={() => (
+          <DateRangePicker
+            timeRange={{lower, upper}}
+            onSetTimeRange={({lower, upper}) =>
+              handleApplyTimeRange(lower, upper)
+            }
+            onClose={() => setPickerActive(false)}
+            position={{position: 'relative'}}
+          />
+        )}
+      />
     </div>
   )
 }

ui/src/shared/reducers/predicates.ts

@@ -29,7 +29,7 @@ export const predicatesReducer = (
     case 'SET_BUCKET_NAME':
       return {...state, bucketName: action.bucketName}
 
-    case 'SET_TIME_RANGE':
+    case 'SET_DELETE_TIME_RANGE':
       return {...state, timeRange: action.timeRange}
 
     case 'SET_FILTER':