diff --git a/ui/src/kapacitor/components/config/PagerDutyConfig.tsx b/ui/src/kapacitor/components/config/PagerDutyConfig.tsx
index 39c0528f3a..08d30ce5c3 100644
--- a/ui/src/kapacitor/components/config/PagerDutyConfig.tsx
+++ b/ui/src/kapacitor/components/config/PagerDutyConfig.tsx
@@ -1,6 +1,5 @@
 import React, {PureComponent} from 'react'
 import RedactedInput from './RedactedInput'
-import _ from 'lodash'
 
 import {Input} from 'src/types/kapacitor'
 
diff --git a/ui/src/kapacitor/components/config/SlackConfig.tsx b/ui/src/kapacitor/components/config/SlackConfig.tsx
index a18b60d798..d7c276e3e0 100644
--- a/ui/src/kapacitor/components/config/SlackConfig.tsx
+++ b/ui/src/kapacitor/components/config/SlackConfig.tsx
@@ -1,5 +1,4 @@
 import React, {PureComponent} from 'react'
-import _ from 'lodash'
 import RedactedInput from './RedactedInput'
 import {Input} from 'src/types/kapacitor'
 
diff --git a/ui/src/kapacitor/components/config/TalkConfig.tsx b/ui/src/kapacitor/components/config/TalkConfig.tsx
index 61d408b4cf..37a6b98f53 100644
--- a/ui/src/kapacitor/components/config/TalkConfig.tsx
+++ b/ui/src/kapacitor/components/config/TalkConfig.tsx
@@ -1,5 +1,4 @@
 import React, {PureComponent} from 'react'
-import PropTypes from 'prop-types'
 
 import RedactedInput from './RedactedInput'
 import {Input} from 'src/types/kapacitor'
