UI customization (#652)

sungam3r · web-flow · commit 24419f0c8d0c · 2021-11-23T01:04:13.000+03:00
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -1,7 +1,7 @@
 <Project>
 
   <PropertyGroup>
-    <VersionPrefix>5.0.2-preview</VersionPrefix>
+    <VersionPrefix>5.1.0-preview</VersionPrefix>
     <LangVersion>latest</LangVersion>
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <PackageIcon>logo.64x64.png</PackageIcon>
diff --git a/README.md b/README.md
@@ -93,7 +93,7 @@ For integration of GraphQL.NET validation subsystem into ASP.NET Core:
 
 #### 4. UI integration
 
-For the UI middleware/s:
+For the UI middlewares:
 
 ```
 > dotnet add package GraphQL.Server.Ui.Altair
@@ -102,6 +102,18 @@ For the UI middleware/s:
 > dotnet add package GraphQL.Server.Ui.Voyager
 ```
 
+```c#
+public void Configure(IApplicationBuilder app)
+{
+    app.[Use|Map]GraphQLAltair();
+    app.[Use|Map]GraphQLGraphiQL();
+    app.[Use|Map]GraphQLPlayground();
+    app.[Use|Map]GraphQLVoyager();
+}
+```
+
+Also each middleware accepts options to configure its behavior and UI.
+
 ## Configure
 
 See the sample project's [Startup.cs](samples/Samples.Server/Startup.cs) or [StartupWithRouting.cs](samples/Samples.Server/StartupWithRouting.cs) for full details.
diff --git a/src/Ui.Altair/AltairMiddleware.cs b/src/Ui.Altair/AltairMiddleware.cs
@@ -16,7 +16,7 @@ public class AltairMiddleware
         /// <summary>
         /// The page model used to render Altair.
         /// </summary>
-        private AltairPageModel _pageModel;
+        private AltairPageModel? _pageModel;
 
         /// <summary>
         /// Create a new <see cref="AltairMiddleware"/>
@@ -41,9 +41,7 @@ public Task Invoke(HttpContext httpContext)
             httpContext.Response.ContentType = "text/html";
             httpContext.Response.StatusCode = 200;
 
-            // Initialize page model if null
-            if (_pageModel == null)
-                _pageModel = new AltairPageModel(_options);
+            _pageModel ??= new AltairPageModel(_options);
 
             byte[] data = Encoding.UTF8.GetBytes(_pageModel.Render());
             return httpContext.Response.Body.WriteAsync(data, 0, data.Length);
diff --git a/src/Ui.Altair/AltairOptions.cs b/src/Ui.Altair/AltairOptions.cs
@@ -1,4 +1,6 @@
+using System;
 using System.Collections.Generic;
+using System.IO;
 using Microsoft.AspNetCore.Http;
 
 namespace GraphQL.Server.Ui.Altair
@@ -21,6 +23,17 @@ public class AltairOptions
         /// <summary>
         /// Altair headers configuration.
         /// </summary>
-        public Dictionary<string, string> Headers { get; set; }
+        public Dictionary<string, string>? Headers { get; set; }
+
+        /// <summary>
+        /// Gets or sets a Stream function for retrieving the Altair GraphQL UI page.
+        /// </summary>
+        public Func<AltairOptions, Stream> IndexStream { get; set; } = _ => typeof(AltairOptions).Assembly
+            .GetManifestResourceStream("GraphQL.Server.Ui.Altair.Internal.altair.cshtml")!;
+
+        /// <summary>
+        /// Gets or sets a delegate that is called after all transformations of the Altair GraphQL UI page.
+        /// </summary>
+        public Func<AltairOptions, string, string> PostConfigure { get; set; } = (options, result) => result;
     }
 }
diff --git a/src/Ui.Altair/Internal/AltairPageModel.cs b/src/Ui.Altair/Internal/AltairPageModel.cs
@@ -1,3 +1,4 @@
+using System.Collections.Generic;
 using System.IO;
 using System.Text;
 using System.Text.Json;
