Convert QueryStatus to ts

ui/src/shared/components/QueryStatus.tsx

@@ -1,31 +1,22 @@
-import React, {Component, ReactElement} from 'react'
+import React, {SFC, ReactNode} from 'react'
 import LoadingDots from 'src/shared/components/LoadingDots'
 import classnames from 'classnames'
-
+import {Status} from 'src/types'
-interface Status {
-  error: string
-  success: string
-  warn: string
-  loading: boolean
-}
 
 interface Props {
-  children: ReactElement<any>
   status: Status
+  children: ReactNode
 }
 
-class QueryStatus extends Component<Props> {
+const QueryStatus: SFC<Props> = ({status, children}) => {
-  public render() {
-    const {status, children} = this.props
-
   if (!status) {
     return <div className="query-editor--status">{children}</div>
   }
 
-    if (!!status.loading) {
+  if (status.loading) {
     return (
       <div className="query-editor--status">
-          <LoadingDots />
+        <LoadingDots className="query-editor--loading" />
         {children}
       </div>
     )
@@ -33,28 +24,13 @@ class QueryStatus extends Component<Props> {
 
   return (
     <div className="query-editor--status">
-        <span className={this.className}>
+      <span
-          {this.icon}
+        className={classnames('query-status-output', {
-          {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,
@@ -62,8 +38,11 @@ class QueryStatus extends Component<Props> {
             'alert-triangle': status.warn,
           })}
         />
+        {status.error || status.warn || status.success}
+      </span>
+      {children}
+    </div>
   )
-  }
 }
 
 export default QueryStatus