change ConfirmButtons to typescript and refactor; create initial ConfirmButtons tests

ui/src/shared/components/ConfirmButtons.js

@@ -1,94 +0,0 @@
-import React, {PropTypes, Component} from 'react'
-import classnames from 'classnames'
-
-import OnClickOutside from 'shared/components/OnClickOutside'
-
-class ConfirmButtons extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  handleConfirm = item => () => {
-    this.props.onConfirm(item)
-  }
-
-  handleCancel = item => () => {
-    this.props.onCancel(item)
-  }
-
-  handleClickOutside = () => {
-    this.props.onClickOutside(this.props.item)
-  }
-
-  render() {
-    const {
-      item,
-      buttonSize,
-      isDisabled,
-      confirmLeft,
-      confirmHoverText,
-    } = this.props
-    const hoverText = confirmHoverText || 'Save'
-
-    return confirmLeft
-      ? <div className="confirm-buttons">
-          <button
-            className={classnames('btn btn-success btn-square', {
-              [buttonSize]: buttonSize,
-            })}
-            disabled={isDisabled}
-            title={isDisabled ? `Cannot ${hoverText}` : hoverText}
-            onClick={this.handleConfirm(item)}
-          >
-            <span className="icon checkmark" />
-          </button>
-          <button
-            className={classnames('btn btn-info btn-square', {
-              [buttonSize]: buttonSize,
-            })}
-            onClick={this.handleCancel(item)}
-          >
-            <span className="icon remove" />
-          </button>
-        </div>
-      : <div className="confirm-buttons">
-          <button
-            className={classnames('btn btn-info btn-square', {
-              [buttonSize]: buttonSize,
-            })}
-            onClick={this.handleCancel(item)}
-          >
-            <span className="icon remove" />
-          </button>
-          <button
-            className={classnames('btn btn-success btn-square', {
-              [buttonSize]: buttonSize,
-            })}
-            disabled={isDisabled}
-            title={isDisabled ? `Cannot ${hoverText}` : hoverText}
-            onClick={this.handleConfirm(item)}
-          >
-            <span className="icon checkmark" />
-          </button>
-        </div>
-  }
-}
-
-const {func, oneOfType, shape, string, bool} = PropTypes
-
-ConfirmButtons.propTypes = {
-  onConfirm: func.isRequired,
-  item: oneOfType([shape(), string]),
-  onCancel: func.isRequired,
-  buttonSize: string,
-  isDisabled: bool,
-  onClickOutside: func,
-  confirmLeft: bool,
-  confirmHoverText: string,
-}
-
-ConfirmButtons.defaultProps = {
-  buttonSize: 'btn-sm',
-  onClickOutside: () => {},
-}
-export default OnClickOutside(ConfirmButtons)

ui/src/shared/components/ConfirmButtons.tsx

@@ -0,0 +1,89 @@
+import React, {PureComponent} from 'react'
+import classnames from 'classnames'
+
+import OnClickOutside from 'src/shared/components/OnClickOutside'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
+
+type Item = Object | string
+
+interface ConfirmButtonsProps {
+  onConfirm: (item: Item) => void
+  item: Item
+  onCancel: (item: Item) => void
+  buttonSize?: string
+  isDisabled?: boolean
+  onClickOutside?: (item: Item) => void
+  confirmLeft?: boolean
+  confirmHoverText?: string
+}
+
+class ConfirmButtons extends PureComponent<ConfirmButtonsProps, {}> {
+  constructor(props) {
+    super(props)
+  }
+
+  public static defaultProps: Partial<ConfirmButtonsProps> = {
+    buttonSize: 'btn-sm',
+    onClickOutside: () => {},
+  }
+
+  handleConfirm = item => () => {
+    this.props.onConfirm(item)
+  }
+
+  handleCancel = item => () => {
+    this.props.onCancel(item)
+  }
+
+  handleClickOutside = () => {
+    this.props.onClickOutside(this.props.item)
+  }
+
+  render() {
+    const {
+      item,
+      buttonSize,
+      isDisabled,
+      confirmLeft,
+      confirmHoverText,
+    } = this.props
+    const hoverText = confirmHoverText || 'Save'
+
+    const confirmClass = classnames('btn btn-success btn-square', {
+      [buttonSize]: buttonSize,
+    })
+
+    const cancelClass = classnames('btn btn-info btn-square', {
+      [buttonSize]: buttonSize,
+    })
+    return confirmLeft
+      ? <div className="confirm-buttons">
+          <ConfirmButton
+            customClass={confirmClass}
+            disabled={isDisabled}
+            confirmAction={this.handleConfirm(item)}
+            icon="icon checkmark"
+          />
+          <ConfirmButton
+            customClass={cancelClass}
+            confirmAction={this.handleCancel(item)}
+            icon="icon remove"
+          />
+        </div>
+      : <div className="confirm-buttons">
+          <ConfirmButton
+            customClass={cancelClass}
+            confirmAction={this.handleCancel(item)}
+            icon="icon remove"
+          />
+          <ConfirmButton
+            customClass={confirmClass}
+            disabled={isDisabled}
+            confirmAction={this.handleConfirm(item)}
+            icon="icon checkmark"
+          />
+        </div>
+  }
+}
+
+export default OnClickOutside(ConfirmButtons)

ui/test/shared/components/ConfirmButtons.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import ConfirmButtons from 'src/shared/components/ConfirmButtons'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
+
+import {shallow} from 'enzyme'
+
+const props = {}
+
+describe('Componenets.Shared.ConfirmButtons', () => {
+  describe('rendering', () => {
+    it('has a confirm and cancel button', () => {
+      const wrapper = shallow(<ConfirmButtons {...props} />)
+      const buttons = wrapper.dive().find(ConfirmButton)
+      expect(buttons.length).toBe(2)
+    })
+  })
+
+  describe('user interaction', () => {
+    it('')
+  })
+})