Set kapacitor state in ConnectionWizard and call syncHostnames for new kapacitors

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Bug Fixes
 1. [4895](https://github.com/influxdata/chronograf/pull/4895): Properly set scroll to row for table graph
+1. [4906](https://github.com/influxdata/chronograf/pull/4906): Prevent Kapacitor URLs from being overwritten in Connection Wizard.
 
 ## v1.7.5 [2018-12-14]
 

ui/src/sources/components/ConnectionWizard.tsx

@@ -134,6 +134,7 @@ class ConnectionWizard extends PureComponent<Props & WithRouterProps, State> {
             setError={this.handleSetKapacitorError}
             kapacitor={kapacitor}
             showNewKapacitor={showNewKapacitor}
+            setKapacitorDraft={this.setKapacitorDraft}
           />
         </WizardStep>
         <WizardStep
@@ -223,6 +224,10 @@ class ConnectionWizard extends PureComponent<Props & WithRouterProps, State> {
     return response
   }
 
+  private setKapacitorDraft = (kapacitor: Kapacitor) => {
+    this.setState({kapacitor})
+  }
+
   private handleKapacitorPrev = () => {}
 
   private handleSetKapacitorError = (b: boolean) => {

ui/src/sources/components/KapacitorStep.tsx

@@ -42,6 +42,7 @@ interface Props {
   setActiveKapacitor: sourcesActions.SetActiveKapacitor
   fetchKapacitors: sourcesActions.FetchKapacitorsAsync
   showNewKapacitor?: boolean
+  setKapacitorDraft: (kapacitor: Kapacitor) => void
 }
 
 interface State {
@@ -73,20 +74,15 @@ class KapacitorStep extends Component<Props, State> {
   constructor(props: Props) {
     super(props)
 
-    const ActiveKapacitor = ActiveKapacitorFromSources(
+    const activeKapacitor =
-      props.source,
+      ActiveKapacitorFromSources(props.source, props.sources) || props.kapacitor
-      props.sources
-    )
 
-    let kapacitor
+    let kapacitor = syncHostnames(props.source, DEFAULT_KAPACITOR)
-    if (props.showNewKapacitor) {
+
-      kapacitor = DEFAULT_KAPACITOR
+    if (!props.showNewKapacitor && activeKapacitor) {
-    } else {
+      kapacitor = activeKapacitor
-      kapacitor = ActiveKapacitor || props.kapacitor || DEFAULT_KAPACITOR
     }
 
-    kapacitor = syncHostnames(props.source, kapacitor)
-
     this.state = {kapacitor}
   }
 
@@ -98,14 +94,19 @@ class KapacitorStep extends Component<Props, State> {
       if (this.existingKapacitorHasChanged) {
         try {
           const {data: updatedKapacitor} = await updateKapacitor(kapacitor)
+
           await this.fetchNewKapacitors()
           await pingKapacitor(updatedKapacitor)
+
           notify(notifyKapacitorUpdated())
+
           this.setState({kapacitor: updatedKapacitor})
+
           return {error: false, payload: updatedKapacitor}
         } catch (error) {
           console.error(error)
           notify(notifyCouldNotConnectToUpdatedKapacitor(kapacitor.name))
+
           return {error: true, payload: null}
         }
       }
@@ -114,10 +115,14 @@ class KapacitorStep extends Component<Props, State> {
 
     try {
       const {data: newKapacitor} = await createKapacitor(source, kapacitor)
+
       await this.fetchNewKapacitors()
       await pingKapacitor(newKapacitor)
+
       this.setState({kapacitor: newKapacitor})
+
       notify(notifyKapacitorSuccess())
+
       return {error: false, payload: newKapacitor}
     } catch (error) {
       console.error(error)
@@ -142,10 +147,12 @@ class KapacitorStep extends Component<Props, State> {
   }
 
   private onChangeInput = (key: string) => (value: string | boolean) => {
-    const {setError} = this.props
+    const {setError, setKapacitorDraft} = this.props
     const {kapacitor} = this.state
 
-    this.setState({kapacitor: {...kapacitor, [key]: value}})
+    this.setState({kapacitor: {...kapacitor, [key]: value}}, () => {
+      setKapacitorDraft(this.state.kapacitor)
+    })
 
     setError(false)
   }