[ui] Replace GraphQL Explorer with GraphiQL (#23423)

## Summary & Motivation In OSS, eliminate GraphQL Playground (which is EOL, unsupported, and broken) and replace it with GraphiQL. This approach uses the CDN-based static example provided in the GraphiQL repo ([link](https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html)) but replaces the CDN host with the local template string. The static assets are therefore checked in as part of this PR, to be served locally, just as graphql-playground's assets were. (It seems prudent not to depend on unpkg for this.) <img width="914" alt="Screenshot 2024-08-05 at 12 42 12" src="https://github.com/user-attachments/assets/3910b209-07c8-414e-95ef-4d09106d9261"> ## How I Tested These Changes Run `dagster dev -p 3333`, view GraphiQL at `http://localhost:3333/graphql`. Verify that the UI loads and renders correctly, and that I can successfully query the GraphQL backend.
dagster-io · Aug 6, 2024 · 4ebdb25 · 4ebdb25
1 parent 2f8c22d
commit 4ebdb25
Show file tree

Hide file tree

Showing 15 changed files with 93,697 additions and 608 deletions.
diff --git a/js_modules/dagster-ui/package.json b/js_modules/dagster-ui/package.json
@@ -6,7 +6,7 @@
     "build": "yarn workspace @dagster-io/app-oss build && yarn replace-asset-prefix && yarn post-build",
     "replace-asset-prefix": "node ./packages/app-oss/replace-asset-prefix.js",
     "build-with-profiling": "yarn workspace @dagster-io/app-oss build --profile && yarn post-build",
-    "post-build": "cd ../../python_modules/dagster-webserver/dagster_webserver && rm -rf webapp && mkdir -p webapp && cp -r ../../../js_modules/dagster-ui/packages/app-oss/build ./webapp/ && mkdir -p webapp/build/vendor && cp -r graphql-playground ./webapp/build/vendor && cp ../../../js_modules/dagster-ui/packages/app-oss/csp-header.txt ./webapp/build",
+    "post-build": "cd ../../python_modules/dagster-webserver/dagster_webserver && rm -rf webapp && mkdir -p webapp && cp -r ../../../js_modules/dagster-ui/packages/app-oss/build ./webapp/ && mkdir -p webapp/build/vendor && cp -r graphiql ./webapp/build/vendor && cp ../../../js_modules/dagster-ui/packages/app-oss/csp-header.txt ./webapp/build",
     "lint": "yarn workspace @dagster-io/app-oss lint && yarn workspace @dagster-io/ui-core lint && yarn workspace @dagster-io/ui-components lint",
     "start": "yarn workspace @dagster-io/app-oss start",
     "ts": "yarn workspace @dagster-io/app-oss ts && yarn workspace @dagster-io/ui-components ts",

diff --git a/python_modules/dagster-webserver/MANIFEST.in b/python_modules/dagster-webserver/MANIFEST.in
@@ -1,6 +1,6 @@
 include README.rst
 include LICENSE
 include dagster_webserver/py.typed
-recursive-include dagster_webserver/graphql-playground *
+recursive-include dagster_webserver/graphiql *
 recursive-include dagster_webserver/webapp/build *
 recursive-include dagster_webserver/templates/assets *
diff --git a/...n_modules/dagster-webserver/dagster_webserver/graphiql/graphiql-plugin-explorer-style.css b/...n_modules/dagster-webserver/dagster_webserver/graphiql/graphiql-plugin-explorer-style.css
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphiql/graphiql-plugin-explorer.umd.js b/python_modules/dagster-webserver/dagster_webserver/graphiql/graphiql-plugin-explorer.umd.js
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphiql/graphiql.min.css b/python_modules/dagster-webserver/dagster_webserver/graphiql/graphiql.min.css
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphiql/graphiql.min.js b/python_modules/dagster-webserver/dagster_webserver/graphiql/graphiql.min.js
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphiql/react-dom.production.min.js b/python_modules/dagster-webserver/dagster_webserver/graphiql/react-dom.production.min.js
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphiql/react.production.min.js b/python_modules/dagster-webserver/dagster_webserver/graphiql/react.production.min.js
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphql-playground/favicon.png b/python_modules/dagster-webserver/dagster_webserver/graphql-playground/favicon.png
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphql-playground/index.css b/python_modules/dagster-webserver/dagster_webserver/graphql-playground/index.css
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphql-playground/middleware.js b/python_modules/dagster-webserver/dagster_webserver/graphql-playground/middleware.js
diff --git a/python_modules/dagster-webserver/dagster_webserver/graphql.py b/python_modules/dagster-webserver/dagster_webserver/graphql.py
@@ -31,7 +31,7 @@
 from starlette.routing import BaseRoute
 from starlette.websockets import WebSocket, WebSocketDisconnect, WebSocketState
 
-from dagster_webserver.templates.playground import TEMPLATE
+from dagster_webserver.templates.graphiql import TEMPLATE
 
 if TYPE_CHECKING:
     from starlette.datastructures import QueryParams

diff --git a/python_modules/dagster-webserver/dagster_webserver/templates/graphiql.py b/python_modules/dagster-webserver/dagster_webserver/templates/graphiql.py
@@ -0,0 +1,84 @@
+# TODO - figure out how to use files as templates
+
+TEMPLATE = """
+<!--
+ *  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>
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script
+      src="{{ app_path_prefix }}/vendor/graphiql/react.production.min.js"
+    ></script>
+    <script
+      src="{{ app_path_prefix }}/vendor/graphiql/react-dom.production.min.js"
+    ></script>
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <script
+      src="{{ app_path_prefix }}/vendor/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <link rel="stylesheet" href="{{ app_path_prefix }}/vendor/graphiql/graphiql.min.css" />
+    <!-- 
+      These are imports for the GraphIQL Explorer plugin.
+     -->
+    <script
+      src="{{ app_path_prefix }}/vendor/graphiql/graphiql-plugin-explorer.umd.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="{{ app_path_prefix }}/vendor/graphiql/graphiql-plugin-explorer-style.css"
+    />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script>
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      const hostAndPath = `${document.location.host}${document.location.pathname}`;
+      const fetcher = GraphiQL.createFetcher({
+        url: `${document.location.protocol}//${hostAndPath}`,
+        subscriptionUrl: `ws://${hostAndPath}`,
+        headers: {
+          'credentials': 'same-origin'
+        },
+      });
+      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+      root.render(
+        React.createElement(GraphiQL, {
+          fetcher,
+          defaultEditorToolsVisibility: true,
+          plugins: [explorerPlugin],
+        }),
+      );
+    </script>
+  </body>
+</html>"""