Data loader button bar (#2039)

* Add Skip to Verify on streaming data steps, style wizard button bar * Add tests, update snapshots
2018-12-18 18:24:09 -08:00 · 2018-12-18 18:24:09 -08:00 · ef6321a708
parent 53f27c5566
commit ef6321a708
13 changed files with 208 additions and 99 deletions
--- a/ui/src/onboarding/OnboardingWizard.scss
+++ b/ui/src/onboarding/OnboardingWizard.scss
@ -35,12 +35,24 @@
  flex: 1 0 calc(100% - 240px);
 }

-.wizard-button-bar {
+.wizard--button-container {
+  position: absolute;
+  bottom: 30px;
+  left: 30px;
+  right: 30px;
+  
+  .wizard--skip-button {
+    position: absolute;
+    right: 0;
+  }
+}
+
+.wizard--button-bar {
  display: inline-flex;
  flex-shrink: 0;
-  margin: 10px auto;
  position: relative;
  min-width: 100%;
+  width: 100%;
  justify-content: center;
  align-items: center;
  height: auto;
@ -53,16 +65,6 @@
  }
 }

-.wizard-button-container {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-
-  .button {
-    width: 50%;
-  }
-}
-
 .splash-logo {
  background-size: 100% 100%;
  background-position: center center;
--- a/ui/src/onboarding/components/AdminStep.tsx
+++ b/ui/src/onboarding/components/AdminStep.tsx
@ -144,23 +144,25 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
              disabledTitleText="Default bucket name has been set"
            />
          </Form.Element>
+          <div className="wizard--button-container">
+            <div className="wizard--button-bar">
+              <Button
+                color={ComponentColor.Default}
+                text="Back to Start"
+                size={ComponentSize.Medium}
+                onClick={this.props.onDecrementCurrentStepIndex}
+              />
+              <Button
+                color={ComponentColor.Primary}
+                text="Continue to Data Loading"
+                size={ComponentSize.Medium}
+                onClick={this.handleNext}
+                status={this.nextButtonStatus}
+                titleText={this.nextButtonTitle}
+              />
+            </div>
+          </div>
        </Form>
-        <div className="wizard-button-bar">
-          <Button
-            color={ComponentColor.Default}
-            text="Back to Start"
-            size={ComponentSize.Medium}
-            onClick={this.props.onDecrementCurrentStepIndex}
-          />
-          <Button
-            color={ComponentColor.Primary}
-            text="Continue to Data Loading"
-            size={ComponentSize.Medium}
-            onClick={this.handleNext}
-            status={this.nextButtonStatus}
-            titleText={this.nextButtonTitle}
-          />
-        </div>
      </div>
    )
  }
--- a/ui/src/onboarding/components/CompletionStep.tsx
+++ b/ui/src/onboarding/components/CompletionStep.tsx
@ -26,17 +26,17 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
        <div className="splash-logo secondary" />
        <h3 className="wizard-step--title">Setup Complete!</h3>
        <h5 className="wizard-step--sub-title" />
-        <div className="wizard-button-bar">
+        <div className="wizard--button-bar">
          <Button
            color={ComponentColor.Default}
            text="Back to Verify"
-            size={ComponentSize.Medium}
+            size={ComponentSize.Large}
            onClick={onDecrementCurrentStepIndex}
          />
          <Button
            color={ComponentColor.Success}
            text="Go to InfluxDB 2.0"
-            size={ComponentSize.Medium}
+            size={ComponentSize.Large}
            onClick={onExit}
          />
        </div>
--- a/ui/src/onboarding/components/OtherStep.tsx
+++ b/ui/src/onboarding/components/OtherStep.tsx
@ -25,20 +25,22 @@ class OtherStep extends PureComponent<OnboardingStepProps, null> {
      <div className="onboarding-step">
        <h3 className="wizard-step--title">This is Another Step</h3>
        <h5 className="wizard-step--sub-title">Import data here</h5>
-        <div className="wizard-button-bar">
-          <Button
-            color={ComponentColor.Default}
-            text="Back"
-            size={ComponentSize.Medium}
-            onClick={this.props.onDecrementCurrentStepIndex}
-          />
-          <Button
-            color={ComponentColor.Primary}
-            text="Next"
-            size={ComponentSize.Medium}
-            onClick={this.handleNext}
-            titleText={'Next'}
-          />
+        <div className="wizard--button-container">
+          <div className="wizard--button-bar">
+            <Button
+              color={ComponentColor.Default}
+              text="Back"
+              size={ComponentSize.Medium}
+              onClick={this.props.onDecrementCurrentStepIndex}
+            />
+            <Button
+              color={ComponentColor.Primary}
+              text="Next"
+              size={ComponentSize.Medium}
+              onClick={this.handleNext}
+              titleText={'Next'}
+            />
+          </div>
        </div>
      </div>
    )
