Merge pull request #2010 from influxdata/dataLoaders/configure-next-back

fix(ui/dataLoaders): Update onboarding button labels and functionality
2018-12-18 11:26:05 -08:00 · 2018-12-18 11:26:05 -08:00 · 52b05fb5a3
parent e3eff83aaa 388265604b
commit 52b05fb5a3
16 changed files with 849 additions and 49 deletions
--- a/ui/mocks/dummyData.ts
+++ b/ui/mocks/dummyData.ts
@ -282,6 +282,7 @@ export const defaultOnboardingStepProps: OnboardingStepProps = {
  notify: jest.fn(),
  onCompleteSetup: jest.fn(),
  onExit: jest.fn(),
+  onSetSubstepIndex: jest.fn(),
 }

 export const token =
--- a/ui/src/onboarding/components/AdminStep.test.tsx
+++ b/ui/src/onboarding/components/AdminStep.test.tsx
@ -0,0 +1,27 @@
+// Libraries
+import React from 'react'
+import {shallow} from 'enzyme'
+
+// Components
+import AdminStep from 'src/onboarding/components/AdminStep'
+
+// Dummy Data
+import {defaultOnboardingStepProps} from 'mocks/dummyData'
+
+const setup = (override = {}) => {
+  const props = {
+    ...defaultOnboardingStepProps,
+    ...override,
+  }
+
+  return shallow(<AdminStep {...props} />)
+}
+
+describe('Onboarding.Components.AdminStep', () => {
+  it('renders', () => {
+    const wrapper = setup()
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper).toMatchSnapshot()
+  })
+})
--- a/ui/src/onboarding/components/AdminStep.tsx
+++ b/ui/src/onboarding/components/AdminStep.tsx
@ -148,13 +148,13 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
        <div className="wizard-button-bar">
          <Button
            color={ComponentColor.Default}
-            text="Back"
+            text="Back to Start"
            size={ComponentSize.Medium}
            onClick={this.props.onDecrementCurrentStepIndex}
          />
          <Button
            color={ComponentColor.Primary}
-            text="Next"
+            text="Continue to Data Loading"
            size={ComponentSize.Medium}
            onClick={this.handleNext}
            status={this.nextButtonStatus}
--- a/ui/src/onboarding/components/CompletionStep.test.tsx
+++ b/ui/src/onboarding/components/CompletionStep.test.tsx
@ -0,0 +1,27 @@
+// Libraries
+import React from 'react'
+import {shallow} from 'enzyme'
+
+// Components
+import CompletionStep from 'src/onboarding/components/CompletionStep'
+
+// Dummy Data
+import {defaultOnboardingStepProps} from 'mocks/dummyData'
+
+const setup = (override = {}) => {
+  const props = {
+    ...defaultOnboardingStepProps,
+    ...override,
+  }
+
+  return shallow(<CompletionStep {...props} />)
+}
+
+describe('Onboarding.Components.CompletionStep', () => {
+  it('renders', () => {
+    const wrapper = setup()
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper).toMatchSnapshot()
+  })
+})
--- a/ui/src/onboarding/components/CompletionStep.tsx
+++ b/ui/src/onboarding/components/CompletionStep.tsx
@ -29,7 +29,7 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
        <div className="wizard-button-bar">
          <Button
            color={ComponentColor.Default}
-            text="Back"
+            text="Back to Verify"
            size={ComponentSize.Medium}
            onClick={onDecrementCurrentStepIndex}
          />
--- a/ui/src/onboarding/components/OnboardingSideBar.tsx
+++ b/ui/src/onboarding/components/OnboardingSideBar.tsx
@ -84,7 +84,7 @@ class OnboardingSideBar extends Component<Props> {
    )
  }

