From fc261aa1cd9b6a48ee26ea11f762032a2b28cdd1 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Mon, 5 Nov 2018 22:10:09 -0400 Subject: [PATCH] Better control over schema fetching (#1249) --- .../editors/body/graph-ql-editor.js | 64 ++++++++++++++----- .../app/ui/css/components/dropdown.less | 2 +- .../app/ui/css/components/forms.less | 8 +++ .../ui/css/components/graph-ql-editor.less | 17 ++++- .../insomnia-app/app/ui/css/layout/base.less | 12 ++++ 5 files changed, 84 insertions(+), 19 deletions(-) diff --git a/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js b/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js index 28a5ef4252..873c46d877 100644 --- a/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js +++ b/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js @@ -1,6 +1,5 @@ // @flow -import type { Request } from '../../../../models/request'; -import { newBodyRaw } from '../../../../models/request'; +import classnames from 'classnames'; import * as React from 'react'; import autobind from 'autobind-decorator'; import { markdownToHTML } from '../../../../common/markdown-to-html'; @@ -21,8 +20,11 @@ import TimeFromNow from '../../time-from-now'; import * as models from '../../../../models/index'; import * as db from '../../../../common/database'; import { showModal } from '../../modals'; +import type { Request } from '../../../../models/request'; +import { newBodyRaw } from '../../../../models/request'; import ResponseDebugModal from '../../modals/response-debug-modal'; import Tooltip from '../../tooltip'; +import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../../base/dropdown'; type GraphQLBody = { query: string, @@ -56,7 +58,8 @@ type State = { schemaIsFetching: boolean, hideSchemaFetchErrors: boolean, variablesSyntaxError: string, - forceRefreshKey: number + forceRefreshKey: number, + automaticFetch: boolean }; @autobind @@ -74,6 +77,14 @@ class GraphQLEditor extends React.PureComponent { this._queryEditor = null; this._isMounted = false; const body = GraphQLEditor._stringToGraphQL(props.content); + + let automaticFetch; + try { + automaticFetch = JSON.parse(window.localStorage.getItem('graphql.automaticFetch')); + } catch (err) { + automaticFetch = true; + } + this.state = { body, schema: null, @@ -82,7 +93,8 @@ class GraphQLEditor extends React.PureComponent { schemaIsFetching: false, hideSchemaFetchErrors: false, variablesSyntaxError: '', - forceRefreshKey: 0 + forceRefreshKey: 0, + automaticFetch }; } @@ -235,6 +247,7 @@ class GraphQLEditor extends React.PureComponent { }) ); + console.log('FETCH SCHEMA'); responsePatch = await network.send(introspectionRequest._id, environmentId); const bodyBuffer = models.response.getBodyBuffer(responsePatch); @@ -306,6 +319,12 @@ class GraphQLEditor extends React.PureComponent { await this._fetchAndSetSchema(this.props.request); } + async _handleToggleAutomaticFetching(): Promise { + const automaticFetch = !this.state.automaticFetch; + this.setState({ automaticFetch }); + window.localStorage.setItem('graphql.automaticFetch', automaticFetch); + } + _handlePrettify() { const { body, forceRefreshKey } = this.state; const { variables, query } = body; @@ -399,7 +418,7 @@ class GraphQLEditor extends React.PureComponent { } componentWillReceiveProps(nextProps: Props) { - if (nextProps.request.modified !== this.props.request.modified) { + if (this.state.automaticFetch && nextProps.request.url !== this.props.request.url) { clearTimeout(this._schemaFetchTimeout); this._schemaFetchTimeout = setTimeout(async () => { await this._fetchAndSetSchema(nextProps.request); @@ -455,7 +474,8 @@ class GraphQLEditor extends React.PureComponent { hideSchemaFetchErrors, variablesSyntaxError, forceRefreshKey, - schemaIsFetching + schemaIsFetching, + automaticFetch } = this.state; const { query, variables: variablesObject } = GraphQLEditor._stringToGraphQL(content); @@ -466,6 +486,25 @@ class GraphQLEditor extends React.PureComponent { return (
+ + + schema + + GraphQL Schema + + Refresh Schema + + + {' '} + Automatic Fetch + Automatically fetch schema when request URL is modified + +
{ )}
-
- {this.renderSchemaFetchMessage()} - {!schemaIsFetching && ( - - )} -
+ {this.renderSchemaFetchMessage()}
{this.renderSelectedOperationName()}

