From 07b4e0269318fadb1aa535638172c49edd0b6c73 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Wed, 27 Jun 2018 22:49:24 -0400
Subject: [PATCH] Show operationName and some tweaks

---
 .../editors/body/graph-ql-editor.js           | 52 ++++++++++++-------
 .../ui/css/components/graph-ql-editor.less    | 24 ++++++++-
 2 files changed, 55 insertions(+), 21 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 e5bded9ab..b984dfdd2 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
@@ -122,7 +122,11 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
       }
     }
 
-    return this.state.body.operationName || null;
+    return null;
+  }
+
+  _handleQueryFocus() {
+    this._handleQueryUserActivity();
   }
 
   _handleQueryUserActivity() {
@@ -444,26 +448,31 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
     clearTimeout(this._schemaFetchTimeout);
   }
 
+  renderSelectedOperationName() {
+    const { operationName } = this.state.body;
+    if (!operationName) {
+      return null;
+    } else {
+      return <span title="Current operationName">{operationName}</span>;
+    }
+  }
+
   renderSchemaFetchMessage() {
     let message;
     const { schemaLastFetchTime, schemaIsFetching } = this.state;
     if (schemaIsFetching) {
-      message = 'Fetching schema...';
+      message = 'fetching schema...';
     } else if (schemaLastFetchTime > 0) {
       message = (
-        <span className="faded">
+        <span>
           schema fetched <TimeFromNow timestamp={schemaLastFetchTime} />
         </span>
       );
     } else {
-      message = 'schema not yet fetched';
+      message = <span>schema not yet fetched</span>;
     }
 
-    return (
-      <div className="txt-sm super-faint italic pad-sm no-pad-right inline-block">
-        {message}
-      </div>
-    );
+    return message;
   }
 
   render() {
@@ -516,7 +525,7 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
             onChange={this._handleQueryChange}
             onCodeMirrorInit={this._handleQueryEditorInit}
             onCursorActivity={this._handleQueryUserActivity}
-            onClick={this._handleQueryUserActivity}
+            onFocus={this._handleQueryFocus}
             mode="graphql"
             lineWrapping={settings.editorLineWrapping}
             placeholder=""
@@ -545,15 +554,20 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
               </div>
             )}
         </div>
-        <div className="graphql-editor__schema-notice">
-          {this.renderSchemaFetchMessage()}
-          {!schemaIsFetching && (
-            <button
-              className="icon space-left"
-              onClick={this._handleRefreshSchema}>
-              <i className="fa fa-refresh" />
-            </button>
-          )}
+        <div className="graphql-editor__meta">
+          <div className="graphql-editor__schema-notice">
+            {this.renderSchemaFetchMessage()}
+            {!schemaIsFetching && (
+              <button
+                className="icon space-left"
+                onClick={this._handleRefreshSchema}>
+                <i className="fa fa-refresh" />
+              </button>
+            )}
+          </div>
+          <div className="graphql-editor__operation-name">
+            {this.renderSelectedOperationName()}
+          </div>
         </div>
         <h2 className="no-margin pad-left-sm pad-top-sm pad-bottom-sm">
           Query Variables{' '}
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 5b878c128..e8efb4baf 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
@@ -26,7 +26,27 @@
   }
 
   .graphql-editor__query .cm-gql-disabled {
-    opacity: 0.7;
-    filter: grayscale(0.7);
+    opacity: 0.8;
+    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;
   }
 }