From 9cded18857513a61bd74917aaa171c04b13b0e09 Mon Sep 17 00:00:00 2001
From: sadv1r <5000487+sadv1r@users.noreply.github.com>
Date: Thu, 19 Oct 2023 03:54:42 +0300
Subject: [PATCH]  Update GraphiQL

---
 README.md                                     |  1 +
 .../GraphiQlWebFluxMvcAutoConfiguration.java  |  1 +
 .../GraphiQlWebMvcAutoConfiguration.java      |  1 +
 .../configuration/GraphiqlProperties.java     | 28 ++++++++++++++++++-
 .../main/resources/templates/graphiql.html    | 18 ++++++------
 .../src/main/resources/application.yaml       |  1 +
 .../src/main/resources/application.yaml       |  1 +
 7 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index d6d757f..88890ec 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,7 @@ graphql:
            url
         }
       }
+    default-editor-tools-visibility: VARIABLES
     variables:
       id: 1
     headers:
diff --git a/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java b/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java
index 2458e65..dcbbacf 100644
--- a/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java
+++ b/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java
@@ -27,6 +27,7 @@ public RouterFunction<ServerResponse> reactiveGraphiQlRouterFunction(GraphiqlPro
                     .modelAttribute("cdnHost", properties.getCdn().getHost())
                     .modelAttribute("serverPath", serverPath)
                     .modelAttribute("query", properties.getQuery())
+                    .modelAttribute("defaultEditorToolsVisibility", properties.getDefaultEditorToolsVisibility())
                     .modelAttribute("variables", properties.getVariables())
                     .modelAttribute("headers", properties.getHeaders())
                     .build();
diff --git a/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java b/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java
index 93a3baf..218534d 100644
--- a/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java
+++ b/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java
@@ -25,6 +25,7 @@ public RouterFunction<ServerResponse> graphiQlRouterFunction(GraphiqlProperties
                     .modelAttribute("cdnHost", properties.getCdn().getHost())
                     .modelAttribute("serverPath", serverPath)
                     .modelAttribute("query", properties.getQuery())
+                    .modelAttribute("defaultEditorToolsVisibility", properties.getDefaultEditorToolsVisibility())
                     .modelAttribute("variables", properties.getVariables())
                     .modelAttribute("headers", properties.getHeaders())
                     .build();
diff --git a/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java b/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java
index 7fdb9f8..950e4d8 100644
--- a/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java
+++ b/graphql-graphiql-spring-boot-starter/src/main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java
@@ -25,6 +25,8 @@ public class GraphiqlProperties {
 
     private String query;
 
+    private DefaultEditorTollsVisibility defaultEditorToolsVisibility = DefaultEditorTollsVisibility.SHOWN;
+
     private Map<String, String> variables;
 
     private Map<String, String> headers;
@@ -55,6 +57,14 @@ public void setQuery(String query) {
         this.query = readIfPath(query);
     }
 
+    public DefaultEditorTollsVisibility getDefaultEditorToolsVisibility() {
+        return defaultEditorToolsVisibility;
+    }
+
+    public void setDefaultEditorToolsVisibility(DefaultEditorTollsVisibility defaultEditorToolsVisibility) {
+        this.defaultEditorToolsVisibility = defaultEditorToolsVisibility;
+    }
+
     public Map<String, String> getVariables() {
         return variables;
     }
@@ -95,8 +105,24 @@ private static String readIfPath(String query) {
         return query;
     }
 
-    public enum Cdn {
+    public enum DefaultEditorTollsVisibility {
+        SHOWN(true),
+        HIDDEN(false),
+        VARIABLES("'variables'"),
+        HEADERS("'headers'");
+
+        private final Object value;
 
+        DefaultEditorTollsVisibility(Object value) {
+            this.value = value;
+        }
+
+        public Object getValue() {
+            return value;
+        }
+    }
+
+    public enum Cdn {
         JSDELIVR,
         UNPKG;
 
diff --git a/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html b/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html
index 4753ca9..31ad6e1 100644
--- a/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html
+++ b/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
+    <title>GraphiQL</title>
     <style>
         body {
             height: 100%;
@@ -14,23 +15,23 @@
         }
     </style>
 
-    <script crossorigin th:src="|${cdnHost}/react@17/umd/react.development.js|"></script>
-    <script crossorigin th:src="|${cdnHost}/react-dom@17/umd/react-dom.development.js|"></script>
+    <script crossorigin th:src="|${cdnHost}/react@18/umd/react.development.js|"></script>
+    <script crossorigin th:src="|${cdnHost}/react-dom@18/umd/react-dom.development.js|"></script>
 
+    <script th:src="|${cdnHost}/graphiql/graphiql.min.js|" type="application/javascript"></script>
     <link rel="stylesheet" th:href="|${cdnHost}/graphiql/graphiql.min.css|"/>
 </head>
 <body>
 <div id="graphiql">Loading...</div>
-<script th:src="|${cdnHost}/graphiql/graphiql.min.js|" type="application/javascript"></script>
-
 <script th:inline="javascript">
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+    root.render(
         React.createElement(GraphiQL, {
             fetcher: GraphiQL.createFetcher({
                 url: '[(${serverPath})]',
             }),
             query: [[${query}]],
-            defaultVariableEditorOpen: true,
+            defaultEditorToolsVisibility: [(${defaultEditorToolsVisibility.value})],
             headerEditorEnabled: true,
             shouldPersistHeaders: true,
             // variables: '[[${variables}]]',
@@ -38,7 +39,6 @@
             // headers: '[[${headers}]]',
             headers: JSON.stringify([[${headers}]], undefined, 2),
         }),
-        document.getElementById('graphiql'),
     );
 </script>
 </body>
diff --git a/samples/web-sample/src/main/resources/application.yaml b/samples/web-sample/src/main/resources/application.yaml
index 714b41e..4b47273 100644
--- a/samples/web-sample/src/main/resources/application.yaml
+++ b/samples/web-sample/src/main/resources/application.yaml
@@ -8,6 +8,7 @@ spring:
             url
           }
         }
+      default-editor-tools-visibility: VARIABLES
       variables:
         id: 1
       headers:
diff --git a/samples/webflux-sample/src/main/resources/application.yaml b/samples/webflux-sample/src/main/resources/application.yaml
index d9bf602..3bf273c 100644
--- a/samples/webflux-sample/src/main/resources/application.yaml
+++ b/samples/webflux-sample/src/main/resources/application.yaml
@@ -2,6 +2,7 @@ spring:
   graphql:
     graphiql:
       query: example/query.graphql
+      default-editor-tools-visibility: VARIABLES
       variables:
         id: 1
       headers: