From 2947aa36a0393103ef588e4999663a6b4be6bb96 Mon Sep 17 00:00:00 2001
From: Steven DeMartini <sjdemartini@users.noreply.github.com>
Date: Thu, 1 Jun 2023 10:39:10 -0700
Subject: [PATCH] Fix #1417 graphiql explorer styles by including official CSS

Like in the official graphiql-plugin-explorer example here
https://github.com/graphql/graphiql/blob/619864691941c46cc0b0848e8713028e20212c36/packages/graphiql-plugin-explorer/examples/index.html#L26-L29

Resolves https://github.com/graphql-python/graphene-django/issues/1417
---
 graphene_django/templates/graphene/graphiql.html | 4 ++++
 graphene_django/views.py                         | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/graphene_django/templates/graphene/graphiql.html b/graphene_django/templates/graphene/graphiql.html
index ddff8fc..52421e8 100644
--- a/graphene_django/templates/graphene/graphiql.html
+++ b/graphene_django/templates/graphene/graphiql.html
@@ -21,6 +21,10 @@ add "&raw" to the end of the URL within a browser.
         integrity="{{graphiql_css_sri}}"
         rel="stylesheet"
         crossorigin="anonymous" />
+  <link href="https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@{{graphiql_plugin_explorer_version}}/dist/style.css"
+        integrity="{{graphiql_plugin_explorer_css_sri}}"
+        rel="stylesheet"
+        crossorigin="anonymous" />
   <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@{{whatwg_fetch_version}}/dist/fetch.umd.js"
           integrity="{{whatwg_fetch_sri}}"
           crossorigin="anonymous"></script>
diff --git a/graphene_django/views.py b/graphene_django/views.py
index 377b75d..b16a12b 100644
--- a/graphene_django/views.py
+++ b/graphene_django/views.py
@@ -78,6 +78,9 @@ class GraphQLView(View):
 
     graphiql_plugin_explorer_version = "0.1.15"
     graphiql_plugin_explorer_sri = "sha256-3hUuhBXdXlfCj6RTeEkJFtEh/kUG+TCDASFpFPLrzvE="
+    graphiql_plugin_explorer_css_sri = (
+        "sha256-fA0LPUlukMNR6L4SPSeFqDTYav8QdWjQ2nr559Zln1U="
+    )
 
     schema = None
     graphiql = False