Convert WriteDataFooter to ts

ui/src/data_explorer/components/WriteDataFooter.js

@@ -1,60 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const submitButton = 'btn btn-sm btn-success write-data-form--submit'
-const spinner = 'btn-spinner'
-
-const WriteDataFooter = ({
-  isManual,
-  inputContent,
-  uploadContent,
-  handleSubmit,
-  isUploading,
-}) => (
-  <div className="write-data-form--footer">
-    {isManual ? (
-      <span className="write-data-form--helper">
-        Need help writing InfluxDB Line Protocol? -&nbsp;
-        <a
-          href="https://docs.influxdata.com/influxdb/latest/write_protocols/line_protocol_tutorial/"
-          target="_blank"
-        >
-          See Documentation
-        </a>
-      </span>
-    ) : (
-      <span className="write-data-form--helper">
-        <a
-          href="https://docs.influxdata.com/influxdb/v1.2//tools/shell/#import-data-from-a-file-with-import"
-          target="_blank"
-        >
-          File Upload Documentation
-        </a>
-      </span>
-    )}
-    <button
-      className={isUploading ? `${submitButton} ${spinner}` : submitButton}
-      onClick={handleSubmit}
-      disabled={
-        (!inputContent && isManual) ||
-        (!uploadContent && !isManual) ||
-        isUploading
-      }
-      data-test="write-data-submit-button"
-    >
-      Write
-    </button>
-  </div>
-)
-
-const {bool, func, string} = PropTypes
-
-WriteDataFooter.propTypes = {
-  isManual: bool.isRequired,
-  isUploading: bool.isRequired,
-  uploadContent: string,
-  inputContent: string,
-  handleSubmit: func,
-}
-
-export default WriteDataFooter

ui/src/data_explorer/components/WriteDataFooter.tsx

@@ -0,0 +1,70 @@
+import React, {PureComponent, MouseEvent} from 'react'
+import {
+  WRITE_DATA_DOCS_LINK,
+  DATA_IMPORT_DOCS_LINK,
+} from 'src/data_explorer/constants'
+
+const submitButton = 'btn btn-sm btn-success write-data-form--submit'
+const spinner = 'btn-spinner'
+
+interface Props {
+  isManual: boolean
+  isUploading: boolean
+  uploadContent: string
+  inputContent: string
+  handleSubmit: (e: MouseEvent<HTMLButtonElement>) => void
+}
+
+class WriteDataFooter extends PureComponent<Props> {
+  public render() {
+    const {isManual, handleSubmit} = this.props
+
+    return (
+      <div className="write-data-form--footer">
+        {isManual ? (
+          <span className="write-data-form--helper">
+            Need help writing InfluxDB Line Protocol? -&nbsp;
+            <a href={WRITE_DATA_DOCS_LINK} target="_blank">
+              See Documentation
+            </a>
+          </span>
+        ) : (
+          <span className="write-data-form--helper">
+            <a href={DATA_IMPORT_DOCS_LINK} target="_blank">
+              File Upload Documentation
+            </a>
+          </span>
+        )}
+        <button
+          className={this.buttonClass}
+          onClick={handleSubmit}
+          disabled={this.buttonDisabled}
+          data-test="write-data-submit-button"
+        >
+          Write
+        </button>
+      </div>
+    )
+  }
+
+  get buttonDisabled(): boolean {
+    const {inputContent, isManual, uploadContent, isUploading} = this.props
+    return (
+      (!inputContent && isManual) ||
+      (!uploadContent && !isManual) ||
+      isUploading
+    )
+  }
+
+  get buttonClass(): string {
+    const {isUploading} = this.props
+
+    if (isUploading) {
+      return `${submitButton} ${spinner}`
+    }
+
+    return submitButton
+  }
+}
+
+export default WriteDataFooter

ui/src/data_explorer/constants/index.ts

@@ -137,3 +137,8 @@ export const QUERY_TEMPLATES: Template[] = [
     query: 'SHOW DIAGNOSTICS',
   },
 ]
+
+export const WRITE_DATA_DOCS_LINK =
+  'https://docs.influxdata.com/influxdb/latest/write_protocols/line_protocol_tutorial/'
+export const DATA_IMPORT_DOCS_LINK =
+  'https://docs.influxdata.com/influxdb/v1.2//tools/shell/#import-data-from-a-file-with-import'