Merge pull request #2194 from influxdata/feat/dataloader-verify-line-protocol

Add verify step for line protocol onboarding

ui/mocks/dummyData.ts

@@ -11,6 +11,7 @@ import {
 import {Links} from 'src/types/v2/links'
 import {Task, TaskStatus} from 'src/types/v2/tasks'
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
+import {WithRouterProps} from 'react-router'
 import {ConfigurationState} from 'src/types/v2/dataLoaders'
 import {
   TelegrafPluginInputCpu,
@@ -285,6 +286,13 @@ export const defaultOnboardingStepProps: OnboardingStepProps = {
   onSetSubstepIndex: jest.fn(),
 }
 
+export const withRouterProps: WithRouterProps = {
+  params: {},
+  location: null,
+  routes: null,
+  router: null,
+}
+
 export const token =
   'm4aUjEIhM758JzJgRmI6f3KNOBw4ZO77gdwERucF0bj4QOLHViD981UWzjaxW9AbyA5THOMBp2SVZqzbui2Ehw=='
 

ui/package.json

@@ -17,7 +17,7 @@
     "clean": "rm -rf ./build && rm -rf ./.cache && rm -rf node_modules",
     "test": "jest --maxWorkers=2",
     "test:watch": "jest --watch --verbose false",
-    "test:u": "jest --updateSnapshot",
+    "test:update": "jest --updateSnapshot",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --verbose false",
     "lint": "npm run tslint && npm run tsc",
     "tslint": "tslint -c ./tslint.json '{src,test}/**/*.ts?(x)'",

ui/src/clockface/components/inputs/TextArea.tsx

@@ -52,8 +52,7 @@ interface Props {
   size?: ComponentSize
   status?: ComponentStatus
   customClass?: string
-  handleSubmitText?: (s: string) => void
-  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
+  onChange?: (s: string) => void
   onBlur?: (e?: ChangeEvent<HTMLTextAreaElement>) => void
   onFocus?: (e?: ChangeEvent<HTMLTextAreaElement>) => void
   onKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void
@@ -79,7 +78,6 @@ class TextArea extends Component<Props> {
     rows: 20,
     spellCheck: false,
     wrap: Wrap.Off,
-    onChange: () => {},
     value: '',
   }
 
@@ -138,8 +136,11 @@ class TextArea extends Component<Props> {
   }
 
   private handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    const {handleSubmitText} = this.props
-    handleSubmitText(e.target.value)
+    const {onChange} = this.props
+
+    if (onChange) {
+      onChange(e.target.value)
+    }
   }
 
   private get className(): string {

ui/src/clockface/components/radio_buttons/RadioButtons.tsx

@@ -37,19 +37,7 @@ class Radio extends Component<Props> {
 
     this.validateChildCount()
 
-    return (
-      <div className={this.containerClassName}>
-        {React.Children.map(children, (child: JSX.Element) => {
-          if (this.childTypeIsValid(child)) {
-            return <RadioButton {...child.props} key={child.props.id} />
-          } else {
-            throw new Error(
-              '<Radio> expected children of type <Radio.Button />'
-            )
-          }
-        })}
-      </div>
-    )
+    return <div className={this.containerClassName}>{children}</div>
   }
 
   private get containerClassName(): string {
@@ -74,9 +62,6 @@ class Radio extends Component<Props> {
       )
     }
   }
-
-  private childTypeIsValid = (child: JSX.Element): boolean =>
-    child.type === RadioButton
 }
 
 export default Radio

ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx

@@ -188,6 +188,8 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
       } else {
         onSetStepStatus(parseInt(stepID, 10), StepStatus.Complete)
       }
+    } else {
+      onSetStepStatus(parseInt(stepID, 10), StepStatus.Complete)
     }
   }
 }

ui/src/onboarding/components/configureStep/lineProtocol/LineProtocol.test.tsx