--- a/ui/src/onboarding/components/snapshots/AdminStep.test.tsx.snap
+++ b/ui/src/onboarding/components/snapshots/AdminStep.test.tsx.snap
@ -128,31 +128,35 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
        value=""
      />
    </FormElement>
+    <div
+      className="wizard--button-container"
+    >
+      <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>
  </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
@ -16,14 +16,14 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
    className="wizard-step--sub-title"
  />
  <div
-    className="wizard-button-bar"
+    className="wizard--button-bar"
  >
    <Button
      active={false}
      color="default"
      onClick={[MockFunction]}
      shape="none"
-      size="md"
+      size="lg"
      status="default"
      text="Back to Verify"
      type="submit"
@ -33,7 +33,7 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
      color="success"
      onClick={[MockFunction]}
      shape="none"
-      size="md"
+      size="lg"
      status="default"
      text="Go to InfluxDB 2.0"
      type="submit"
--- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.test.tsx
+++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.test.tsx
@ -110,6 +110,56 @@ describe('Onboarding.Components.ConfigureStep.ConfigureDataSourceStep', () => {
      })
    })

+    describe('if skip button is clicked', () => {
+      it('renders the correct skip button text for streaming sources', () => {
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          telegrafPlugins: [cpuTelegrafPlugin],
+          params: {stepID: '3', substepID: 'streaming'},
+        })
+        const skipButton = wrapper.find('[data-test="skip"]')
+
+        expect(skipButton.prop('text')).toBe('Skip to Verify')
+      })
+
+      it('renders the correct skip button text for Line Protocol', () => {
+        const wrapper = setup({
+          type: DataLoaderType.LineProtocol,
+        })
+        const skipButton = wrapper.find('[data-test="skip"]')
+
+        expect(skipButton.prop('text')).toBe('Skip Config')
+      })
+
+      it('calls prop functions as expected for streaming sources', () => {
+        const onSetCurrentStepIndex = jest.fn()
+        const wrapper = setup({
+          type: DataLoaderType.Streaming,
+          telegrafPlugins: [cpuTelegrafPlugin],
+          params: {stepID: '3', substepID: '0'},
+          onSetCurrentStepIndex,
+          stepStatuses: Array(5),
+        })
+        const skipButton = wrapper.find('[data-test="skip"]')
+        skipButton.simulate('click')
+
+        expect(onSetCurrentStepIndex).toBeCalledWith(3)
+      })
+
+      it('calls prop functions as expected for Line Protocol', () => {
+        const onSetCurrentStepIndex = jest.fn()
+        const wrapper = setup({
+          type: DataLoaderType.LineProtocol,
+          onSetCurrentStepIndex,
+          stepStatuses: Array(5),
+        })
+        const skipButton = wrapper.find('[data-test="skip"]')
+        skipButton.simulate('click')
+
+        expect(onSetCurrentStepIndex).toBeCalledWith(4)
+      })
+    })
+
    describe('if its the neither the last or firt stubstep', () => {
      it('renders the next and back buttons with correct text', () => {
        const wrapper = setup({
--- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
+++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
@ -100,8 +100,8 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
          currentIndex={+substepID}
          onSetConfigArrayValue={onSetConfigArrayValue}
        />
-        <div className="wizard-button-container">
-          <div className="wizard-button-bar">
+        <div className="wizard--button-container">
+          <div className="wizard--button-bar">
            <Button
              color={ComponentColor.Default}
              text={this.backButtonText}
@ -168,23 +168,32 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
  }

  private get skipLink() {
+    const {type} = this.props
+    const skipText =
+      type === DataLoaderType.Streaming ? 'Skip to Verify' : 'Skip Config'
+
    return (
      <Button
+        customClass="wizard--skip-button"
+        size={ComponentSize.Medium}
        color={ComponentColor.Default}
-        text="Skip"
-        size={ComponentSize.Small}
+        text={skipText}
        onClick={this.jumpToCompletionStep}
-      >
-        skip
-      </Button>
+        data-test="skip"
+      />
    )
  }

  private jumpToCompletionStep = () => {
-    const {onSetCurrentStepIndex, stepStatuses} = this.props
+    const {onSetCurrentStepIndex, stepStatuses, type} = this.props

    this.handleSetStepStatus()
-    onSetCurrentStepIndex(stepStatuses.length - 1)
+
+    if (type === DataLoaderType.Streaming) {
+      onSetCurrentStepIndex(stepStatuses.length - 2)
+    } else {
+      onSetCurrentStepIndex(stepStatuses.length - 1)
+    }
  }

  private handleNext = async () => {
--- a/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx
+++ b/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx
@ -75,7 +75,7 @@ export class LineProtocolTabs extends PureComponent<Props, State> {
        {this.tabSelector}
        <div className={'wizard-step--lp-body'}>{this.tabBody}</div>
        <PrecisionDropdown setPrecision={setPrecision} precision={precision} />
-        <div className="wizard-button-bar">{this.submitButton}</div>
+        <div className="wizard--button-bar">{this.submitButton}</div>
      </>
    )
  }
--- a/ui/src/onboarding/components/configureStep/lineProtocol/snapshots/LineProtocolTabs.test.tsx.snap
+++ b/ui/src/onboarding/components/configureStep/lineProtocol/snapshots/LineProtocolTabs.test.tsx.snap
@ -49,7 +49,7 @@ exports[`LineProtocolTabs rendering renders! 1`] = `
  />
  <PrecisionDropdown />
  <div
-    className="wizard-button-bar"
+    className="wizard--button-bar"
  />
 </Fragment>
 `;
--- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx
+++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx
@ -12,7 +12,11 @@ import {ComponentStatus} from 'src/clockface'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'

 // Dummy Data
-import {defaultOnboardingStepProps, cpuTelegrafPlugin} from 'mocks/dummyData'
+import {
+  defaultOnboardingStepProps,
+  telegrafPlugin,
+  cpuTelegrafPlugin,
+} from 'mocks/dummyData'

 const setup = (override = {}) => {
  const props = {
@ -79,6 +83,29 @@ describe('Onboarding.Components.SelectionStep.SelectDataSourceStep', () => {
    })
  })

+  describe('skip link', () => {
+    it('does not render if telegraf no plugins are selected', () => {
+      const wrapper = setup()
+      const skipLink = wrapper.find('[data-test="skip"]')
+
+      expect(skipLink.exists()).toBe(false)
+    })
+
+    it('renders if telegraf plugins are selected', () => {
+      const wrapper = setup({telegrafPlugins: [cpuTelegrafPlugin]})
+      const skipLink = wrapper.find('[data-test="skip"]')
+
+      expect(skipLink.exists()).toBe(true)
+    })
+
+    it('does not render if any telegraf plugins is incomplete', () => {
+      const wrapper = setup({telegrafPlugins: [telegrafPlugin]})
+      const skipLink = wrapper.find('[data-test="skip"]')
+
+      expect(skipLink.exists()).toBe(false)
+    })
+  })
+
  describe('if type is line protocol', () => {
    it('renders back and next buttons with correct text', () => {
      const wrapper = setup({type: DataLoaderType.LineProtocol})
--- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
+++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
@ -73,8 +73,8 @@ export class SelectDataSourceStep extends PureComponent<Props, State> {
          You will be able to configure additional Data Sources later
        </h5>
        {this.selector}
-        <div className="wizard-button-container">
-          <div className="wizard-button-bar">
+        <div className="wizard--button-container">
+          <div className="wizard--button-bar">
            <Button
              color={ComponentColor.Default}
              text={this.backButtonText}
@ -173,16 +173,28 @@ export class SelectDataSourceStep extends PureComponent<Props, State> {
  }

  private get skipLink() {
-    return (
-      <Button
-        color={ComponentColor.Default}
-        text="Skip"
-        size={ComponentSize.Small}
-        onClick={this.jumpToCompletionStep}
-      >
-        skip
-      </Button>
+    const {telegrafPlugins} = this.props
+
+    if (telegrafPlugins.length < 1) {
+      return
+    }
+
+    const allConfigured = telegrafPlugins.every(
+      plugin => plugin.configured === 'configured'
    )
+
+    if (allConfigured) {
+      return (
+        <Button
+          color={ComponentColor.Default}
+          text="Skip to Verify"
+          customClass="wizard--skip-button"
+          size={ComponentSize.Medium}
+          onClick={this.jumpToCompletionStep}
+          data-test="skip"
+        />
+      )
+    }
  }

  private jumpToCompletionStep = () => {
--- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
+++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
@ -58,8 +58,8 @@ class VerifyDataStep extends PureComponent<Props> {
          onSetStepStatus={onSetStepStatus}
          stepIndex={stepIndex}
        />
-        <div className="wizard-button-container">
-          <div className="wizard-button-bar">
+        <div className="wizard--button-container">
+          <div className="wizard--button-bar">
            <Button
              color={ComponentColor.Default}
              text={this.backButtonText}
@ -88,7 +88,8 @@ class VerifyDataStep extends PureComponent<Props> {
      <Button
        color={ComponentColor.Default}
        text="Skip"
-        size={ComponentSize.Small}
+        customClass="wizard--skip-button"
+        size={ComponentSize.Medium}
        onClick={this.jumpToCompletionStep}
      >
        skip