Create initial wizard components

Co-authored-by: Daniel Campbell <metalwhirlwind@gmail.com>
Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>

ui/src/reusable_ui/components/wizard/WizardCloak.tsx

@@ -0,0 +1,59 @@
+import React, {PureComponent, ReactNode} from 'react'
+import WizardProgressBar from 'src/reusable_ui/components/wizard/WizardProgressBar'
+
+// import {} from 'src/types'
+
+enum StepStatus {
+  Incomplete = 'INCOMPLETE',
+  Complete = 'COMPLETE',
+  Error = 'ERROR',
+}
+
+interface Step {
+  title: string
+  stepStatus: StepStatus
+}
+
+interface State {
+  steps: Step[]
+  currentStepIndex: number
+}
+
+interface Props {
+  children: ReactNode
+}
+
+class WizardCloak extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      steps: [
+        {title: 'First Step', stepStatus: StepStatus.Complete},
+        {title: 'Second Step', stepStatus: StepStatus.Error},
+        {title: 'Third Step', stepStatus: StepStatus.Incomplete},
+      ],
+      currentStepIndex: 0,
+    }
+  }
+
+  public render() {
+    const {steps, currentStepIndex} = this.state
+
+    return (
+      <div>
+        <WizardProgressBar steps={steps} currentStepIndex={currentStepIndex} />
+        {this.CurrentChild}
+      </div>
+    )
+  }
+
+  private get CurrentChild(): JSX.Element {
+    const {children} = this.props
+    const {currentStepIndex} = this.state
+
+    return children[currentStepIndex]
+  }
+}
+
+export default WizardCloak

ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx

@@ -0,0 +1,17 @@
+import React, {PureComponent, ReactNode} from 'react'
+
+// import {} from 'src/types'
+
+interface Props {
+  children: ReactNode
+}
+
+class WizardFullScreen extends PureComponent<Props> {
+  public render() {
+    const {children} = this.props
+
+    return <div className="progress-bar">Step: {children}</div>
+  }
+}
+
+export default WizardFullScreen

ui/src/reusable_ui/components/wizard/WizardOverlay.tsx

@@ -0,0 +1,33 @@
+import React, {PureComponent, ReactNode} from 'react'
+import OverlayBody from 'src/reusable_ui/components/overlays/OverlayBody'
+import OverlayContainer from 'src/reusable_ui/components/overlays/OverlayContainer'
+import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology'
+import WizardCloak from 'src/reusable_ui/components/wizard/WizardCloak'
+import OverlayHeading from 'src/reusable_ui/components/overlays/OverlayHeading'
+
+// import {} from 'src/types'
+
+interface Props {
+  children: ReactNode
+  visible: boolean
+  title: string
+}
+
+class WizardOverlay extends PureComponent<Props> {
+  public render() {
+    const {children, visible, title} = this.props
+
+    return (
+      <OverlayTechnology visible={visible}>
+        <OverlayContainer>
+          <OverlayHeading title={title} />
+          <OverlayBody>
+            <WizardCloak>{children}</WizardCloak>
+          </OverlayBody>
+        </OverlayContainer>
+      </OverlayTechnology>
+    )
+  }
+}
+
+export default WizardOverlay

ui/src/reusable_ui/components/wizard/WizardProgressBar.tsx

@@ -0,0 +1,29 @@
+import React, {PureComponent} from 'react'
+
+// import {} from 'src/types'
+
+enum StepStatus {
+  Incomplete = 'INCOMPLETE',
+  Complete = 'COMPLETE',
+  Error = 'ERROR',
+}
+
+interface Step {
+  title: string
+  stepStatus: StepStatus
+}
+
+interface Props {
+  steps: Step[]
+  currentStepIndex: number
+}
+
+class WizardProgressBar extends PureComponent<Props> {
+  public render() {
+    const {steps, currentStepIndex} = this.props
+
+    return <div className="progress-bar">ProgressBar</div>
+  }
+}
+
+export default WizardProgressBar

ui/src/reusable_ui/components/wizard/WizardStep.tsx

@@ -0,0 +1,23 @@
+import React, {PureComponent, ReactNode} from 'react'
+
+// import {} from 'src/types'
+
+interface Props {
+  children: ReactNode
+  title: string
+}
+
+class WizardStep extends PureComponent<Props> {
+  public render() {
+    const {children, title} = this.props
+
+    return (
+      <div className="progress-bar">
+        <h2>{title}</h2>
+        {children}
+      </div>
+    )
+  }
+}
+
+export default WizardStep

