From 8c20f318f9a60fabdd0d5fe835e053be3ec85c67 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 11 May 2018 12:53:59 -0700
Subject: [PATCH] Convert a curated selection of shared components to
 TypeScript

---
 ui/src/admin/components/EmptyRow.js           | 20 ------
 ui/src/admin/components/EmptyRow.tsx          | 16 +++++
 ...meIndicator.js => CustomTimeIndicator.tsx} | 19 ++---
 .../{EmptyQuery.js => EmptyQuery.tsx}         | 15 ++--
 ui/src/shared/components/LoadingDots.js       | 18 -----
 ui/src/shared/components/LoadingDots.tsx      | 24 +++++++
 ui/src/shared/components/QueryStatus.js       | 54 ---------------
 ui/src/shared/components/QueryStatus.tsx      | 69 +++++++++++++++++++
 ...MarkTooltip.js => QuestionMarkTooltip.tsx} | 17 ++---
 .../{SplashPage.js => SplashPage.tsx}         | 14 ++--
 .../components/{Tooltip.js => Tooltip.tsx}    | 16 ++---
 .../{WidgetCell.js => WidgetCell.tsx}         | 29 ++++----
 12 files changed, 159 insertions(+), 152 deletions(-)
 delete mode 100644 ui/src/admin/components/EmptyRow.js
 create mode 100644 ui/src/admin/components/EmptyRow.tsx
 rename ui/src/shared/components/{CustomTimeIndicator.js => CustomTimeIndicator.tsx} (73%)
 rename ui/src/shared/components/{EmptyQuery.js => EmptyQuery.tsx} (57%)
 delete mode 100644 ui/src/shared/components/LoadingDots.js
 create mode 100644 ui/src/shared/components/LoadingDots.tsx
 delete mode 100644 ui/src/shared/components/QueryStatus.js
 create mode 100644 ui/src/shared/components/QueryStatus.tsx
 rename ui/src/shared/components/{QuestionMarkTooltip.js => QuestionMarkTooltip.tsx} (63%)
 rename ui/src/shared/components/{SplashPage.js => SplashPage.tsx} (64%)
 rename ui/src/shared/components/{Tooltip.js => Tooltip.tsx} (55%)
 rename ui/src/shared/components/{WidgetCell.js => WidgetCell.tsx} (72%)

diff --git a/ui/src/admin/components/EmptyRow.js b/ui/src/admin/components/EmptyRow.js
deleted file mode 100644
index af21790388..0000000000
--- a/ui/src/admin/components/EmptyRow.js
+++ /dev/null
@@ -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
diff --git a/ui/src/admin/components/EmptyRow.tsx b/ui/src/admin/components/EmptyRow.tsx
new file mode 100644
index 0000000000..664de5e7ea
--- /dev/null
+++ b/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
diff --git a/ui/src/shared/components/CustomTimeIndicator.js b/ui/src/shared/components/CustomTimeIndicator.tsx
similarity index 73%
rename from ui/src/shared/components/CustomTimeIndicator.js
rename to ui/src/shared/components/CustomTimeIndicator.tsx
index 92609fe712..339bf46901 100644
--- a/ui/src/shared/components/CustomTimeIndicator.js
+++ b/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
diff --git a/ui/src/shared/components/EmptyQuery.js b/ui/src/shared/components/EmptyQuery.tsx
similarity index 57%
rename from ui/src/shared/components/EmptyQuery.js
rename to ui/src/shared/components/EmptyQuery.tsx
index ebc8420e8d..458a6bf566 100644
--- a/ui/src/shared/components/EmptyQuery.js
+++ b/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
diff --git a/ui/src/shared/components/LoadingDots.js b/ui/src/shared/components/LoadingDots.js
deleted file mode 100644
index d799fa2f35..0000000000
--- a/ui/src/shared/components/LoadingDots.js
+++ /dev/null
@@ -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
diff --git a/ui/src/shared/components/LoadingDots.tsx b/ui/src/shared/components/LoadingDots.tsx
new file mode 100644
index 0000000000..9ec4c07ddd
--- /dev/null
+++ b/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
diff --git a/ui/src/shared/components/QueryStatus.js b/ui/src/shared/components/QueryStatus.js
deleted file mode 100644
index cd8f7225c4..0000000000
--- a/ui/src/shared/components/QueryStatus.js
+++ /dev/null
@@ -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
diff --git a/ui/src/shared/components/QueryStatus.tsx b/ui/src/shared/components/QueryStatus.tsx
new file mode 100644
index 0000000000..af17c7b7e7
--- /dev/null
+++ b/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
diff --git a/ui/src/shared/components/QuestionMarkTooltip.js b/ui/src/shared/components/QuestionMarkTooltip.tsx
similarity index 63%
rename from ui/src/shared/components/QuestionMarkTooltip.js
rename to ui/src/shared/components/QuestionMarkTooltip.tsx
index 52a4837868..9f2fc5398e 100644
--- a/ui/src/shared/components/QuestionMarkTooltip.js
+++ b/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
diff --git a/ui/src/shared/components/SplashPage.js b/ui/src/shared/components/SplashPage.tsx
similarity index 64%
rename from ui/src/shared/components/SplashPage.js
rename to ui/src/shared/components/SplashPage.tsx
index 43b7324c4a..34287f62cf 100644
--- a/ui/src/shared/components/SplashPage.js
+++ b/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
diff --git a/ui/src/shared/components/Tooltip.js b/ui/src/shared/components/Tooltip.tsx
similarity index 55%
rename from ui/src/shared/components/Tooltip.js
rename to ui/src/shared/components/Tooltip.tsx
index 37fb9c8bec..bfdb70db3b 100644
--- a/ui/src/shared/components/Tooltip.js
+++ b/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
diff --git a/ui/src/shared/components/WidgetCell.js b/ui/src/shared/components/WidgetCell.tsx
similarity index 72%
rename from ui/src/shared/components/WidgetCell.js
rename to ui/src/shared/components/WidgetCell.tsx
index c2930f6a62..5dd8d78ef1 100644
--- a/ui/src/shared/components/WidgetCell.js
+++ b/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