persist queries in GraphiQL (closes #1894) (#1903)

console/.eslintrc

@@ -70,6 +70,7 @@
     "react/prop-types": 0,
     "react/prefer-stateless-function": 0,
     "react/no-unescaped-entities": 0,
+    "react/sort-comp": 0,
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/no-noninteractive-element-interactions": 0,

console/src/components/ApiExplorer/Actions.js

@@ -361,7 +361,7 @@ const getStateAfterClearingHistory = state => {
 const getRemoteQueries = (queryUrl, cb) => {
   fetch(queryUrl)
     .then(resp => resp.text().then(cb))
-    .catch(e => console.log('Invalid query URL: ', e));
+    .catch(e => console.log('Invalid query file URL: ', e));
 };
 
 const apiExplorerReducer = (state = defaultState, action) => {

console/src/components/ApiExplorer/GraphiQLWrapper.js

@@ -2,18 +2,11 @@ import React, { Component } from 'react';
 import GraphiQL from 'hasura-console-graphiql';
 import PropTypes from 'prop-types';
 import ErrorBoundary from './ErrorBoundary';
-import {
-  analyzeFetcher,
-  graphQLFetcherFinal,
-  getRemoteQueries,
-} from './Actions';
+import { analyzeFetcher, graphQLFetcherFinal } from './Actions';
 import OneGraphExplorer from './OneGraphExplorer';
 import './GraphiQL.css';
 import semverCheck from '../../helpers/semver';
 
-const NO_TABLES_MESSAGE =
-  '# Looks like you do not have any tables.\n# Click on the "Data" tab on top to create tables\n# You can come back here and try out the GraphQL queries after you create tables\n';
-
 class GraphiQLWrapper extends Component {
   constructor(props) {
     super(props);
@@ -22,16 +15,9 @@ class GraphiQLWrapper extends Component {
       error: false,
       noSchema: false,
       onBoardingEnabled: false,
-      queries: null,
       supportAnalyze: false,
       analyzeApiChange: false,
     };
-    const queryFile = this.props.queryParams
-      ? this.props.queryParams.query_file
-      : null;
-    if (queryFile) {
-      getRemoteQueries(queryFile, queries => this.setState({ queries }));
-    }
   }
 
   componentDidMount() {
@@ -107,12 +93,7 @@ class GraphiQLWrapper extends Component {
 
   render() {
     const styles = require('../Common/Common.scss');
-    const {
-      supportAnalyze,
-      analyzeApiChange,
-      queries,
-      headerFocus,
-    } = this.state;
+    const { supportAnalyze, analyzeApiChange, headerFocus } = this.state;
     const { numberOfTables } = this.props;
     const graphqlNetworkData = this.props.data;
     const graphQLFetcher = graphQLParams => {
@@ -130,14 +111,12 @@ class GraphiQLWrapper extends Component {
       graphqlNetworkData.headers,
       analyzeApiChange
     );
-    const queryString = numberOfTables ? queries : NO_TABLES_MESSAGE;
     const renderGraphiql = graphiqlProps => {
       return (
         <GraphiQL
           fetcher={graphQLFetcher}
           analyzeFetcher={analyzeFetcherInstance}
           supportAnalyze={supportAnalyze}
-          query={queryString}
           {...graphiqlProps}
         />
       );
@@ -157,7 +136,8 @@ class GraphiQLWrapper extends Component {
             endpoint={graphqlNetworkData.url}
             headers={graphqlNetworkData.headers}
             headerFocus={headerFocus}
-            query={queryString}
+            queryParams={this.props.queryParams}
+            numberOfTables={numberOfTables}
           />
         </div>
       </ErrorBoundary>

console/src/components/ApiExplorer/OneGraphExplorer.js

@@ -10,6 +10,7 @@ import {
   getExplorerWidthFromLocalStorage,
   setExplorerWidthInLocalStorage,
 } from './onegraphUtils';
+import { getRemoteQueries } from './Actions';
 
 class OneGraphExplorer extends React.Component {
   state = {
@@ -32,7 +33,25 @@ class OneGraphExplorer extends React.Component {
     }
   }
 
-  // eslint-disable-next-line react/sort-comp
+  setPersistedQuery() {
+    const queryFile = this.props.queryParams
+      ? this.props.queryParams.query_file
+      : null;
+
+    if (queryFile) {
+      getRemoteQueries(queryFile, query => this.setState({ query }));
+    } else {
+      const NO_TABLES_MESSAGE =
+        '# Looks like you do not have any tables.\n# Click on the "Data" tab on top to create tables\n# You can come back here and try out the GraphQL queries after you create tables\n';
+
+      if (this.props.numberOfTables === 0) {
+        this.setState({
+          query: NO_TABLES_MESSAGE,
+        });
+      }
+    }
+  }
+
   shouldIntrospect(newHeadersArray, oldHeadersArray) {
     if (this.props.headerFocus) {
       return false;
@@ -152,7 +171,7 @@ class OneGraphExplorer extends React.Component {
           />
         </div>
         {renderGraphiql({
-          query,
+          query: query || undefined,
           onEditQuery: this.editQuery,
           toggleExplorer: this.toggleExplorer,
         })}

console/src/components/Error/ErrorBoundary.js

@@ -33,7 +33,12 @@ class ErrorBoundary extends React.Component {
                 </div>
                 <br />
                 <div>
-                  You can report this issue on our <a href="https://github.com/hasura/graphql-engine/issues">Github</a> or chat with us on <a href="http://discord.gg/hasura">Discord</a>
+                  You can report this issue on our{' '}
+                  <a href="https://github.com/hasura/graphql-engine/issues">
+                    Github
+                  </a>{' '}
+                  or chat with us on{' '}
+                  <a href="http://discord.gg/hasura">Discord</a>
                 </div>
               </div>
               <div className="col-xs-4">

console/src/components/Services/CustomResolver/Edit/View.js

@@ -119,17 +119,19 @@ class ViewStitchedSchema extends React.Component {
                     <td>Headers</td>
                     <td>
                       {filterHeaders &&
-                        filterHeaders.filter(k => !!k.name).map((h, i) => [
-                          <tr key={i}>
-                            <td>
-                              {h.name} :{' '}
-                              {h.type === 'static'
-                                ? h.value
-                                : '<' + h.value + '>'}
-                            </td>
-                          </tr>,
-                          i !== filterHeaders.length - 1 ? <hr /> : null,
-                        ])}
+                        filterHeaders
+                          .filter(k => !!k.name)
+                          .map((h, i) => [
+                            <tr key={i}>
+                              <td>
+                                {h.name} :{' '}
+                                {h.type === 'static'
+                                  ? h.value
+                                  : '<' + h.value + '>'}
+                              </td>
+                            </tr>,
+                            i !== filterHeaders.length - 1 ? <hr /> : null,
+                          ])}
                     </td>
                   </tr>
                 ) : null}

console/src/components/Services/Data/Add/AddTable.js

@@ -128,19 +128,21 @@ class AddTable extends Component {
       }
       // check for column value being valid graphql
       let isValid = true;
-      this.props.columns.filter(c => c.name !== '').map(c => {
-        if (!gqlPattern.test(c.name)) {
-          this.props.dispatch(
-            showErrorNotification(
-              gqlColumnErrorNotif[0],
-              gqlColumnErrorNotif[1],
-              gqlColumnErrorNotif[2],
-              gqlColumnErrorNotif[3]
-            )
-          );
-          isValid = false;
-        }
-      });
+      this.props.columns
+        .filter(c => c.name !== '')
+        .map(c => {
+          if (!gqlPattern.test(c.name)) {
+            this.props.dispatch(
+              showErrorNotification(
+                gqlColumnErrorNotif[0],
+                gqlColumnErrorNotif[1],
+                gqlColumnErrorNotif[2],
+                gqlColumnErrorNotif[3]
+              )
+            );
+            isValid = false;
+          }
+        });
       if (!isValid) {
         return false;
       }

console/src/helpers/highlight.min.js

@@ -81,11 +81,11 @@
             ? e
             : a
           : a[0].event === 'start'
-            ? e
-            : a
-        : e.length
           ? e
-          : a;
+          : a
+        : e.length
+        ? e
+        : a;
     }
     function s(e) {
       function a(e) {
@@ -332,8 +332,8 @@
           return S.useBR && e === '\n'
             ? '<br>'
             : S.tabReplace
-              ? t.replace(/\t/g, S.tabReplace)
-              : '';
+            ? t.replace(/\t/g, S.tabReplace)
+            : '';
         })
       : e;
   }

console/src/utils/websockets.js

@@ -99,9 +99,12 @@ export const permanentWebSocketConn = (
       } else {
         console.log('Re-connecting to websocket server.');
         const time = (tries / noOfTurns) * 2 + 2;
-        setTimeout(() => {
-          reConn();
-        }, time >= 60 ? 60000 : time * 1000);
+        setTimeout(
+          () => {
+            reConn();
+          },
+          time >= 60 ? 60000 : time * 1000
+        );
       }
     };