feat: add new time range component for the UI for the new data explorer (#5817)

* wip

* feat: added validation, need to clean up design when they are ready and clean up the component logic

* feat: connect all the things

Author: asalem1

package.json

@@ -99,7 +99,7 @@
     "@types/node": "^12.6.8",
     "@types/papaparse": "^4.5.9",
     "@types/react": "^17.0.35",
-    "@types/react-datepicker": "^2.8.1",
+    "@types/react-datepicker": "^4.4.2",
     "@types/react-dom": "^17.0.11",
     "@types/react-grid-layout": "^0.16.5",
     "@types/react-redux": "^7.1.9",
@@ -202,7 +202,7 @@
     "qrcode.react": "^3.1.0",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.0.0",
-    "react-datepicker": "^2.1.0",
+    "react-datepicker": "^4.8.0",
     "react-dnd": "^9.3.2",
     "react-dnd-html5-backend": "^9.3.2",
     "react-dom": "^17.0.2",

src/dataExplorer/components/Results.tsx

@@ -24,6 +24,7 @@ import {
 import {FluxResult} from 'src/types/flows'
 
 import './Results.scss'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // simplified version migrated from src/flows/pipes/Table/view.tsx
 const QueryStat: FC = () => {
@@ -249,7 +250,9 @@ const Results: FC = () => {
             {tableHeader}
             {vizHeader}
             <div className="data-explorer-results--timezone">
-              <TimeZoneDropdown />
+              {isFlagEnabled('newTimeRangeComponent') ? null : (
+                <TimeZoneDropdown />
+              )}
               <SelectGroup style={{marginRight: 12}}>
                 <SelectGroup.Option
                   id="table"

src/dataExplorer/components/ResultsPane.tsx

@@ -27,6 +27,7 @@ import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
 import Results from 'src/dataExplorer/components/Results'
 import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
 import QueryTime from 'src/dataExplorer/components/QueryTime'
+import NewDatePicker from 'src/shared/components/dateRangePicker/NewDatePicker'
 
 // Types
 import {TimeRange} from 'src/types'
@@ -40,6 +41,7 @@ import {getWindowPeriodVariableFromVariables} from 'src/variables/utils/getWindo
 
 // Constants
 import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const FluxMonacoEditor = lazy(
   () => import('src/shared/components/FluxMonacoEditor')
@@ -49,6 +51,7 @@ const fakeNotify = notify
 
 const rangeToParam = (timeRange: TimeRange) => {
   let timeRangeStart: string, timeRangeStop: string
+  const durationRegExp = /([0-9]+)(y|mo|w|d|h|ms|s|m|us|µs|ns)$/g
 
   if (!timeRange) {
     timeRangeStart = timeRangeStop = null
@@ -57,6 +60,10 @@ const rangeToParam = (timeRange: TimeRange) => {
       timeRangeStart = '-' + timeRange.duration
     } else if (timeRange.type === 'duration') {
       timeRangeStart = '-' + timeRange.lower
+    } else if (!isNaN(Number(timeRange.lower)) || timeRange.lower === 'now()') {
+      timeRangeStart = timeRange.lower
+    } else if (!!timeRange?.lower?.match(durationRegExp)) {
+      timeRangeStart = timeRange.lower
     } else if (isNaN(Date.parse(timeRange.lower))) {
       timeRangeStart = null
     } else {
@@ -65,6 +72,10 @@ const rangeToParam = (timeRange: TimeRange) => {
 
     if (!timeRange.upper) {
       timeRangeStop = 'now()'
+    } else if (!isNaN(Number(timeRange.upper)) || timeRange.upper === 'now()') {
+      timeRangeStop = timeRange.upper
+    } else if (!!timeRange?.upper?.match(durationRegExp)) {
+      timeRangeStop = timeRange.upper
     } else if (isNaN(Date.parse(timeRange.upper))) {
       timeRangeStop = null
     } else {
@@ -197,10 +208,14 @@ const ResultsPane: FC = () => {
                   text ? ComponentStatus.Default : ComponentStatus.Disabled
                 }
               />
-              <TimeRangeDropdown
-                timeRange={range}
-                onSetTimeRange={(range: TimeRange) => setRange(range)}
-              />
+              {isFlagEnabled('newTimeRangeComponent') ? (
+                <NewDatePicker />
+              ) : (
+                <TimeRangeDropdown
+                  timeRange={range}
+                  onSetTimeRange={(range: TimeRange) => setRange(range)}
+                />
+              )}
               <SubmitQueryButton
                 className="submit-btn"
                 text="Run"

src/shared/components/dateRangePicker/DatePicker.tsx

@@ -28,6 +28,7 @@ import {
   isValidStrictly,
 } from 'src/utils/datetime/validator'
 import {isISODate} from 'src/shared/utils/dateTimeUtils'
+import {isValidDatepickerFormat} from 'src/shared/components/dateRangePicker/utils'
 
 interface Props {
   label: string
@@ -44,16 +45,6 @@ interface State {
   inputFormat: string
 }
 
-const isValidDatepickerFormat = (d: string): boolean => {
-  return (
-    isValidStrictly(d, 'YYYY-MM-DD HH:mm') ||
-    isValidStrictly(d, 'YYYY-MM-DD HH:mm:ss') ||
-    isValidStrictly(d, 'YYYY-MM-DD HH:mm:ss.sss') ||
-    isValidStrictly(d, 'YYYY-MM-DD') ||
-    isISODate(d)
-  )
-}
-
 const getFormat = (d: string): string => {
   if (isValidStrictly(d, 'YYYY-MM-DD')) {
     return 'YYYY-MM-DD'