@@ -7,7 +8,7 @@ namespace GraphQL.Server.Ui.Altair.Internal
     // https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=netcore-cli
     internal sealed class AltairPageModel
     {
-        private string _altairCSHtml;
+        private string? _altairCSHtml;
 
         private readonly AltairOptions _options;
 
@@ -20,15 +21,27 @@ public string Render()
         {
             if (_altairCSHtml == null)
             {
-                using var manifestResourceStream = typeof(AltairPageModel).Assembly.GetManifestResourceStream("GraphQL.Server.Ui.Altair.Internal.altair.cshtml");
+                using var manifestResourceStream = _options.IndexStream(_options);
                 using var streamReader = new StreamReader(manifestResourceStream);
 
+                var headers = new Dictionary<string, object>
+                {
+                    ["Accept"] = "application/json",
+                    ["Content-Type"] = "application/json",
+                };
+
+                if (_options.Headers?.Count > 0)
+                {
+                    foreach (var item in _options.Headers)
+                        headers[item.Key] = item.Value;
+                }
+
                 var builder = new StringBuilder(streamReader.ReadToEnd())
                     .Replace("@Model.GraphQLEndPoint", _options.GraphQLEndPoint)
                     .Replace("@Model.SubscriptionsEndPoint", _options.SubscriptionsEndPoint)
-                    .Replace("@Model.Headers", JsonSerializer.Serialize<object>(_options.Headers));
+                    .Replace("@Model.Headers", JsonSerializer.Serialize<object>(headers));
 
-                _altairCSHtml = builder.ToString();
+                _altairCSHtml = _options.PostConfigure(_options, builder.ToString());
             }
 
             return _altairCSHtml;
diff --git a/src/Ui.Altair/Ui.Altair.csproj b/src/Ui.Altair/Ui.Altair.csproj
@@ -4,6 +4,7 @@
     <TargetFrameworks>net5;netcoreapp3.1</TargetFrameworks>
     <Description>GraphQL Altair integration for ASP.NET Core</Description>
     <PackageTags>Altair;GraphQL</PackageTags>
+    <Nullable>enable</Nullable>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/Ui.GraphiQL/GraphiQLMiddleware.cs b/src/Ui.GraphiQL/GraphiQLMiddleware.cs
@@ -16,7 +16,7 @@ public class GraphiQLMiddleware
         /// <summary>
         /// The page model used to render GraphiQL.
         /// </summary>
-        private GraphiQLPageModel _pageModel;
+        private GraphiQLPageModel? _pageModel;
 
         /// <summary>
         /// Create a new <see cref="GraphiQLMiddleware"/>
@@ -42,9 +42,7 @@ public Task Invoke(HttpContext httpContext)
             httpContext.Response.ContentType = "text/html";
             httpContext.Response.StatusCode = 200;
 
-            // Initialize page model if null
-            if (_pageModel == null)
-                _pageModel = new GraphiQLPageModel(_options);
+            _pageModel ??= new GraphiQLPageModel(_options);
 
             byte[] data = Encoding.UTF8.GetBytes(_pageModel.Render());
             return httpContext.Response.Body.WriteAsync(data, 0, data.Length);
diff --git a/src/Ui.GraphiQL/GraphiQLOptions.cs b/src/Ui.GraphiQL/GraphiQLOptions.cs
@@ -1,4 +1,6 @@
+using System;
 using System.Collections.Generic;
+using System.IO;
 using Microsoft.AspNetCore.Http;
 
 namespace GraphQL.Server.Ui.GraphiQL
@@ -21,6 +23,17 @@ public class GraphiQLOptions
         /// <summary>
         /// HTTP headers with which the GraphiQL will be initialized.
         /// </summary>
-        public Dictionary<string, string> Headers { get; set; }
+        public Dictionary<string, string>? Headers { get; set; }
+
+        /// <summary>
+        /// Gets or sets a Stream function for retrieving the GraphiQL UI page.
+        /// </summary>
+        public Func<GraphiQLOptions, Stream> IndexStream { get; set; } = _ => typeof(GraphiQLOptions).Assembly
+            .GetManifestResourceStream("GraphQL.Server.Ui.GraphiQL.Internal.graphiql.cshtml")!;
+
+        /// <summary>
+        /// Gets or sets a delegate that is called after all transformations of the GraphiQL UI page.
+        /// </summary>
+        public Func<GraphiQLOptions, string, string> PostConfigure { get; set; } = (options, result) => result;
     }
 }