@@ -10,6 +10,7 @@ const setup = (override?) => {
   const props = {
     bucket: 'a',
     org: 'a',
+    setLPStatus: jest.fn(),
     ...override,
   }
   const wrapper = shallow(<LineProtocol {...props} />)

ui/src/onboarding/components/configureStep/lineProtocol/LineProtocol.tsx

@@ -6,12 +6,14 @@ import _ from 'lodash'
 
 // Components
 import LineProtocolTabs from 'src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs'
-import LoadingStatusIndicator from 'src/onboarding/components/configureStep/lineProtocol/LoadingStatusIndicator'
 import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
 import {Form} from 'src/clockface'
 
 // Actions
-import {setLPStatus as setLPStatusAction} from 'src/onboarding/actions/dataLoaders'
+import {
+  setLPStatus as setLPStatusAction,
+  writeLineProtocolAction,
+} from 'src/onboarding/actions/dataLoaders'
 
 // Decorator
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -19,6 +21,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 // Types
 import {LineProtocolTab} from 'src/types/v2/dataLoaders'
 import {AppState} from 'src/types/v2/index'
+import {WritePrecision} from 'src/api'
 import {RemoteDataState} from 'src/types'
 
 interface OwnProps {
@@ -30,20 +33,27 @@ interface OwnProps {
 }
 
 interface StateProps {
-  lpStatus: RemoteDataState
+  lineProtocolBody: string
+  precision: WritePrecision
 }
 
 interface DispatchProps {
   setLPStatus: typeof setLPStatusAction
+  writeLineProtocolAction: typeof writeLineProtocolAction
 }
 
 type Props = OwnProps & StateProps & DispatchProps
 
 @ErrorHandling
 export class LineProtocol extends PureComponent<Props> {
+  public componentDidMount() {
+    const {setLPStatus} = this.props
+    setLPStatus(RemoteDataState.NotStarted)
+  }
+
   public render() {
     return (
-      <Form onSubmit={this.props.onClickNext}>
+      <Form onSubmit={this.handleSubmit}>
         <h3 className="wizard-step--title">Add Data via Line Protocol</h3>
         <h5 className="wizard-step--sub-title">
           Need help writing InfluxDB Line Protocol? See Documentation
@@ -79,40 +89,41 @@ export class LineProtocol extends PureComponent<Props> {
   }
 
   private get Content(): JSX.Element {
-    const {bucket, org, lpStatus} = this.props
-    if (lpStatus === RemoteDataState.NotStarted) {
-      return (
-        <LineProtocolTabs
-          tabs={this.LineProtocolTabs}
-          bucket={bucket}
-          org={org}
-        />
-      )
-    }
+    const {bucket, org} = this.props
     return (
-      <LoadingStatusIndicator
-        status={lpStatus}
-        onClickRetry={this.handleRetry}
+      <LineProtocolTabs
+        tabs={this.LineProtocolTabs}
+        bucket={bucket}
+        org={org}
       />
     )
   }
 
-  private handleRetry = () => {
-    const {setLPStatus} = this.props
-    setLPStatus(RemoteDataState.NotStarted)
+  private handleSubmit = () => {
+    const {
+      bucket,
+      org,
+      writeLineProtocolAction,
+      lineProtocolBody,
+      precision,
+    } = this.props
+
+    writeLineProtocolAction(org, bucket, lineProtocolBody, precision)
+    this.props.onClickNext()
   }
 }
 
 const mstp = ({
   onboarding: {
-    dataLoaders: {lpStatus},
+    dataLoaders: {lineProtocolBody, precision},
   },
 }: AppState): StateProps => {
-  return {lpStatus}
+  return {lineProtocolBody, precision}
 }
 
 const mdtp: DispatchProps = {
   setLPStatus: setLPStatusAction,
+  writeLineProtocolAction,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx

@@ -1,21 +1,11 @@
 // Libraries
-import React, {PureComponent, ChangeEvent} from 'react'
+import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
+import _ from 'lodash'
 
-// Components
-import {
-  Input,
-  InputType,
-  Radio,
-  ButtonShape,
-  Form,
-  Button,
-  ComponentSize,
-  ComponentColor,
-} from 'src/clockface'
-import DragAndDrop from 'src/shared/components/DragAndDrop'
-import TextArea from 'src/clockface/components/inputs/TextArea'
 import PrecisionDropdown from 'src/onboarding/components/configureStep/lineProtocol/PrecisionDropdown'
+import TabSelector from 'src/onboarding/components/configureStep/lineProtocol/TabSelector'
+import TabBody from 'src/onboarding/components/configureStep/lineProtocol/TabBody'
 
 // Types
 import {LineProtocolTab} from 'src/types/v2/dataLoaders'
@@ -69,113 +59,55 @@ export class LineProtocolTabs extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {setPrecision, precision} = this.props
+    const {
+      setPrecision,
+      precision,
+      activeLPTab,
+      tabs,
+      setLineProtocolBody,
+      lineProtocolBody,
+    } = this.props
+
+    const {urlInput} = this.state
+
     return (
       <>
-        {this.tabSelector}
-        <div className={'wizard-step--lp-body'}>{this.tabBody}</div>
-        <PrecisionDropdown setPrecision={setPrecision} precision={precision} />
-        <div className="wizard--button-bar">{this.submitButton}</div>
+        <TabSelector
+          activeLPTab={activeLPTab}
+          tabs={tabs}
+          onClick={this.handleTabClick}
+        />
+
+        <div className="onboarding--admin-user-form">
+          <div className={'wizard-step--lp-body'}>
+            <TabBody
+              onURLChange={this.handleURLChange}
+              activeLPTab={activeLPTab}
+              precision={precision}
+              urlInput={urlInput}
+              lineProtocolBody={lineProtocolBody}
+              setLineProtocolBody={setLineProtocolBody}
+            />
+          </div>
+
+          <PrecisionDropdown
+            setPrecision={setPrecision}
+            precision={precision}
+          />
+        </div>
       </>
     )
   }
 
-  private get tabSelector(): JSX.Element {
-    const {tabs, activeLPTab} = this.props
-    return (
-      <Radio shape={ButtonShape.Default}>
-        {tabs.map(t => (
-          <Radio.Button
-            key={t}
-            id={t}
-            titleText={t}
-            value={t}
-            active={activeLPTab === t}
-            onClick={this.handleTabClick(t)}
-          >
-            {t}
-          </Radio.Button>
-        ))}
-      </Radio>
-    )
+  private handleTabClick = (tab: LineProtocolTab) => {
+    const {setActiveLPTab, setLineProtocolBody} = this.props
+
+    setLineProtocolBody('')
+    setActiveLPTab(tab)
   }
 
-  private get submitButton(): JSX.Element {
-    const {lineProtocolBody} = this.props
-    if (lineProtocolBody) {
-      return (
-        <Button
-          size={ComponentSize.Medium}
-          color={ComponentColor.Primary}
-          text={'submit line protocol'}
-          onClick={this.handleSubmitLineProtocol}
-        />
-      )
-    }
-    return null
-  }
-
-  private handleTabClick = (tab: LineProtocolTab) => () => {
-    const {setActiveLPTab, setLineProtocolBody, activeLPTab} = this.props
-    if (tab !== activeLPTab) {
-      setLineProtocolBody('')
-      setActiveLPTab(tab)
-    }
-  }
-
-  private get tabBody(): JSX.Element {
-    const {setLineProtocolBody, lineProtocolBody, activeLPTab} = this.props
-    const {urlInput} = this.state
-    switch (activeLPTab) {
-      case LineProtocolTab.UploadFile:
-        return (
-          <DragAndDrop
-            submitText="Upload File"
-            handleSubmit={setLineProtocolBody}
-            submitOnDrop={true}
-            submitOnUpload={true}
-          />
-        )
-      case LineProtocolTab.EnterManually:
-        return (
-          <TextArea
-            value={lineProtocolBody}
-            placeholder="Write text here"
-            handleSubmitText={setLineProtocolBody}
-          />
-        )
-      case LineProtocolTab.EnterURL:
-        return (
-          <Form className="onboarding--admin-user-form">
-            <Form.Element label="File URL:">
-              <Input
-                titleText="File URL:"
-                type={InputType.Text}
-                placeholder="http://..."
-                widthPixels={700}
-                value={urlInput}
-                onChange={this.handleURLChange}
-                autoFocus={true}
-              />
-            </Form.Element>
-          </Form>
-        )
-    }
-  }
-
-  private handleURLChange = (e: ChangeEvent<HTMLInputElement>) => {
-    this.setState({urlInput: e.target.value})
-  }
-
-  private handleSubmitLineProtocol = async (): Promise<void> => {
-    const {
-      bucket,
-      org,
-      writeLineProtocolAction,
-      lineProtocolBody,
-      precision,
-    } = this.props
-    writeLineProtocolAction(org, bucket, lineProtocolBody, precision)
+  private handleURLChange = (urlInput: string) => {
+    this.setState({urlInput})
   }
 }
 

ui/src/onboarding/components/configureStep/lineProtocol/Tab.tsx

@@ -0,0 +1,34 @@
+import React, {PureComponent} from 'react'
+
+import {Radio} from 'src/clockface'
+
+import {LineProtocolTab} from 'src/types/v2/dataLoaders'
+
+interface Props {
+  active: boolean
+  tab: LineProtocolTab
+  onClick: (tab: LineProtocolTab) => void
+}
+
+export default class extends PureComponent<Props> {
+  public render() {
+    const {tab, active} = this.props
+
+    return (
+      <Radio.Button
+        key={tab}
+        id={tab}
+        titleText={tab}
+        value={tab}
+        active={active}
+        onClick={this.handleClick}
+      >
+        {tab}
+      </Radio.Button>
+    )
+  }
+
+  private handleClick = () => {
+    this.props.onClick(this.props.tab)
+  }
+}

ui/src/onboarding/components/configureStep/lineProtocol/TabBody.tsx

@@ -0,0 +1,67 @@
+import React, {PureComponent, ChangeEvent} from 'react'
+
+import {Input, InputType, Form} from 'src/clockface'
+import DragAndDrop from 'src/shared/components/DragAndDrop'
+import TextArea from 'src/clockface/components/inputs/TextArea'
+import {LineProtocolTab} from 'src/types/v2/dataLoaders'
+import {setLineProtocolBody} from 'src/onboarding/actions/dataLoaders'
+import {WritePrecision} from 'src/api'
+
+interface Props {
+  lineProtocolBody: string
+  activeLPTab: LineProtocolTab
+  precision: WritePrecision
+  setLineProtocolBody: typeof setLineProtocolBody
+  onURLChange: (url: string) => void
+  urlInput: string
+}
+
+export default class extends PureComponent<Props> {
+  public render() {
+    const {
+      setLineProtocolBody,
+      lineProtocolBody,
+      activeLPTab,
+      urlInput,
+    } = this.props
+
+    switch (activeLPTab) {
+      case LineProtocolTab.UploadFile:
+        return (
+          <DragAndDrop
+            submitText="Upload File"
+            handleSubmit={setLineProtocolBody}
+            submitOnDrop={true}
+            submitOnUpload={true}
+          />
+        )
+      case LineProtocolTab.EnterManually:
+        return (
+          <TextArea
+            value={lineProtocolBody}
+            placeholder="Write text here"
+            onChange={setLineProtocolBody}
+          />
+        )
+      case LineProtocolTab.EnterURL:
+        return (
+          <Form.Element label="File URL:">
+            <Input
+              titleText="File URL:"
+              type={InputType.Text}
+              placeholder="http://..."
+              widthPixels={700}
+              value={urlInput}
+              onChange={this.handleChange}
+              autoFocus={true}
+            />
+          </Form.Element>
+        )
+    }
+  }
+
+  private handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const {value} = e.target
+    this.props.onURLChange(value)
+  }
+}

ui/src/onboarding/components/configureStep/lineProtocol/TabSelector.tsx

@@ -0,0 +1,37 @@
+import React, {PureComponent} from 'react'
+
+import {Radio, ButtonShape} from 'src/clockface'
+import {LineProtocolTab} from 'src/types/v2/dataLoaders'
+
+import Tab from 'src/onboarding/components/configureStep/lineProtocol/Tab'
+
+interface Props {
+  tabs: LineProtocolTab[]
+  activeLPTab: LineProtocolTab
+  onClick: (tab: LineProtocolTab) => void
+}
+
+export default class extends PureComponent<Props> {
+  public render() {
+    const {tabs, activeLPTab} = this.props
+    return (
+      <Radio shape={ButtonShape.Default}>
+        {tabs.map(t => (
+          <Tab
+            tab={t}
+            key={t}
+            active={activeLPTab === t}
+            onClick={this.handleTabClick}
+          />
+        ))}
+      </Radio>
+    )
+  }
+
+  private handleTabClick = (tab: LineProtocolTab) => {
+    const {activeLPTab, onClick} = this.props
+    if (tab !== activeLPTab) {
+      onClick(tab)
+    }
+  }
+}

ui/src/onboarding/components/configureStep/lineProtocol/__snapshots__/LineProtocol.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LineProtocol rendering renders! 1`] = `
-<Form>
+<Form
+  onSubmit={[Function]}
+>
   <h3
     className="wizard-step--title"
   >
@@ -12,8 +14,16 @@ exports[`LineProtocol rendering renders! 1`] = `
   >
     Need help writing InfluxDB Line Protocol? See Documentation
   </h5>
-  <LoadingStatusIndicator
-    onClickRetry={[Function]}
+  <Connect(LineProtocolTabs)
+    bucket="a"
+    org="a"
+    tabs={
+      Array [
+        "uploadFile",
+        "enterManually",
+        "enterURL",
+      ]
+    }
   />
   <OnboardingButtons
     autoFocusNext={true}

ui/src/onboarding/components/configureStep/lineProtocol/__snapshots__/LineProtocolTabs.test.tsx.snap

@@ -2,54 +2,28 @@
 
 exports[`LineProtocolTabs rendering renders! 1`] = `
 <Fragment>
-  <Radio
-    color="primary"
-    shape="none"
-    size="sm"
+  <default_1
+    onClick={[Function]}
+    tabs={
+      Array [
+        "uploadFile",
+        "enterManually",
+        "enterURL",
+      ]
+    }
+  />
+  <div
+    className="onboarding--admin-user-form"
   >
-    <RadioButton
-      active={false}
-      disabled={false}
-      disabledTitleText="This option is disabled"
-      id="uploadFile"
-      key="uploadFile"
-      onClick={[Function]}
-      titleText="uploadFile"
-      value="uploadFile"
+    <div
+      className="wizard-step--lp-body"
     >
-      uploadFile
-    </RadioButton>
-    <RadioButton
-      active={false}
-      disabled={false}
-      disabledTitleText="This option is disabled"
-      id="enterManually"
-      key="enterManually"
-      onClick={[Function]}
-      titleText="enterManually"
-      value="enterManually"
-    >
-      enterManually
-    </RadioButton>
-    <RadioButton
-      active={false}
-      disabled={false}
-      disabledTitleText="This option is disabled"
-      id="enterURL"
-      key="enterURL"
-      onClick={[Function]}
-      titleText="enterURL"
-      value="enterURL"
-    >
-      enterURL
-    </RadioButton>
-  </Radio>
-  <div
-    className="wizard-step--lp-body"
-  />
-  <PrecisionDropdown />
-  <div
-    className="wizard--button-bar"
-  />
+      <default_1
+        onURLChange={[Function]}
+        urlInput=""
+      />
+    </div>
+    <PrecisionDropdown />
+  </div>
 </Fragment>
 `;

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

@@ -3,7 +3,7 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 // Components
-import VerifyDataStep from 'src/onboarding/components/verifyStep/VerifyDataStep'
+import {VerifyDataStep} from 'src/onboarding/components/verifyStep/VerifyDataStep'
 import VerifyDataSwitcher from 'src/onboarding/components/verifyStep/VerifyDataSwitcher'
 import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
 
@@ -11,11 +11,17 @@ import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
 
 // Constants
-import {defaultOnboardingStepProps, cpuTelegrafPlugin} from 'mocks/dummyData'
+import {
+  defaultOnboardingStepProps,
+  cpuTelegrafPlugin,
+  withRouterProps,
+} from 'mocks/dummyData'
+import {RemoteDataState} from 'src/types'
 
 const setup = (override = {}) => {
   const props = {
     ...defaultOnboardingStepProps,
+    ...withRouterProps,
     type: DataLoaderType.Empty,
     telegrafPlugins: [],
     stepIndex: 4,
@@ -24,6 +30,8 @@ const setup = (override = {}) => {
     onSaveTelegrafConfig: jest.fn(),
     onSetActiveTelegrafPlugin: jest.fn(),
     onSetPluginConfiguration: jest.fn(),
+    lpStatus: RemoteDataState.NotStarted,
+    params: {stepID: '', substepID: ''},
     ...override,
   }
 

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

@@ -1,5 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // Components
@@ -18,9 +20,11 @@ import {
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
 import {DataLoaderType, TelegrafPlugin} from 'src/types/v2/dataLoaders'
 import {Form} from 'src/clockface'
-import {NotificationAction} from 'src/types'
+import {NotificationAction, RemoteDataState} from 'src/types'
+import {StepStatus} from 'src/clockface/constants/wizard'
+import {AppState} from 'src/types/v2'
 
-export interface Props extends OnboardingStepProps {
+export interface OwnProps extends OnboardingStepProps {
   notify: NotificationAction
   type: DataLoaderType
   authToken: string
@@ -32,8 +36,21 @@ export interface Props extends OnboardingStepProps {
   stepIndex: number
 }
 
+interface StateProps {
+  lpStatus: RemoteDataState
+}
+
+interface RouterProps {
+  params: {
+    stepID: string
+    substepID: string
+  }
+}
+
+export type Props = RouterProps & OwnProps & WithRouterProps & StateProps
+
 @ErrorHandling
-class VerifyDataStep extends PureComponent<Props> {
+export class VerifyDataStep extends PureComponent<Props> {
   public componentDidMount() {
     const {type, onSetPluginConfiguration, telegrafPlugins} = this.props
 
@@ -51,14 +68,14 @@ class VerifyDataStep extends PureComponent<Props> {
       authToken,
       type,
       onSaveTelegrafConfig,
-      onIncrementCurrentStepIndex,
+      onDecrementCurrentStepIndex,
       onSetStepStatus,
       stepIndex,
       notify,
     } = this.props
 
     return (
-      <Form onSubmit={onIncrementCurrentStepIndex}>
+      <Form onSubmit={this.handleIncrementStep}>
         <div className="onboarding-step">
           <VerifyDataSwitcher
             notify={notify}
@@ -70,6 +87,7 @@ class VerifyDataStep extends PureComponent<Props> {
             bucket={_.get(setupParams, 'bucket', '')}
             onSetStepStatus={onSetStepStatus}
             stepIndex={stepIndex}
+            onDecrementCurrentStep={onDecrementCurrentStepIndex}
           />
           <OnboardingButtons
             onClickBack={this.handleDecrementStep}
@@ -98,6 +116,29 @@ class VerifyDataStep extends PureComponent<Props> {
     return type
   }
 
+  private handleIncrementStep = () => {
+    const {
+      onIncrementCurrentStepIndex,
+      onSetStepStatus,
+      type,
+      lpStatus,
+    } = this.props
+    const {
+      params: {stepID},
+    } = this.props
+
+    if (
+      type === DataLoaderType.LineProtocol &&
+      lpStatus === RemoteDataState.Error
+    ) {
+      onSetStepStatus(parseInt(stepID, 10), StepStatus.Error)
+    } else {
+      onSetStepStatus(parseInt(stepID, 10), StepStatus.Complete)
+    }
+
+    onIncrementCurrentStepIndex()
+  }
+
   private handleDecrementStep = () => {
     const {
       telegrafPlugins,
@@ -124,4 +165,14 @@ class VerifyDataStep extends PureComponent<Props> {
   }
 }
 
-export default VerifyDataStep
+const mstp = ({
+  onboarding: {
+    dataLoaders: {lpStatus},
+  },
+}: AppState): StateProps => ({
+  lpStatus,
+})
+
+export default withRouter<OwnProps>(
+  connect<StateProps, {}, OwnProps>(mstp)(VerifyDataStep)
+)

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

@@ -3,11 +3,12 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 // Components
-import VerifyDataSwitcher from 'src/onboarding/components/verifyStep/VerifyDataSwitcher'
+import {VerifyDataSwitcher} from 'src/onboarding/components/verifyStep/VerifyDataSwitcher'
 import DataStreaming from 'src/onboarding/components/verifyStep/DataStreaming'
 
 // Types
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
+import {RemoteDataState} from 'src/types'
 
 const setup = (override = {}) => {
   const props = {
@@ -21,6 +22,8 @@ const setup = (override = {}) => {
     onSaveTelegrafConfig: jest.fn(),
     stepIndex: 4,
     onSetStepStatus: jest.fn(),
+    onDecrementCurrentStep: jest.fn(),
+    lpStatus: RemoteDataState.NotStarted,
     ...override,
   }
 

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

@@ -1,5 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -13,9 +14,11 @@ import {StepStatus} from 'src/clockface/constants/wizard'
 
 // Types
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
-import {NotificationAction} from 'src/types'
+import {NotificationAction, RemoteDataState} from 'src/types'
+import StatusIndicator from 'src/onboarding/components/verifyStep/lineProtocol/StatusIndicator'
+import {AppState} from 'src/types/v2'
 
-export interface Props {
+interface OwnProps {
   notify: NotificationAction
   type: DataLoaderType
   org: string
@@ -25,10 +28,17 @@ export interface Props {
   telegrafConfigID: string
   onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync
   onSetStepStatus: (index: number, status: StepStatus) => void
+  onDecrementCurrentStep: () => void
 }
 
+interface StateProps {
+  lpStatus: RemoteDataState
+}
+
+export type Props = OwnProps & StateProps
+
 @ErrorHandling
-class VerifyDataSwitcher extends PureComponent<Props> {
+export class VerifyDataSwitcher extends PureComponent<Props> {
   public render() {
     const {
       org,
@@ -40,6 +50,7 @@ class VerifyDataSwitcher extends PureComponent<Props> {
       telegrafConfigID,
       onSaveTelegrafConfig,
       notify,
+      lpStatus,
     } = this.props
 
     switch (type) {
@@ -57,11 +68,28 @@ class VerifyDataSwitcher extends PureComponent<Props> {
           />
         )
       case DataLoaderType.LineProtocol:
-        return <div>Yay data has been loaded into {bucket}!</div>
+        return (
+          <StatusIndicator
+            status={lpStatus}
+            onClickRetry={this.handleClickRetry}
+          />
+        )
       default:
         return <div />
     }
   }
+
+  private handleClickRetry = () => {
+    this.props.onDecrementCurrentStep()
+  }
 }
 
-export default VerifyDataSwitcher
+const mstp = ({
+  onboarding: {
+    dataLoaders: {lpStatus},
+  },
+}: AppState): StateProps => ({
+  lpStatus,
+})
+
+export default connect<StateProps, {}, OwnProps>(mstp)(VerifyDataSwitcher)

ui/src/onboarding/components/verifyStep/lineProtocol/StatusIndicator.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 // Components
-import LoadingStatusIndicator from 'src/onboarding/components/configureStep/lineProtocol/LoadingStatusIndicator'
+import StatusIndicator from 'src/onboarding/components/verifyStep/lineProtocol/StatusIndicator'
 
 // Types
 import {RemoteDataState} from 'src/types'
@@ -14,12 +14,12 @@ const setup = (override?) => {
     ...override,
   }
 
-  const wrapper = shallow(<LoadingStatusIndicator {...props} />)
+  const wrapper = shallow(<StatusIndicator {...props} />)
 
   return {wrapper}
 }
 
-describe('LoadingStatusIndicator', () => {
+describe('StatusIndicator', () => {
   describe('rendering', () => {
     it('renders!', () => {
       const {wrapper} = setup()

ui/src/onboarding/components/verifyStep/lineProtocol/StatusIndicator.tsx

@@ -2,12 +2,7 @@
 import React, {PureComponent} from 'react'
 import classnames from 'classnames'
 
-import {
-  SparkleSpinner,
-  Button,
-  ComponentColor,
-  ComponentSize,
-} from 'src/clockface'
+import {SparkleSpinner} from 'src/clockface'
 
 // Types
 import {RemoteDataState} from 'src/types'
@@ -17,7 +12,7 @@ interface Props {
   onClickRetry: () => void
 }
 
-class LoadingStatusIndicator extends PureComponent<Props> {
+class StatusIndicator extends PureComponent<Props> {
   public render() {
     const {status} = this.props
     return (
@@ -26,7 +21,6 @@ class LoadingStatusIndicator extends PureComponent<Props> {
           <div className={'wizard-step--sparkle-container'}>
             <SparkleSpinner loading={status} />
           </div>
-          {this.retryButton}
         </div>
         <div className={'wizard-step--footer'}>
           <div className={this.footerClass}>{this.footerText}</div>
@@ -36,23 +30,6 @@ class LoadingStatusIndicator extends PureComponent<Props> {
     )
   }
 
-  private get retryButton(): JSX.Element {
-    const {status, onClickRetry} = this.props
-    if (status === RemoteDataState.Error) {
-      return (
-        <Button
-          text={'Try Again'}
-          color={ComponentColor.Primary}
-          size={ComponentSize.Small}
-          customClass={'wizard-step--retry-button'}
-          onClick={onClickRetry}
-        />
-      )
-    } else {
-      return null
-    }
-  }
-
   private get footerClass(): string {
     const {status} = this.props
 
@@ -75,4 +52,4 @@ class LoadingStatusIndicator extends PureComponent<Props> {
   }
 }
 
-export default LoadingStatusIndicator
+export default StatusIndicator

ui/src/onboarding/components/verifyStep/lineProtocol/__snapshots__/StatusIndicator.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LoadingStatusIndicator rendering renders! 1`] = `
+exports[`StatusIndicator rendering renders! 1`] = `
 <Fragment>
   <div
     className="wizard-step--top-container"

ui/src/shared/components/DragAndDrop.tsx

@@ -136,6 +136,7 @@ class DragAndDrop extends PureComponent<Props, State> {
           <button
             className="btn btn-sm btn-default"
             onClick={this.handleCancelFile}
+            type="button"
           >
             Cancel
           </button>
@@ -151,6 +152,7 @@ class DragAndDrop extends PureComponent<Props, State> {
         <button
           className="btn btn-sm btn-default"
           onClick={this.handleCancelFile}
+          type="button"
         >
           Cancel
         </button>