Onboarding updates (#4596)

* remove top elements from full screen wizard * Add welcome step, style completion step * Update copy
2018-10-16 09:52:17 -07:00 · 2018-10-16 09:52:17 -07:00 · e15a8acef7
parent a32e8f062a
commit e15a8acef7
10 changed files with 116 additions and 46 deletions
--- a/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss
+++ b/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss
@ -3,15 +3,22 @@
  ------------------------------------------------------------------------------
 */

+.wizard-splash {
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+
 .wizard-container {
  padding: 30px;
  display: inline-flex;
  border-radius: $radius;
+  width: 60%;
  min-width: 800px;
  max-width: 1200px;
  background-color: $g1-raven;
 }
-
-.wizard-title {
-  margin-top: $ix-marg-c;
-}
--- a/ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx
+++ b/ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx
@ -2,7 +2,6 @@
 import React, {PureComponent, ReactElement} from 'react'

 // Components
-import SplashPage from 'src/shared/components/SplashPage'
 import WizardController from 'src/reusable_ui/components/wizard/WizardController'

 import {WizardStepProps} from 'src/reusable_ui/components/wizard/WizardStep'
@ -11,7 +10,6 @@ import {ErrorHandling} from 'src/shared/decorators/errors'

 interface Props {
  children: Array<ReactElement<WizardStepProps>>
-  title: string
  skipLinkText?: string
  handleSkip?: () => void
  switchLinkText?: string
@ -22,15 +20,13 @@ interface Props {
@ErrorHandling
 class WizardFullScreen extends PureComponent<Props> {
  public render() {
-    const {title} = this.props
-
    return (
-      <SplashPage>
-        <>
-          <h1 className="wizard-title">{title}</h1>
+      <div className="wizard-splash auth-image">
        <div className="wizard-container">{this.WizardController}</div>
-        </>
-      </SplashPage>
+        <p className="auth-credits">
+          Powered by <span className="icon cubo-uniform" /> InfluxData
+        </p>
+      </div>
    )
  }

--- a/ui/src/reusable_ui/components/wizard/WizardStep.scss
+++ b/ui/src/reusable_ui/components/wizard/WizardStep.scss
@ -12,7 +12,7 @@

 .wizard-step--child {
  padding: 0 $ix-marg-d $ix-marg-d $ix-marg-d;
-  overflow-y: scroll;
+  overflow-y: auto;
  max-height: 30vh;
  min-height: 10vh;
  position: relative;
--- a/ui/src/reusable_ui/components/wizard/test/WizardFullScreen.test.tsx
+++ b/ui/src/reusable_ui/components/wizard/test/WizardFullScreen.test.tsx
@ -3,7 +3,6 @@ import {shallow} from 'enzyme'

 import WizardFullScreen from 'src/reusable_ui/components/wizard/WizardFullScreen'
 import WizardController from 'src/reusable_ui/components/wizard/WizardController'
-import SplashPage from 'src/shared/components/SplashPage'

 describe('WizardFullScreen', () => {
  let wrapper
@ -11,7 +10,6 @@ describe('WizardFullScreen', () => {
  const wrapperSetup = (override = {}) => {
    const props = {
      children: null,
-      title: undefined,
      skipLinkText: undefined,
      handleSkip: undefined,
      isUsingAuth: false,
@ -30,10 +28,6 @@ describe('WizardFullScreen', () => {
    expect(wrapper).toHaveLength(1)
  })

-  it('renders one SplashPage component', () => {
-    expect(wrapper.find(SplashPage)).toHaveLength(1)
-  })
-
  it('renders no WizardController component', () => {
    expect(wrapper.find(WizardController)).toHaveLength(0)
  })
--- a/ui/src/reusable_ui/components/wizard/test/snapshots/WizardFullScreen.test.tsx.snap
+++ b/ui/src/reusable_ui/components/wizard/test/snapshots/WizardFullScreen.test.tsx.snap
@ -1,23 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`WizardFullScreen matches snapshot with minimal props 1`] = `
-<SplashPage>
-  <h1
-    className="wizard-title"
-  />
+<div
+  className="wizard-splash auth-image"
+>
  <div
    className="wizard-container"
  />
-</SplashPage>
+  <p
+    className="auth-credits"
+  >
+    Powered by 
+    <span
+      className="icon cubo-uniform"
+    />
+     InfluxData
+  </p>
+</div>
 `;

 exports[`WizardFullScreen with children matches snapshot with children props 1`] = `
-<SplashPage>
-  <h1
-    className="wizard-title"
-  />
+<div
+  className="wizard-splash auth-image"
+>
  <div
    className="wizard-container"
  />
-</SplashPage>
+  <p
+    className="auth-credits"
+  >
+    Powered by 
+    <span
+      className="icon cubo-uniform"
+    />
+     InfluxData
+  </p>
+</div>
 `;
--- a/ui/src/sources/components/CompletionStep.tsx
+++ b/ui/src/sources/components/CompletionStep.tsx
@ -8,20 +8,10 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'

-// Utils
-
-// APIs
-
-// Constants
-
-// Types
-
 interface Props {
  notify: typeof notifyAction
 }

-// interface State {}
-
@ErrorHandling
 class SourceStep extends PureComponent<Props> {
  constructor(props: Props) {
@ -34,10 +24,11 @@ class SourceStep extends PureComponent<Props> {

  public render() {
    return (
-      <>
+      <div className="wizard-step--bookend">
+        <div className="auth-logo" />
        <p>You have successfully added a Source connection and a Kapacitor. </p>
        <p>Continue to view your existing connections.</p>
-      </>
+      </div>
    )
  }
 }
--- a/ui/src/sources/components/WelcomeStep.scss
+++ b/ui/src/sources/components/WelcomeStep.scss
@ -0,0 +1,6 @@
+.wizard-step--bookend {
+  text-align: center;
+  .auth-logo {
+    margin: $ix-marg-d auto;
+  }
+}
--- a/ui/src/sources/components/WelcomeStep.tsx
+++ b/ui/src/sources/components/WelcomeStep.tsx
@ -0,0 +1,40 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+// Actions
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+interface Props {
+  notify: typeof notifyAction
+}
+
+@ErrorHandling
+class SourceStep extends PureComponent<Props> {
+  constructor(props: Props) {
+    super(props)
+  }
+
+  public next = async () => {
+    // navigate to newly created source?
+  }
+
+  public render() {
+    return (
+      <div className="wizard-step--bookend">
+        <div className="auth-logo" />
+        <h1>Welcome to Chronograf</h1>
+        <p>Start using Chronograf in a few easy steps.</p>
+      </div>
+    )
+  }
+}
+
+const mdtp = {
+  notify: notifyAction,
+}
+
+export default connect(null, mdtp, null, {withRef: true})(SourceStep)
--- a/ui/src/sources/containers/OnboardingWizard.tsx
+++ b/ui/src/sources/containers/OnboardingWizard.tsx
@ -8,6 +8,7 @@ import WizardStep from 'src/reusable_ui/components/wizard/WizardStep'
 import SourceStep from 'src/sources/components/SourceStep'
 import KapacitorStep from 'src/sources/components/KapacitorStep'
 import CompletionStep from 'src/sources/components/CompletionStep'
+import WelcomeStep from 'src/sources/components/WelcomeStep'
 import Notifications from 'src/shared/components/Notifications'
 import DashboardStep from 'src/sources/components/DashboardStep'

@ -36,6 +37,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
  public sourceStepRef: any
  public kapacitorStepRef: any
  public completionStepRef: any
+  public welcomeStepRef: any
  public dashboardStepRef: any

  constructor(props) {
@ -65,13 +67,23 @@ class OnboardingWizard extends PureComponent<Props, State> {
      <>
        <Notifications />
        <WizardFullScreen
-          title={'Welcome to Influx'}
          skipLinkText={'skip'}
          handleSkip={this.handleCompletionNext}
          switchLinkText={'switch organizations'}
          handleSwitch={this.resetAndGotoPurgatory}
          isUsingAuth={isUsingAuth}
        >
+          <WizardStep
+            title="Welcome"
+            isComplete={this.isWelcomeComplete}
+            isErrored={false}
+            nextLabel="Get Started"
+            isSkippableStep={false}
+          >
+            <WelcomeStep
+              ref={c => (this.welcomeStepRef = c && c.getWrappedInstance())}
+            />
+          </WizardStep>
          <WizardStep
            title="InfluxDB Connection"
            tipText=""
@ -80,7 +92,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
            isSkippableStep={false}
            onNext={this.handleSourceNext}
            nextLabel={source ? 'Update Connection' : 'Add Connection'}
-            previousLabel="Cancel"
+            previousLabel="Go Back"
            onPrevious={this.handleKapacitorPrev}
          >
            <SourceStep
@ -98,6 +110,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
            isComplete={this.isDashboardComplete}
            isErrored={dashboardError}
            onNext={this.handleDashboardNext}
+            previousLabel="Go Back"
          >
            <DashboardStep
              ref={c => (this.dashboardStepRef = c && c.getWrappedInstance())}
@ -127,6 +140,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
            tipText=""
            isComplete={this.isCompletionComplete}
            isErrored={false}
+            isSkippableStep={false}
            onNext={this.handleCompletionNext}
            onPrevious={this.handleCompletionPrev}
            nextLabel="View All Connections"
@ -141,6 +155,11 @@ class OnboardingWizard extends PureComponent<Props, State> {
    )
  }

+  // WelcomeStep
+  private isWelcomeComplete = () => {
+    return true
+  }
+
  // SourceStep
  private isSourceComplete = () => {
    const {source} = this.state
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@ -69,6 +69,7 @@
@import 'components/dropdown-placeholder';
@import 'components/histogram-chart';
@import 'src/sources/components/ConnectionLink';
+@import 'src/sources/components/WelcomeStep';
@import 'src/sources/components/KapacitorStep';
@import 'src/shared/components/TimeMachine/CellNoteEditor';
@import 'src/shared/components/MarkdownCell';