Convert a curated selection of shared components to TypeScript

ui/src/admin/components/EmptyRow.js

@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const EmptyRow = ({tableName}) => (
-  <tr className="table-empty-state">
-    <th colSpan="5">
-      <p>
-        You don't have any {tableName},<br />why not create one?
-      </p>
-    </th>
-  </tr>
-)
-
-const {string} = PropTypes
-
-EmptyRow.propTypes = {
-  tableName: string.isRequired,
-}
-
-export default EmptyRow

ui/src/admin/components/EmptyRow.tsx

@@ -0,0 +1,16 @@
+import React, {SFC} from 'react'
+
+interface Props {
+  tableName: string
+}
+const EmptyRow: SFC<Props> = ({tableName}) => (
+  <tr className="table-empty-state">
+    <th colSpan={5}>
+      <p>
+        You don't have any {tableName},<br />why not create one?
+      </p>
+    </th>
+  </tr>
+)
+
+export default EmptyRow

ui/src/shared/components/CustomTimeIndicator.tsx

@@ -1,10 +1,17 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 import _ from 'lodash'
 
 import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants'
 
-const CustomTimeIndicator = ({queries}) => {
+interface Query {
+  query: string
+}
+
+interface Props {
+  queries: Query[]
+}
+
+const CustomTimeIndicator: SFC<Props> = ({queries}) => {
   const q = queries.find(({query}) => !query.includes(TEMP_VAR_DASHBOARD_TIME))
   const customLower = _.get(q, ['queryConfig', 'range', 'lower'], null)
   const customUpper = _.get(q, ['queryConfig', 'range', 'upper'], null)
@@ -20,10 +27,4 @@ const CustomTimeIndicator = ({queries}) => {
   return <span className="custom-indicator">{customTimeRange}</span>
 }
 
-const {arrayOf, shape} = PropTypes
-
-CustomTimeIndicator.propTypes = {
-  queries: arrayOf(shape()),
-}
-
 export default CustomTimeIndicator

ui/src/shared/components/EmptyQuery.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
-const EmptyQueryState = ({onAddQuery}) => (
+interface Props {
+  onAddQuery: () => void
+}
+
+const EmptyQueryState: SFC<Props> = ({onAddQuery}) => (
   <div className="query-maker--empty">
     <h5>This Graph has no Queries</h5>
     <br />
@@ -11,10 +14,4 @@ const EmptyQueryState = ({onAddQuery}) => (
   </div>
 )
 
-const {func} = PropTypes
-
-EmptyQueryState.propTypes = {
-  onAddQuery: func.isRequired,
-}
-
 export default EmptyQueryState

ui/src/shared/components/LoadingDots.js

@@ -1,18 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const LoadingDots = ({className}) => (
-  <div className={`loading-dots ${className}`}>
-    <div />
-    <div />
-    <div />
-  </div>
-)
-
-const {string} = PropTypes
-
-LoadingDots.propTypes = {
-  className: string,
-}
-
-export default LoadingDots

ui/src/shared/components/LoadingDots.tsx

@@ -0,0 +1,24 @@
+import React, {Component} from 'react'
+
+interface Props {
+  className?: string
+}
+class LoadingDots extends Component<Props> {
+  public static defaultProps: Partial<Props> = {
+    className: '',
+  }
+
+  public render() {
+    const {className} = this.props
+
+    return (
+      <div className={`loading-dots ${className}`}>
+        <div />
+        <div />
+        <div />
+      </div>
+    )
+  }
+}
+
+export default LoadingDots

ui/src/shared/components/QueryStatus.js

@@ -1,54 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import LoadingDots from 'shared/components/LoadingDots'
-import classnames from 'classnames'
-
-const QueryStatus = ({status, children}) => {
-  if (!status) {
-    return <div className="query-editor--status">{children}</div>
-  }
-
-  if (status.loading) {
-    return (
-      <div className="query-editor--status">
-        <LoadingDots />
-        {children}
-      </div>
-    )
-  }
-
-  return (
-    <div className="query-editor--status">
-      <span
-        className={classnames('query-status-output', {
-          'query-status-output--error': status.error,
-          'query-status-output--success': status.success,
-          'query-status-output--warning': status.warn,
-        })}
-      >
-        <span
-          className={classnames('icon', {
-            stop: status.error,
-            checkmark: status.success,
-            'alert-triangle': status.warn,
-          })}
-        />
-        {status.error || status.warn || status.success}
-      </span>
-      {children}
-    </div>
-  )
-}
-
-const {node, shape, string} = PropTypes
-
-QueryStatus.propTypes = {
-  status: shape({
-    error: string,
-    success: string,
-    warn: string,
-  }),
-  children: node,
-}
-
-export default QueryStatus

ui/src/shared/components/QueryStatus.tsx

@@ -0,0 +1,69 @@
+import React, {Component, ReactElement} from 'react'
+import LoadingDots from 'src/shared/components/LoadingDots'
+import classnames from 'classnames'
+
+interface Status {
+  error: string
+  success: string
+  warn: string
+  loading: boolean
+}
+
+interface Props {
+  children: ReactElement<any>
+  status: Status
+}
+
+class QueryStatus extends Component<Props> {
+  public render() {
+    const {status, children} = this.props
+
+    if (!status) {
+      return <div className="query-editor--status">{children}</div>
+    }
+
+    if (!!status.loading) {
+      return (
+        <div className="query-editor--status">
+          <LoadingDots />
+          {children}
+        </div>
+      )
+    }
+
+    return (
+      <div className="query-editor--status">
+        <span className={this.className}>
+          {this.icon}
+          {status.error || status.warn || status.success}
+        </span>
+        {children}
+      </div>
+    )
+  }
+
+  private get className(): string {
+    const {status} = this.props
+
+    return classnames('query-status-output', {
+      'query-status-output--error': status.error,
+      'query-status-output--success': status.success,
+      'query-status-output--warning': status.warn,
+    })
+  }
+
+  private get icon(): JSX.Element {
+    const {status} = this.props
+    return (
+      <span
+        className={classnames('icon', {
+          stop: status.error,
+          checkmark: status.success,
+          'alert-triangle': status.warn,
+        })}
+      />
+    )
+  }
+}
+
+export default QueryStatus

ui/src/shared/components/QuestionMarkTooltip.tsx

@@ -1,8 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 import ReactTooltip from 'react-tooltip'
 
-const QuestionMarkTooltip = ({tipID, tipContent}) => (
+interface Props {
+  tipID: string
+  tipContent: string
+}
+
+const QuestionMarkTooltip: SFC<Props> = ({tipID, tipContent}) => (
   <div className="question-mark-tooltip">
     <div
       className="question-mark-tooltip--icon"
@@ -21,11 +25,4 @@ const QuestionMarkTooltip = ({tipID, tipContent}) => (
   </div>
 )
 
-const {string} = PropTypes
-
-QuestionMarkTooltip.propTypes = {
-  tipID: string.isRequired,
-  tipContent: string.isRequired,
-}
-
 export default QuestionMarkTooltip

ui/src/shared/components/SplashPage.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC, ReactElement} from 'react'
 
-const SplashPage = ({children}) => (
+interface Props {
+  children: ReactElement<any>
+}
+
+const SplashPage: SFC<Props> = ({children}) => (
   <div className="auth-page">
     <div className="auth-box">
       <div className="auth-logo" />
@@ -14,9 +17,4 @@ const SplashPage = ({children}) => (
   </div>
 )
 
-const {node} = PropTypes
-SplashPage.propTypes = {
-  children: node,
-}
-
 export default SplashPage

ui/src/shared/components/Tooltip.tsx

@@ -1,8 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC, ReactElement} from 'react'
 import ReactTooltip from 'react-tooltip'
 
-const Tooltip = ({tip, children}) => (
+interface Props {
+  tip: string
+  children: ReactElement<any>
+}
+const Tooltip: SFC<Props> = ({tip, children}) => (
   <div>
     <div data-tip={tip}>{children}</div>
     <ReactTooltip
@@ -14,11 +17,4 @@ const Tooltip = ({tip, children}) => (
   </div>
 )
 
-const {shape, string} = PropTypes
-
-Tooltip.propTypes = {
-  tip: string,
-  children: shape({}),
-}
-
 export default Tooltip

ui/src/shared/components/WidgetCell.tsx

@@ -1,13 +1,25 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 
 import AlertsApp from 'src/alerts/containers/AlertsApp'
 import NewsFeed from 'src/status/components/NewsFeed'
 import GettingStarted from 'src/status/components/GettingStarted'
 
+import {Cell} from 'src/types/dashboard'
+import {Source} from 'src/types/sources'
 import {RECENT_ALERTS_LIMIT} from 'src/status/constants'
 
-const WidgetCell = ({cell, source, timeRange}) => {
+interface TimeRange {
+  lower: string
+  upper: string
+}
+
+interface Props {
+  timeRange: TimeRange
+  cell: Cell
+  source: Source
+}
+
+const WidgetCell: SFC<Props> = ({cell, source, timeRange}) => {
   switch (cell.type) {
     case 'alerts': {
       return (
@@ -35,15 +47,4 @@ const WidgetCell = ({cell, source, timeRange}) => {
   }
 }
 
-const {shape, string} = PropTypes
-
-WidgetCell.propTypes = {
-  timeRange: shape({
-    lower: string,
-    upper: string,
-  }),
-  source: shape({}),
-  cell: shape({}),
-}
-
 export default WidgetCell