fix(#529): upgrade altair and add support for settings

Author: oliemansm

example/src/main/resources/application.yml

@@ -27,6 +27,11 @@ graphql:
     cdn:
       enabled: false
       version: 4.0.2
+    options:
+      initial-settings:
+        theme: dracula
+
+
   graphiql:
     enabled: true
     cdn:

graphql-spring-boot-autoconfigure/src/main/java/graphql/kickstart/autoconfigure/editor/altair/AltairAutoConfiguration.java

@@ -11,7 +11,7 @@
 /** @author Moncef AOUDIA */
 @Configuration
 @ConditionalOnWebApplication
-@EnableConfigurationProperties(AltairProperties.class)
+@EnableConfigurationProperties({AltairProperties.class, AltairOptions.class})
 @ConditionalOnClass(DispatcherServlet.class)
 public class AltairAutoConfiguration {
 

graphql-spring-boot-autoconfigure/src/main/java/graphql/kickstart/autoconfigure/editor/altair/AltairController.java

@@ -4,6 +4,7 @@
 import static java.util.Objects.nonNull;
 import static org.apache.commons.lang3.StringUtils.isNumeric;
 
+import com.fasterxml.jackson.annotation.JsonInclude.Include;
 import com.fasterxml.jackson.core.JsonProcessingException;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import graphql.kickstart.autoconfigure.editor.PropertyGroupReader;
@@ -17,6 +18,7 @@
 import javax.annotation.PostConstruct;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
+import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
 import lombok.val;
 import org.apache.commons.lang3.StringUtils;
@@ -39,6 +41,8 @@ public class AltairController {
   private static final String ALTAIR = "altair-static";
 
   @Autowired private AltairProperties altairProperties;
+  @Autowired private AltairOptions altairOptions;
+  private final ObjectMapper objectMapper = new ObjectMapper();
 
   @Autowired private Environment environment;
 
@@ -48,6 +52,7 @@ public class AltairController {
 
   @PostConstruct
   public void onceConstructed() throws IOException {
+    objectMapper.setSerializationInclusion(Include.NON_NULL);
     loadTemplate();
     loadProps();
     loadHeaders();
@@ -61,7 +66,7 @@ private void loadTemplate() throws IOException {
   }
 
   private void loadProps() throws IOException {
-    props = new PropsLoader(environment, "graphql.altair.props.resources.", "graphql.altair.props.values.").load();
+    props = new PropsLoader(environment, "graphql.altair.props.resources.", "graphql.altair.props.variables.").load();
   }
 
   private void loadHeaders() throws JsonProcessingException {
@@ -87,6 +92,7 @@ public void altair(
     response.getOutputStream().write(populatedTemplate.getBytes(Charset.defaultCharset()));
   }
 
+  @SneakyThrows
   private Map<String, String> getReplacements(
       String graphqlEndpoint, String subscriptionsEndpoint) {
     Map<String, String> replacements = new HashMap<>();
@@ -108,6 +114,7 @@ private Map<String, String> getReplacements(
     replacements.put("altairPolyfillsJsUrl", getResourceUrl("polyfills-es2018.js", "polyfills" + suffix));
     replacements.put("altairRuntimeJsUrl", getResourceUrl("runtime-es2018.js", "runtime" + suffix));
     replacements.put("props", props);
+    replacements.put("options", objectMapper.writeValueAsString(altairOptions));
     replacements.put("headers", headers);
     return replacements;
   }

graphql-spring-boot-autoconfigure/src/main/java/graphql/kickstart/autoconfigure/editor/altair/AltairOptions.java

@@ -0,0 +1,28 @@
+package graphql.kickstart.autoconfigure.editor.altair;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import java.util.Map;
+import lombok.Data;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.boot.context.properties.NestedConfigurationProperty;
+
+@Data
+@ConfigurationProperties("graphql.altair.options")
+public class AltairOptions {
+
+  @JsonProperty("endpointURL")
+  private String endpointUrl = "/graphql";
+  private String subscriptionsEndpoint = "/subscriptions";
+  private String initialQuery;
+  private String initialVariables;
+  private String initialPreRequestScript;
+  private String initialPostRequestScript;
+  private Map<String,String> initialHeaders;
+  @NestedConfigurationProperty InitialEnvironments initialEnvironments;
+  private String instanceStorageNamespace;
+  @NestedConfigurationProperty InitialSettings initialSettings;
+  private String initialSubscriptionsProvider;
+  private Map<String,String> initialSubscriptionsPayload;
+  private Boolean preserveState = true;
+  private String initialHttpMethod;
+}

graphql-spring-boot-autoconfigure/src/main/java/graphql/kickstart/autoconfigure/editor/altair/InitialEnvironmentState.java

@@ -0,0 +1,13 @@
+package graphql.kickstart.autoconfigure.editor.altair;
+
+import java.util.Map;
+import lombok.Data;
+
+@Data
+public class InitialEnvironmentState {
+
+  private String id;
+  private String title;
+  private Map<String,String> variables;
+
+}

graphql-spring-boot-autoconfigure/src/main/java/graphql/kickstart/autoconfigure/editor/altair/InitialEnvironments.java

@@ -0,0 +1,12 @@
+package graphql.kickstart.autoconfigure.editor.altair;
+
+import java.util.List;
+import lombok.Data;
+import org.springframework.boot.context.properties.NestedConfigurationProperty;
+
+@Data
+public class InitialEnvironments {
+
+  @NestedConfigurationProperty InitialEnvironmentState base;
+  @NestedConfigurationProperty List<InitialEnvironmentState> subEnvironments;
+}

graphql-spring-boot-autoconfigure/src/main/java/graphql/kickstart/autoconfigure/editor/altair/InitialSettings.java

@@ -0,0 +1,35 @@
+package graphql.kickstart.autoconfigure.editor.altair;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import java.util.List;
+import lombok.Data;
+
+@Data
+public class InitialSettings {
+
+  private String theme;
+  private String language;
+  private Integer addQueryDepthLimit;
+  private Integer tabSize;
+  private Boolean enableExperimental;
+  @JsonProperty("theme.fontsize")
+  private Integer themeFontSize;
+  @JsonProperty("theme.editorFontFamily")
+  private String themeEditorFontFamily;
+  @JsonProperty("theme.editorFontSize")
+  private Integer themeEditorFontSize;
+  private Boolean disablePushNotification;
+  @JsonProperty("plugin.list")
+  private List<String> pluginList;
+  @JsonProperty("request.withCredentials")
+  private Boolean requestWithCredentials;
+  @JsonProperty("schema.reloadOnStart")
+  private Boolean schemaReloadOnStart;
+  @JsonProperty("alert.disableWarnings")
+  private Boolean alertDisableWarnings;
+  @JsonProperty("history.depth")
+  private Integer historyDepth;
+
+  @JsonProperty("response.hideExtensions")
+  private Boolean responseHideExtensions;
+}

graphql-spring-boot-autoconfigure/src/main/resources/templates/altair.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 
 <head>
   <meta charset="utf-8">
@@ -12,16 +12,6 @@
 </head>
 
 <body>
-<script>
-  var properties = JSON.parse(`${props}`)
-
-  window.__ALTAIR_ENDPOINT_URL__ = `${graphqlEndpoint}`
-  window.__ALTAIR_SUBSCRIPTIONS_ENDPOINT__ = `${subscriptionsEndpoint}`
-  window.__ALTAIR_INITIAL_QUERY__ = `${properties.defaultQuery}`
-  window.__ALTAIR_INITIAL_VARIABLES__ = `${properties.variables}`
-  window.__ALTAIR_INITIAL_HEADERS__ = JSON.parse(`${headers}`)
-
-</script>
 <app-root>
   <style>
     .loading-screen {
@@ -43,13 +33,22 @@
   </div>
 </app-root>
 <script>
+  let properties = JSON.parse(`${props}`)
+  let options = JSON.parse(`${options}`)
+  let altairConfig = Object.assign({
+    endpointURL: `${graphqlEndpoint}`,
+    subscriptionsEndpoint: `${subscriptionsEndpoint}`,
+    initialQuery: properties.defaultQuery || '',
+    initialVariables: properties.variables || '',
+    initialHeaders: JSON.parse(`${headers}`)
+  }, options || {})
   document.addEventListener('DOMContentLoaded', () => {
-    AltairGraphQL.init()
+    AltairGraphQL.init(altairConfig)
   })
 </script>
-<script as="script" rel="preload" src="${altairRuntimeJsUrl}" type="text/javascript"></script>
-<script as="script" rel="preload" src="${altairPolyfillsJsUrl}" type="text/javascript"></script>
-<script as="script" rel="preload" src="${altairMainJsUrl}" type="text/javascript"></script>
+<script src="${altairRuntimeJsUrl}" type="text/javascript"></script>
+<script src="${altairPolyfillsJsUrl}" type="text/javascript"></script>
+<script src="${altairMainJsUrl}" type="text/javascript"></script>
 </body>
 
 </html>