mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show operationName and some tweaks

Browse Source
This commit is contained in:
Gregory Schier 2018-06-27 22:49:24 -04:00
parent 10fb8b19e3
commit 07b4e02693
2 changed files with 55 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js
View File

@ -122,7 +122,11 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
} }
} }
return this.state.body.operationName || null; return null;
}
_handleQueryFocus() {
this._handleQueryUserActivity();
} }
_handleQueryUserActivity() { _handleQueryUserActivity() {
@ -444,26 +448,31 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
clearTimeout(this._schemaFetchTimeout); clearTimeout(this._schemaFetchTimeout);
} }
renderSelectedOperationName() {
const { operationName } = this.state.body;
if (!operationName) {
return null;
} else {
return <span title="Current operationName">{operationName}</span>;
}
}
renderSchemaFetchMessage() { renderSchemaFetchMessage() {
let message; let message;
const { schemaLastFetchTime, schemaIsFetching } = this.state; const { schemaLastFetchTime, schemaIsFetching } = this.state;
if (schemaIsFetching) { if (schemaIsFetching) {
message = 'Fetching schema...'; message = 'fetching schema...';
} else if (schemaLastFetchTime > 0) { } else if (schemaLastFetchTime > 0) {
message = ( message = (
<span className="faded"> <span>
schema fetched <TimeFromNow timestamp={schemaLastFetchTime} /> schema fetched <TimeFromNow timestamp={schemaLastFetchTime} />
</span> </span>
); );
} else { } else {
message = 'schema not yet fetched'; message = <span>schema not yet fetched</span>;
} }
return ( return message;
<div className="txt-sm super-faint italic pad-sm no-pad-right inline-block">
{message}
</div>
);
} }
render() { render() {
@ -516,7 +525,7 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
onChange={this._handleQueryChange} onChange={this._handleQueryChange}
onCodeMirrorInit={this._handleQueryEditorInit} onCodeMirrorInit={this._handleQueryEditorInit}
onCursorActivity={this._handleQueryUserActivity} onCursorActivity={this._handleQueryUserActivity}
onClick={this._handleQueryUserActivity} onFocus={this._handleQueryFocus}
mode="graphql" mode="graphql"
lineWrapping={settings.editorLineWrapping} lineWrapping={settings.editorLineWrapping}
placeholder="" placeholder=""
@ -545,15 +554,20 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
</div> </div>
)} )}
</div> </div>
<div className="graphql-editor__schema-notice"> <div className="graphql-editor__meta">
{this.renderSchemaFetchMessage()} <div className="graphql-editor__schema-notice">
{!schemaIsFetching && ( {this.renderSchemaFetchMessage()}
<button {!schemaIsFetching && (
className="icon space-left" <button
onClick={this._handleRefreshSchema}> className="icon space-left"
<i className="fa fa-refresh" /> onClick={this._handleRefreshSchema}>
</button> <i className="fa fa-refresh" />
)} </button>
)}
</div>
<div className="graphql-editor__operation-name">
{this.renderSelectedOperationName()}
</div>
</div> </div>
<h2 className="no-margin pad-left-sm pad-top-sm pad-bottom-sm"> <h2 className="no-margin pad-left-sm pad-top-sm pad-bottom-sm">
Query Variables{' '} Query Variables{' '}

24
packages/insomnia-app/app/ui/css/components/graph-ql-editor.less
View File

@ -26,7 +26,27 @@
} }
.graphql-editor__query .cm-gql-disabled { .graphql-editor__query .cm-gql-disabled {
opacity: 0.7; opacity: 0.8;
filter: grayscale(0.7); filter: grayscale(0.8);
}
.graphql-editor__schema-notice {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.graphql-editor__operation-name {
margin-left: auto;
white-space: nowrap;
}
.graphql-editor__meta {
color: var(--hl);
display: flex;
flex-direction: row;
align-items: center;
padding: 0 @padding-sm;
flex-wrap: wrap;
} }
} }