- Query Variables{' '} - + Query Variables + Variables to use in GraphQL query
(JSON format) {variablesSyntaxError && ( diff --git a/packages/insomnia-app/app/ui/css/components/dropdown.less b/packages/insomnia-app/app/ui/css/components/dropdown.less index 9243a4386c..5f53bf11be 100644 --- a/packages/insomnia-app/app/ui/css/components/dropdown.less +++ b/packages/insomnia-app/app/ui/css/components/dropdown.less @@ -143,7 +143,7 @@ .dropdown__divider__label { position: relative; - left: calc(@padding-sm / 2); + left: calc(-1 * @padding-sm); top: -0.7rem; color: @hl; padding-right: 1em; diff --git a/packages/insomnia-app/app/ui/css/components/forms.less b/packages/insomnia-app/app/ui/css/components/forms.less index c710948152..095cacae0f 100644 --- a/packages/insomnia-app/app/ui/css/components/forms.less +++ b/packages/insomnia-app/app/ui/css/components/forms.less @@ -244,6 +244,14 @@ height: @line-height-xxs; } + &.btn--micro { + font-size: @font-size-xs; + line-height: @font-size-xs; + padding: @padding-xxs @padding-xs; + height: auto; + border-radius: 3px; + } + &.btn--outlined { border: 1px solid @hl-lg; border-radius: @radius-md; diff --git a/packages/insomnia-app/app/ui/css/components/graph-ql-editor.less b/packages/insomnia-app/app/ui/css/components/graph-ql-editor.less index 6891aef25e..5c02cf8cf8 100644 --- a/packages/insomnia-app/app/ui/css/components/graph-ql-editor.less +++ b/packages/insomnia-app/app/ui/css/components/graph-ql-editor.less @@ -1,6 +1,7 @@ @import '../constants/dimensions'; .graphql-editor { + position: relative; display: grid; height: 100%; grid-template-columns: minmax(0, 1fr); @@ -15,6 +16,19 @@ border-top: 1px dashed var(--hl-sm); } + .graphql-editor__schema-dropdown { + position: absolute; + top: 0; + right: 0; + z-index: 1000; + margin: @padding-xs; + opacity: @opacity-subtle; + + &:hover { + opacity: 1; + } + } + .graphql-editor__query, .graphql-editor__variables { height: 100%; @@ -31,7 +45,6 @@ } .graphql-editor__schema-notice { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @@ -46,7 +59,7 @@ display: flex; flex-direction: row; align-items: center; - padding: 0 @padding-sm; + padding: @padding-xxs @padding-sm; flex-wrap: wrap; } diff --git a/packages/insomnia-app/app/ui/css/layout/base.less b/packages/insomnia-app/app/ui/css/layout/base.less index bcfc6c6ab4..f5fd44fddb 100644 --- a/packages/insomnia-app/app/ui/css/layout/base.less +++ b/packages/insomnia-app/app/ui/css/layout/base.less @@ -297,6 +297,10 @@ blockquote { margin: auto; } +.auto-margin-left { + margin-left: auto; +} + .outlined { border: 1px solid @hl-md; } @@ -482,6 +486,10 @@ i.fa:not(.fa--skinny) { margin-left: 0.3em; } +.space-bottom { + margin-bottom: 0.3em; +} + .space-right { margin-right: 0.3em; } @@ -526,6 +534,10 @@ i.fa:not(.fa--skinny) { margin-bottom: @padding-sm; } +.margin-bottom-xs { + margin-bottom: @padding-xs; +} + .margin-top-sm { margin-top: @padding-sm !important; }