ui/src/sources/components/GrandWizard.tsx

@@ -0,0 +1,25 @@
+import React, {PureComponent} from 'react'
+import WizardOverlay from 'src/reusable_ui/components/wizard/WizardOverlay'
+import WizardStep from 'src/reusable_ui/components/wizard/WizardStep'
+
+// import {} from 'src/types'
+
+interface Props {
+  wizardVisibility: boolean
+}
+
+class WizardWithSteps extends PureComponent<Props> {
+  public render() {
+    const {wizardVisibility} = this.props
+
+    return (
+      <WizardOverlay visible={wizardVisibility} title="Grand Wizard">
+        <WizardStep title="First Real Step">some first children</WizardStep>
+        <WizardStep title="Second Real Step">some second children</WizardStep>
+        <WizardStep title="Third Real Step">some third children</WizardStep>
+      </WizardOverlay>
+    )
+  }
+}
+
+export default WizardWithSteps

ui/src/sources/components/InfluxTable.tsx

@@ -17,6 +17,7 @@ interface Props {
   deleteKapacitor: DeleteKapacitor
   setActiveKapacitor: SetActiveKapacitor
   onDeleteSource: (source: Source) => void
+  toggleVisibility: (isVisible: boolean) => () => void
 }
 
 class InfluxTable extends PureComponent<Props> {
@@ -29,6 +30,7 @@ class InfluxTable extends PureComponent<Props> {
       deleteKapacitor,
       isUsingAuth,
       me,
+      toggleVisibility,
     } = this.props
 
     return (
@@ -39,6 +41,7 @@ class InfluxTable extends PureComponent<Props> {
               me={me}
               source={source}
               isUsingAuth={isUsingAuth}
+              toggleVisibility={toggleVisibility}
             />
             <div className="panel-body">
               <table className="table v-center margin-bottom-zero table-highlight">

ui/src/sources/components/InfluxTableHeader.tsx

@@ -9,15 +9,19 @@ interface Props {
   me: Me
   source: Source
   isUsingAuth: boolean
+  toggleVisibility: (isVisible: boolean) => () => void
 }
 
 class InfluxTableHeader extends PureComponent<Props> {
   public render() {
-    const {source} = this.props
+    const {source, toggleVisibility} = this.props
 
     return (
       <div className="panel-heading">
         <h2 className="panel-title">{this.title}</h2>
+        <div onClick={toggleVisibility(true)}>
+          <p>show wiz</p>
+        </div>
         <Authorized requiredRole={EDITOR_ROLE}>
           <Link
             to={`/sources/${source.id}/manage-sources/new`}

ui/src/sources/containers/ManageSources.tsx

@@ -9,6 +9,8 @@ import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader'
 import InfluxTable from 'src/sources/components/InfluxTable'
 
+import GrandWizard from 'src/sources/components/GrandWizard'
+
 import {
   notifySourceDeleted,
   notifySourceDeleteFailed,
@@ -16,6 +18,10 @@ import {
 
 import {Source, Notification} from 'src/types'
 
+interface State {
+  wizardVisibility: boolean
+}
+
 interface Props {
   source: Source
   sources: Source[]
@@ -29,7 +35,15 @@ interface Props {
 declare var VERSION: string
 
 @ErrorHandling
-class ManageSources extends PureComponent<Props> {
+class ManageSources extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      wizardVisibility: true,
+    }
+  }
+
   public componentDidMount() {
     this.props.sources.forEach(source => {
       this.props.fetchKapacitors(source)
@@ -46,6 +60,7 @@ class ManageSources extends PureComponent<Props> {
 
   public render() {
     const {sources, source, deleteKapacitor} = this.props
+    const {wizardVisibility} = this.state
 
     return (
       <div className="page" id="manage-sources-page">
@@ -58,14 +73,22 @@ class ManageSources extends PureComponent<Props> {
               deleteKapacitor={deleteKapacitor}
               onDeleteSource={this.handleDeleteSource}
               setActiveKapacitor={this.handleSetActiveKapacitor}
+              toggleVisibility={this.toggleVisibility}
             />
             <p className="version-number">Chronograf Version: {VERSION}</p>
           </div>
         </FancyScrollbar>
+        <GrandWizard wizardVisibility={wizardVisibility} />
       </div>
     )
   }
 
+  private toggleVisibility = isVisible => () => {
+    this.setState({
+      wizardVisibility: isVisible,
+    })
+  }
+
   private handleDeleteSource = (source: Source) => {
     const {notify} = this.props