Merge pull request #421 from AndrewBastin/feat/header_completion

Header key autocompletion

components/autocomplete.vue

@@ -3,7 +3,7 @@
     <input
       type="text"
       :placeholder="placeholder"
-      v-model="value"
+      v-model="text"
       @input="updateSuggestions"
       @keyup="updateSuggestions"
       @click="updateSuggestions"
@@ -90,25 +90,31 @@ export default {
 
     placeholder: {
       type: String,
-      default: "Start typing...",
+      default: "",
       required: false
     },
 
     source: {
       type: Array,
       required: true
+    },
+
+    value: {
+      type: String,
+      default: "",
+      required: false
     }
   },
 
   watch: {
-    value() {
+    text() {
-      this.$emit("input", this.value);
+      this.$emit("input", this.text);
     }
   },
 
   data() {
     return {
-      value: "application/json",
+      text: this.value,
       selectionStart: 0,
       suggestionsOffsetLeft: 0,
       currentSuggestionIndex: -1,
@@ -134,10 +140,10 @@ export default {
     },
 
     forceSuggestion(text) {
-      let input = this.value.substring(0, this.selectionStart);
+      let input = this.text.substring(0, this.selectionStart);
-      this.value = input + text;
+      this.text = input + text;
 
-      this.selectionStart = this.value.length;
+      this.selectionStart = this.text.length;
       this.suggestionsVisible = true;
       this.currentSuggestionIndex = -1;
     },
@@ -166,8 +172,8 @@ export default {
             this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
           ];
           if (activeSuggestion) {
-            let input = this.value.substring(0, this.selectionStart);
+            let input = this.text.substring(0, this.selectionStart);
-            this.value = input + activeSuggestion;
+            this.text = input + activeSuggestion;
           }
           break;
 
@@ -184,7 +190,7 @@ export default {
      * @returns {default.props.source|{type, required}}
      */
     suggestions() {
-      let input = this.value.substring(0, this.selectionStart);
+      let input = this.text.substring(0, this.selectionStart);
 
       return (
         this.source

pages/graphql.vue

@@ -52,14 +52,15 @@
           </ul>
           <ul v-for="(header, index) in headers" :key="index">
             <li>
-              <input
+              <autocomplete
-                :placeholder="'header ' + (index + 1)"
+                :placeholder="'index ' + (index + 1)"
-                :name="'header' + index"
+                :source="commonHeaders"
+                :spellcheck="false"
                 :value="header.key"
-                @change="
+                @input="
                   $store.commit('setGQLHeaderKey', {
                     index,
-                    value: $event.target.value
+                    value: $event
                   })
                 "
                 autofocus
@@ -307,11 +308,136 @@ export default {
     "pw-section": () => import("../components/section"),
     "gql-field": () => import("../components/graphql/field"),
     "gql-type": () => import("../components/graphql/type"),
+    autocomplete: () => import("../components/autocomplete"),
     Editor: AceEditor
   },
   data() {
     return {
       schemaString: "",
+      commonHeaders: [
+        "WWW-Authenticate",
+        "Authorization",
+        "Proxy-Authenticate",
+        "Proxy-Authorization",
+        "Age",
+        "Cache-Control",
+        "Clear-Site-Data",
+        "Expires",
+        "Pragma",
+        "Warning",
+        "Accept-CH",
+        "Accept-CH-Lifetime",
+        "Early-Data",
+        "Content-DPR",
+        "DPR",
+        "Device-Memory",
+        "Save-Data",
+        "Viewport-Width",
+        "Width",
+        "Last-Modified",
+        "ETag",
+        "If-Match",
+        "If-None-Match",
+        "If-Modified-Since",
+        "If-Unmodified-Since",
+        "Vary",
+        "Connection",
+        "Keep-Alive",
+        "Accept",
+        "Accept-Charset",
+        "Accept-Encoding",
+        "Accept-Language",
+        "Expect",
+        "Max-Forwards",
+        "Cookie",
+        "Set-Cookie",
+        "Cookie2",
+        "Set-Cookie2",
+        "Access-Control-Allow-Origin",
+        "Access-Control-Allow-Credentials",
+        "Access-Control-Allow-Headers",
+        "Access-Control-Allow-Methods",
+        "Access-Control-Expose-Headers",
+        "Access-Control-Max-Age",
+        "Access-Control-Request-Headers",
+        "Access-Control-Request-Method",
+        "Origin",
+        "Service-Worker-Allowed",
+        "Timing-Allow-Origin",
+        "X-Permitted-Cross-Domain-Policies",
+        "DNT",
+        "Tk",
+        "Content-Disposition",
+        "Content-Length",
+        "Content-Type",
+        "Content-Encoding",
+        "Content-Language",
+        "Content-Location",
+        "Forwarded",
+        "X-Forwarded-For",
+        "X-Forwarded-Host",
+        "X-Forwarded-Proto",
+        "Via",
+        "Location",
+        "From",
+        "Host",
+        "Referer",
+        "Referrer-Policy",
+        "User-Agent",
+        "Allow",
+        "Server",
+        "Accept-Ranges",
+        "Range",
+        "If-Range",
+        "Content-Range",
+        "Cross-Origin-Opener-Policy",
+        "Cross-Origin-Resource-Policy",
+        "Content-Security-Policy",
+        "Content-Security-Policy-Report-Only",
+        "Expect-CT",
+        "Feature-Policy",
+        "Public-Key-Pins",
+        "Public-Key-Pins-Report-Only",
+        "Strict-Transport-Security",
+        "Upgrade-Insecure-Requests",
+        "X-Content-Type-Options",
+        "X-Download-Options",
+        "X-Frame-Options",
+        "X-Powered-By",
+        "X-XSS-Protection",
+        "Last-Event-ID",
+        "NEL",
+        "Ping-From",
+        "Ping-To",
+        "Report-To",
+        "Transfer-Encoding",
+        "TE",
+        "Trailer",
+        "Sec-WebSocket-Key",
+        "Sec-WebSocket-Extensions",
+        "Sec-WebSocket-Accept",
+        "Sec-WebSocket-Protocol",
+        "Sec-WebSocket-Version",
+        "Accept-Push-Policy",
+        "Accept-Signature",
+        "Alt-Svc",
+        "Date",
+        "Large-Allocation",
+        "Link",
+        "Push-Policy",
+        "Retry-After",
+        "Signature",
+        "Signed-Headers",
+        "Server-Timing",
+        "SourceMap",
+        "Upgrade",
+        "X-DNS-Prefetch-Control",
+        "X-Firefox-Spdy",
+        "X-Pingback",
+        "X-Requested-With",
+        "X-Robots-Tag",
+        "X-UA-Compatible"
+      ],
       queryFields: [],
       mutationFields: [],
       subscriptionFields: [],

pages/index.vue

@@ -424,14 +424,15 @@
               </ul>
               <ul v-for="(header, index) in headers" :key="index">
                 <li>
-                  <input
+                  <autocomplete
                     :placeholder="'header ' + (index + 1)"
-                    :name="'header' + index"
+                    :source="commonHeaders"
+                    :spellcheck="false"
                     :value="header.key"
-                    @change="
+                    @input="
                       $store.commit('setKeyHeader', {
                         index,
-                        value: $event.target.value
+                        value: $event
                       })
                     "
                     @keyup.prevent="setRouteQueryState"
@@ -908,6 +909,131 @@ export default {
         "text/html",
         "text/plain"
       ],
+
+      commonHeaders: [
+        "WWW-Authenticate",
+        "Authorization",
+        "Proxy-Authenticate",
+        "Proxy-Authorization",
+        "Age",
+        "Cache-Control",
+        "Clear-Site-Data",
+        "Expires",
+        "Pragma",
+        "Warning",
+        "Accept-CH",
+        "Accept-CH-Lifetime",
+        "Early-Data",
+        "Content-DPR",
+        "DPR",
+        "Device-Memory",
+        "Save-Data",
+        "Viewport-Width",
+        "Width",
+        "Last-Modified",
+        "ETag",
+        "If-Match",
+        "If-None-Match",
+        "If-Modified-Since",
+        "If-Unmodified-Since",
+        "Vary",
+        "Connection",
+        "Keep-Alive",
+        "Accept",
+        "Accept-Charset",
+        "Accept-Encoding",
+        "Accept-Language",
+        "Expect",
+        "Max-Forwards",
+        "Cookie",
+        "Set-Cookie",
+        "Cookie2",
+        "Set-Cookie2",
+        "Access-Control-Allow-Origin",
+        "Access-Control-Allow-Credentials",
+        "Access-Control-Allow-Headers",
+        "Access-Control-Allow-Methods",
+        "Access-Control-Expose-Headers",
+        "Access-Control-Max-Age",
+        "Access-Control-Request-Headers",
+        "Access-Control-Request-Method",
+        "Origin",
+        "Service-Worker-Allowed",
+        "Timing-Allow-Origin",
+        "X-Permitted-Cross-Domain-Policies",
+        "DNT",
+        "Tk",
+        "Content-Disposition",
+        "Content-Length",
+        "Content-Type",
+        "Content-Encoding",
+        "Content-Language",
+        "Content-Location",
+        "Forwarded",
+        "X-Forwarded-For",
+        "X-Forwarded-Host",
+        "X-Forwarded-Proto",
+        "Via",
+        "Location",
+        "From",
+        "Host",
+        "Referer",
+        "Referrer-Policy",
+        "User-Agent",
+        "Allow",
+        "Server",
+        "Accept-Ranges",
+        "Range",
+        "If-Range",
+        "Content-Range",
+        "Cross-Origin-Opener-Policy",
+        "Cross-Origin-Resource-Policy",
+        "Content-Security-Policy",
+        "Content-Security-Policy-Report-Only",
+        "Expect-CT",
+        "Feature-Policy",
+        "Public-Key-Pins",
+        "Public-Key-Pins-Report-Only",
+        "Strict-Transport-Security",
+        "Upgrade-Insecure-Requests",
+        "X-Content-Type-Options",
+        "X-Download-Options",
+        "X-Frame-Options",
+        "X-Powered-By",
+        "X-XSS-Protection",
+        "Last-Event-ID",
+        "NEL",
+        "Ping-From",
+        "Ping-To",
+        "Report-To",
+        "Transfer-Encoding",
+        "TE",
+        "Trailer",
+        "Sec-WebSocket-Key",
+        "Sec-WebSocket-Extensions",
+        "Sec-WebSocket-Accept",
+        "Sec-WebSocket-Protocol",
+        "Sec-WebSocket-Version",
+        "Accept-Push-Policy",
+        "Accept-Signature",
+        "Alt-Svc",
+        "Date",
+        "Large-Allocation",
+        "Link",
+        "Push-Policy",
+        "Retry-After",
+        "Signature",
+        "Signed-Headers",
+        "Server-Timing",
+        "SourceMap",
+        "Upgrade",
+        "X-DNS-Prefetch-Control",
+        "X-Firefox-Spdy",
+        "X-Pingback",
+        "X-Requested-With",
+        "X-Robots-Tag",
+        "X-UA-Compatible"
+      ],
       showRequestModal: false,
       editRequest: {},