Create SourceStep component and pass ref to connect to wizard actions

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

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

@@ -29,7 +29,7 @@ class WizardTextInput extends PureComponent<Props, State> {
     isDisabled: false,
     isValid: () => ({
       status: true,
-      reason: 'this is the reason your input is bad',
+      reason: '',
     }),
     valueModifier: x => x,
     autoFocus: false,
@@ -59,12 +59,10 @@ class WizardTextInput extends PureComponent<Props, State> {
     if (validation.status === false) {
       inputClass = 'form-volcano'
       errorText = validation.reason
-      console.log('false')
     }
-    console.log(value)
 
     return (
-      <div className="form-group col-xs-12 wizard-input">
+      <div className="form-group col-xs-6 wizard-input">
         <label htmlFor={label}>{label}</label>
         <input
           type="text"

ui/src/sources/components/ConnectionWizard.tsx

@@ -1,8 +1,11 @@
 import React, {PureComponent} from 'react'
-import WizardOverlay from 'src/reusable_ui/components/wizard/WizardOverlay'
-import WizardStep from 'src/reusable_ui/components/wizard/WizardStep'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import WizardOverlay from 'src/reusable_ui/components/wizard/WizardOverlay'
+import WizardStep from 'src/reusable_ui/components/wizard/WizardStep'
+import SourceStep from 'src/sources/components/SourceStep'
+import {DEFAULT_SOURCE} from 'src/shared/constants'
+import {Source} from 'src/types'
 
 interface Props {
   isVisible: boolean
@@ -11,6 +14,7 @@ interface Props {
 
 interface State {
   completion: object
+  source: Partial<Source>
 }
 
 @ErrorHandling
@@ -19,10 +23,13 @@ class ConnectionWizard extends PureComponent<Props, State> {
     super(props)
     this.state = {
       completion: [false, false, false],
+      source: DEFAULT_SOURCE,
     }
   }
   public render() {
     const {isVisible, toggleVisibility} = this.props
+    const {source} = this.state
+
     return (
       <WizardOverlay
         visible={isVisible}
@@ -35,12 +42,14 @@ class ConnectionWizard extends PureComponent<Props, State> {
           title="Add a New InfluxDB Connection"
           tipText=""
           isComplete={this.isSourceComplete}
-          onNext={this.handleFirstNext}
+          onNext={this.handleSourceNext}
-          onPrevious={this.handleFirstPrev}
+          nextLabel="Create Source"
-          nextLabel="Continue"
           previousLabel="Cancel"
         >
-          first children
+          <SourceStep
+            isComplete={this.isSourceComplete}
+            ref={c => (this.sourceStepRef = c && c.getWrappedInstance())}
+          />
         </WizardStep>
         <WizardStep
           title="Add a Kapacitor Connection"
@@ -62,47 +71,47 @@ class ConnectionWizard extends PureComponent<Props, State> {
           nextLabel="Complete Connection"
           previousLabel="Go Back"
         >
-          some third children
+          Dashboards boxes here
         </WizardStep>
       </WizardOverlay>
     )
   }
+  private handleSourceNext = () => {
+    this.sourceStepRef.next()
+  }
 
   private isSourceComplete = () => {
     const {completion} = this.state
     return completion[0]
   }
-
   private isKapacitorComplete = () => {
     const {completion} = this.state
     return completion[1]
   }
-
   private isDashboardSelectionComplete = () => {
     const {completion} = this.state
     return completion[2]
   }
 
-
   private handleFirstNext = () => {
     const {completion} = this.state
     completion[0] = true
     this.setState({
-      completion
+      completion,
     })
   }
   private handleSecondNext = () => {
     const {completion} = this.state
     completion[1] = true
     this.setState({
-      completion
+      completion,
     })
   }
   private handleThirdNext = () => {
     const {completion} = this.state
     completion[2] = true
     this.setState({
-      completion
+      completion,
     })
   }
 

ui/src/sources/components/SourceStep.tsx

@@ -0,0 +1,94 @@
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {createSource, updateSource} from 'src/shared/apis'
+
+import WizardTextInput from 'src/reusable_ui/components/wizard/WizardTextInput'
+import {
+  addSource as addSourceAction,
+  AddSource,
+} from 'src/shared/actions/sources'
+import {Source} from 'src/types'
+
+interface Props {}
+
+interface State {
+  source: object
+}
+
+@ErrorHandling
+class SourceStep extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      source: {
+        url: '',
+        name: '',
+        username: '',
+        password: '',
+        telegraf: '',
+        defaultRP: '',
+      },
+    }
+  }
+  public render() {
+    const {handleInputChange} = this.props
+    const {source} = this.state
+
+    return (
+      <>
+        <WizardTextInput
+          value={source.url}
+          label="Connection URL"
+          onChange={this.onChangeInput('url')}
+        />
+        <WizardTextInput
+          value={source.name}
+          label="Connection Name"
+          onChange={this.onChangeInput('name')}
+        />
+        <WizardTextInput
+          value={source.username}
+          label="Username"
+          onChange={this.onChangeInput('username')}
+        />
+        <WizardTextInput
+          value={source.password}
+          label="Password"
+          onChange={this.onChangeInput('password')}
+        />
+        <WizardTextInput
+          value={source.telegraf}
+          label="Telegraf Database Name"
+          onChange={this.onChangeInput('telegraf')}
+        />
+        <WizardTextInput
+          value={source.defaultRP}
+          label="Default Retention Policy"
+          onChange={this.onChangeInput('defaultRP')}
+        />
+      </>
+    )
+  }
+
+  private onChangeInput = (key: string) => (value: string) => {
+    const {source} = this.state
+    this.setState({source: {...source, [key]: value}})
+  }
+
+  private next = () => {
+    const {source} = this.state
+    console.log('creating source', source)
+    // const sourceFromServer = await createSource(source)
+    // this.props.addSource(sourceFromServer)
+    // console.log(source.name)
+  }
+}
+
+const mdtp = {
+  addSource: addSourceAction,
+}
+
+export default connect(null, mdtp, null, {withRef: true})(SourceStep)
+// export default SourceStep