graphql: upgrade UI to v2 (#27294)

Upgrades graphiql to v2.4.4. The interface has become much nicer, and there are extra features like tabs, history, dark mode etc. This change also now uses golang embed to bundle the resources. --------- Co-authored-by: Martin Holst Swende <martin@swende.se>

graphql: upgrade UI to v2 (#27294)
Upgrades graphiql to v2.4.4. The interface has become much nicer, and there are extra features like tabs, history, dark mode etc. This change also now uses golang embed to bundle the resources. --------- Co-authored-by: Martin Holst Swende <martin@swende.se>
b46d37ea · Sina Mahmoodi · GitHub · 6fe02525 · b46d37ea · b46d37ea
Unverified Commit b46d37ea authored May 22, 2023 by Sina Mahmoodi Committed by GitHub May 22, 2023
8 changed files
--- a/graphql/graphiql.go
+++ b/graphql/graphiql.go
@@ -23,9 +23,12 @@
 package graphql

 import (
-	"bytes"
-	"fmt"
+	"encoding/json"
 	"net/http"
+	"path/filepath"
+
+	"github.com/ethereum/go-ethereum/graphql/internal/graphiql"
+	"github.com/ethereum/go-ethereum/log"
 )

 // GraphiQL is an in-browser IDE for exploring GraphiQL APIs.
@@ -34,87 +37,52 @@ import (
 // For more information, see https://github.com/graphql/graphiql.
 type GraphiQL struct{}

-func respond(w http.ResponseWriter, body []byte, code int) {
-	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+func respOk(w http.ResponseWriter, body []byte, ctype string) {
+	w.Header().Set("Content-Type", ctype)
 	w.Header().Set("X-Content-Type-Options", "nosniff")
-	w.WriteHeader(code)
-	_, _ = w.Write(body)
+	w.Write(body)
 }

-func errorJSON(msg string) []byte {
-	buf := bytes.Buffer{}
-	fmt.Fprintf(&buf, `{"error": "%s"}`, msg)
-	return buf.Bytes()
+func respErr(w http.ResponseWriter, msg string, code int) {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(code)
+	errMsg, _ := json.Marshal(struct {
+		Error string
+	}{Error: msg})
+	w.Write(errMsg)
 }

 func (h GraphiQL) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	if r.Method != http.MethodGet {
-		respond(w, errorJSON("only GET requests are supported"), http.StatusMethodNotAllowed)
+		respErr(w, "only GET allowed", http.StatusMethodNotAllowed)
 		return
 	}
-	w.Header().Set("Content-Type", "text/html")
-	w.Write(graphiql)
+	switch r.URL.Path {
+	case "/graphql/ui/graphiql.min.css":
+		data, err := graphiql.Assets.ReadFile(filepath.Base(r.URL.Path))
+		if err != nil {
+			log.Warn("Error loading graphiql asset", "err", err)
+			respErr(w, "internal error", http.StatusInternalServerError)
+			return
+		}
+		respOk(w, data, "text/css")
+	case "/graphql/ui/graphiql.min.js",
+		"/graphql/ui/react.production.min.js",
+		"/graphql/ui/react-dom.production.min.js":
+		data, err := graphiql.Assets.ReadFile(filepath.Base(r.URL.Path))
+		if err != nil {
+			log.Warn("Error loading graphiql asset", "err", err)
+			respErr(w, "internal error", http.StatusInternalServerError)
+			return
+		}
+		respOk(w, data, "application/javascript; charset=utf-8")
+	default:
+		data, err := graphiql.Assets.ReadFile("index.html")
+		if err != nil {
+			log.Warn("Error loading graphiql asset", "err", err)
+			respErr(w, "internal error", http.StatusInternalServerError)
+			return
+		}
+		respOk(w, data, "text/html")
+	}
 }
-
-var graphiql = []byte(`
-<!DOCTYPE html>
-<html>
-	<head>
-		<link
-                rel="icon"
-                type="image/png"
-                href="data:image/png;base64,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"
-        />
-        <link
-                rel="stylesheet"
-                href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.13.0/graphiql.css"
-                integrity="sha384-Qua2xoKBxcHOg1ivsKWo98zSI5KD/UuBpzMIg8coBd4/jGYoxeozCYFI9fesatT0"
-                crossorigin="anonymous"
-        />
-        <script
-                src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js"
-                integrity="sha384-5B8/4F9AQqp/HCHReGLSOWbyAOwnJsPrvx6C0+VPUr44Olzi99zYT1xbVh+ZanQJ"
-                crossorigin="anonymous"
-        ></script>
-        <script
-                src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js"
-                integrity="sha384-dOCiLz3nZfHiJj//EWxjwSKSC6Z1IJtyIEK/b/xlHVNdVLXDYSesoxiZb94bbuGE"
-                crossorigin="anonymous"
-        ></script>
-        <script
-                src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js"
-                integrity="sha384-QI+ql5f+khgo3mMdCktQ3E7wUKbIpuQo8S5rA/3i1jg2rMsloCNyiZclI7sFQUGN"
-                crossorigin="anonymous"
-        ></script>
-        <script
-                src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.13.0/graphiql.min.js"
-                integrity="sha384-roSmzNmO4zJK9X4lwggDi4/oVy+9V4nlS1+MN8Taj7tftJy1GvMWyAhTNXdC/fFR"
-                crossorigin="anonymous"
-        ></script>
-	</head>
-	<body style="width: 100%; height: 100%; margin: 0; overflow: hidden;">
-		<div id="graphiql" style="height: 100vh;">Loading...</div>
-		<script>
-			function fetchGQL(params) {
-				return fetch("/graphql", {
-					method: "post",
-					body: JSON.stringify(params),
-					credentials: "include",
-				}).then(function (resp) {
-					return resp.text();
-				}).then(function (body) {
-					try {
-						return JSON.parse(body);
-					} catch (error) {
-						return body;
-					}
-				});
-			}
-			ReactDOM.render(
-				React.createElement(GraphiQL, {fetcher: fetchGQL}),
-				document.getElementById("graphiql")
-			)
-		</script>
-	</body>
-</html>
-`)
--- a/graphql/internal/graphiql/build.go
+++ b/graphql/internal/graphiql/build.go
+package graphiql
+
+import (
+	"embed"
+)
+
+//go:embed *.js *.css *.html
+var Assets embed.FS
--- a/graphql/internal/graphiql/graphiql.min.css
+++ b/graphql/internal/graphiql/graphiql.min.css
--- a/graphql/internal/graphiql/graphiql.min.js
+++ b/graphql/internal/graphiql/graphiql.min.js
--- a/graphql/internal/graphiql/index.html
+++ b/graphql/internal/graphiql/index.html
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>GraphiQL</title>
+    <style>
+        body {
+            height: 100%;
+            margin: 0;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        #graphiql {
+            height: 100vh;
+        }
+    </style>
+
+    <script src="/graphql/ui/react.production.min.js"></script>
+    <script src="/graphql/ui/react-dom.production.min.js"></script>
+
+    <link rel="stylesheet" href="/graphql/ui/graphiql.min.css" />
+</head>
+
+<body>
+<div id="graphiql">Loading...</div>
+<script src="/graphql/ui/graphiql.min.js" type="application/javascript"></script>
+<script>
+    ReactDOM.render(
+        React.createElement(GraphiQL, {
+            fetcher: GraphiQL.createFetcher({
+                url: '/graphql',
+            }),
+            defaultEditorToolsVisibility: true,
+        }),
+        document.getElementById('graphiql'),
+    );
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/graphql/internal/graphiql/react-dom.production.min.js
+++ b/graphql/internal/graphiql/react-dom.production.min.js
--- a/graphql/internal/graphiql/react.production.min.js
+++ b/graphql/internal/graphiql/react.production.min.js
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+(function(){'use strict';(function(c,x){"object"===typeof exports&&"undefined"!==typeof module?x(exports):"function"===typeof define&&define.amd?define(["exports"],x):(c=c||self,x(c.React={}))})(this,function(c){function x(a){if(null===a||"object"!==typeof a)return null;a=Y&&a[Y]||a["@@iterator"];return"function"===typeof a?a:null}function y(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,e=1;e<arguments.length;e++)b+="&args[]="+encodeURIComponent(arguments[e]);return"Minified React error #"+
+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function v(a,b,e){this.props=a;this.context=b;this.refs=Z;this.updater=e||aa}function ba(){}function K(a,b,e){this.props=a;this.context=b;this.refs=Z;this.updater=e||aa}function ca(a,b,e){var l,f={},c=null,da=null;if(null!=b)for(l in void 0!==b.ref&&(da=b.ref),void 0!==b.key&&(c=""+b.key),b)ea.call(b,l)&&!fa.hasOwnProperty(l)&&(f[l]=b[l]);var k=arguments.length-2;if(1===
+k)f.children=e;else if(1<k){for(var h=Array(k),d=0;d<k;d++)h[d]=arguments[d+2];f.children=h}if(a&&a.defaultProps)for(l in k=a.defaultProps,k)void 0===f[l]&&(f[l]=k[l]);return{$$typeof:w,type:a,key:c,ref:da,props:f,_owner:L.current}}function va(a,b){return{$$typeof:w,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function M(a){return"object"===typeof a&&null!==a&&a.$$typeof===w}function wa(a){var b={"=":"=0",":":"=2"};return"$"+a.replace(/[=:]/g,function(a){return b[a]})}function N(a,b){return"object"===
+typeof a&&null!==a&&null!=a.key?wa(""+a.key):b.toString(36)}function C(a,b,e,l,f){var c=typeof a;if("undefined"===c||"boolean"===c)a=null;var d=!1;if(null===a)d=!0;else switch(c){case "string":case "number":d=!0;break;case "object":switch(a.$$typeof){case w:case ha:d=!0}}if(d)return d=a,f=f(d),a=""===l?"."+N(d,0):l,Array.isArray(f)?(e="",null!=a&&(e=a.replace(ia,"$&/")+"/"),C(f,b,e,"",function(a){return a})):null!=f&&(M(f)&&(f=va(f,e+(!f.key||d&&d.key===f.key?"":(""+f.key).replace(ia,"$&/")+"/")+
+a)),b.push(f)),1;d=0;l=""===l?".":l+":";if(Array.isArray(a))for(var k=0;k<a.length;k++){c=a[k];var h=l+N(c,k);d+=C(c,b,e,h,f)}else if(h=x(a),"function"===typeof h)for(a=h.call(a),k=0;!(c=a.next()).done;)c=c.value,h=l+N(c,k++),d+=C(c,b,e,h,f);else if("object"===c)throw b=""+a,Error(y(31,"[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b));return d}function D(a,b,e){if(null==a)return a;var l=[],c=0;C(a,l,"","",function(a){return b.call(e,a,c++)});return l}function xa(a){if(-1===
+a._status){var b=a._result;b=b();a._status=0;a._result=b;b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b)},function(b){0===a._status&&(a._status=2,a._result=b)})}if(1===a._status)return a._result;throw a._result;}function n(){var a=ja.current;if(null===a)throw Error(y(321));return a}function O(a,b){var e=a.length;a.push(b);a:for(;;){var c=e-1>>>1,f=a[c];if(void 0!==f&&0<E(f,b))a[c]=b,a[e]=f,e=c;else break a}}function p(a){a=a[0];return void 0===a?null:a}function F(a){var b=
+a[0];if(void 0!==b){var e=a.pop();if(e!==b){a[0]=e;a:for(var c=0,f=a.length;c<f;){var d=2*(c+1)-1,g=a[d],k=d+1,h=a[k];if(void 0!==g&&0>E(g,e))void 0!==h&&0>E(h,g)?(a[c]=h,a[k]=e,c=k):(a[c]=g,a[d]=e,c=d);else if(void 0!==h&&0>E(h,e))a[c]=h,a[k]=e,c=k;else break a}}return b}return null}function E(a,b){var e=a.sortIndex-b.sortIndex;return 0!==e?e:a.id-b.id}function P(a){for(var b=p(r);null!==b;){if(null===b.callback)F(r);else if(b.startTime<=a)F(r),b.sortIndex=b.expirationTime,O(q,b);else break;b=p(r)}}
+function Q(a){z=!1;P(a);if(!u)if(null!==p(q))u=!0,A(R);else{var b=p(r);null!==b&&G(Q,b.startTime-a)}}function R(a,b){u=!1;z&&(z=!1,S());H=!0;var e=g;try{P(b);for(m=p(q);null!==m&&(!(m.expirationTime>b)||a&&!T());){var c=m.callback;if("function"===typeof c){m.callback=null;g=m.priorityLevel;var f=c(m.expirationTime<=b);b=t();"function"===typeof f?m.callback=f:m===p(q)&&F(q);P(b)}else F(q);m=p(q)}if(null!==m)var d=!0;else{var n=p(r);null!==n&&G(Q,n.startTime-b);d=!1}return d}finally{m=null,g=e,H=!1}}
+var w=60103,ha=60106;c.Fragment=60107;c.StrictMode=60108;c.Profiler=60114;var ka=60109,la=60110,ma=60112;c.Suspense=60113;var na=60115,oa=60116;if("function"===typeof Symbol&&Symbol.for){var d=Symbol.for;w=d("react.element");ha=d("react.portal");c.Fragment=d("react.fragment");c.StrictMode=d("react.strict_mode");c.Profiler=d("react.profiler");ka=d("react.provider");la=d("react.context");ma=d("react.forward_ref");c.Suspense=d("react.suspense");na=d("react.memo");oa=d("react.lazy")}var Y="function"===
+typeof Symbol&&Symbol.iterator,ya=Object.prototype.hasOwnProperty,U=Object.assign||function(a,b){if(null==a)throw new TypeError("Object.assign target cannot be null or undefined");for(var e=Object(a),c=1;c<arguments.length;c++){var d=arguments[c];if(null!=d){var g=void 0;d=Object(d);for(g in d)ya.call(d,g)&&(e[g]=d[g])}}return e},aa={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,d){},enqueueSetState:function(a,b,c,d){}},Z={};v.prototype.isReactComponent=
+{};v.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error(y(85));this.updater.enqueueSetState(this,a,b,"setState")};v.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};ba.prototype=v.prototype;d=K.prototype=new ba;d.constructor=K;U(d,v.prototype);d.isPureReactComponent=!0;var L={current:null},ea=Object.prototype.hasOwnProperty,fa={key:!0,ref:!0,__self:!0,__source:!0},ia=/\/+/g,ja={current:null},V;if("object"===typeof performance&&
+"function"===typeof performance.now){var za=performance;var t=function(){return za.now()}}else{var pa=Date,Aa=pa.now();t=function(){return pa.now()-Aa}}if("undefined"===typeof window||"function"!==typeof MessageChannel){var B=null,qa=null,ra=function(){if(null!==B)try{var a=t();B(!0,a);B=null}catch(b){throw setTimeout(ra,0),b;}};var A=function(a){null!==B?setTimeout(A,0,a):(B=a,setTimeout(ra,0))};var G=function(a,b){qa=setTimeout(a,b)};var S=function(){clearTimeout(qa)};var T=function(){return!1};
+d=V=function(){}}else{var Ba=window.setTimeout,Ca=window.clearTimeout;"undefined"!==typeof console&&(d=window.cancelAnimationFrame,"function"!==typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"),"function"!==typeof d&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"));
+var I=!1,J=null,W=-1,sa=5,ta=0;T=function(){return t()>=ta};d=function(){};V=function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):sa=0<a?Math.floor(1E3/a):5};var ua=new MessageChannel,X=ua.port2;ua.port1.onmessage=function(){if(null!==J){var a=t();ta=a+sa;try{J(!0,a)?X.postMessage(null):(I=!1,J=null)}catch(b){throw X.postMessage(null),b;}}else I=!1};A=function(a){J=a;I||(I=!0,X.postMessage(null))};G=
+function(a,b){W=Ba(function(){a(t())},b)};S=function(){Ca(W);W=-1}}var q=[],r=[],Da=1,m=null,g=3,H=!1,u=!1,z=!1,Ea=0;d={ReactCurrentDispatcher:ja,ReactCurrentOwner:L,IsSomeRendererActing:{current:!1},ReactCurrentBatchConfig:{transition:0},assign:U,Scheduler:{__proto__:null,unstable_ImmediatePriority:1,unstable_UserBlockingPriority:2,unstable_NormalPriority:3,unstable_IdlePriority:5,unstable_LowPriority:4,unstable_runWithPriority:function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=
+3}var c=g;g=a;try{return b()}finally{g=c}},unstable_next:function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g;g=b;try{return a()}finally{g=c}},unstable_scheduleCallback:function(a,b,c){var d=t();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?d+c:d):c=d;switch(a){case 1:var e=-1;break;case 2:e=250;break;case 5:e=1073741823;break;case 4:e=1E4;break;default:e=5E3}e=c+e;a={id:Da++,callback:b,priorityLevel:a,startTime:c,expirationTime:e,sortIndex:-1};c>d?(a.sortIndex=
+c,O(r,a),null===p(q)&&a===p(r)&&(z?S():z=!0,G(Q,c-d))):(a.sortIndex=e,O(q,a),u||H||(u=!0,A(R)));return a},unstable_cancelCallback:function(a){a.callback=null},unstable_wrapCallback:function(a){var b=g;return function(){var c=g;g=b;try{return a.apply(this,arguments)}finally{g=c}}},unstable_getCurrentPriorityLevel:function(){return g},get unstable_shouldYield(){return T},unstable_requestPaint:d,unstable_continueExecution:function(){u||H||(u=!0,A(R))},unstable_pauseExecution:function(){},unstable_getFirstCallbackNode:function(){return p(q)},
+get unstable_now(){return t},get unstable_forceFrameRate(){return V},unstable_Profiling:null},SchedulerTracing:{__proto__:null,__interactionsRef:null,__subscriberRef:null,unstable_clear:function(a){return a()},unstable_getCurrent:function(){return null},unstable_getThreadID:function(){return++Ea},unstable_trace:function(a,b,c){return c()},unstable_wrap:function(a){return a},unstable_subscribe:function(a){},unstable_unsubscribe:function(a){}}};c.Children={map:D,forEach:function(a,b,c){D(a,function(){b.apply(this,
+arguments)},c)},count:function(a){var b=0;D(a,function(){b++});return b},toArray:function(a){return D(a,function(a){return a})||[]},only:function(a){if(!M(a))throw Error(y(143));return a}};c.Component=v;c.PureComponent=K;c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=d;c.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error(y(267,a));var d=U({},a.props),e=a.key,g=a.ref,n=a._owner;if(null!=b){void 0!==b.ref&&(g=b.ref,n=L.current);void 0!==b.key&&(e=""+b.key);if(a.type&&a.type.defaultProps)var k=
+a.type.defaultProps;for(h in b)ea.call(b,h)&&!fa.hasOwnProperty(h)&&(d[h]=void 0===b[h]&&void 0!==k?k[h]:b[h])}var h=arguments.length-2;if(1===h)d.children=c;else if(1<h){k=Array(h);for(var m=0;m<h;m++)k[m]=arguments[m+2];d.children=k}return{$$typeof:w,type:a.type,key:e,ref:g,props:d,_owner:n}};c.createContext=function(a,b){void 0===b&&(b=null);a={$$typeof:la,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:ka,_context:a};return a.Consumer=
+a};c.createElement=ca;c.createFactory=function(a){var b=ca.bind(null,a);b.type=a;return b};c.createRef=function(){return{current:null}};c.forwardRef=function(a){return{$$typeof:ma,render:a}};c.isValidElement=M;c.lazy=function(a){return{$$typeof:oa,_payload:{_status:-1,_result:a},_init:xa}};c.memo=function(a,b){return{$$typeof:na,type:a,compare:void 0===b?null:b}};c.useCallback=function(a,b){return n().useCallback(a,b)};c.useContext=function(a,b){return n().useContext(a,b)};c.useDebugValue=function(a,
+b){};c.useEffect=function(a,b){return n().useEffect(a,b)};c.useImperativeHandle=function(a,b,c){return n().useImperativeHandle(a,b,c)};c.useLayoutEffect=function(a,b){return n().useLayoutEffect(a,b)};c.useMemo=function(a,b){return n().useMemo(a,b)};c.useReducer=function(a,b,c){return n().useReducer(a,b,c)};c.useRef=function(a){return n().useRef(a)};c.useState=function(a){return n().useState(a)};c.version="17.0.2"});
+})();
--- a/graphql/service.go
+++ b/graphql/service.go
@@ -122,6 +122,7 @@ func newHandler(stack *node.Node, backend ethapi.Backend, filterSystem *filters.
 	handler := node.NewHTTPHandlerStack(h, cors, vhosts, nil)

 	stack.RegisterHandler("GraphQL UI", "/graphql/ui", GraphiQL{})
+	stack.RegisterHandler("GraphQL UI", "/graphql/ui/", GraphiQL{})
 	stack.RegisterHandler("GraphQL", "/graphql", handler)
 	stack.RegisterHandler("GraphQL", "/graphql/", handler)