From 0cdab7f4e0d63ac1ded9767f737fbdf4fcde71c8 Mon Sep 17 00:00:00 2001
From: Samuel Imolorhe <samuelimolo4real@gmail.com>
Date: Sat, 6 Apr 2019 02:31:32 +0200
Subject: [PATCH] Added fill all fields tip in autocomplete. Closes #690.

---
 .../query-editor/query-editor.component.ts        |  2 +-
 .../utils/codemirror/graphql-has-completion.ts    | 11 +++++++++++
 src/app/utils/codemirror/graphql-hint.ts          |  2 +-
 src/scss/_codemirror.scss                         | 15 ++++++++++++++-
 src/scss/components/_editor.scss                  |  4 ++++
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/app/components/query-editor/query-editor.component.ts b/src/app/components/query-editor/query-editor.component.ts
index 271286db16..ea905f46b3 100644
--- a/src/app/components/query-editor/query-editor.component.ts
+++ b/src/app/components/query-editor/query-editor.component.ts
@@ -113,7 +113,7 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
           <span class="query-editor__autocomplete-item__text">${cur.text}</span>
           <span class="query-editor__autocomplete-item__type">${cur.typeDetail}</span>
         `.trim().replace(/ +/g, ' ');
-        debug.log(elt, data, cur);
+        // debug.log(elt, data, cur);
       }
     },
     info: {
diff --git a/src/app/utils/codemirror/graphql-has-completion.ts b/src/app/utils/codemirror/graphql-has-completion.ts
index 2dc3f4409d..3b1b57b368 100644
--- a/src/app/utils/codemirror/graphql-has-completion.ts
+++ b/src/app/utils/codemirror/graphql-has-completion.ts
@@ -22,6 +22,7 @@ export const onHasCompletion = (cm, data, { onHintInformationRender = null, onCl
 
   let information: HTMLElement;
   let deprecation: HTMLElement;
+  let fillAllFieldsOption: HTMLElement;
 
   // When a hint result is selected, we augment the UI with information.
   CodeMirror.on(data, 'select', (ctx, el) => {
@@ -46,6 +47,15 @@ export const onHasCompletion = (cm, data, { onHintInformationRender = null, onCl
       deprecation.className = 'CodeMirror-hint-deprecation';
       hintsUl.appendChild(deprecation);
 
+      // This "fillAllFieldsOption" node will contain the fill all fields option.
+      fillAllFieldsOption = document.createElement('div');
+      fillAllFieldsOption.className = 'CodeMirror-hint-fill-all-fields';
+      fillAllFieldsOption.innerHTML = `
+        <span class="query-editor__autocomplete-item__text">Fill all fields</span>
+        <span class="query-editor__autocomplete-item__shortcut">Ctrl+Shift+Enter</span>
+      `.trim().replace(/ +/g, ' ');
+      hintsUl.appendChild(fillAllFieldsOption);
+
       // When CodeMirror attempts to remove the hint UI, we detect that it was
       // removed and in turn remove the information nodes.
       let onRemoveFn;
@@ -59,6 +69,7 @@ export const onHasCompletion = (cm, data, { onHintInformationRender = null, onCl
             hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
             information = null;
             deprecation = null;
+            fillAllFieldsOption = null;
             onRemoveFn = null;
           }
         }),
diff --git a/src/app/utils/codemirror/graphql-hint.ts b/src/app/utils/codemirror/graphql-hint.ts
index d5070ebfba..4ea925323a 100644
--- a/src/app/utils/codemirror/graphql-hint.ts
+++ b/src/app/utils/codemirror/graphql-hint.ts
@@ -64,7 +64,7 @@ CodeMirror.registerHelper('hint', 'graphql', (editor, options) => {
   const results = {
     list: rawResults.map(item => ({
       text: item.label,
-      type: schema.getType(item.detail.replace(/[\[\]!]/g, '')),
+      type: item.detail && schema.getType(item.detail.replace(/[\[\]!]/g, '')),
       description: item.documentation,
       isDeprecated: item.isDeprecated,
       deprecationReason: item.deprecationReason,
diff --git a/src/scss/_codemirror.scss b/src/scss/_codemirror.scss
index 0a19803060..e1199a4fbe 100644
--- a/src/scss/_codemirror.scss
+++ b/src/scss/_codemirror.scss
@@ -81,14 +81,27 @@
   white-space: normal;
   line-height: 1.4;
   padding: 5px 10px;
-  background: var(--white-color);
+  background: var(--theme-bg-color);
+  color: var(--theme-off-font-color);
 }
 
 .CodeMirror-hint-information {
   cursor: pointer;
 }
+.CodeMirror-hint-fill-all-fields {
+  display: flex;
+  justify-content: space-between;
+  order: -1;
+  border-bottom: 1px solid var(--theme-border-color);
+  background: var(--theme-bg-color);
+  color: var(--theme-font-color);
+  line-height: 1.4;
+  padding: 5px 10px;
+}
 
 .CodeMirror-hints {
+  display: flex;
+  flex-direction: column;
   font-family: inherit;
   box-shadow: 0 0 5px rgba(var(--rgb-black), .1);
   z-index: 1050;
diff --git a/src/scss/components/_editor.scss b/src/scss/components/_editor.scss
index f90ca7b478..53c9d951c4 100644
--- a/src/scss/components/_editor.scss
+++ b/src/scss/components/_editor.scss
@@ -33,6 +33,10 @@ app-query-editor {
   color: var(--orange-color);
 }
 
+.query-editor__autocomplete-item__shortcut {
+  color: var(--theme-off-font-color);
+}
+
 .query-result__normal-container {
   position: relative;