Add documentation link to plugins (#4329)

* Add documentation link to plugins

* Minor UI updates

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>

BTCPayServer/Controllers/UIServerController.Plugins.cs

@@ -33,13 +33,17 @@ namespace BTCPayServer.Controllers
                 });
                 availablePlugins = Array.Empty<PluginService.AvailablePlugin>();
             }
+            var docsByIdentifier = new Dictionary<string, string>();
+            foreach (var p in availablePlugins.Where(p => !string.IsNullOrEmpty(p.Documentation)))
+                docsByIdentifier.TryAdd(p.Identifier, p.Documentation);
             var res = new ListPluginsViewModel()
             {
                 Installed = pluginService.LoadedPlugins,
                 Available = availablePlugins,
                 Commands = pluginService.GetPendingCommands(),
                 Disabled = pluginService.GetDisabledPlugins(),
-                CanShowRestart = btcPayServerOptions.DockerDeployment
+                CanShowRestart = btcPayServerOptions.DockerDeployment,
+                DocsByIdentifier = docsByIdentifier
             };
             return View(res);
         }
@@ -51,6 +55,7 @@ namespace BTCPayServer.Controllers
             public (string command, string plugin)[] Commands { get; set; }
             public bool CanShowRestart { get; set; }
             public string[] Disabled { get; set; }
+            public Dictionary<string, string> DocsByIdentifier { get; set; } = new Dictionary<string, string>();
         }
 
         [HttpPost("server/plugins/uninstall")]

BTCPayServer/Plugins/PluginBuilderClient.cs

@@ -12,6 +12,7 @@ namespace BTCPayServer.Plugins
         public long BuildId { get; set; }
         public JObject BuildInfo { get; set; }
         public JObject ManifestInfo { get; set; }
