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>
pull/4129/head
Deniz Kusefoglu 2018-07-31 14:22:20 -07:00
parent a1758abc97
commit ea6efe8aa6
3 changed files with 118 additions and 17 deletions

View File

@ -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"

View File

@ -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}
onPrevious={this.handleFirstPrev}
nextLabel="Continue"
onNext={this.handleSourceNext}
nextLabel="Create Source"
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,
})
}

View File

@ -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