Allows users to select tickscript editor with mouse

ui/src/kapacitor/components/KapacitorForm.tsx

@@ -95,25 +95,26 @@ const KapacitorForm: SFC<Props> = ({
                       inputType="password"
                     />
                   </div>
-                  {url.startsWith('https') && (
-                    <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
+                  {url &&
+                    url.startsWith('https') && (
+                      <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>
-                      <label className="form-helper">
-                        {insecureSkipVerifyText}
-                      </label>
-                    </div>
-                  )}
+                    )}
                   <div className="form-group form-group-submit col-xs-12 text-center">
                     <button
                       className="btn btn-default"

ui/src/kapacitor/components/TickscriptEditor.js

@@ -21,6 +21,7 @@ class TickscriptEditor extends Component {
       lineNumbers: true,
       theme: 'material',
       tabIndex: 1,
+      readonly: false,
     }
 
     return (

ui/src/kapacitor/components/TickscriptID.js

@@ -19,7 +19,7 @@ class TickscriptID extends Component {
         onChange={onChangeID}
         placeholder="ID your TICKscript"
         spellCheck={false}
-        autoComplete={false}
+        autoComplete="false"
       />
     )
   }

ui/src/kapacitor/containers/TickscriptPage.tsx

@@ -316,7 +316,7 @@ export class TickscriptPage extends PureComponent<Props, State> {
       }
     } catch (error) {
       console.error(error)
-      notify(notifyTickscriptLoggingError(error))
+      notify(notifyTickscriptLoggingError('Could not collect kapacitor logs'))
       throw error
     }
   }

ui/src/shared/components/Notification.js

@@ -26,8 +26,10 @@ class Notification extends Component {
     const {notification: {duration}} = this.props
 
     // Trigger animation in
-    const {height} = this.notificationRef.getBoundingClientRect()
-    this.setState({height})
+    if (this.notificationRef) {
+      const {height} = this.notificationRef.getBoundingClientRect()
+      this.setState({height})
+    }
 
     if (duration >= 0) {
       // Automatically dismiss notification after duration prop
@@ -50,6 +52,14 @@ class Notification extends Component {
     )
   }
 
+  onNotificationRef = ref => {
+    if (ref) {
+      const {height} = ref.getBoundingClientRect()
+      this.setState({height})
+      this.notificationRef = ref
+    }
+  }
+
   render() {
     const {notification: {type, message, icon}} = this.props
     const {height, dismissed} = this.state
@@ -60,16 +70,11 @@ class Notification extends Component {
     })
     const notificationClass = `notification notification-${type}`
     const notificationMargin = 4
+    const style = {height: height + notificationMargin}
 
     return (
-      <div
-        className={notificationContainerClass}
-        style={{height: height + notificationMargin}}
-      >
-        <div
-          className={notificationClass}
-          ref={r => (this.notificationRef = r)}
-        >
+      <div className={notificationContainerClass} style={style}>
+        <div className={notificationClass} ref={this.onNotificationRef}>
           <span className={`icon ${icon}`} />
           <div className="notification-message">{message}</div>
           <button className="notification-close" onClick={this.handleDismiss} />

ui/src/shared/copy/notifications.js

@@ -580,5 +580,7 @@ export const notifyTickscriptLoggingError = message => ({
   message,
 })
 
-export const notifyKapacitorNotFound = () =>
-  'We could not find a Kapacitor configuration for this source.'
+export const notifyKapacitorNotFound = () => ({
+  ...defaultErrorNotification,
+  message: 'We could not find a Kapacitor configuration for this source.',
+})