-  private get streamingButton(): JSX.Element {
+  private get addSourceButton(): JSX.Element {
    const {onNewSourceClick} = this.props

    return (
@ -104,9 +104,9 @@ class OnboardingSideBar extends Component<Props> {
    const {telegrafConfigID} = this.props

    if (telegrafConfigID) {
-      return [this.downloadButton, this.streamingButton]
+      return [this.downloadButton, this.addSourceButton]
    }
-    return [this.streamingButton]
+    return [this.addSourceButton]
  }

  private handleDownload = async () => {
--- a/ui/src/onboarding/components/snapshots/AdminStep.test.tsx.snap
+++ b/ui/src/onboarding/components/snapshots/AdminStep.test.tsx.snap
@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Onboarding.Components.AdminStep renders 1`] = `
+<div
+  className="onboarding-step"
+>
+  <h3
+    className="wizard-step--title"
+  >
+    Setup Admin User
+  </h3>
+  <h5
+    className="wizard-step--sub-title"
+  >
+    You will be able to create additional Users, Buckets and Organizations later
+  </h5>
+  <Form
+    className="onboarding--admin-user-form"
+  >
+    <FormElement
+      colsXS={6}
+      errorMessage=""
+      helpText=""
+      label="Admin Username"
+      offsetXS={3}
+    >
+      <Input
+        autoFocus={true}
+        autocomplete="off"
+        disabledTitleText="Admin username has been set"
+        icon="checkmark"
+        name=""
+        onChange={[Function]}
+        placeholder=""
+        size="md"
+        spellCheck={false}
+        status="disabled"
+        titleText="Admin Username"
+        value=""
+      />
+    </FormElement>
+    <FormElement
+      colsXS={3}
+      errorMessage=""
+      helpText=""
+      label="Admin Password"
+      offsetXS={3}
+    >
+      <Input
+        autoFocus={false}
+        autocomplete="off"
+        disabledTitleText="Admin password has been set"
+        icon="checkmark"
+        name=""
+        onChange={[Function]}
+        placeholder=""
+        size="md"
+        spellCheck={false}
+        status="disabled"
+        titleText="Admin Password"
+        type="password"
+        value=""
+      />
+    </FormElement>
+    <FormElement
+      colsXS={3}
+      errorMessage=""
+      helpText=""
+      label="Confirm Admin Password"
+    >
+      <Input
+        autoFocus={false}
+        autocomplete="off"
+        disabledTitleText="Admin password has been set"
+        icon="checkmark"
+        name=""
+        onChange={[Function]}
+        placeholder=""
+        size="md"
+        spellCheck={false}
+        status="disabled"
+        titleText="Confirm Admin Password"
+        type="password"
+        value=""
+      />
+    </FormElement>
+    <FormElement
+      colsXS={6}
+      errorMessage=""
+      helpText=""
+      label="Default Organization Name"
+      offsetXS={3}
+    >
+      <Input
+        autoFocus={false}
+        autocomplete="off"
+        disabledTitleText="Default organization name has been set"
+        icon="checkmark"
+        name=""
+        onChange={[Function]}
+        placeholder="Your organization is where everything you create lives"
+        size="md"
+        spellCheck={false}
+        status="default"
+        titleText="Default Organization Name"
+        value=""
+      />
+    </FormElement>
+    <FormElement
+      colsXS={6}
+      errorMessage=""
+      helpText=""
+      label="Default Bucket Name"
+      offsetXS={3}
+    >
+      <Input
+        autoFocus={false}
+        autocomplete="off"
+        disabledTitleText="Default bucket name has been set"
+        icon="checkmark"
+        name=""
+        onChange={[Function]}
+        placeholder="Your bucket is where you will store all your data"
+        size="md"
+        spellCheck={false}
+        status="disabled"
+        titleText="Default Bucket Name"
+        value=""
+      />
+    </FormElement>
+  </Form>
+  <div
+    className="wizard-button-bar"
+  >
+    <Button
+      active={false}
+      color="default"
+      onClick={[MockFunction]}
+      shape="none"
+      size="md"
+      status="default"
+      text="Back to Start"
+      type="submit"
+    />
+    <Button
+      active={false}
+      color="primary"
+      onClick={[Function]}
+      shape="none"
+      size="md"
+      status="disabled"
+      text="Continue to Data Loading"
+      titleText="All fields are required to continue"
+      type="submit"
+    />
+  </div>
+</div>
+`;
--- a/ui/src/onboarding/components/snapshots/CompletionStep.test.tsx.snap
+++ b/ui/src/onboarding/components/snapshots/CompletionStep.test.tsx.snap
@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Onboarding.Components.CompletionStep renders 1`] = `
+<div
+  className="onboarding-step"
+>
+  <div
+    className="splash-logo secondary"
+  />
+  <h3
+    className="wizard-step--title"
+  >
+    Setup Complete!
+  </h3>
+  <h5
+    className="wizard-step--sub-title"
+  />
+  <div
+    className="wizard-button-bar"
+  >
+    <Button
+      active={false}
+      color="default"
+      onClick={[MockFunction]}
+      shape="none"
+      size="md"
+      status="default"
+      text="Back to Verify"
+      type="submit"
+    />
+    <Button
+      active={false}
+      color="success"
+      onClick={[MockFunction]}
+      shape="none"
+      size="md"
+      status="default"
+      text="Go to InfluxDB 2.0"
+      type="submit"
+    />
+  </div>
+</div>
+`;
--- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.test.tsx
+++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.test.tsx
@ -0,0 +1,177 @@
+// Libraries
+import React from 'react'
+import {shallow} from 'enzyme'
+
+// Components
+import {ConfigureDataSourceStep} from 'src/onboarding/components/configureStep/ConfigureDataSourceStep'
+import ConfigureDataSourceSwitcher from 'src/onboarding/components/configureStep/ConfigureDataSourceSwitcher'
+import {Button} from 'src/clockface'
+
+// Types
+import {DataLoaderType} from 'src/types/v2/dataLoaders'
+
+// Dummy Data
+import {
+  defaultOnboardingStepProps,
+  cpuTelegrafPlugin,
+  redisTelegrafPlugin,
+  diskTelegrafPlugin,
+} from 'mocks/dummyData'
+
+const setup = (override = {}) => {
+  const props = {
+    ...defaultOnboardingStepProps,
+    telegrafPlugins: [],
+    onSetActiveTelegrafPlugin: jest.fn(),
+    onUpdateTelegrafPluginConfig: jest.fn(),
+    onSetPluginConfiguration: jest.fn(),
+    type: DataLoaderType.Empty,
+    onAddConfigValue: jest.fn(),
+    onRemoveConfigValue: jest.fn(),
+    onSaveTelegrafConfig: jest.fn(),
+    authToken: '',
+    params: {
+      stepID: '3',
+      substepID: '0',
+    },
+    location: null,
+    router: null,
+    routes: [],
+    ...override,
+  }
+
+  return shallow(<ConfigureDataSourceStep {...props} />)
+}
+
+describe('Onboarding.Components.ConfigureStep.ConfigureDataSourceStep', () => {
+  it('renders switcher and buttons', async () => {
+    const wrapper = setup()
+    const switcher = wrapper.find(ConfigureDataSourceSwitcher)
+    const buttons = wrapper.find(Button)
+
+    expect(wrapper.exists()).toBe(true)
+    expect(switcher.exists()).toBe(true)
+    expect(buttons.length).toBe(3)
+  })
+
+  describe('if type is not streaming', () => {
+    it('renders back and next buttons with correct text', () => {
+      const wrapper = setup({type: DataLoaderType.LineProtocol})
+      const backButton = wrapper.find('[data-test="back"]')
+      const nextButton = wrapper.find('[data-test="next"]')
+
+      expect(backButton.prop('text')).toBe('Back to Select Data Source Type')
+      expect(nextButton.prop('text')).toBe('Continue to Verify')
+    })
+  })
+
+  describe('if type is streaming', () => {
+    describe('if the substep is 0', () => {
+      it('renders back button with correct text', () => {
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          params: {stepID: '3', substepID: '0'},
+        })
+        const backButton = wrapper.find('[data-test="back"]')
+
+        expect(backButton.prop('text')).toBe('Back to Select Streaming Sources')
+      })
+
+      describe('when the back button is clicked', () => {
+        it('calls prop functions as expected', () => {
+          const onSetActiveTelegrafPlugin = jest.fn()
+          const onSetSubstepIndex = jest.fn()
+          const wrapper = setup({
+            type: DataLoaderType.Streaming,
+            telegrafPlugins: [cpuTelegrafPlugin],
+            params: {stepID: '3', substepID: '0'},
+            onSetActiveTelegrafPlugin,
+            onSetSubstepIndex,
+          })
+          const backButton = wrapper.find('[data-test="back"]')
+          backButton.simulate('click')
+
+          expect(onSetSubstepIndex).toBeCalledWith(2, 'streaming')
+        })
+      })
+    })
+
+    describe('if its the last stubstep', () => {
+      it('renders the next button with correct text', () => {
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          telegrafPlugins: [cpuTelegrafPlugin],
+          params: {stepID: '3', substepID: '1'},
+        })
+        const nextButton = wrapper.find('[data-test="next"]')
+
+        expect(nextButton.prop('text')).toBe('Continue to Verify')
+      })
+    })
+
+    describe('if its the neither the last or firt stubstep', () => {
+      it('renders the next and back buttons with correct text', () => {
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          telegrafPlugins: [
+            cpuTelegrafPlugin,
+            redisTelegrafPlugin,
+            diskTelegrafPlugin,
+          ],
+          params: {stepID: '3', substepID: '1'},
+        })
+        const nextButton = wrapper.find('[data-test="next"]')
+        const backButton = wrapper.find('[data-test="back"]')
+
+        expect(nextButton.prop('text')).toBe('Continue to Disk')
+        expect(backButton.prop('text')).toBe('Back to Cpu')
+      })
+
+      describe('when the back button is clicked', () => {
+        it('calls prop functions as expected', () => {
+          const onSetActiveTelegrafPlugin = jest.fn()
+          const onSetSubstepIndex = jest.fn()
+          const wrapper = setup({
+            type: DataLoaderType.Streaming,
+            telegrafPlugins: [
+              cpuTelegrafPlugin,
+              redisTelegrafPlugin,
+              diskTelegrafPlugin,
+            ],
+            params: {stepID: '3', substepID: '1'},
+            onSetActiveTelegrafPlugin,
+            onSetSubstepIndex,
+          })
+          const backButton = wrapper.find('[data-test="back"]')
+          backButton.simulate('click')
+
+          expect(onSetActiveTelegrafPlugin).toBeCalledWith('cpu')
+          expect(onSetSubstepIndex).toBeCalledWith(3, 0)
+        })
+      })
+
+      describe('when the next button is clicked', () => {
+        it('calls prop functions as expected', () => {
+          const onSetActiveTelegrafPlugin = jest.fn()
+          const onSetSubstepIndex = jest.fn()
+          const wrapper = setup({
+            type: DataLoaderType.Streaming,
+            telegrafPlugins: [
+              cpuTelegrafPlugin,
+              redisTelegrafPlugin,
+              diskTelegrafPlugin,
+            ],
+            params: {stepID: '3', substepID: '1'},
+            onSetActiveTelegrafPlugin,
+            onSetSubstepIndex,
+          })
+          const nextButton = wrapper.find('[data-test="next"]')
+          nextButton.simulate('click')
+
+          expect(onSetActiveTelegrafPlugin).toBeCalledWith('disk')
+          expect(onSetSubstepIndex).toBeCalledWith(3, 2)
+        })
+      })
+    })
+  })
+})
--- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
+++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
@ -60,7 +60,7 @@ interface RouterProps {
 type Props = OwnProps & WithRouterProps & RouterProps

@ErrorHandling
-class ConfigureDataSourceStep extends PureComponent<Props> {
+export class ConfigureDataSourceStep extends PureComponent<Props> {
  constructor(props: Props) {
    super(props)
  }
@ -108,17 +108,19 @@ class ConfigureDataSourceStep extends PureComponent<Props> {
          <div className="wizard-button-bar">
            <Button
              color={ComponentColor.Default}
-              text="Back"
+              text={this.backButtonText}
              size={ComponentSize.Medium}
              onClick={this.handlePrevious}
+              data-test="back"
            />
            <Button
              color={ComponentColor.Primary}
-              text="Next"
+              text={this.nextButtonText}
              size={ComponentSize.Medium}
              onClick={this.handleNext}
              status={ComponentStatus.Default}
              titleText={'Next'}
+              data-test="next"
            />
          </div>
          {this.skipLink}
@ -127,6 +129,48 @@ class ConfigureDataSourceStep extends PureComponent<Props> {
    )
  }

+  private get nextButtonText(): string {
+    const {
+      telegrafPlugins,
+      params: {substepID},
+      type,
+    } = this.props
+
+    const index = +substepID
+
+    if (type === DataLoaderType.Streaming) {
+      if (index + 1 > telegrafPlugins.length - 1) {
+        return 'Continue to Verify'
+      }
+      return `Continue to ${_.startCase(
+        _.get(telegrafPlugins, `${index + 1}.name`)
+      )}`
+    }
+
+    return 'Continue to Verify'
+  }
+
+  private get backButtonText(): string {
+    const {
+      telegrafPlugins,
+      params: {substepID},
+      type,
+    } = this.props
+
+    const index = +substepID
+
+    if (type === DataLoaderType.Streaming) {
+      if (index < 1) {
+        return 'Back to Select Streaming Sources'
+      }
+      return `Back to ${_.startCase(
+        _.get(telegrafPlugins, `${index - 1}.name`)
+      )}`
+    }
+
+    return 'Back to Select Data Source Type'
+  }
+
  private get skipLink() {
    return (
      <Button
@ -156,9 +200,9 @@ class ConfigureDataSourceStep extends PureComponent<Props> {
      authToken,
      notify,
      params: {substepID, stepID},
-      router,
      type,
      onSaveTelegrafConfig,
+      onSetSubstepIndex,
    } = this.props

    const index = +substepID
@ -182,19 +226,19 @@ class ConfigureDataSourceStep extends PureComponent<Props> {
    } else {
      const name = _.get(telegrafPlugins, `${index + 1}.name`, '')
      onSetActiveTelegrafPlugin(name)
-
-      router.push(`/onboarding/${stepID}/${index + 1}`)
+      onSetSubstepIndex(+stepID, index + 1)
    }
  }

  private handlePrevious = () => {
    const {
-      router,
      type,
      onSetActiveTelegrafPlugin,
      onSetPluginConfiguration,
-      params: {substepID},
+      params: {substepID, stepID},
      telegrafPlugins,
+      onSetSubstepIndex,
+      onDecrementCurrentStepIndex,
    } = this.props

    const index = +substepID
@ -203,16 +247,20 @@ class ConfigureDataSourceStep extends PureComponent<Props> {
    if (type === DataLoaderType.Streaming) {
      onSetPluginConfiguration(telegrafPlugin)
      this.handleSetStepStatus()
+
+      if (index > 0) {
+        const name = _.get(telegrafPlugins, `${index - 1}.name`)
+        onSetActiveTelegrafPlugin(name)
+        onSetSubstepIndex(+stepID, index - 1)
+      } else {
+        onSetActiveTelegrafPlugin('')
+        onSetSubstepIndex(+stepID - 1, 'streaming')
+      }
+
+      return
    }

-    if (index >= 0) {
-      const name = _.get(telegrafPlugins, `${index - 1}.name`)
-      onSetActiveTelegrafPlugin(name)
-    } else {
-      onSetActiveTelegrafPlugin('')
-    }
-
-    router.goBack()
+    onDecrementCurrentStepIndex()
  }

  private handleSetStepStatus = () => {
--- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx
+++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx
@ -0,0 +1,180 @@
+// Libraries
+import React from 'react'
+import {shallow} from 'enzyme'
+
+// Components
+import {SelectDataSourceStep} from 'src/onboarding/components/selectionStep/SelectDataSourceStep'
+import StreamingSelector from 'src/onboarding/components/selectionStep/StreamingSelector'
+import TypeSelector from 'src/onboarding/components/selectionStep/TypeSelector'
+import {ComponentStatus} from 'src/clockface'
+
+// Types
+import {DataLoaderType} from 'src/types/v2/dataLoaders'
+
+// Dummy Data
+import {defaultOnboardingStepProps, cpuTelegrafPlugin} from 'mocks/dummyData'
+
+const setup = (override = {}) => {
+  const props = {
+    ...defaultOnboardingStepProps,
+    bucket: '',
+    telegrafPlugins: [],
+    pluginBundles: [],
+    type: DataLoaderType.Empty,
+    onAddPluginBundle: jest.fn(),
+    onRemovePluginBundle: jest.fn(),
+    onSetDataLoadersType: jest.fn(),
+    onSetActiveTelegrafPlugin: jest.fn(),
+    onSetStepStatus: jest.fn(),
+    params: {
+      stepID: '2',
+      substepID: undefined,
+    },
+    location: null,
+    router: null,
+    routes: [],
+    ...override,
+  }
+
+  return shallow(<SelectDataSourceStep {...props} />)
+}
+
+describe('Onboarding.Components.SelectionStep.SelectDataSourceStep', () => {
+  describe('if type is empty', () => {
+    it('renders type selector and buttons', async () => {
+      const wrapper = setup()
+      const typeSelector = wrapper.find(TypeSelector)
+      const backButton = wrapper.find('[data-test="back"]')
+      const nextButton = wrapper.find('[data-test="next"]')
+
+      expect(wrapper.exists()).toBe(true)
+      expect(typeSelector.exists()).toBe(true)
+      expect(backButton.prop('text')).toBe('Back to Admin Setup')
+      expect(nextButton.prop('text')).toBe('Continue to Configuration')
+      expect(nextButton.prop('status')).toBe(ComponentStatus.Disabled)
+    })
+
+    describe('if back button is clicked', () => {
+      it('calls prop functions as expected', () => {
+        const onDecrementCurrentStepIndex = jest.fn()
+        const wrapper = setup({
+          onDecrementCurrentStepIndex,
+        })
+        const backButton = wrapper.find('[data-test="back"]')
+        backButton.simulate('click')
+
+        expect(onDecrementCurrentStepIndex).toBeCalled()
+      })
+    })
+
+    describe('if next button is clicked', () => {
+      it('calls prop functions as expected', () => {
+        const onIncrementCurrentStepIndex = jest.fn()
+        const wrapper = setup({onIncrementCurrentStepIndex})
+        const nextButton = wrapper.find('[data-test="next"]')
+        nextButton.simulate('click')
+
+        expect(onIncrementCurrentStepIndex).toBeCalled()
+      })
+    })
+  })
+
+  describe('if type is line protocol', () => {
+    it('renders back and next buttons with correct text', () => {
+      const wrapper = setup({type: DataLoaderType.LineProtocol})
+      const backButton = wrapper.find('[data-test="back"]')
+      const nextButton = wrapper.find('[data-test="next"]')
+
+      expect(backButton.prop('text')).toBe('Back to Admin Setup')
+      expect(nextButton.prop('text')).toBe(
+        'Continue to Line Protocol Configuration'
+      )
+      expect(nextButton.prop('status')).toBe(ComponentStatus.Default)
+    })
+  })
+
+  describe('if type and substep is streaming', () => {
+    describe('if there are no plugins selected', () => {
+      it('renders streaming selector with buttons', () => {
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          params: {stepID: '2', substepID: 'streaming'},
+        })
+        const streamingSelector = wrapper.find(StreamingSelector)
+        const backButton = wrapper.find('[data-test="back"]')
+        const nextButton = wrapper.find('[data-test="next"]')
+
+        expect(streamingSelector.exists()).toBe(true)
+        expect(backButton.prop('text')).toBe('Back to Data Source Selection')
+        expect(nextButton.prop('text')).toBe('Continue to Plugin Configuration')
+        expect(nextButton.prop('status')).toBe(ComponentStatus.Disabled)
+      })
+    })
+
+    describe('if there are plugins selected', () => {
+      it('renders back and next button with correct text', () => {
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          params: {stepID: '2', substepID: 'streaming'},
+          telegrafPlugins: [cpuTelegrafPlugin],
+        })
+        const backButton = wrapper.find('[data-test="back"]')
+        const nextButton = wrapper.find('[data-test="next"]')
+
+        expect(backButton.prop('text')).toBe('Back to Data Source Selection')
+        expect(nextButton.prop('text')).toBe('Continue to Cpu')
+        expect(nextButton.prop('status')).toBe(ComponentStatus.Default)
+      })
+    })
+
+    describe('if back button is clicked', () => {
+      it('calls prop functions as expected', () => {
+        const onSetCurrentStepIndex = jest.fn()
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          params: {stepID: '2', substepID: 'streaming'},
+          telegrafPlugins: [cpuTelegrafPlugin],
+          onSetCurrentStepIndex,
+        })
+        const backButton = wrapper.find('[data-test="back"]')
+        backButton.simulate('click')
+
+        expect(onSetCurrentStepIndex).toBeCalledWith(2)
+      })
+    })
+
+    describe('if next button is clicked', () => {
+      it('calls prop functions as expected', () => {
+        const onIncrementCurrentStepIndex = jest.fn()
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          params: {stepID: '2', substepID: 'streaming'},
+          telegrafPlugins: [cpuTelegrafPlugin],
+          onIncrementCurrentStepIndex,
+        })
+        const nextButton = wrapper.find('[data-test="next"]')
+        nextButton.simulate('click')
+
+        expect(onIncrementCurrentStepIndex).toBeCalled()
+      })
+    })
+  })
+
+  describe('if type is streaming but sub step is not', () => {
+    describe('if next button is clicked', () => {
+      it('calls prop functions as expected', () => {
+        const onSetSubstepIndex = jest.fn()
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          params: {stepID: '2', substepID: undefined},
+          telegrafPlugins: [cpuTelegrafPlugin],
+          onSetSubstepIndex,
+        })
+        const nextButton = wrapper.find('[data-test="next"]')
+        nextButton.simulate('click')
+
+        expect(onSetSubstepIndex).toBeCalledWith(2, 'streaming')
+      })
+    })
+  })
+})
--- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
+++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
@ -58,7 +58,7 @@ interface State {
 }

