hasura · rikinsk-zz · Jun 20, 2019 · Jun 11, 2019 · Jun 11, 2019 · Jun 18, 2019
@@ -60,7 +60,8 @@
     "graphiql": "^0.11.11",
     "graphiql-explorer-hasura": "0.0.7",
     "graphql": "^14.3.0",
-    "hasura-console-graphiql": "0.0.10",
+    "graphql-voyager": "^1.0.0-rc.27",
+    "hasura-console-graphiql": "0.0.11",
     "history": "^3.0.0",
     "hoist-non-react-statics": "^1.0.3",
     "inflection": "^1.12.0",

@@ -4,6 +4,8 @@ import Helmet from 'react-helmet';
 
 import ApiRequestWrapper from './ApiRequestWrapper';
 
+import globals from '../../../Globals';
+
 /*
 import ApiCollectionPanel from './ApiCollectionPanel';
 
@@ -64,6 +66,11 @@ class ApiExplorer extends Component {
     } = this.props;
 
     const styles = require('./ApiExplorer.scss');
+    const consoleUrl =
+      window.location.protocol +
+      '//' +
+      window.location.host +
+      globals.urlPrefix;
 
     return (
       <div className={'container-fluid ' + styles.padd_remove}>
@@ -81,6 +88,7 @@ class ApiExplorer extends Component {
             headerFocus={headerFocus}
             urlParams={location.query}
             serverVersion={serverVersion}
+            consoleUrl={consoleUrl}
             serverConfig={serverConfig}
           />
         </div>

@@ -725,6 +725,7 @@ ApiRequest.propTypes = {
   numberOfTables: PropTypes.number.isRequired,
   headerFocus: PropTypes.bool.isRequired,
   urlParams: PropTypes.object.isRequired,
+  consoleUrl: PropTypes.string.isRequired,
 };
 
 export default ApiRequest;
@@ -69,6 +69,7 @@ class ApiRequestWrapper extends Component {
           headerFocus={this.props.headerFocus}
           urlParams={this.props.urlParams}
           serverVersion={this.props.serverVersion}
+          consoleUrl={this.props.consoleUrl}
           serverConfig={this.props.serverConfig}
         />
 
@@ -89,6 +90,7 @@ ApiRequestWrapper.propTypes = {
   numberOfTables: PropTypes.number,
   headerFocus: PropTypes.bool.isRequired,
   urlParams: PropTypes.bool.isRequired,
+  consoleUrl: PropTypes.string.isRequired,
 };
 
 export default ApiRequestWrapper;
@@ -317,13 +317,17 @@
   cursor: pointer;
   display: inline-block;
   margin: 0 5px;
-  padding: 3px 11px 5px;
+  padding: 3px 11px 3px;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 150px;
 }
 
+.graphiql-container .toolbar-button span i {
+  margin-left: 5px;
+}
+
 .graphiql-container .toolbar-button:active {
   background: -webkit-gradient(
     linear,

@@ -58,10 +58,12 @@ class GraphiQLWrapper extends Component {
     );
 
     const renderGraphiql = graphiqlProps => {
+      const voyagerUrl = graphqlNetworkData.consoleUrl + '/voyager-view';
       return (
         <GraphiQL
           fetcher={graphQLFetcher}
           supportAnalyze
+          voyagerUrl={voyagerUrl}
           analyzeFetcher={analyzeFetcherInstance}
           {...graphiqlProps}
         />

@@ -473,7 +473,7 @@ export const metadataReducer = (state = defaultState, action) => {
         ...state,
         allowedQueries: [
           ...state.allowedQueries.map(q =>
-            (q.name === action.data.queryName ? action.data.newQuery : q)
+            q.name === action.data.queryName ? action.data.newQuery : q
           ),
         ],
       };

@@ -0,0 +1,40 @@
+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;
@@ -0,0 +1,6 @@
+.graphql-voyager {
+  height: calc(100vh - 50px);
+}
+.graphql-voyager .type-doc > .doc-navigation {
+  padding: 5px 20px 20px 18px;
+}
@@ -23,6 +23,8 @@ import generatedApiExplorer from './components/Services/ApiExplorer/ApiExplorerG
 
 import generatedLoginConnector from './components/Login/Login';
 
+import generatedVoyagerConnector from './components/VoyagerView/VoyagerView';
+
 import metadataContainer from './components/Services/Metadata/Container';
 import metadataOptionsContainer from './components/Services/Metadata/MetadataOptions/MetadataOptions';
 import metadataStatusContainer from './components/Services/Metadata/MetadataStatus/MetadataStatus';
@@ -89,6 +91,10 @@ const routes = store => {
       >
         <Route path="">
           <IndexRoute component={generatedApiExplorer(connect)} />
+          <Route
+            path="voyager-view"
+            component={generatedVoyagerConnector(connect)}
+          />
           <Route
             path="api-explorer"
             component={generatedApiExplorer(connect)}