+        public string Documentation { get; set; }
     }
     public class PluginBuilderClient
     {

BTCPayServer/Plugins/PluginService.cs

@@ -48,7 +48,12 @@ namespace BTCPayServer.Plugins
         public async Task<AvailablePlugin[]> GetRemotePlugins()
         {
             var versions = await _pluginBuilderClient.GetPublishedVersions(Env.Version, _policiesSettings.PluginPreReleases);
-            return versions.Select(v => v.ManifestInfo.ToObject<AvailablePlugin>()).ToArray();
+            return versions.Select(v =>
+            {
+                var p = v.ManifestInfo.ToObject<AvailablePlugin>();
+                p.Documentation = v.Documentation;
+                return p;
+            }).ToArray();
         }
         public async Task DownloadRemotePlugin(string pluginIdentifier, string version)
         {
@@ -101,6 +106,7 @@ namespace BTCPayServer.Plugins
             public bool SystemPlugin { get; set; } = false;
 
             public IBTCPayServerPlugin.PluginDependency[] Dependencies { get; set; } = Array.Empty<IBTCPayServerPlugin.PluginDependency>();
+            public string Documentation { get; set; }
 
             public void Execute(IApplicationBuilder applicationBuilder,
                 IServiceProvider applicationBuilderApplicationServices)

BTCPayServer/Views/UIServer/ListPlugins.cshtml

@@ -141,17 +141,23 @@
             <div class="col col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4 mb-4">
                 <div class="card h-100" id="@plugin.Identifier">
                     <div class="card-body">
-                        <h4 class="card-title d-inline-block" title="@plugin.Identifier" data-bs-toggle="tooltip">@plugin.Name</h4>
+						<div class="d-flex align-items-baseline justify-content-between gap-2">
+							<h4 class="card-title" title="@plugin.Identifier" data-bs-toggle="tooltip">@plugin.Name</h4>
+							@if (Model.DocsByIdentifier.ContainsKey(plugin.Identifier))
+							{
+								<a href="@Model.DocsByIdentifier[plugin.Identifier]" rel="noreferrer noopener" target="_blank">Documentation</a>
+							}
+						</div>
                         <div class="d-flex flex-wrap align-items-center mb-2">
-                            <h5 class="text-muted d-flex align-items-center mt-1">
+                            <h5 class="text-muted d-flex align-items-center mt-1 gap-3">
                                 @plugin.Version
                                 @if (plugin.SystemPlugin)
                                 {
-                                    <div class="badge bg-secondary ms-3">System plugin</div>
+                                    <div class="badge bg-light">System plugin</div>
                                 }
-                                else if (updateAvailable)
+                                else if (updateAvailable && x != null)
                                 {
-                                    <div class="badge bg-info ms-3">
+                                    <div class="badge bg-info">
                                         @x.Version available
                                     </div>
                                 }
@@ -186,7 +192,7 @@
                                 }
                             </div>
 
-                            @if (updateAvailable)
+                            @if (updateAvailable && x != null)
                             {
                                 <div class="tab-pane" id="@tabId-update">
                                     <p class="card-text">@x.Description</p>
@@ -213,7 +219,7 @@
                     @{
                         var pendingAction = Model.Commands.Any(tuple => tuple.plugin.Equals(plugin.Identifier, StringComparison.InvariantCultureIgnoreCase));
                     }
-                    @if (!plugin.SystemPlugin && (pendingAction || (updateAvailable && DependenciesMet(x.Dependencies)) || !DependentOn(plugin.Identifier)))
+                    @if (!plugin.SystemPlugin && (pendingAction || (updateAvailable && x != null && DependenciesMet(x.Dependencies)) || !DependentOn(plugin.Identifier)))
                     {
                         <div class="card-footer border-0 pb-3 d-flex">
                             @if (pendingAction)
@@ -224,7 +230,7 @@
                             }
                             else
                             {
-                                @if (updateAvailable && DependenciesMet(x.Dependencies))
+                                @if (updateAvailable && x != null && DependenciesMet(x.Dependencies))
                                 {
                                     <form asp-action="InstallPlugin" asp-route-plugin="@plugin.Identifier" asp-route-version="@x.Version" asp-route-update="true" class="me-3">
                                         <button type="submit" class="btn btn-secondary">Update</button>
@@ -261,16 +267,22 @@
             <div class="col col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4 mb-4">
                 <div class="card h-100" id="@plugin.Identifier">
                     <div class="card-body">
-                        <h4 class="card-title d-inline-block" data-bs-toggle="tooltip" title="@plugin.Identifier">@plugin.Name</h4>
+						<div class="d-flex align-items-baseline justify-content-between gap-2">
-                        <h5 class="text-muted d-flex align-items-center mt-1">
+							<h4 class="card-title" data-bs-toggle="tooltip" title="@plugin.Identifier">@plugin.Name</h4>
+							@if (!string.IsNullOrEmpty(plugin.Documentation))
+							{
+								<a href="@plugin.Documentation" rel="noreferrer noopener" target="_blank">Documentation</a>
+							}
+						</div>
+                        <h5 class="text-muted d-flex align-items-center mt-1 gap-2">
                             @plugin.Version
                             @if (disabled) 
                             {
-                                <div class="badge bg-light ms-2">Disabled</div>
+                                <div class="badge bg-light">Disabled</div>
                             }
                             else if (recommended)
                             {
-                                <div class="badge bg-light ms-2 text-nowrap" data-bs-toggle="tooltip" title="This plugin has been recommended to be installed by your deployment method.">Recommended <span class="fa fa-question-circle-o text-secondary"></span></div>
+                                <div class="badge bg-light text-nowrap" data-bs-toggle="tooltip" title="This plugin has been recommended to be installed by your deployment method.">Recommended <span class="fa fa-question-circle-o text-secondary"></span></div>
                             }
                         </h5>
                         <p class="card-text">@plugin.Description</p>
@@ -315,7 +327,7 @@
                                 Cannot install until dependencies are met.
                             </div>
                         }
-                    </div>
+					</div>
                 </div>
             </div>
         }