@ErrorHandling
-class SelectDataSourceStep extends PureComponent<Props, State> {
+export class SelectDataSourceStep extends PureComponent<Props, State> {
  constructor(props: Props) {
    super(props)

@ -77,17 +77,19 @@ class SelectDataSourceStep extends PureComponent<Props, State> {
          <div className="wizard-button-bar">
            <Button
              color={ComponentColor.Default}
-              text="Back"
+              text={this.backButtonText}
              size={ComponentSize.Medium}
              onClick={this.handleClickBack}
+              data-test="back"
            />
            <Button
              color={ComponentColor.Primary}
-              text="Next"
+              text={this.nextButtonText}
              size={ComponentSize.Medium}
              onClick={this.handleClickNext}
-              status={ComponentStatus.Default}
+              status={this.nextButtonStatus}
              titleText={'Next'}
+              data-test="next"
            />
          </div>
          {this.skipLink}
@ -96,6 +98,53 @@ class SelectDataSourceStep extends PureComponent<Props, State> {
    )
  }

+  private get nextButtonStatus(): ComponentStatus {
+    const {type, telegrafPlugins} = this.props
+
+    const isTypeEmpty = type === DataLoaderType.Empty
+    const isStreamingWithoutPlugin =
+      type === DataLoaderType.Streaming &&
+      this.isStreaming &&
+      !telegrafPlugins.length
+
+    if (isTypeEmpty || isStreamingWithoutPlugin) {
+      return ComponentStatus.Disabled
+    }
+
+    return ComponentStatus.Default
+  }
+
+  private get nextButtonText(): string {
+    const {type, telegrafPlugins} = this.props
+
+    switch (type) {
+      case DataLoaderType.CSV:
+        return 'Continue to CSV Configuration'
+      case DataLoaderType.Streaming:
+        if (this.isStreaming) {
+          if (telegrafPlugins.length) {
+            return `Continue to ${_.startCase(telegrafPlugins[0].name)}`
+          }
+          return 'Continue to Plugin Configuration'
+        }
+        return 'Continue to Streaming Selection'
+      case DataLoaderType.LineProtocol:
+        return 'Continue to Line Protocol Configuration'
+      case DataLoaderType.Empty:
+        return 'Continue to Configuration'
+    }
+  }
+
+  private get backButtonText(): string {
+    if (this.props.type === DataLoaderType.Streaming) {
+      if (this.isStreaming) {
+        return 'Back to Data Source Selection'
+      }
+    }
+
+    return 'Back to Admin Setup'
+  }
+
  private get title(): string {
    const {bucket} = this.props
    if (this.isStreaming) {
@ -145,25 +194,38 @@ class SelectDataSourceStep extends PureComponent<Props, State> {

  private handleClickNext = () => {
    const {
-      router,
      params: {stepID},
      telegrafPlugins,
      onSetActiveTelegrafPlugin,
+      onSetSubstepIndex,
    } = this.props

    if (this.props.type === DataLoaderType.Streaming && !this.isStreaming) {
-      router.push(`/onboarding/${stepID}/streaming`)
+      onSetSubstepIndex(+stepID, 'streaming')
+      onSetActiveTelegrafPlugin('')
      return
    }

-    const name = _.get(telegrafPlugins, '0.name', '')
-    onSetActiveTelegrafPlugin(name)
+    if (this.isStreaming) {
+      const name = _.get(telegrafPlugins, '0.name', '')
+      onSetActiveTelegrafPlugin(name)
+    }

    this.handleSetStepStatus()
    this.props.onIncrementCurrentStepIndex()
  }

  private handleClickBack = () => {
+    const {
+      params: {stepID},
+      onSetCurrentStepIndex,
+    } = this.props
+
+    if (this.isStreaming) {
+      onSetCurrentStepIndex(+stepID)
+      return
+    }
+
    this.props.onDecrementCurrentStepIndex()
  }

--- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx
+++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx
@ -11,12 +11,12 @@ import {Button} from 'src/clockface'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'

 // Constants
-import {defaultOnboardingStepProps} from 'mocks/dummyData'
+import {defaultOnboardingStepProps, cpuTelegrafPlugin} from 'mocks/dummyData'

 const setup = (override = {}) => {
  const props = {
-    type: DataLoaderType.Empty,
    ...defaultOnboardingStepProps,
+    type: DataLoaderType.Empty,
    telegrafPlugins: [],
    stepIndex: 4,
    onSetActiveTelegrafPlugin: jest.fn(),
@ -38,4 +38,55 @@ describe('Onboarding.Components.VerifyStep.VerifyDataStep', () => {
    expect(buttons.length).toBe(3)
    expect(switcher.exists()).toBe(true)
  })
+
+  describe('if type is streaming', () => {
+    it('renders back button with correct text', () => {
+      const {wrapper} = setup({
+        type: DataLoaderType.Streaming,
+        telegrafPlugins: [cpuTelegrafPlugin],
+      })
+      const nextButton = wrapper.find('[data-test="next"]')
+      const backButton = wrapper.find('[data-test="back"]')
+
+      expect(nextButton.prop('text')).toBe('Continue to Completion')
+      expect(backButton.prop('text')).toBe('Back to Cpu Configuration')
+    })
+
+    describe('when the back button is clicked', () => {
+      describe('if the type is streaming', () => {
+        it('calls the prop functions as expected', () => {
+          const onSetSubstepIndex = jest.fn()
+          const onSetActiveTelegrafPlugin = jest.fn()
+          const {wrapper} = setup({
+            type: DataLoaderType.Streaming,
+            telegrafPlugins: [cpuTelegrafPlugin],
+            onSetSubstepIndex,
+            onSetActiveTelegrafPlugin,
+          })
+          const backButton = wrapper.find('[data-test="back"]')
+          backButton.simulate('click')
+
+          expect(onSetSubstepIndex).toBeCalledWith(3, 0)
+          expect(onSetActiveTelegrafPlugin).toBeCalledWith('cpu')
+        })
+      })
+
+      describe('if the type is line protocol', () => {
+        it('calls the prop functions as expected', () => {
+          const onDecrementCurrentStepIndex = jest.fn()
+          const onSetActiveTelegrafPlugin = jest.fn()
+          const {wrapper} = setup({
+            type: DataLoaderType.LineProtocol,
+            onDecrementCurrentStepIndex,
+            onSetActiveTelegrafPlugin,
+          })
+          const backButton = wrapper.find('[data-test="back"]')
+          backButton.simulate('click')
+
+          expect(onDecrementCurrentStepIndex).toBeCalled()
+          expect(onSetActiveTelegrafPlugin).toBeCalledWith('')
+        })
+      })
+    })
+  })
 })
--- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
+++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
@ -51,17 +51,19 @@ class VerifyDataStep extends PureComponent<Props> {
          <div className="wizard-button-bar">
            <Button
              color={ComponentColor.Default}
-              text="Back"
+              text={this.backButtonText}
              size={ComponentSize.Medium}
              onClick={this.handleDecrementStep}
+              data-test="back"
            />
            <Button
              color={ComponentColor.Primary}
-              text="Next"
+              text="Continue to Completion"
              size={ComponentSize.Medium}
              onClick={onIncrementCurrentStepIndex}
              status={ComponentStatus.Default}
              titleText={'Next'}
+              data-test="next"
            />
          </div>
          {this.skipLink}
@ -83,17 +85,37 @@ class VerifyDataStep extends PureComponent<Props> {
    )
  }

+  private get backButtonText(): string {
+    return `Back to ${_.startCase(this.previousStepName) || ''} Configuration`
+  }
+
+  private get previousStepName() {
+    const {telegrafPlugins, type} = this.props
+
+    if (type === DataLoaderType.Streaming) {
+      return _.get(telegrafPlugins, `${telegrafPlugins.length - 1}.name`, '')
+    }
+
+    return type
+  }
+
  private handleDecrementStep = () => {
    const {
      telegrafPlugins,
      onSetActiveTelegrafPlugin,
      onDecrementCurrentStepIndex,
+      onSetSubstepIndex,
+      stepIndex,
+      type,
    } = this.props

-    const name = _.get(telegrafPlugins, `${telegrafPlugins.length - 1}.name`)
-    onSetActiveTelegrafPlugin(name)
-
-    onDecrementCurrentStepIndex()
+    if (type === DataLoaderType.Streaming) {
+      onSetSubstepIndex(stepIndex - 1, telegrafPlugins.length - 1 || 0)
+      onSetActiveTelegrafPlugin(this.previousStepName)
+    } else {
+      onDecrementCurrentStepIndex()
+      onSetActiveTelegrafPlugin('')
+    }
  }

  private jumpToCompletionStep = () => {
--- a/ui/src/onboarding/containers/OnboardingWizard.tsx
+++ b/ui/src/onboarding/containers/OnboardingWizard.tsx
@ -47,6 +47,7 @@ export interface OnboardingStepProps {
  onIncrementCurrentStepIndex: () => void
  onDecrementCurrentStepIndex: () => void
  onSetStepStatus: (index: number, status: StepStatus) => void
+  onSetSubstepIndex: (index: number, subStep: number | 'streaming') => void
  stepStatuses: StepStatus[]
  stepTitles: string[]
  setupParams: SetupParams
@ -64,10 +65,7 @@ interface OwnProps {
  onIncrementCurrentStepIndex: () => void
  onDecrementCurrentStepIndex: () => void
  onSetCurrentStepIndex: (stepNumber: number) => void
-  onSetCurrentSubStepIndex: (
-    stepNumber: number,
-    substep: number | 'streaming'
-  ) => void
+  onSetSubstepIndex: (stepNumber: number, substep: number | 'streaming') => void
 }

 interface DispatchProps {
@ -208,13 +206,15 @@ class OnboardingWizard extends PureComponent<Props> {
  }

  private handleNewSourceClick = () => {
-    const {onSetCurrentSubStepIndex} = this.props
-    onSetCurrentSubStepIndex(2, 'streaming')
+    const {onSetSubstepIndex, onSetActiveTelegrafPlugin} = this.props
+
+    onSetActiveTelegrafPlugin('')
+    onSetSubstepIndex(2, 'streaming')
  }

  private handleClickSideBarTab = (telegrafPluginID: string) => {
    const {
-      onSetCurrentSubStepIndex,
+      onSetSubstepIndex,
      onSetActiveTelegrafPlugin,
      dataLoaders: {telegrafPlugins},
    } = this.props
@ -226,7 +226,7 @@ class OnboardingWizard extends PureComponent<Props> {
      0
    )

-    onSetCurrentSubStepIndex(3, index)
+    onSetSubstepIndex(3, index)
    onSetActiveTelegrafPlugin(telegrafPluginID)
  }

@ -247,6 +247,7 @@ class OnboardingWizard extends PureComponent<Props> {
      onSetStepStatus,
      onSetSetupParams,
      onSetCurrentStepIndex,
+      onSetSubstepIndex,
      onDecrementCurrentStepIndex,
      onIncrementCurrentStepIndex,
    } = this.props
@ -256,6 +257,7 @@ class OnboardingWizard extends PureComponent<Props> {
      stepTitles: this.stepTitles,
      currentStepIndex,
      onSetCurrentStepIndex,
+      onSetSubstepIndex,
      onIncrementCurrentStepIndex,
      onDecrementCurrentStepIndex,
      onSetStepStatus,
--- a/ui/src/onboarding/containers/OnboardingWizardPage.tsx
+++ b/ui/src/onboarding/containers/OnboardingWizardPage.tsx
@ -61,7 +61,7 @@ export class OnboardingWizardPage extends PureComponent<Props, State> {
          onDecrementCurrentStepIndex={this.handleDecrementStepIndex}
          onIncrementCurrentStepIndex={this.handleIncrementStepIndex}
          onSetCurrentStepIndex={this.setStepIndex}
-          onSetCurrentSubStepIndex={this.setSubstepIndex}
+          onSetSubstepIndex={this.setSubstepIndex}
          currentStepIndex={+params.stepID}
          onCompleteSetup={this.handleCompleteSetup}
        />
@ -74,9 +74,11 @@ export class OnboardingWizardPage extends PureComponent<Props, State> {
  }

  private handleDecrementStepIndex = () => {
-    const {router} = this.props
+    const {
+      params: {stepID},
+    } = this.props

-    router.goBack()
+    this.setStepIndex(+stepID - 1)
  }

  private handleIncrementStepIndex = () => {