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,125 +30,149 @@ interface Props {
   notify: (message: Notification | NotificationFunc) => void
 }
 
-const KapacitorForm: SFC<Props> = ({
+class KapacitorForm extends PureComponent<Props> {
-  onChangeUrl,
+  public render() {
-  onReset,
+    const {
-  kapacitor,
+      onChangeUrl,
-  kapacitor: {url, name, username, password, insecureSkipVerify},
+      onReset,
-  onSubmit,
+      kapacitor,
-  exists,
+      kapacitor: {name, username, password},
-  onInputChange,
+      onSubmit,
-  onCheckboxChange,
+      exists,
-  source,
+      onInputChange,
-  hash,
+      onCheckboxChange,
-  notify,
+      source,
-}) => (
+      hash,
-  <div className="page">
+      notify,
-    <div className="page-header">
+    } = this.props
-      <div className="page-header__container">
+
-        <div className="page-header__left">
+    return (
-          <h1 className="page-header__title">{`${
+      <div className="page">
-            exists ? 'Configure' : 'Add a New'
+        <div className="page-header">
-          } Kapacitor Connection`}</h1>
+          <div className="page-header__container">
+            <div className="page-header__left">
+              <h1 className="page-header__title">{this.headerText}</h1>
+            </div>
+          </div>
         </div>
-      </div>
+        <FancyScrollbar className="page-contents">
-    </div>
+          <div className="container-fluid">
-    <FancyScrollbar className="page-contents">
+            <div className="row">
-      <div className="container-fluid">
+              <div className="col-md-3">
-        <div className="row">
+                <div className="panel">
-          <div className="col-md-3">
+                  <div className="panel-heading">
-            <div className="panel">
+                    <h2 className="panel-title">Connection Details</h2>
-              <div className="panel-heading">
-                <h2 className="panel-title">Connection Details</h2>
-              </div>
-              <div className="panel-body">
-                <form onSubmit={onSubmit}>
-                  <div>
-                    <Input
-                      name="kapaUrl"
-                      label="Kapacitor URL"
-                      value={url}
-                      placeholder={url}
-                      onChange={onChangeUrl}
-                    />
-                    <Input
-                      name="name"
-                      label="Name"
-                      value={name}
-                      placeholder={name}
-                      onChange={onInputChange}
-                      maxLength={33}
-                    />
-                    <Input
-                      name="username"
-                      label="Username"
-                      value={username || ''}
-                      placeholder={username}
-                      onChange={onInputChange}
-                    />
-                    <Input
-                      name="password"
-                      label="password"
-                      placeholder="password"
-                      value={password || ''}
-                      onChange={onInputChange}
-                      inputType="password"
-                    />
                   </div>
-                  {url &&
+                  <div className="panel-body">
-                    url.startsWith('https') && (
+                    <form onSubmit={onSubmit}>
-                      <div className="form-group col-xs-12">
+                      <div>
-                        <div className="form-control-static">
+                        <Input
-                          <input
+                          name="kapaUrl"
-                            type="checkbox"
+                          label="Kapacitor URL"
-                            id="insecureSkipVerifyCheckbox"
+                          value={this.url}
-                            name="insecureSkipVerify"
+                          placeholder={this.url}
-                            checked={insecureSkipVerify}
+                          onChange={onChangeUrl}
-                            onChange={onCheckboxChange}
+                        />
-                          />
+                        <Input
-                          <label htmlFor="insecureSkipVerifyCheckbox">
+                          name="name"
-                            Unsafe SSL
+                          label="Name"
-                          </label>
+                          value={name}
-                        </div>
+                          placeholder={name}
-                        <label className="form-helper">
+                          onChange={onInputChange}
-                          {insecureSkipVerifyText}
+                          maxLength={33}
-                        </label>
+                        />
+                        <Input
+                          name="username"
+                          label="Username"
+                          value={username || ''}
+                          placeholder={username}
+                          onChange={onInputChange}
+                        />
+                        <Input
+                          name="password"
+                          label="password"
+                          placeholder="password"
+                          value={password || ''}
+                          onChange={onInputChange}
+                          inputType="password"
+                        />
                       </div>
-                    )}
+                      {this.isSecure && (
-                  <div className="form-group form-group-submit col-xs-12 text-center">
+                        <KapacitorFormSkipVerify
-                    <button
+                          kapacitor={kapacitor}
-                      className="btn btn-default"
+                          onCheckboxChange={onCheckboxChange}
-                      type="button"
+                        />
-                      onClick={onReset}
+                      )}
-                      data-test="reset-button"
+                      <div className="form-group form-group-submit col-xs-12 text-center">
-                    >
+                        <button
-                      Reset
+                          className="btn btn-default"
-                    </button>
+                          type="button"
-                    <button
+                          onClick={onReset}
-                      className="btn btn-success"
+                          data-test="reset-button"
-                      type="submit"
+                        >
-                      data-test="submit-button"
+                          Reset
-                    >
+                        </button>
-                      {exists ? 'Update' : 'Connect'}
+                        <button
-                    </button>
+                          className="btn btn-success"
+                          type="submit"
+                          data-test="submit-button"
+                        >
+                          {this.buttonText}
+                        </button>
+                      </div>
+                    </form>
                   </div>
-                </form>
+                </div>
+              </div>
+              <div className="col-md-9">
+                <AlertOutputs
+                  hash={hash}
+                  exists={exists}
+                  source={source}
+                  kapacitor={kapacitor}
+                  notify={notify}
+                />
               </div>
             </div>
           </div>
-          <div className="col-md-9">
+        </FancyScrollbar>
-            <AlertOutputs
-              hash={hash}
-              exists={exists}
-              source={source}
-              kapacitor={kapacitor}
-              notify={notify}
-            />
-          </div>
-        </div>
       </div>
-    </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