diff --git a/ui/src/shared/components/ConfirmButton.js b/ui/src/shared/components/ConfirmButton.js
deleted file mode 100644
index 5a1d219b09..0000000000
--- a/ui/src/shared/components/ConfirmButton.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-
-import OnClickOutside from 'shared/components/OnClickOutside'
-
-class ConfirmButton extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      expanded: false,
-    }
-  }
-
-  handleButtonClick = () => {
-    if (this.props.disabled) {
-      return
-    }
-    this.setState({expanded: !this.state.expanded})
-  }
-
-  handleConfirmClick = () => {
-    this.setState({expanded: false})
-    this.props.confirmAction()
-  }
-
-  handleClickOutside = () => {
-    this.setState({expanded: false})
-  }
-
-  calculatePosition = () => {
-    if (!this.buttonDiv || !this.tooltipDiv) {
-      return ''
-    }
-
-    const windowWidth = window.innerWidth
-    const buttonRect = this.buttonDiv.getBoundingClientRect()
-    const tooltipRect = this.tooltipDiv.getBoundingClientRect()
-
-    const rightGap = windowWidth - buttonRect.right
-
-    if (tooltipRect.width / 2 > rightGap) {
-      return 'left'
-    }
-
-    return 'bottom'
-  }
-
-  render() {
-    const {
-      text,
-      confirmText,
-      type,
-      size,
-      square,
-      icon,
-      disabled,
-      customClass,
-    } = this.props
-    const {expanded} = this.state
-
-    const customClassString = customClass ? ` ${customClass}` : ''
-    const squareString = square ? ' btn-square' : ''
-    const expandedString = expanded ? ' active' : ''
-    const disabledString = disabled ? ' disabled' : ''
-
-    const classname = `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
-
-    return (
-      <div
-        className={classname}
-        onClick={this.handleButtonClick}
-        ref={r => (this.buttonDiv = r)}
-      >
-        {icon && <span className={`icon ${icon}`} />}
-        {text && text}
-        <div className={`confirm-button--tooltip ${this.calculatePosition()}`}>
-          <div
-            className="confirm-button--confirmation"
-            onClick={this.handleConfirmClick}
-            ref={r => (this.tooltipDiv = r)}
-          >
-            {confirmText}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-const {bool, func, string} = PropTypes
-
-ConfirmButton.defaultProps = {
-  confirmText: 'Confirm',
-  type: 'btn-default',
-  size: 'btn-sm',
-  square: false,
-}
-ConfirmButton.propTypes = {
-  text: string,
-  confirmText: string,
-  confirmAction: func.isRequired,
-  type: string,
-  size: string,
-  square: bool,
-  icon: string,
-  disabled: bool,
-  customClass: string,
-}
-
-export default OnClickOutside(ConfirmButton)
diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx
new file mode 100644
index 0000000000..e3db54be05
--- /dev/null
+++ b/ui/src/shared/components/ConfirmButton.tsx
@@ -0,0 +1,119 @@
+import React, {PureComponent} from 'react'
+import {ClickOutside} from 'src/shared/components/ClickOutside'
+
+interface Props {
+  text?: string
+  confirmText?: string
+  confirmAction: () => void
+  type?: string
+  size?: string
+  square?: boolean
+  icon?: string
+  disabled?: boolean
+  customClass?: string
+}
+
+interface State {
+  expanded: boolean
+}
+
+class ConfirmButton extends PureComponent<Props, State> {
+  public static defaultProps: Partial<Props> = {
+    confirmText: 'Confirm',
+    type: 'btn-default',
+    size: 'btn-sm',
+    square: false,
+  }
+
+  private buttonDiv: HTMLDivElement
+  private tooltipDiv: HTMLDivElement
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      expanded: false,
+    }
+  }
+
+  public render() {
+    const {
+      text,
+      confirmText,
+      type,
+      size,
+      square,
+      icon,
+      disabled,
+      customClass,
+    } = this.props
+    const {expanded} = this.state
+
+    const customClassString = customClass ? ` ${customClass}` : ''
+    const squareString = square ? ' btn-square' : ''
+    const expandedString = expanded ? ' active' : ''
+    const disabledString = disabled ? ' disabled' : ''
+
+    const classname = `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
+
+    return (
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div
+          className={classname}
+          onClick={this.handleButtonClick}
+          ref={r => (this.buttonDiv = r)}
+        >
+          {icon && <span className={`icon ${icon}`} />}
+          {text && text}
+          <div
+            className={`confirm-button--tooltip ${this.calculatePosition()}`}
+          >
+            <div
+              className="confirm-button--confirmation"
+              onClick={this.handleConfirmClick}
+              ref={r => (this.tooltipDiv = r)}
+            >
+              {confirmText}
+            </div>
+          </div>
+        </div>
+      </ClickOutside>
+    )
+  }
+
+  private handleButtonClick = () => {
+    if (this.props.disabled) {
+      return
+    }
+    this.setState({expanded: !this.state.expanded})
+  }
+
+  private handleConfirmClick = () => {
+    this.setState({expanded: false})
+    this.props.confirmAction()
+  }
+
+  private handleClickOutside = () => {
+    this.setState({expanded: false})
+  }
+
+  private calculatePosition = () => {
+    if (!this.buttonDiv || !this.tooltipDiv) {
+      return ''
+    }
+
+    const windowWidth = window.innerWidth
+    const buttonRect = this.buttonDiv.getBoundingClientRect()
+    const tooltipRect = this.tooltipDiv.getBoundingClientRect()
+
+    const rightGap = windowWidth - buttonRect.right
+
+    if (tooltipRect.width / 2 > rightGap) {
+      return 'left'
+    }
+
+    return 'bottom'
+  }
+}
+
+export default ConfirmButton
diff --git a/ui/src/shared/components/TagsAddButton.js b/ui/src/shared/components/TagsAddButton.js
deleted file mode 100644
index 24b0c17889..0000000000
--- a/ui/src/shared/components/TagsAddButton.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-
-import OnClickOutside from 'shared/components/OnClickOutside'
-import uuid from 'uuid'
-
-class TagsAddButton extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {open: false}
-  }
-
-  handleButtonClick = () => {
-    this.setState({open: !this.state.open})
-  }
-
-  handleMenuClick = item => () => {
-    this.setState({open: false})
-    this.props.onChoose(item)
-  }
-
-  handleClickOutside = () => {
-    this.setState({open: false})
-  }
-
-  render() {
-    const {open} = this.state
-    const {items} = this.props
-
-    const classname = `tags-add${open ? ' open' : ''}`
-    return (
-      <div className={classname} onClick={this.handleButtonClick}>
-        <span className="icon plus" />
-        <div className="tags-add--menu">
-          {items.map(item => (
-            <div
-              key={uuid.v4()}
-              className="tags-add--menu-item"
-              onClick={this.handleMenuClick(item)}
-            >
-              {item.text}
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-}
-
-const {array, func} = PropTypes
-
-TagsAddButton.propTypes = {
-  items: array.isRequired,
-  onChoose: func.isRequired,
-}
-
-export default OnClickOutside(TagsAddButton)
diff --git a/ui/src/shared/components/TagsAddButton.tsx b/ui/src/shared/components/TagsAddButton.tsx
new file mode 100644
index 0000000000..49517bfcbc
--- /dev/null
+++ b/ui/src/shared/components/TagsAddButton.tsx
@@ -0,0 +1,62 @@
+import React, {PureComponent} from 'react'
+
+import {ClickOutside} from 'src/shared/components/ClickOutside'
+import {DropdownItem} from 'src/types/kapacitor'
+import uuid from 'uuid'
+
+interface Props {
+  items: DropdownItem[]
+  onChoose: (item: DropdownItem) => void
+}
+
+interface State {
+  open: boolean
+}
+
+class TagsAddButton extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {open: false}
+  }
+
+  public render() {
+    const {open} = this.state
+    const {items} = this.props
+
+    const classname = `tags-add${open ? ' open' : ''}`
+    return (
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div className={classname} onClick={this.handleButtonClick}>
+          <span className="icon plus" />
+          <div className="tags-add--menu">
+            {items.map(item => (
+              <div
+                key={uuid.v4()}
+                className="tags-add--menu-item"
+                onClick={this.handleMenuClick(item)}
+              >
+                {item.text}
+              </div>
+            ))}
+          </div>
+        </div>
+      </ClickOutside>
+    )
+  }
+
+  private handleButtonClick = () => {
+    this.setState({open: !this.state.open})
+  }
+
+  private handleMenuClick = item => () => {
+    this.setState({open: false})
+    this.props.onChoose(item)
+  }
+
+  private handleClickOutside = () => {
+    this.setState({open: false})
+  }
+}
+
+export default TagsAddButton
diff --git a/ui/src/types/kapacitor.ts b/ui/src/types/kapacitor.ts
index 80028fa14f..715185598b 100644
--- a/ui/src/types/kapacitor.ts
+++ b/ui/src/types/kapacitor.ts
@@ -195,3 +195,7 @@ export interface Input {
 export interface Checkbox {
   checked: boolean
 }
+
+export interface DropdownItem {
+  text: string
+}