Convert some .js[x] -> .ts[x]

server/zanata-frontend/src/app/components/DraggableVersionPanels/index.js → server/zanata-frontend/src/app/components/DraggableVersionPanels/index.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
-import { Component } from 'react'
 import * as PropTypes from 'prop-types'
-import {FromProjectVersionType} from '../../utils/prop-types-util'
+import React, { ClassAttributes, ReactElement, StatelessComponent } from 'react'
+import { Component } from 'react'
 import {Icon, LockIcon} from '../../components'
+import {FromProjectVersionType} from '../../utils/prop-types-util'
 import {
   SortableContainer,
   SortableElement,
-  SortableHandle
+  SortableHandle,
+  WrappedComponent
 } from 'react-sortable-hoc'
 import {
   Button,
@@ -26,16 +27,19 @@ export const DragHandle = SortableHandle(() =>
   <Icon name='menu' className='n1' parentClassName='drag-handle'
     title='click to drag' />)
 
-export class Item extends Component {
-  static propTypes = {
+interface ItemProps {
+  dispatch: (action: any) => void
+  removeVersion: (...args: any[]) => any,
+  value: any,
+}
+
+export class Item extends Component<ItemProps, {}> {
+  private static propTypes = {
     value: FromProjectVersionType.isRequired,
     removeVersion: PropTypes.func.isRequired
   }
-  removeVersion = () => {
-    const { value: { version, projectSlug } } = this.props
-    this.props.removeVersion(projectSlug, version)
-  }
-  render () {
+
+  public render () {
     const { value: { version, projectSlug } } = this.props
     return <ListGroupItem className='v' >
       <DragHandle />
@@ -49,15 +53,38 @@ export class Item extends Component {
       </Button>
     </ListGroupItem>
   }
+
+  private removeVersion = () => {
+    const { value: { version, projectSlug } } = this.props
+    this.props.removeVersion(projectSlug, version)
+  }
+}
+
+const SortableItem = SortableElement(Item as any) as any
+
+type EntityStatus = 'READONLY' | 'ACTIVE' | 'OBSOLETE'
+
+interface VersionDto {
+  id: string
+  status: EntityStatus
+}
+
+interface FromProjectVersion {
+  projectSlug: string,
+  version: VersionDto
+}
+
+interface ItemsProps {
+  items: FromProjectVersion[]
+  removeVersion: (...args: any[]) => any
 }
-const SortableItem = SortableElement(Item)
 
-class Items extends Component {
-  static propTypes = {
+class Items extends Component<ItemsProps, {}> {
+  private static propTypes = {
     items: PropTypes.arrayOf(FromProjectVersionType).isRequired,
     removeVersion: PropTypes.func.isRequired
   }
-  render () {
+  public render () {
     const { items, removeVersion } = this.props
     const sortableItems = items.map((value, index) => (
       <SortableItem
@@ -81,18 +108,22 @@ class Items extends Component {
   }
 }
 
-const SortableList = SortableContainer(Items)
+const SortableList = SortableContainer(Items as any) as any
 
 /**
  * Draggable version priority list
  */
-class DraggableVersionPanels extends Component {
-  static propTypes = {
+class DraggableVersionPanels extends Component<{
+  selectedVersions: FromProjectVersion[];
+  onDraggableMoveEnd: (...args: any[]) => any;
+  removeVersion: (...args: any[]) => any;
+}, {}> {
+  private static propTypes = {
     selectedVersions: PropTypes.arrayOf(FromProjectVersionType).isRequired,
     onDraggableMoveEnd: PropTypes.func.isRequired,
     removeVersion: PropTypes.func.isRequired
   }
-  render () {
+  public render () {
     if (this.props.selectedVersions.length === 0) {
       return (
         <span className="no-v text-muted">

server/zanata-frontend/src/app/components/Icon/Icon.story.js

@@ -1,3 +1,4 @@
+// @ts-check
 import React from 'react'
 import {storiesOf} from '@storybook/react'
 import {Icon} from '../'

server/zanata-frontend/src/app/components/Icon/index.jsx → server/zanata-frontend/src/app/components/Icon/index.tsx

@@ -1,12 +1,19 @@
-import React from 'react'
-import * as PropTypes from 'prop-types'
 import { isUndefined } from 'lodash'
+import * as PropTypes from 'prop-types'
+import React from 'react'
 
-const Icon = ({
+interface IconProps {
+  className?: string,
+  name: string,
+  parentClassName?: string,
+  title?: string,
+}
+
+const Icon: React.StatelessComponent<IconProps> = ({
   name,
   parentClassName,
   className,
-  ...props
+  ...props,
 }) => {
   const svgIcon = `<use xlink:href="#Icon-${name}" />`
   const parentCSS = isUndefined(parentClassName) ? '' : parentClassName
@@ -19,13 +26,13 @@ const Icon = ({
 }
 
 Icon.propTypes = {
+  className: PropTypes.string,
   /**
    * The name of the icon.
    * See list.js in the same folder for possible icons.
    */
   name: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  parentClassName: PropTypes.string
+  parentClassName: PropTypes.string,
 }
 
 export default Icon

server/zanata-frontend/src/app/components/Loader/index.js → server/zanata-frontend/src/app/components/Loader/index.tsx

@@ -1,10 +1,8 @@
-// @ts-check
-import React from 'react'
 import * as PropTypes from 'prop-types'
+import React from 'react'
 import Loading from 'react-loading'
 
-/** @type { React.StatelessComponent<{className}> } */
-const Loader = ({ className = 'loader' }) => {
+const Loader: React.SFC<LoaderProps> = ({ className = 'loader' }) => {
   return (
     <span className={className}>
       <span>
@@ -14,6 +12,10 @@ const Loader = ({ className = 'loader' }) => {
   )
 }
 
+interface LoaderProps {
+  className: string
+}
+
 Loader.propTypes = {
   className: PropTypes.string
 }

server/zanata-frontend/src/app/components/LockIcon/index.js → server/zanata-frontend/src/app/components/LockIcon/index.tsx

@@ -1,17 +1,15 @@
 import React from 'react'
-import {Tooltip, OverlayTrigger} from 'react-bootstrap'
+import {OverlayTrigger, Tooltip} from 'react-bootstrap'
 import {Icon} from '../../components'
-import {entityStatusPropType} from '../../utils/prop-types-util'
 import {isEntityStatusReadOnly} from '../../utils/EnumValueUtils'
+import {entityStatusPropType} from '../../utils/prop-types-util'
 
 const DO_NOT_RENDER = null
 
 /**
  * Version Lock Icon with tooltip
- *
- * @type { React.StatelessComponent<{status}> }
  */
-const LockIcon = ({status}) => {
+const LockIcon: React.SFC<LockIconProps> = ({status}) => {
   const tooltipReadOnly = <Tooltip id='tooltipreadonly'>Read only</Tooltip>
   return isEntityStatusReadOnly(status)
   ? (
@@ -21,6 +19,11 @@ const LockIcon = ({status}) => {
   )
   : DO_NOT_RENDER
 }
+
+interface LockIconProps {
+  status: any // TODO should be one of entityStatuses
+}
+
 LockIcon.propTypes = {
   status: entityStatusPropType
 }

server/zanata-frontend/src/app/components/Modal/ModalFooter.tsx

@@ -1,10 +1,9 @@
-// @ts-check
-import React from 'react'
 import * as PropTypes from 'prop-types'
+import React from 'react'
 
 const ModalFooter: React.StatelessComponent<{children: any, props?: any}> = ({
   children,
-  ...props
+  ...props,
 }) => {
   return (
     <div className='modal-footer'
@@ -18,8 +17,8 @@ const ModalFooter: React.StatelessComponent<{children: any, props?: any}> = ({
 ModalFooter.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node]
-  )
+    PropTypes.node,
+  ])
 }
 
 export default ModalFooter

server/zanata-frontend/src/app/containers/UserProfile/CategoryItemMatrix.jsx → server/zanata-frontend/src/app/containers/UserProfile/CategoryItemMatrix.tsx

@@ -1,11 +1,8 @@
-// @ts-check
 import * as PropTypes from 'prop-types'
 import React from 'react'
 import { isEmpty, isUndefined } from 'lodash'
 
-/** @type
- * { React.StatelessComponent<{itemTitle, itemName, wordCount, props?}> } */
-const CategoryItemMatrix = ({
+const CategoryItemMatrix: React.SFC<{itemTitle, itemName, wordCount, props?}> = ({
   itemTitle,
   itemName,
   wordCount,

server/zanata-frontend/src/app/containers/UserProfile/DayMatrix.jsx

@@ -1,6 +1,6 @@
 // @ts-check
 import * as PropTypes from 'prop-types'
-import React, {StatelessComponent} from 'react'
+import React from 'react'
 import { ContentStates } from '../../constants/Options'
 import dateUtil from '../../utils/DateHelper'
 import { Button } from 'react-bootstrap'
@@ -15,7 +15,7 @@ const cssClass = {
   needswork: 'warning'
 }
 
-/** @type { StatelessComponent<{key?, dateLabel?, date?, wordCount?, selectedDay?, selectedContentState?, handleSelectedDayChanged?, props?}> } */
+/** @type { React.StatelessComponent<{key?, dateLabel?, date?, wordCount?, selectedDay?, selectedContentState?, handleSelectedDayChanged?, props?}> } */
 const DayMatrix = ({
   dateLabel,
   date,

server/zanata-frontend/src/app/editor/components/TransUnitStatus.js → server/zanata-frontend/src/app/editor/components/TransUnitStatus.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
 import * as PropTypes from 'prop-types'
-import Icon from '../../components'
+import React from 'react'
+import { Icon } from '../../components'
 import cx from 'classnames'
 
 const statusNames = {
@@ -10,16 +10,20 @@ const statusNames = {
   approved: 'Approved'
 }
 
+interface TransUnitStatusProps {
+  phrase: any
+}
+
 /**
  * Status indicator showing the state of the translations
  * and some other metadata about a phrase.
  */
-class TransUnitStatus extends React.Component {
-  static propTypes = {
+class TransUnitStatus extends React.Component<TransUnitStatusProps, any> {
+  private static propTypes = {
     phrase: PropTypes.object.isRequired
   }
 
-  render () {
+  public render () {
     const phrase = this.props.phrase
     const className = cx('TransUnit-status', {
       // loading if there is an in-progress save object
@@ -29,7 +33,7 @@ class TransUnitStatus extends React.Component {
     const comments = phrase.comments
       ? (
       <li className="TransUnit-metaDataItem TransUnit-metaDataComments">
-        <button tabIndex="-1"
+        <button tabIndex={-1}
           className="TransUnit-metaDataButton"
           title={phrase.comments + ' comments'}>
           <Icon name="comment" title="Comments" />
@@ -43,7 +47,7 @@ class TransUnitStatus extends React.Component {
     const errors = phrase.errors
       ? (
       <li className="TransUnit-metaDataItem TransUnit-metaDataErrors">
-        <button tabIndex="-1"
+        <button tabIndex={-1}
           className="TransUnit-metaDataButton"
           title="1 Error">
           <span className="u-textDanger">