Onboarding updates (#4596)

* remove top elements from full screen wizard

* Add welcome step, style completion step

* Update copy

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;
-}
+}

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-container">{this.WizardController}</div>
-        </>
-      </SplashPage>
+      <div className="wizard-splash auth-image">
+        <div className="wizard-container">{this.WizardController}</div>
+        <p className="auth-credits">
+          Powered by <span className="icon cubo-uniform" /> InfluxData
+        </p>
+      </div>
     )
   }
 

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;

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)
   })

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>
 `;

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>
     )
   }
 }

ui/src/sources/components/WelcomeStep.scss

@@ -0,0 +1,6 @@
+.wizard-step--bookend {
+  text-align: center;
+  .auth-logo {
+    margin: $ix-marg-d auto;
+  }
+}

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)

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

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';