From 0f2f97fcc0d55629fbfdb628df964102669ade41 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 31 Mar 2022 16:44:59 +0200
Subject: [PATCH] fix(ui): repair typescript definitions

---
 .../fluxQueryBuilder/BucketsSelector.tsx      |  9 ++-
 .../fluxQueryBuilder/WindowPeriod.tsx         | 73 ++++++++++---------
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/BucketsSelector.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/BucketsSelector.tsx
index 8f5a21274..fe3de0550 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/BucketsSelector.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/BucketsSelector.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, {useEffect, useMemo} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import classnames from 'classnames'
 
 // Components
@@ -12,11 +12,12 @@ import {BucketSelectorState, TimeMachineQueryProps} from './types'
 import {loadBucketsThunk, selectBucketThunk} from './actions/thunks'
 import {setBucketsSearchTerm} from './actions/buckets'
 
-interface Callbacks {
+type Callbacks = ResolveThunks<{
   onFilterBuckets: typeof setBucketsSearchTerm
   onSelectBucket: typeof selectBucketThunk
   onLoadBuckets: typeof loadBucketsThunk
-}
+}>
+
 type Props = TimeMachineQueryProps & BucketSelectorState & Callbacks
 
 const filterBuckets = (buckets: string[], term: string): string[] => {
@@ -114,7 +115,7 @@ const InitializeBucketsSelector = (props: Props) => {
 const mstp = (state: any): BucketSelectorState => {
   return state?.fluxQueryBuilder?.buckets as BucketSelectorState
 }
-const mdtp: Callbacks = {
+const mdtp = {
   onLoadBuckets: loadBucketsThunk,
   onFilterBuckets: setBucketsSearchTerm,
   onSelectBucket: selectBucketThunk,
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/WindowPeriod.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/WindowPeriod.tsx
index 618b92c50..9dbc0954e 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/WindowPeriod.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/WindowPeriod.tsx
@@ -1,12 +1,12 @@
 import React, {useState, PureComponent} from 'react'
-import onClickOutside from 'react-onclickoutside'
 
 import Dropdown from 'src/shared/components/Dropdown'
 import {AGG_WINDOW_AUTO, DURATIONS} from './util/constants'
 
-import {connect} from 'react-redux'
-import {notify} from 'src/shared/actions/notifications'
+import {connect, HandleThunkActionCreator} from 'react-redux'
+import {notify as notifyActionCreator} from 'src/shared/actions/notifications'
 import {fluxWizardError} from 'src/shared/copy/notifications'
+import {ClickOutside} from '../../ClickOutside'
 
 function isDurationParseable(duration: string): boolean {
   const durationRegExp = /^(?:[1-9][0-9]*(?:y|mo|w|d|h|ms|s|m|us|µs|ns))+$/g
@@ -73,46 +73,51 @@ const WindowPeriod = ({selected, autoPeriod, onChoose}: Props) => {
   )
 }
 
-interface CustomDurationProps {
-  notify: (notification: any) => void
+interface CustomDurationOwnProps {
   customDuration: string
   setCustomDuration: (value: string | undefined) => void
   onChoose: (value: string) => void
 }
+interface CustomDurationReduxProps {
+  notify: HandleThunkActionCreator<typeof notifyActionCreator>
+}
+type CustomDurationProps = CustomDurationOwnProps & CustomDurationReduxProps
 class DurationInput extends PureComponent<CustomDurationProps> {
   public render() {
     const {customDuration, setCustomDuration, onChoose} = this.props
     const valid = isDurationParseable(customDuration)
     return (
-      <input
-        className="form-control input-sm"
-        placeholder="Enter custom duration"
-        type="text"
-        style={valid ? undefined : {border: '2px solid #F95F53'}}
-        value={customDuration}
-        onChange={e => setCustomDuration(e.target.value)}
-        onKeyUp={e => {
-          if (e.key === 'Escape') {
-            e.stopPropagation()
-            setCustomDuration(undefined)
-          }
-          if (e.key === 'Enter') {
-            e.stopPropagation()
-            if (valid) {
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <input
+          className="form-control input-sm"
+          placeholder="Enter custom duration"
+          type="text"
+          style={valid ? undefined : {border: '2px solid #F95F53'}}
+          value={customDuration}
+          onChange={e => setCustomDuration(e.target.value)}
+          onKeyUp={e => {
+            if (e.key === 'Escape') {
+              e.stopPropagation()
               setCustomDuration(undefined)
-              onChoose(customDuration)
-            } else {
-              this.props.notify(
-                fluxWizardError(`Invalid flux duration: ${customDuration}`)
-              )
             }
-          }
-        }}
-        onFocus={e => e.target.select()}
-        spellCheck={false}
-        autoComplete="false"
-        autoFocus={true}
-      />
+            if (e.key === 'Enter') {
+              e.stopPropagation()
+              if (valid) {
+                setCustomDuration(undefined)
+                onChoose(customDuration)
+              } else {
+                this.props.notify(
+                  fluxWizardError(`Invalid flux duration: ${customDuration}`)
+                )
+              }
+            }
+          }}
+          onFocus={e => e.target.select()}
+          spellCheck={false}
+          autoComplete="false"
+          autoFocus={true}
+        />
+      </ClickOutside>
     )
   }
   public handleClickOutside = () => {
@@ -120,8 +125,8 @@ class DurationInput extends PureComponent<CustomDurationProps> {
   }
 }
 
-const CustomDurationInput = connect(null, {notify})(
-  onClickOutside(DurationInput)
+const CustomDurationInput = connect(null, {notify: notifyActionCreator})(
+  DurationInput
 )
 
 export default WindowPeriod