console: migrate VoyagerView to TS (#4734)

console/package-lock.json

@@ -2325,7 +2325,8 @@
     "@types/history": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-3.2.4.tgz",
-      "integrity": "sha512-q7x8QeCRk2T6DR2UznwYW//mpN5uNlyajkewH2xd1s1ozCS4oHFRg2WMusxwLFlE57EkUYsd/gCapLBYzV3ffg=="
+      "integrity": "sha512-q7x8QeCRk2T6DR2UznwYW//mpN5uNlyajkewH2xd1s1ozCS4oHFRg2WMusxwLFlE57EkUYsd/gCapLBYzV3ffg==",
+      "dev": true
     },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
@@ -2348,6 +2349,12 @@
         }
       }
     },
+    "@types/isomorphic-fetch": {
+      "version": "0.0.35",
+      "resolved": "https://registry.npmjs.org/@types/isomorphic-fetch/-/isomorphic-fetch-0.0.35.tgz",
+      "integrity": "sha512-DaZNUvLDCAnCTjgwxgiL1eQdxIKEpNLOlTNtAgnZc50bG2copGhRrFN9/PxPBuJe+tZVLCbQ7ls0xveXVRPkvw==",
+      "dev": true
+    },
     "@types/jquery": {
       "version": "3.3.33",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.33.tgz",
@@ -2464,6 +2471,7 @@
       "version": "0.32.21",
       "resolved": "https://registry.npmjs.org/@types/react-bootstrap/-/react-bootstrap-0.32.21.tgz",
       "integrity": "sha512-AV/6cMUBbKArEQcjXEzpoHexHi6hJL0cH3Vcw9qI4Ob2g/XFRvyTAFdMlGlp8HZmOHXL35PdF0K75Z31Po87qg==",
+      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -2549,6 +2557,7 @@
       "version": "4.0.44",
       "resolved": "https://registry.npmjs.org/@types/react-router-redux/-/react-router-redux-4.0.44.tgz",
       "integrity": "sha1-EW0Bq9FPr8iaKNU5qXk4jkLLe9Q=",
+      "dev": true,
       "requires": {
         "@types/history": "^3",
         "redux": "^3.6.0"
@@ -2558,6 +2567,7 @@
           "version": "3.7.2",
           "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
           "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
+          "dev": true,
           "requires": {
             "lodash": "^4.2.1",
             "lodash-es": "^4.2.1",
@@ -10634,7 +10644,8 @@
     "lodash-es": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
-      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==",
+      "dev": true
     },
     "lodash._baseassign": {
       "version": "3.2.0",
@@ -13163,7 +13174,7 @@
     },
     "onetime": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
       "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
       "dev": true
     },

console/package.json

@@ -150,6 +150,7 @@
     "@types/extract-text-webpack-plugin": "3.0.4",
     "@types/file-loader": "4.2.0",
     "@types/fork-ts-checker-webpack-plugin": "0.4.5",
+    "@types/isomorphic-fetch": "0.0.35",
     "@types/jquery": "3.3.33",
     "@types/lodash": "4.14.149",
     "@types/mini-css-extract-plugin": "0.9.1",

console/src/components/Services/VoyagerView/VoyagerView.js

@@ -1,40 +0,0 @@
-import React, { Component } from 'react';
-import { GraphQLVoyager } from 'graphql-voyager';
-import fetch from 'isomorphic-fetch';
-import Endpoints from '../../../Endpoints';
-import '../../../../node_modules/graphql-voyager/dist/voyager.css';
-import './voyagerView.css';
-
-class VoyagerView extends Component {
-  introspectionProvider(query) {
-    return fetch(Endpoints.graphQLUrl, {
-      method: 'POST',
-      headers: this.props.headers,
-      body: JSON.stringify({ query: query }),
-    }).then(response => response.json());
-  }
-
-  render() {
-    return (
-      <div>
-        <GraphQLVoyager
-          introspection={this.introspectionProvider.bind(this)}
-          workerURI={
-            'https://cdn.jsdelivr.net/npm/graphql-voyager@1.0.0-rc.27/dist/voyager.worker.min.js'
-          }
-        />
-      </div>
-    );
-  }
-}
-
-const generatedVoyagerConnector = connect => {
-  const mapStateToProps = state => {
-    return {
-      headers: state.tables.dataHeaders,
-    };
-  };
-  return connect(mapStateToProps)(VoyagerView);
-};
-
-export default generatedVoyagerConnector;

console/src/components/Services/VoyagerView/VoyagerView.tsx

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { Connect } from 'react-redux';
+import { GraphQLVoyager } from 'graphql-voyager';
+import fetch from 'isomorphic-fetch';
+
+import Endpoints from '../../../Endpoints';
+import '../../../../node_modules/graphql-voyager/dist/voyager.css';
+import './voyagerView.css';
+
+interface VoyagerViewProps {
+  headers: Headers;
+}
+
+interface StateProps {
+  headers: Headers;
+}
+
+// TODO: replace by redux State when it's defined
+interface State {
+  tables: {
+    dataHeaders: Headers;
+  };
+}
+
+type Props = VoyagerViewProps & StateProps;
+
+class VoyagerView extends Component<Props, State> {
+  introspectionProvider = (query: string) => {
+    return fetch(Endpoints.graphQLUrl, {
+      method: 'POST',
+      headers: this.props.headers,
+      body: JSON.stringify({ query }),
+    }).then(response => response.json());
+  };
+
+  render() {
+    return (
+      <GraphQLVoyager
+        introspection={this.introspectionProvider}
+        workerURI="https://cdn.jsdelivr.net/npm/graphql-voyager@1.0.0-rc.27/dist/voyager.worker.min.js"
+      />
+    );
+  }
+}
+
+const generatedVoyagerConnector = (connect: Connect) => {
+  const mapStateToProps = (state: State) => {
+    return {
+      headers: state.tables.dataHeaders,
+    };
+  };
+  return connect(mapStateToProps)(VoyagerView);
+};
+
+export default generatedVoyagerConnector;