diff --git a/src/Ui.GraphiQL/Internal/GraphiQLPageModel.cs b/src/Ui.GraphiQL/Internal/GraphiQLPageModel.cs
@@ -8,7 +8,7 @@ namespace GraphQL.Server.Ui.GraphiQL.Internal
     // https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=netcore-cli
     internal sealed class GraphiQLPageModel
     {
-        private string _graphiQLCSHtml;
+        private string? _graphiQLCSHtml;
 
         private readonly GraphiQLOptions _options;
 
@@ -21,7 +21,7 @@ public string Render()
         {
             if (_graphiQLCSHtml == null)
             {
-                using var manifestResourceStream = typeof(GraphiQLPageModel).Assembly.GetManifestResourceStream("GraphQL.Server.Ui.GraphiQL.Internal.graphiql.cshtml");
+                using var manifestResourceStream = _options.IndexStream(_options);
                 using var streamReader = new StreamReader(manifestResourceStream);
 
                 var headers = new Dictionary<string, object>
@@ -41,7 +41,7 @@ public string Render()
                     .Replace("@Model.SubscriptionsEndPoint", _options.SubscriptionsEndPoint)
                     .Replace("@Model.Headers", JsonSerializer.Serialize<object>(headers));
 
-                _graphiQLCSHtml = builder.ToString();
+                _graphiQLCSHtml = _options.PostConfigure(_options, builder.ToString());
             }
 
             return _graphiQLCSHtml;
diff --git a/src/Ui.GraphiQL/Ui.GraphiQL.csproj b/src/Ui.GraphiQL/Ui.GraphiQL.csproj
@@ -4,6 +4,7 @@
     <TargetFrameworks>net5;netcoreapp3.1</TargetFrameworks>
     <Description>GraphiQL integration for ASP.NET Core</Description>
     <PackageTags>GraphiQL;GraphQL</PackageTags>
+    <Nullable>enable</Nullable>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/Ui.Playground/Internal/PlaygroundPageModel.cs b/src/Ui.Playground/Internal/PlaygroundPageModel.cs
@@ -1,3 +1,4 @@
+using System.Collections.Generic;
 using System.IO;
 using System.Text;
 using System.Text.Json;
@@ -7,7 +8,7 @@ namespace GraphQL.Server.Ui.Playground.Internal
     // https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=netcore-cli
     internal sealed class PlaygroundPageModel
     {
-        private string _playgroundCSHtml;
+        private string? _playgroundCSHtml;
 
         private readonly PlaygroundOptions _options;
 
@@ -20,17 +21,29 @@ public string Render()
         {
             if (_playgroundCSHtml == null)
             {
-                using var manifestResourceStream = typeof(PlaygroundPageModel).Assembly.GetManifestResourceStream("GraphQL.Server.Ui.Playground.Internal.playground.cshtml");
+                using var manifestResourceStream = _options.IndexStream(_options);
                 using var streamReader = new StreamReader(manifestResourceStream);
 
+                var headers = new Dictionary<string, object>
+                {
+                    ["Accept"] = "application/json",
+                    ["Content-Type"] = "application/json",
+                };
+
+                if (_options.Headers?.Count > 0)
+                {
+                    foreach (var item in _options.Headers)
+                        headers[item.Key] = item.Value;
+                }
+
                 var builder = new StringBuilder(streamReader.ReadToEnd())
                     .Replace("@Model.GraphQLEndPoint", _options.GraphQLEndPoint)
                     .Replace("@Model.SubscriptionsEndPoint", _options.SubscriptionsEndPoint)
-                    .Replace("@Model.GraphQLConfig", JsonSerializer.Serialize<object>(_options.GraphQLConfig))
-                    .Replace("@Model.Headers", JsonSerializer.Serialize<object>(_options.Headers))
+                    .Replace("@Model.GraphQLConfig", JsonSerializer.Serialize<object>(_options.GraphQLConfig!))
+                    .Replace("@Model.Headers", JsonSerializer.Serialize<object>(headers))
                     .Replace("@Model.PlaygroundSettings", JsonSerializer.Serialize<object>(_options.PlaygroundSettings));
 
-                _playgroundCSHtml = builder.ToString();
+                _playgroundCSHtml = _options.PostConfigure(_options, builder.ToString());
             }
 
             return _playgroundCSHtml;
diff --git a/src/Ui.Playground/PlaygroundMiddleware.cs b/src/Ui.Playground/PlaygroundMiddleware.cs
@@ -16,7 +16,7 @@ public class PlaygroundMiddleware
         /// <summary>
         /// The page model used to render Playground.
         /// </summary>
-        private PlaygroundPageModel _pageModel;
+        private PlaygroundPageModel? _pageModel;
 
         /// <summary>
         /// Create a new <see cref="PlaygroundMiddleware"/>
@@ -41,9 +41,7 @@ public Task Invoke(HttpContext httpContext)
             httpContext.Response.ContentType = "text/html";
             httpContext.Response.StatusCode = 200;
 
-            // Initialize page model if null
-            if (_pageModel == null)
-                _pageModel = new PlaygroundPageModel(_options);
+            _pageModel ??= new PlaygroundPageModel(_options);
 
             byte[] data = Encoding.UTF8.GetBytes(_pageModel.Render());
             return httpContext.Response.Body.WriteAsync(data, 0, data.Length);
diff --git a/src/Ui.Playground/PlaygroundOptions.cs b/src/Ui.Playground/PlaygroundOptions.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.IO;
 using Microsoft.AspNetCore.Http;
 
 namespace GraphQL.Server.Ui.Playground
@@ -22,12 +23,23 @@ public class PlaygroundOptions
         /// <summary>
         /// The GraphQL configuration.
         /// </summary>
-        public Dictionary<string, object> GraphQLConfig { get; set; }
+        public Dictionary<string, object>? GraphQLConfig { get; set; }
 
         /// <summary>
         /// HTTP headers with which the GraphQL Playground will be initialized.
         /// </summary>
-        public Dictionary<string, object> Headers { get; set; }
+        public Dictionary<string, object>? Headers { get; set; }
+
+        /// <summary>
+        /// Gets or sets a Stream function for retrieving the GraphQL Playground UI page.
+        /// </summary>
+        public Func<PlaygroundOptions, Stream> IndexStream { get; set; } = _ => typeof(PlaygroundOptions).Assembly
+            .GetManifestResourceStream("GraphQL.Server.Ui.Playground.Internal.playground.cshtml")!;
+
+        /// <summary>
+        /// Gets or sets a delegate that is called after all transformations of the GraphQL Playground UI page.
+        /// </summary>
+        public Func<PlaygroundOptions, string, string> PostConfigure { get; set; } = (options, result) => result;
 
         /// <summary>
         /// The GraphQL Playground Settings, see <see href="https://github.com/prisma-labs/graphql-playground/blob/master/README.md#settings"/>.
diff --git a/src/Ui.Playground/Ui.Playground.csproj b/src/Ui.Playground/Ui.Playground.csproj
@@ -4,6 +4,7 @@
     <TargetFrameworks>net5;netcoreapp3.1</TargetFrameworks>
     <Description>GraphQL Playground integration for ASP.NET Core</Description>
     <PackageTags>GraphQL;Playground</PackageTags>
+    <Nullable>enable</Nullable>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/Ui.Voyager/Internal/VoyagerPageModel.cs b/src/Ui.Voyager/Internal/VoyagerPageModel.cs
@@ -8,7 +8,7 @@ namespace GraphQL.Server.Ui.Voyager.Internal
     // https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=netcore-cli
     internal sealed class VoyagerPageModel
     {
-        private string _voyagerCSHtml;
+        private string? _voyagerCSHtml;
 
         private readonly VoyagerOptions _options;
 
@@ -21,7 +21,7 @@ public string Render()
         {
             if (_voyagerCSHtml == null)
             {
-                using var manifestResourceStream = typeof(VoyagerPageModel).Assembly.GetManifestResourceStream("GraphQL.Server.Ui.Voyager.Internal.voyager.cshtml");
+                using var manifestResourceStream = _options.IndexStream(_options);
                 using var streamReader = new StreamReader(manifestResourceStream);
 
                 var headers = new Dictionary<string, object>
@@ -40,7 +40,7 @@ public string Render()
                     .Replace("@Model.GraphQLEndPoint", _options.GraphQLEndPoint)
                     .Replace("@Model.Headers", JsonSerializer.Serialize<object>(headers));
 
-                _voyagerCSHtml = builder.ToString();
+                _voyagerCSHtml = _options.PostConfigure(_options, builder.ToString());
             }
 
             return _voyagerCSHtml;
diff --git a/src/Ui.Voyager/Ui.Voyager.csproj b/src/Ui.Voyager/Ui.Voyager.csproj
@@ -4,6 +4,7 @@
     <TargetFrameworks>net5;netcoreapp3.1</TargetFrameworks>
     <Description>GraphQL Voyager integration for ASP.NET Core</Description>
     <PackageTags>GraphQL;Voyager</PackageTags>
+    <Nullable>enable</Nullable>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/Ui.Voyager/VoyagerMiddleware.cs b/src/Ui.Voyager/VoyagerMiddleware.cs
@@ -16,7 +16,7 @@ public class VoyagerMiddleware
         /// <summary>
         /// The page model used to render Voyager.
         /// </summary>
-        private VoyagerPageModel _pageModel;
+        private VoyagerPageModel? _pageModel;
 
         /// <summary>
         /// Create a new <see cref="VoyagerMiddleware"/>
@@ -42,9 +42,7 @@ public Task Invoke(HttpContext httpContext)
             httpContext.Response.ContentType = "text/html";
             httpContext.Response.StatusCode = 200;
 
-            // Initialize page model if null
-            if (_pageModel == null)
-                _pageModel = new VoyagerPageModel(_options);
+            _pageModel ??= new VoyagerPageModel(_options);
 
             byte[] data = Encoding.UTF8.GetBytes(_pageModel.Render());
             return httpContext.Response.Body.WriteAsync(data, 0, data.Length);
diff --git a/src/Ui.Voyager/VoyagerOptions.cs b/src/Ui.Voyager/VoyagerOptions.cs
diff --git a/tests/ApiApprovalTests/GraphQL.Server.Ui.Altair.approved.txt b/tests/ApiApprovalTests/GraphQL.Server.Ui.Altair.approved.txt
diff --git a/tests/ApiApprovalTests/GraphQL.Server.Ui.GraphiQL.approved.txt b/tests/ApiApprovalTests/GraphQL.Server.Ui.GraphiQL.approved.txt
diff --git a/tests/ApiApprovalTests/GraphQL.Server.Ui.Playground.approved.txt b/tests/ApiApprovalTests/GraphQL.Server.Ui.Playground.approved.txt
diff --git a/tests/ApiApprovalTests/GraphQL.Server.Ui.Voyager.approved.txt b/tests/ApiApprovalTests/GraphQL.Server.Ui.Voyager.approved.txt

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ namespace GraphQL.Server.Ui.GraphiQL.Internal`
`8`	`8`	`// https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=netcore-cli`
`9`	`9`	`internal sealed class GraphiQLPageModel`
`10`	`10`	`{`
`11`		`- private string _graphiQLCSHtml;`
	`11`	`+ private string? _graphiQLCSHtml;`
`12`	`12`
`13`	`13`	`private readonly GraphiQLOptions _options;`
`14`	`14`
`@@ -21,7 +21,7 @@ public string Render()`
`21`	`21`	`{`
`22`	`22`	`if (_graphiQLCSHtml == null)`
`23`	`23`	`{`
`24`		`- using var manifestResourceStream = typeof(GraphiQLPageModel).Assembly.GetManifestResourceStream("GraphQL.Server.Ui.GraphiQL.Internal.graphiql.cshtml");`
	`24`	`+ using var manifestResourceStream = _options.IndexStream(_options);`
`25`	`25`	`using var streamReader = new StreamReader(manifestResourceStream);`
`26`	`26`
`27`	`27`	`var headers = new Dictionary<string, object>`
`@@ -41,7 +41,7 @@ public string Render()`
`41`	`41`	`.Replace("@Model.SubscriptionsEndPoint", _options.SubscriptionsEndPoint)`
`42`	`42`	`.Replace("@Model.Headers", JsonSerializer.Serialize<object>(headers));`
`43`	`43`
`44`		`- _graphiQLCSHtml = builder.ToString();`
	`44`	`+ _graphiQLCSHtml = _options.PostConfigure(_options, builder.ToString());`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`return _graphiQLCSHtml;`