Convert KapacitorRulesTable to working TypeScript

ui/src/kapacitor/components/KapacitorRulesTable.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {PureComponent, SFC, MouseEvent} from 'react'
 import {Link} from 'react-router'
 import _ from 'lodash'
 
+import {AlertRule, Source} from 'src/types'
+
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 import {parseAlertNodeList} from 'src/shared/parsing/parseHandlersFromRule'
 import {TASKS_TABLE} from 'src/kapacitor/constants/tableSizing'
@@ -15,7 +16,26 @@ const {
   colActions,
 } = TASKS_TABLE
 
-const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
+interface KapacitorRulesTableProps {
+  rules: AlertRule[]
+  source: Source
+  onChangeRuleStatus: (rule: AlertRule) => void
+  onDelete: (rule: AlertRule) => void
+}
+
+interface RuleRowProps {
+  rule: AlertRule
+  source: Source
+  onChangeRuleStatus: (rule: AlertRule) => void
+  onDelete: (rule: AlertRule) => void
+}
+
+const KapacitorRulesTable: SFC<KapacitorRulesTableProps> = ({
+  rules,
+  source,
+  onChangeRuleStatus,
+  onDelete,
+}) => (
   <table className="table v-center table-highlight">
     <thead>
       <tr>
@@ -43,64 +63,54 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
       })}
     </tbody>
   </table>
+)
 
 const handleDelete = (rule, onDelete) => onDelete(rule)
 
-const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
-  <tr key={rule.id}>
-    <td style={{minWidth: colName}}>
-      <Link to={`/sources/${source.id}/alert-rules/${rule.id}`}>
-        {rule.name}
-      </Link>
-    </td>
-    <td style={{width: colTrigger, textTransform: 'capitalize'}}>
-      {rule.trigger}
-    </td>
-    <td style={{width: colMessage}}>
-      {rule.message}
-    </td>
-    <td style={{width: colAlerts}}>
-      {parseAlertNodeList(rule)}
-    </td>
-    <td style={{width: colEnabled}} className="text-center">
-      <div className="dark-checkbox">
-        <input
-          id={`kapacitor-rule-row-task-enabled ${rule.id}`}
-          className="form-control-static"
-          type="checkbox"
-          defaultChecked={rule.status === 'enabled'}
-          onClick={onChangeRuleStatus(rule)}
-        />
-        <label htmlFor={`kapacitor-rule-row-task-enabled ${rule.id}`} />
-      </div>
-    </td>
-    <td style={{width: colActions}} className="text-right">
-      <ConfirmButton
-        text="Delete"
-        type="btn-danger"
-        size="btn-xs"
-        customClass="table--show-on-row-hover"
-        confirmAction={handleDelete(rule, onDelete)}
-      />
-    </td>
-  </tr>
+class RuleRow extends PureComponent<RuleRowProps> {
+  handleClickRuleStatusEnabled(_: MouseEvent<HTMLInputElement>) {
+    return (rule: AlertRule) => this.props.onChangeRuleStatus(rule)
+  }
 
-const {arrayOf, func, shape, string} = PropTypes
+  render() {
+    const {rule, source, onDelete} = this.props
 
-KapacitorRulesTable.propTypes = {
-  rules: arrayOf(shape()),
-  onChangeRuleStatus: func,
-  onDelete: func,
-  source: shape({
-    id: string.isRequired,
-  }).isRequired,
-}
-
-RuleRow.propTypes = {
-  rule: shape(),
-  source: shape(),
-  onChangeRuleStatus: func,
-  onDelete: func,
+    return (
+      <tr key={rule.id}>
+        <td style={{minWidth: colName}}>
+          <Link to={`/sources/${source.id}/alert-rules/${rule.id}`}>
+            {rule.name}
+          </Link>
+        </td>
+        <td style={{width: colTrigger, textTransform: 'capitalize'}}>
+          {rule.trigger}
+        </td>
+        <td style={{width: colMessage}}>{rule.message}</td>
+        <td style={{width: colAlerts}}>{parseAlertNodeList(rule)}</td>
+        <td style={{width: colEnabled}} className="text-center">
+          <div className="dark-checkbox">
+            <input
+              id={`kapacitor-rule-row-task-enabled ${rule.id}`}
+              className="form-control-static"
+              type="checkbox"
+              defaultChecked={rule.status === 'enabled'}
+              onClick={this.handleClickRuleStatusEnabled}
+            />
+            <label htmlFor={`kapacitor-rule-row-task-enabled ${rule.id}`} />
+          </div>
+        </td>
+        <td style={{width: colActions}} className="text-right">
+          <ConfirmButton
+            text="Delete"
+            type="btn-danger"
+            size="btn-xs"
+            customClass="table--show-on-row-hover"
+            confirmAction={handleDelete(rule, onDelete)}
+          />
+        </td>
+      </tr>
+    )
+  }
 }
 
 export default KapacitorRulesTable