Move KapacitorForm to class based component

ui/src/dashboards/components/GraphOptionsCustomizableField.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent, ChangeEvent} from 'react'
+import React, {Component, ChangeEvent} from 'react'
 import {findDOMNode} from 'react-dom'
 import {
   DragSourceSpec,
@@ -112,7 +112,7 @@ function MyDragSource(dragv1, dragv2, dragfunc1) {
     isDragging: monitor.isDragging(),
   })
 )
-export default class GraphOptionsCustomizableField extends PureComponent<
+export default class GraphOptionsCustomizableField extends Component<
   GraphOptionsCustomizableFieldProps
 > {
   constructor(props) {

ui/src/kapacitor/components/KapacitorForm.tsx

@@ -1,11 +1,11 @@
-import React, {ChangeEvent, MouseEvent, SFC} from 'react'
+import React, {ChangeEvent, MouseEvent, PureComponent} from 'react'
 
 import AlertOutputs from 'src/kapacitor/components/AlertOutputs'
 import Input from 'src/kapacitor/components/KapacitorFormInput'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
-import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
 import {Kapacitor, Source} from 'src/types'
+import KapacitorFormSkipVerify from 'src/kapacitor/components/KapacitorFormSkipVerify'
 
 export interface Notification {
   id?: string
@@ -30,11 +30,13 @@ interface Props {
   notify: (message: Notification | NotificationFunc) => void
 }
 
-const KapacitorForm: SFC<Props> = ({
+class KapacitorForm extends PureComponent<Props> {
+  public render() {
+    const {
       onChangeUrl,
       onReset,
       kapacitor,
-  kapacitor: {url, name, username, password, insecureSkipVerify},
+      kapacitor: {name, username, password},
       onSubmit,
       exists,
       onInputChange,
@@ -42,14 +44,14 @@ const KapacitorForm: SFC<Props> = ({
       source,
       hash,
       notify,
-}) => (
+    } = this.props
+
+    return (
       <div className="page">
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-          <h1 className="page-header__title">{`${
+              <h1 className="page-header__title">{this.headerText}</h1>
-            exists ? 'Configure' : 'Add a New'
-          } Kapacitor Connection`}</h1>
             </div>
           </div>
         </div>
@@ -67,8 +69,8 @@ const KapacitorForm: SFC<Props> = ({
                         <Input
                           name="kapaUrl"
                           label="Kapacitor URL"
-                      value={url}
+                          value={this.url}
-                      placeholder={url}
+                          placeholder={this.url}
                           onChange={onChangeUrl}
                         />
                         <Input
@@ -95,25 +97,11 @@ const KapacitorForm: SFC<Props> = ({
                           inputType="password"
                         />
                       </div>
-                  {url &&
+                      {this.isSecure && (
-                    url.startsWith('https') && (
+                        <KapacitorFormSkipVerify
-                      <div className="form-group col-xs-12">
+                          kapacitor={kapacitor}
-                        <div className="form-control-static">
+                          onCheckboxChange={onCheckboxChange}
-                          <input
-                            type="checkbox"
-                            id="insecureSkipVerifyCheckbox"
-                            name="insecureSkipVerify"
-                            checked={insecureSkipVerify}
-                            onChange={onCheckboxChange}
                         />
-                          <label htmlFor="insecureSkipVerifyCheckbox">
-                            Unsafe SSL
-                          </label>
-                        </div>
-                        <label className="form-helper">
-                          {insecureSkipVerifyText}
-                        </label>
-                      </div>
                       )}
                       <div className="form-group form-group-submit col-xs-12 text-center">
                         <button
@@ -129,7 +117,7 @@ const KapacitorForm: SFC<Props> = ({
                           type="submit"
                           data-test="submit-button"
                         >
-                      {exists ? 'Update' : 'Connect'}
+                          {this.buttonText}
                         </button>
                       </div>
                     </form>
@@ -150,5 +138,41 @@ const KapacitorForm: SFC<Props> = ({
         </FancyScrollbar>
       </div>
     )
+  }
+
+  private get buttonText(): string {
+    const {exists} = this.props
+
+    if (exists) {
+      return 'Update'
+    }
+
+    return 'Connect'
+  }
+
+  private get headerText(): string {
+    const {exists} = this.props
+
+    let prefix = 'Add a New'
+    if (exists) {
+      prefix = 'Configure'
+    }
+
+    return `${prefix} Kapacitor Connection`
+  }
+
+  private get url(): string {
+    const {kapacitor: {url}} = this.props
+    if (url) {
+      return url
+    }
+
+    return ''
+  }
+
+  private get isSecure(): boolean {
+    return this.url.startsWith('https')
+  }
+}
 
 export default KapacitorForm

ui/src/kapacitor/components/KapacitorFormSkipVerify.tsx

@@ -0,0 +1,31 @@
+import React, {SFC, ChangeEvent} from 'react'
+import {Kapacitor} from 'src/types'
+import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
+
+interface Props {
+  kapacitor: Kapacitor
+  onCheckboxChange: (e: ChangeEvent<HTMLInputElement>) => void
+}
+
+const KapacitorFormSkipVerify: SFC<Props> = ({
+  kapacitor: {insecureSkipVerify},
+  onCheckboxChange,
+}) => {
+  return (
+    <div className="form-group col-xs-12">
+      <div className="form-control-static">
+        <input
+          type="checkbox"
+          id="insecureSkipVerifyCheckbox"
+          name="insecureSkipVerify"
+          checked={insecureSkipVerify}
+          onChange={onCheckboxChange}
+        />
+        <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
+      </div>
+      <label className="form-helper">{insecureSkipVerifyText}</label>
+    </div>
+  )
+}
+
+export default KapacitorFormSkipVerify