fix: csv not respecting time range (#4879)

Author: drdelambre

src/dataExplorer/components/ResultsPane.tsx

@@ -1,3 +1,4 @@
+// Libraries
 import React, {FC, lazy, Suspense, useState, useContext} from 'react'
 import {
   DraggableResizer,
@@ -15,20 +16,28 @@ import {
 } from '@influxdata/clockface'
 import {createLocalStorageStateHook} from 'use-local-storage-state'
 
+// Contexts
+import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {QueryContext} from 'src/shared/contexts/query'
+
+// Components
 import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
 import Results from 'src/dataExplorer/components/Results'
-import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
-import {TimeRange} from 'src/types'
 import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
+import QueryTime from 'src/dataExplorer/components/QueryTime'
+
+// Types
+import {TimeRange} from 'src/types'
+
+// Utils
+import {getRangeVariable} from 'src/variables/utils/getTimeRangeVars'
 import {downloadTextFile} from 'src/shared/utils/download'
 import {event} from 'src/cloud/utils/reporting'
-import {QueryContext} from 'src/shared/contexts/query'
 import {notify} from 'src/shared/actions/notifications'
-import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
-import {getRangeVariable} from 'src/variables/utils/getTimeRangeVars'
 import {getWindowPeriodVariableFromVariables} from 'src/variables/utils/getWindowVars'
-import QueryTime from 'src/dataExplorer/components/QueryTime'
 
+// Constants
+import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
 import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
 
 const FluxMonacoEditor = lazy(() =>
@@ -42,6 +51,37 @@ const useLocalStorageState = createLocalStorageStateHook(
 const INITIAL_HORIZ_RESIZER_HANDLE = 0.2
 const fakeNotify = notify
 
+const rangeToParam = (timeRange: TimeRange) => {
+  let timeRangeStart, timeRangeStop
+
+  if (!timeRange) {
+    timeRangeStart = timeRangeStop = null
+  } else {
+    if (timeRange.type === 'selectable-duration') {
+      timeRangeStart = '-' + timeRange.duration
+    } else if (timeRange.type === 'duration') {
+      timeRangeStart = '-' + timeRange.lower
+    } else if (isNaN(Date.parse(timeRange.lower))) {
+      timeRangeStart = null
+    } else {
+      timeRangeStart = new Date(timeRange.lower).toISOString()
+    }
+
+    if (!timeRange.upper) {
+      timeRangeStop = 'now()'
+    } else if (isNaN(Date.parse(timeRange.upper))) {
+      timeRangeStop = null
+    } else {
+      timeRangeStop = new Date(timeRange.upper).toISOString()
+    }
+  }
+
+  return {
+    timeRangeStart,
+    timeRangeStop,
+  }
+}
+
 const ResultsPane: FC = () => {
   const [horizDragPosition, setHorizDragPosition] = useState([
     INITIAL_HORIZ_RESIZER_HANDLE,
@@ -54,7 +94,9 @@ const ResultsPane: FC = () => {
 
   const download = () => {
     event('CSV Download Initiated')
-    basic(text).promise.then(response => {
+    basic(text, {
+      vars: rangeToParam(timeRange),
+    }).promise.then(response => {
       if (response.type !== 'SUCCESS') {
         return
       }
@@ -64,36 +106,9 @@ const ResultsPane: FC = () => {
   }
 
   const submit = () => {
-    let timeRangeStart, timeRangeStop
-
-    if (!timeRange) {
-      timeRangeStart = timeRangeStop = null
-    } else {
-      if (timeRange.type === 'selectable-duration') {
-        timeRangeStart = '-' + timeRange.duration
-      } else if (timeRange.type === 'duration') {
-        timeRangeStart = '-' + timeRange.lower
-      } else if (isNaN(Date.parse(timeRange.lower))) {
-        timeRangeStart = null
-      } else {
-        timeRangeStart = new Date(timeRange.lower).toISOString()
-      }
-
-      if (!timeRange.upper) {
-        timeRangeStop = 'now()'
-      } else if (isNaN(Date.parse(timeRange.upper))) {
-        timeRangeStop = null
-      } else {
-        timeRangeStop = new Date(timeRange.upper).toISOString()
-      }
-    }
-
     setStatus(RemoteDataState.Loading)
     query(text, {
-      vars: {
-        timeRangeStart,
-        timeRangeStop,
-      },
+      vars: rangeToParam(timeRange),
     })
       .then(r => {
         event('resultReceived', {