From c964c90a7b96ff4eeba6581b1acd40acae7ad589 Mon Sep 17 00:00:00 2001 From: Rishichandra Wawhal Date: Wed, 3 Apr 2019 19:43:09 +0530 Subject: [PATCH] persist queries in GraphiQL (closes #1894) (#1903) --- console/.eslintrc | 1 + console/src/components/ApiExplorer/Actions.js | 2 +- .../components/ApiExplorer/GraphiQLWrapper.js | 28 +++---------------- .../ApiExplorer/OneGraphExplorer.js | 23 +++++++++++++-- console/src/components/Error/ErrorBoundary.js | 7 ++++- .../Services/CustomResolver/Edit/View.js | 24 ++++++++-------- .../components/Services/Data/Add/AddTable.js | 28 ++++++++++--------- console/src/helpers/highlight.min.js | 12 ++++---- console/src/utils/websockets.js | 9 ++++-- 9 files changed, 73 insertions(+), 61 deletions(-) diff --git a/console/.eslintrc b/console/.eslintrc index eaf61a1f6bc..77ab60885b6 100644 --- a/console/.eslintrc +++ b/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, diff --git a/console/src/components/ApiExplorer/Actions.js b/console/src/components/ApiExplorer/Actions.js index f7160e42c5d..5fef9142311 100644 --- a/console/src/components/ApiExplorer/Actions.js +++ b/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) => { diff --git a/console/src/components/ApiExplorer/GraphiQLWrapper.js b/console/src/components/ApiExplorer/GraphiQLWrapper.js index e1b752cf38d..edbab0c2220 100644 --- a/console/src/components/ApiExplorer/GraphiQLWrapper.js +++ b/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 ( ); @@ -157,7 +136,8 @@ class GraphiQLWrapper extends Component { endpoint={graphqlNetworkData.url} headers={graphqlNetworkData.headers} headerFocus={headerFocus} - query={queryString} + queryParams={this.props.queryParams} + numberOfTables={numberOfTables} /> diff --git a/console/src/components/ApiExplorer/OneGraphExplorer.js b/console/src/components/ApiExplorer/OneGraphExplorer.js index 75d7cbf32b3..c882db2576e 100644 --- a/console/src/components/ApiExplorer/OneGraphExplorer.js +++ b/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 { /> {renderGraphiql({ - query, + query: query || undefined, onEditQuery: this.editQuery, toggleExplorer: this.toggleExplorer, })} diff --git a/console/src/components/Error/ErrorBoundary.js b/console/src/components/Error/ErrorBoundary.js index e4126916eac..058bfd329e7 100644 --- a/console/src/components/Error/ErrorBoundary.js +++ b/console/src/components/Error/ErrorBoundary.js @@ -33,7 +33,12 @@ class ErrorBoundary extends React.Component {
- You can report this issue on our Github or chat with us on Discord + You can report this issue on our{' '} + + Github + {' '} + or chat with us on{' '} + Discord
diff --git a/console/src/components/Services/CustomResolver/Edit/View.js b/console/src/components/Services/CustomResolver/Edit/View.js index b46ca49fdc6..5248e938532 100644 --- a/console/src/components/Services/CustomResolver/Edit/View.js +++ b/console/src/components/Services/CustomResolver/Edit/View.js @@ -119,17 +119,19 @@ class ViewStitchedSchema extends React.Component { Headers {filterHeaders && - filterHeaders.filter(k => !!k.name).map((h, i) => [ - - - {h.name} :{' '} - {h.type === 'static' - ? h.value - : '<' + h.value + '>'} - - , - i !== filterHeaders.length - 1 ?
: null, - ])} + filterHeaders + .filter(k => !!k.name) + .map((h, i) => [ + + + {h.name} :{' '} + {h.type === 'static' + ? h.value + : '<' + h.value + '>'} + + , + i !== filterHeaders.length - 1 ?
: null, + ])} ) : null} diff --git a/console/src/components/Services/Data/Add/AddTable.js b/console/src/components/Services/Data/Add/AddTable.js index 59ab24a0ac3..131bed2e13c 100644 --- a/console/src/components/Services/Data/Add/AddTable.js +++ b/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; } diff --git a/console/src/helpers/highlight.min.js b/console/src/helpers/highlight.min.js index 2b0f056c4d7..5cfb0171240 100644 --- a/console/src/helpers/highlight.min.js +++ b/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' ? '
' : S.tabReplace - ? t.replace(/\t/g, S.tabReplace) - : ''; + ? t.replace(/\t/g, S.tabReplace) + : ''; }) : e; } diff --git a/console/src/utils/websockets.js b/console/src/utils/websockets.js index 112a46b64be..8aef18dc341 100644 --- a/console/src/utils/websockets.js +++ b/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 + ); } };