Convert component to TypeScript

Thanks for help @121watts

ui/src/admin/components/chronograf/UsersTableRow.js

@@ -1,88 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Dropdown from 'shared/components/Dropdown'
-import ConfirmButton from 'shared/components/ConfirmButton'
-
-import {USER_ROLES} from 'src/admin/constants/chronografAdmin'
-import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
-
-const UsersTableRow = ({
-  user,
-  organization,
-  onChangeUserRole,
-  onDelete,
-  meID,
-}) => {
-  const {colRole, colProvider, colScheme} = USERS_TABLE
-
-  const dropdownRolesItems = USER_ROLES.map(r => ({
-    ...r,
-    text: r.name,
-  }))
-  const currentRole = user.roles.find(
-    role => role.organization === organization.id
-  )
-
-  const userIsMe = user.id === meID
-
-  const wrappedDelete = () => {
-    onDelete(user)
-  }
-
-  const removeWarning = 'Remove this user\nfrom Current Org?'
-
-  return (
-    <tr className={'chronograf-admin-table--user'}>
-      <td>
-        {userIsMe ? (
-          <strong className="chronograf-user--me">
-            <span className="icon user" />
-            {user.name}
-          </strong>
-        ) : (
-          <strong>{user.name}</strong>
-        )}
-      </td>
-      <td style={{width: colRole}}>
-        <span className="chronograf-user--role">
-          <Dropdown
-            items={dropdownRolesItems}
-            selected={currentRole.name}
-            onChoose={onChangeUserRole(user, currentRole)}
-            buttonColor="btn-primary"
-            buttonSize="btn-xs"
-            className="dropdown-stretch"
-          />
-        </span>
-      </td>
-      <td style={{width: colProvider}}>{user.provider}</td>
-      <td style={{width: colScheme}}>{user.scheme}</td>
-      <td className="text-right">
-        <ConfirmButton
-          confirmText={removeWarning}
-          confirmAction={wrappedDelete}
-          size="btn-xs"
-          type="btn-danger"
-          text="Remove"
-          customClass="table--show-on-row-hover"
-        />
-      </td>
-    </tr>
-  )
-}
-
-const {func, shape, string} = PropTypes
-
-UsersTableRow.propTypes = {
-  user: shape(),
-  organization: shape({
-    name: string.isRequired,
-    id: string.isRequired,
-  }),
-  onChangeUserRole: func.isRequired,
-  onDelete: func.isRequired,
-  meID: string.isRequired,
-}
-
-export default UsersTableRow

ui/src/admin/components/chronograf/UsersTableRow.tsx

@@ -0,0 +1,103 @@
+import React, {PureComponent} from 'react'
+
+import Dropdown from 'src/shared/components/Dropdown'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
+
+import {USER_ROLES} from 'src/admin/constants/chronografAdmin'
+import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
+import {User, Role} from 'src/types'
+
+interface Organization {
+  name: string
+  id: string
+}
+
+interface DropdownRole {
+  text: string
+  name: string
+}
+
+interface Props {
+  user: User
+  organization: Organization
+  onChangeUserRole: (User, Role) => void
+  onDelete: (User) => void
+  meID: string
+}
+
+class UsersTableRow extends PureComponent<Props> {
+  public render() {
+    const {user, onChangeUserRole} = this.props
+    const {colRole, colProvider, colScheme} = USERS_TABLE
+
+    return (
+      <tr className={'chronograf-admin-table--user'}>
+        <td>
+          {this.isMe ? (
+            <strong className="chronograf-user--me">
+              <span className="icon user" />
+              {user.name}
+            </strong>
+          ) : (
+            <strong>{user.name}</strong>
+          )}
+        </td>
+        <td style={{width: colRole}}>
+          <span className="chronograf-user--role">
+            <Dropdown
+              items={this.rolesDropdownItems}
+              selected={this.currentRole.name}
+              onChoose={onChangeUserRole(user, this.currentRole)}
+              buttonColor="btn-primary"
+              buttonSize="btn-xs"
+              className="dropdown-stretch"
+            />
+          </span>
+        </td>
+        <td style={{width: colProvider}}>{user.provider}</td>
+        <td style={{width: colScheme}}>{user.scheme}</td>
+        <td className="text-right">
+          <ConfirmButton
+            confirmText={this.confirmationText}
+            confirmAction={this.handleDelete}
+            size="btn-xs"
+            type="btn-danger"
+            text="Remove"
+            customClass="table--show-on-row-hover"
+          />
+        </td>
+      </tr>
+    )
+  }
+
+  private handleDelete = (): void => {
+    const {user, onDelete} = this.props
+
+    onDelete(user)
+  }
+
+  private get rolesDropdownItems(): DropdownRole[] {
+    return USER_ROLES.map(r => ({
+      ...r,
+      text: r.name,
+    }))
+  }
+
+  private get currentRole(): Role {
+    const {user, organization} = this.props
+
+    return user.roles.find(role => role.organization === organization.id)
+  }
+
+  private get isMe(): boolean {
+    const {user, meID} = this.props
+
+    return user.id === meID
+  }
+
+  private get confirmationText(): string {
+    return 'Remove this user\nfrom Current Org?'
+  }
+}
+
+export default UsersTableRow

ui/src/shared/components/ConfirmButton.tsx

@@ -37,37 +37,18 @@ class ConfirmButton extends PureComponent<Props, State> {
   }
 
   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}`
+    const {text, confirmText, icon} = this.props
 
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
         <div
-          className={classname}
+          className={this.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--tooltip ${this.calculatePosition}`}>
             <div
               className="confirm-button--confirmation"
               onClick={this.handleConfirmClick}
@@ -81,6 +62,18 @@ class ConfirmButton extends PureComponent<Props, State> {
     )
   }
 
+  private get className() {
+    const {type, size, square, 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' : ''
+
+    return `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
+  }
+
   private handleButtonClick = () => {
     if (this.props.disabled) {
       return
@@ -97,7 +90,7 @@ class ConfirmButton extends PureComponent<Props, State> {
     this.setState({expanded: false})
   }
 
-  private calculatePosition = () => {
+  private get calculatePosition() {
     if (!this.buttonDiv || !this.tooltipDiv) {
       return ''
     }