feat(#212): ability to configure global headers for all Playground tabs

Author: BlasiusSecundus

README.md

@@ -294,6 +294,8 @@ graphql.playground:
         schema.polling.interval: 2000
         schema.disableComments: true
         tracing.hideTracingResponse: true
+    headers:
+        headerFor: AllTabs
     tabs:
         - name: Example Tab
           query: classpath:exampleQuery.graphql
@@ -314,6 +316,11 @@ respectively. Note that these values may not be empty.
 
 `pageTitle` defaults to `Playground`.
 
+`headers` allows you to specify headers for the default tab. Note that if your are using Spring Security and CSRF is 
+enabled CSRF, the CSRF token will be automatically added to the headers. These headers will also be added to all the tabs
+configured under the [Tabs](#tabs) section. If a header is defined both in this 'global' header list and the header list
+of the individual tabs, the 'local' version will be used for that tab. 
+
 ## CDN
 
 The currently bundled version is `1.7.20`, which is - as of writing this - the latest release of `GraphQL Playground React`. 

playground-spring-boot-autoconfigure/src/main/java/com/oembedler/moon/playground/boot/properties/PlaygroundProperties.java

@@ -7,6 +7,7 @@
 import javax.validation.constraints.NotEmpty;
 import java.util.Collections;
 import java.util.List;
+import java.util.Map;
 
 @Data
 @JsonInclude(JsonInclude.Include.NON_EMPTY)
@@ -26,5 +27,7 @@ public class PlaygroundProperties {
 
     private PlaygroundSettings settings;
 
+    private Map<String, String> headers = Collections.emptyMap();
+
     private List<PlaygroundTab> tabs = Collections.emptyList();
 }

playground-spring-boot-autoconfigure/src/main/resources/templates/playground.html

@@ -19,20 +19,16 @@
 </div>
 
 <script th:inline="javascript">
-    function addCsrfHeaderTo(properties, csrf) {
-        if (!properties.headers) {
-            properties.headers = {};
-        }
-        properties.headers[csrf.headerName] = csrf.token;
-    }
-
     let csrf = /*[[${_csrf}]]*/ null;
     let properties = /*[[${properties}]]*/ {};
+    if (!properties.headers) {
+            properties.headers = {};
+    }
     if (csrf) {
-        addCsrfHeaderTo(properties, csrf);
-        if (properties.tabs) {
-            properties.tabs.forEach(tab => addCsrfHeaderTo(tab, csrf));
-        }
+        properties.headers[csrf.headerName] = csrf.token;
+    }
+    if (properties.tabs) {
+        properties.tabs.forEach(tab => tab.headers = Object.assign({}, properties.headers || {}, tab.headers || {}));
     }
     properties.setTitle = false;
     window.addEventListener('load', function (event) {