Merge pull request #2030 from influxdata/dataLoaders/listening-error-state

fix(ui/dataLoaders): Separate the error state from the data not found

ui/src/onboarding/components/verifyStep/ConnectionInformation.test.tsx

@@ -3,14 +3,15 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 // Components
-import ConnectionInformation from 'src/onboarding/components/verifyStep/ConnectionInformation'
+import ConnectionInformation, {
+  LoadingState,
+} from 'src/onboarding/components/verifyStep/ConnectionInformation'
 
 // Types
-import {RemoteDataState} from 'src/types'
 
 const setup = (override = {}) => {
   const props = {
-    loading: RemoteDataState.NotStarted,
+    loading: LoadingState.NotStarted,
     bucket: 'defbuck',
     countDownSeconds: 60,
     ...override,
@@ -29,19 +30,25 @@ describe('Onboarding.Components.ConnectionInformation', () => {
   })
 
   it('matches snapshot if loading', () => {
-    const {wrapper} = setup({loading: RemoteDataState.Loading})
+    const {wrapper} = setup({loading: LoadingState.Loading})
 
     expect(wrapper).toMatchSnapshot()
   })
 
   it('matches snapshot if success', () => {
-    const {wrapper} = setup({loading: RemoteDataState.Done})
+    const {wrapper} = setup({loading: LoadingState.Done})
+
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('matches snapshot if no data is found', () => {
+    const {wrapper} = setup({loading: LoadingState.NotFound})
 
     expect(wrapper).toMatchSnapshot()
   })
 
   it('matches snapshot if error', () => {
-    const {wrapper} = setup({loading: RemoteDataState.Error})
+    const {wrapper} = setup({loading: LoadingState.Error})
 
     expect(wrapper).toMatchSnapshot()
   })

ui/src/onboarding/components/verifyStep/ConnectionInformation.tsx

@@ -5,11 +5,16 @@ import _ from 'lodash'
 // Decorator
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Types
-import {RemoteDataState} from 'src/types'
+export enum LoadingState {
+  NotStarted = 'NotStarted',
+  Loading = 'Loading',
+  Done = 'Done',
+  NotFound = 'NotFound',
+  Error = 'Error',
+}
 
 export interface Props {
-  loading: RemoteDataState
+  loading: LoadingState
   bucket: string
   countDownSeconds: number
 }
@@ -29,33 +34,37 @@ class ListeningResults extends PureComponent<Props> {
 
   private get className(): string {
     switch (this.props.loading) {
-      case RemoteDataState.Loading:
+      case LoadingState.Loading:
         return 'loading'
-      case RemoteDataState.Done:
+      case LoadingState.Done:
         return 'success'
-      case RemoteDataState.Error:
+      case LoadingState.NotFound:
+      case LoadingState.Error:
         return 'error'
     }
   }
 
   private get header(): string {
     switch (this.props.loading) {
-      case RemoteDataState.Loading:
+      case LoadingState.Loading:
         return 'Awaiting Connection...'
-      case RemoteDataState.Done:
+      case LoadingState.Done:
         return 'Connection Found!'
-      case RemoteDataState.Error:
-        return 'Connection Not Found'
+      case LoadingState.NotFound:
+        return 'Data Not Found'
+      case LoadingState.Error:
+        return 'Error Listening for Data'
     }
   }
 
   private get additionalText(): string {
     switch (this.props.loading) {
-      case RemoteDataState.Loading:
+      case LoadingState.Loading:
         return `Timeout in ${this.props.countDownSeconds} seconds`
-      case RemoteDataState.Done:
+      case LoadingState.Done:
         return `${this.props.bucket} is receiving data loud and clear!`
-      case RemoteDataState.Error:
+      case LoadingState.NotFound:
+      case LoadingState.Error:
         return 'Check config and try again'
     }
   }

ui/src/onboarding/components/verifyStep/DataListening.tsx

@@ -13,13 +13,14 @@ import {
   ComponentSize,
   ComponentStatus,
 } from 'src/clockface'
-import ConnectionInformation from 'src/onboarding/components/verifyStep/ConnectionInformation'
+import ConnectionInformation, {
+  LoadingState,
+} from 'src/onboarding/components/verifyStep/ConnectionInformation'
 
 // Constants
 import {StepStatus} from 'src/clockface/constants/wizard'
 
 // Types
-import {RemoteDataState} from 'src/types'
 import {InfluxLanguage} from 'src/types/v2/dashboards'
 
 export interface Props {
@@ -29,7 +30,7 @@ export interface Props {
 }
 
 interface State {
-  loading: RemoteDataState
+  loading: LoadingState
   timePassedInSeconds: number
   secondsLeft: number
 }
@@ -49,7 +50,7 @@ class DataListening extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      loading: RemoteDataState.NotStarted,
+      loading: LoadingState.NotStarted,
       timePassedInSeconds: 0,
       secondsLeft: SECONDS,
     }
@@ -76,7 +77,7 @@ class DataListening extends PureComponent<Props, State> {
   private get connectionInfo(): JSX.Element {
     const {loading} = this.state
 
-    if (loading === RemoteDataState.NotStarted) {
+    if (loading === LoadingState.NotStarted) {
       return
     }
 
@@ -88,13 +89,11 @@ class DataListening extends PureComponent<Props, State> {
       />
     )
   }
+
   private get listenButton(): JSX.Element {
     const {loading} = this.state
 
-    if (
-      loading === RemoteDataState.Loading ||
-      loading === RemoteDataState.Done
-    ) {
+    if (loading === LoadingState.Loading || loading === LoadingState.Done) {
       return
     }
 
@@ -112,7 +111,7 @@ class DataListening extends PureComponent<Props, State> {
 
   private handleClick = (): void => {
     this.startTimer()
-    this.setState({loading: RemoteDataState.Loading})
+    this.setState({loading: LoadingState.Loading})
     this.startTime = Number(new Date())
     this.checkForData()
   }
@@ -135,19 +134,19 @@ class DataListening extends PureComponent<Props, State> {
       rowCount = response.rowCount
       timePassed = Number(new Date()) - this.startTime
     } catch (err) {
-      this.setState({loading: RemoteDataState.Error})
+      this.setState({loading: LoadingState.Error})
       onSetStepStatus(stepIndex, StepStatus.Incomplete)
       return
     }
 
     if (rowCount > 1) {
-      this.setState({loading: RemoteDataState.Done})
+      this.setState({loading: LoadingState.Done})
       onSetStepStatus(stepIndex, StepStatus.Complete)
       return
     }
 
     if (timePassed >= MINUTE || secondsLeft <= 0) {
-      this.setState({loading: RemoteDataState.Error})
+      this.setState({loading: LoadingState.NotFound})
       onSetStepStatus(stepIndex, StepStatus.Incomplete)
       return
     }
@@ -159,6 +158,7 @@ class DataListening extends PureComponent<Props, State> {
 
     this.timer = setInterval(this.countDown, TIMER_WAIT)
   }
+
   private countDown = () => {
     const {secondsLeft} = this.state
     const secs = secondsLeft - 1

ui/src/onboarding/components/verifyStep/DataStreaming.tsx

@@ -5,7 +5,6 @@ import _ from 'lodash'
 // Components
 import TelegrafInstructions from 'src/onboarding/components/verifyStep/TelegrafInstructions'
 import CreateOrUpdateConfig from 'src/onboarding/components/verifyStep/CreateOrUpdateConfig'
-import FetchAuthToken from 'src/onboarding/components/verifyStep/FetchAuthToken'
 import DataListening from 'src/onboarding/components/verifyStep/DataListening'
 
 // Actions
@@ -21,7 +20,6 @@ interface Props {
   bucket: string
   org: string
   configID: string
-  username: string
   stepIndex: number
   authToken: string
   onSetStepStatus: (index: number, status: StepStatus) => void
@@ -34,7 +32,6 @@ class DataStreaming extends PureComponent<Props> {
     const {
       authToken,
       org,
-      username,
       configID,
       onSaveTelegrafConfig,
       onSetStepStatus,
@@ -50,14 +47,7 @@ class DataStreaming extends PureComponent<Props> {
           onSaveTelegrafConfig={onSaveTelegrafConfig}
         >
           {() => (
-            <FetchAuthToken bucket={bucket} username={username}>
-              {authToken => (
-                <TelegrafInstructions
-                  authToken={authToken}
-                  configID={configID}
-                />
-              )}
-            </FetchAuthToken>
+            <TelegrafInstructions authToken={authToken} configID={configID} />
           )}
         </CreateOrUpdateConfig>
 

ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx

@@ -54,7 +54,6 @@ class VerifyDataStep extends PureComponent<Props> {
           authToken={authToken}
           onSaveTelegrafConfig={onSaveTelegrafConfig}
           org={_.get(setupParams, 'org', '')}
-          username={_.get(setupParams, 'username', '')}
           bucket={_.get(setupParams, 'bucket', '')}
           onSetStepStatus={onSetStepStatus}
           stepIndex={stepIndex}

ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx

@@ -17,7 +17,6 @@ import {DataLoaderType} from 'src/types/v2/dataLoaders'
 export interface Props {
   type: DataLoaderType
   org: string
-  username: string
   bucket: string
   stepIndex: number
   authToken: string
@@ -31,7 +30,6 @@ class VerifyDataSwitcher extends PureComponent<Props> {
   public render() {
     const {
       org,
-      username,
       bucket,
       type,
       stepIndex,
@@ -48,7 +46,6 @@ class VerifyDataSwitcher extends PureComponent<Props> {
             org={org}
             configID={telegrafConfigID}
             authToken={authToken}
-            username={username}
             bucket={bucket}
             onSetStepStatus={onSetStepStatus}
             onSaveTelegrafConfig={onSaveTelegrafConfig}

ui/src/onboarding/components/verifyStep/__snapshots__/ConnectionInformation.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Onboarding.Components.ConnectionInformation matches snapshot if error 1
   <h4
     className="wizard-step--text-state error"
   >
-    Connection Not Found
+    Error Listening for Data
   </h4>
   <p>
     Check config and try again
@@ -26,6 +26,19 @@ exports[`Onboarding.Components.ConnectionInformation matches snapshot if loading
 </Fragment>
 `;
 
+exports[`Onboarding.Components.ConnectionInformation matches snapshot if no data is found 1`] = `
+<Fragment>
+  <h4
+    className="wizard-step--text-state error"
+  >
+    Data Not Found
+  </h4>
+  <p>
+    Check config and try again
+  </p>
+</Fragment>
+`;
+
 exports[`Onboarding.Components.ConnectionInformation matches snapshot if success 1`] = `
 <Fragment>
   <h4