Support richer plugin metadata and enhance UI

ziagham · ziagham · commit dc12d05d9aca · 2025-12-06T11:25:12.000+01:00
Updated the plugin metadata structure to include `Specifications` and `Operations`, serialized as JSON. Replaced `manifest.json` with `metadata.json` across the application. Enhanced the UI with a tabbed interface for installation instructions and introduced a reusable `CodeBlock` component with copy-to-clipboard functionality. Removed the old `CodeCopy` component. Upgraded the target framework to `net10.0` across all projects. Updated `PluginVersionEntity` to replace `Manifest` with `MetadataFile`. Adjusted styles and removed unused CSS classes. #48
diff --git a/src/FlowSynx.PluginRegistry.Application/Features/Plugins/Query/PluginDetails/PluginDetailsHandler.cs b/src/FlowSynx.PluginRegistry.Application/Features/Plugins/Query/PluginDetails/PluginDetailsHandler.cs
@@ -2,6 +2,7 @@
 using FlowSynx.PluginRegistry.Domain.Plugin;
 using MediatR;
 using Microsoft.Extensions.Logging;
+using System.Text.Json;
 
 namespace FlowSynx.PluginRegistry.Application.Features.Plugins.Query.PluginDetails;
 
@@ -52,7 +53,9 @@ public async Task<Result<PluginDetailsResponse>> Handle(PluginDetailsRequest req
                 Versions = plugin.Plugin.Versions
                                  .OrderByDescending(x=>x.LastModifiedOn)
                                  .ThenByDescending(x=>x.CreatedOn)
-                                 .Select(x=>x.Version)
+                                 .Select(x=>x.Version),
+                Specifications = JsonSerializer.Deserialize<object>(plugin.Specifications ?? ""),
+                Operations = JsonSerializer.Deserialize<object>(plugin.Operations ?? "")
             };
 
             return await Result<PluginDetailsResponse>.SuccessAsync(response);
diff --git a/src/FlowSynx.PluginRegistry.Application/Features/Plugins/Query/PluginDetails/PluginDetailsResponse.cs b/src/FlowSynx.PluginRegistry.Application/Features/Plugins/Query/PluginDetails/PluginDetailsResponse.cs
@@ -14,6 +14,8 @@ public class PluginDetailsResponse
     public string? CategoryTitle { get; set; }
     public required string MinimumFlowSynxVersion { get; set; }
     public string? TargetFlowSynxVersion { get; set; }
+    public object? Specifications { get; set; }
+    public object? Operations { get; set; }
     public DateTime LastUpdated { get; set; }
     public int TotalDownload { get; set; } = 0;
     public bool IsTrusted { get; set; } = false;
diff --git a/src/FlowSynx.PluginRegistry.Application/FlowSynx.PluginRegistry.Application.csproj b/src/FlowSynx.PluginRegistry.Application/FlowSynx.PluginRegistry.Application.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net9.0</TargetFramework>
+    <TargetFramework>net10.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
   </PropertyGroup>
diff --git a/src/FlowSynx.PluginRegistry.Domain/FlowSynx.PluginRegistry.Domain.csproj b/src/FlowSynx.PluginRegistry.Domain/FlowSynx.PluginRegistry.Domain.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net9.0</TargetFramework>
+    <TargetFramework>net10.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
   </PropertyGroup>
diff --git a/src/FlowSynx.PluginRegistry.Domain/Plugin/PluginVersionEntity.cs b/src/FlowSynx.PluginRegistry.Domain/Plugin/PluginVersionEntity.cs
@@ -20,8 +20,10 @@ public class PluginVersionEntity : AuditableEntity<Guid>, ISoftDeletable
     public required Guid PluginCategoryId { get; set; }
     public required string MinimumFlowSynxVersion { get; set; }
     public string? TargetFlowSynxVersion { get; set; }
+    public string? Specifications { get; set; }
+    public string? Operations { get; set; }
     public bool? IsLatest { get; set; }
-    public string? Manifest { get; set; }
+    public string? MetadataFile { get; set; }
     public string? Checksum { get; set; }
     public bool IsActive { get; set; } = true;
     public bool IsDeleted { get; set; } = false;
diff --git a/src/FlowSynx.PluginRegistry.Infrastructure/Configurations/PluginVersionEntityConfiguration.cs b/src/FlowSynx.PluginRegistry.Infrastructure/Configurations/PluginVersionEntityConfiguration.cs
@@ -23,7 +23,7 @@ public void Configure(EntityTypeBuilder<PluginVersionEntity> builder)
                .HasMaxLength(50)
                .IsRequired();
 
-        builder.Property(v => v.Manifest)
+        builder.Property(v => v.MetadataFile)
                .HasMaxLength(4096);
 
         builder.Property(t => t.PluginLocation)
diff --git a/src/FlowSynx.PluginRegistry.Infrastructure/FlowSynx.PluginRegistry.Infrastructure.csproj b/src/FlowSynx.PluginRegistry.Infrastructure/FlowSynx.PluginRegistry.Infrastructure.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net9.0</TargetFramework>
+    <TargetFramework>net10.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
   </PropertyGroup>
diff --git a/src/FlowSynx.Pluginregistry/Components/Pages/Manage/Upload.razor b/src/FlowSynx.Pluginregistry/Components/Pages/Manage/Upload.razor
@@ -42,7 +42,7 @@
                                 <strong>Package Requirements</strong>
                                 <ul class="mb-0 mt-2 small">
                                     <li>Valid <b class="text-primary">.fspack</b> archive format</li>
-                                    <li>Include a <b class="text-primary">manifest.json</b> manifest with plugin metadata</li>
+                                    <li>Include a <b class="text-primary">metadata.json</b> file with plugin metadata</li>
                                     <li>All necessary plugin files and dependencies</li>
                                 </ul>
                             </div>
diff --git a/src/FlowSynx.Pluginregistry/Components/Pages/Plugins/PluginsDetails.razor b/src/FlowSynx.Pluginregistry/Components/Pages/Plugins/PluginsDetails.razor
@@ -8,6 +8,7 @@
 @using FlowSynx.Pluginregistry.Services
 @using FlowSynx.Pluginregistry.Components.Shared;
 @using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.JSInterop
 
 @inject NavigationManager Navigation
 @inject IStatsApiService Stats
@@ -165,16 +166,48 @@
                     </div>
                 }
 
-                <!-- Installation Code -->
+                <!-- Installation Tabs with Active Tab Copy Button -->
                 <div class="card border shadow-sm mb-4">
                     <div class="card-body p-4">
+                        <!-- Header with inline Copy button -->
                         <div class="d-flex justify-content-between align-items-center mb-3">
                             <h5 class="mb-0 fw-bold">
-                                <i class="bi bi-code-square me-2 text-primary"></i>Installation
+                                <i class="bi bi-code-square me-2 text-primary"></i>
+                                Installation
                             </h5>
-                            <CodeCopy CodeToCopy="@jsonCodeBlock" />
                         </div>
-                        <pre class="plugin-code-block p-3 rounded-3 mb-0"><code class="language-json">@jsonCodeBlock</code></pre>
+
+                        <!-- Tabs -->
+                        <ul class="nav nav-tabs" role="tablist">
+                            <li class="nav-item">
+                                <button class="nav-link @(ActiveTab == "flowsynx-manager" ? "active" : "")"
+                                        @onclick='() => ActiveTab = "flowsynx-manager"'>
+                                    FlowSynx Manager
+                                </button>
+                            </li>
+                            <li class="nav-item">
+                                <button class="nav-link @(ActiveTab == "flowctl-cli" ? "active" : "")"
+                                        @onclick='() => ActiveTab = "flowctl-cli"'>
+                                    FlowCtl CLI
+                                </button>
+                            </li>
+                        </ul>
+
+                        <!-- Tab Content -->
+                        <div class="tab-content p-0 border border-top-0 rounded-bottom">
+                            @if (ActiveTab == "flowsynx-manager")
+                            {
+                                <div class="tab-pane fade show active">
+                                    <CodeBlock Code="@flowSynxCode" />
+                                </div>
+                            }
+                            else if (ActiveTab == "flowctl-cli")
+                            {
+                                <div class="tab-pane fade show active">
+                                    <CodeBlock Code="@flowctlCode" />
+                                </div>
+                            }
+                        </div>
                     </div>
                 </div>
 
@@ -369,17 +402,16 @@
 </div>
 
 @code {
+    [Inject] private IJSRuntime JS { get; set; }
+
     [Parameter]
     public string Type { get; set; } = "";
 
     [Parameter]
     public string Version { get; set; } = "";
 
-    private string jsonCodeBlock => JsonSerializer.Serialize(new
-    {
-        Type,
-        Version
-    }, new JsonSerializerOptions { WriteIndented = true });
+    private string flowSynxCode => $"{Type}:{Version}";
+    private string flowctlCode => $"flowctl plugins install \"{Type}:{Version}\"";
 
     Result<PluginDetailsResponse>? plugin;
     private bool isOwner = false;
@@ -388,6 +420,8 @@
     private bool statusSuccess = false;
     private string? currentUsername;
 
+    private string ActiveTab { get; set; } = "flowsynx-manager";
+
     protected override async Task OnInitializedAsync()
     {
         plugin = await Stats.GetPluginDetails(Type, Version);
@@ -407,6 +441,18 @@
         }
     }
 
+    private async Task CopyActiveTabCode()
+    {
+        string codeToCopy = ActiveTab switch
+        {
+            "flowsynx-manager" => flowSynxCode,
+            "flowctl-cli" => flowctlCode,
+            _ => ""
+        };
+
+        await JS.InvokeVoidAsync("navigator.clipboard.writeText", codeToCopy);
+    }
+
     private async Task EnableVersion()
     {
         isProcessing = true;
diff --git a/src/FlowSynx.Pluginregistry/Components/Shared/CodeBlock.razor b/src/FlowSynx.Pluginregistry/Components/Shared/CodeBlock.razor
@@ -0,0 +1,19 @@
+﻿@using Microsoft.JSInterop
+@inject IJSRuntime JS
+
+<div class="position-relative">
+    <pre class="bg-light p-3 rounded mb-0 fw-bold"><code>@Code</code></pre>
+    <button class="btn btn-sm btn-outline-secondary border border-secondary-subtle position-absolute top-0 end-0 m-2"
+            @onclick="CopyCode">
+        <i class="bi bi-clipboard"></i>
+    </button>
+</div>
+
+@code {
+    [Parameter] public string Code { get; set; } = string.Empty;
+
+    private async Task CopyCode()
+    {
+        await JS.InvokeVoidAsync("navigator.clipboard.writeText", Code);
+    }
+}
diff --git a/src/FlowSynx.Pluginregistry/Components/Shared/CodeCopy.razor b/src/FlowSynx.Pluginregistry/Components/Shared/CodeCopy.razor
diff --git a/src/FlowSynx.Pluginregistry/FlowSynx.Pluginregistry.csproj b/src/FlowSynx.Pluginregistry/FlowSynx.Pluginregistry.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net9.0</TargetFramework>
+    <TargetFramework>net10.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
diff --git a/src/FlowSynx.Pluginregistry/Models/PluginMetadata.cs b/src/FlowSynx.Pluginregistry/Models/PluginMetadata.cs
@@ -19,4 +19,31 @@ public class PluginMetadata
     public required string CategoryId { get; set; }
     public required string MinimumFlowSynxVersion { get; set; }
     public string? TargetFlowSynxVersion { get; set; }
+    public List<SpecificationMetadata> Specifications { get; set; } = new List<SpecificationMetadata>();
+    public List<PluginOperationMetadata> Operations { get; set; } = new List<PluginOperationMetadata>();
+}
+
+public class SpecificationMetadata
+{
+    public string Name { get; set; } = string.Empty;
+    public string? Description { get; set; }
+    public string? Type { get; set; }
+    public string? DefaultValue { get; set; }
+    public bool? IsRequired { get; set; } = false;
+}
+
+public class PluginOperationMetadata
+{
+    public string Name { get; set; } = string.Empty;
+    public string? Description { get; set; }
+    public List<PluginOperationParameterMetadata> Parameters { get; set; } = new List<PluginOperationParameterMetadata>();
+}
+
+public class PluginOperationParameterMetadata
+{
+    public string Name { get; set; } = string.Empty;
+    public string? Description { get; set; }
+    public string? Type { get; set; }
+    public string? DefaultValue { get; set; }
+    public bool? IsRequired { get; set; } = false;
 }
diff --git a/src/FlowSynx.Pluginregistry/Services/PluginMetadataReader.cs b/src/FlowSynx.Pluginregistry/Services/PluginMetadataReader.cs
@@ -7,16 +7,16 @@ public class PluginMetadataReader : IPluginMetadataReader
 {
     public async Task<PluginMetadata> ReadAsync(string path)
     {
-        var manifestPath = Path.Combine(path, "manifest.json");
+        var metadataPath = Path.Combine(path, "metadata.json");
 
-        if (!File.Exists(manifestPath))
-            throw new FileNotFoundException("manifest.json not found.");
+        if (!File.Exists(metadataPath))
+            throw new FileNotFoundException("metadata.json not found.");
 
-        var content = await File.ReadAllTextAsync(manifestPath);
+        var content = await File.ReadAllTextAsync(metadataPath);
         var metadata = JsonSerializer.Deserialize<PluginMetadata>(content);
 
         if (metadata == null || string.IsNullOrWhiteSpace(metadata.Type) || string.IsNullOrWhiteSpace(metadata.Version))
-            throw new InvalidDataException("Invalid or incomplete manifest.json.");
+            throw new InvalidDataException("Invalid or incomplete metadata.json.");
 
         return metadata;
     }
diff --git a/src/FlowSynx.Pluginregistry/Services/StatsApiService.cs b/src/FlowSynx.Pluginregistry/Services/StatsApiService.cs
@@ -152,10 +152,10 @@ public async Task UploadFileAsync(
 
             var destinationIconPath = await HandleAssetAsync(metadata.Icon, extractedPluginPath, destPath, false);
             var destinationReadMePath = await HandleAssetAsync(metadata.ReadMe, extractedPluginPath, destPath, false);
-            var destinationManifestPath = await HandleAssetAsync(Path.Combine(tempPath, "manifest.json"), extractedPluginPath, destPath, true);
+            var destinationMetadataPath = await HandleAssetAsync(Path.Combine(tempPath, "metadata.json"), extractedPluginPath, destPath, true);
 
             await SavePluginAsync(metadata, filePath, destPath, destinationIconPath, destinationReadMePath, 
-                                  destinationManifestPath, profileId, checksum, cancellationToken);
+                                  destinationMetadataPath, profileId, checksum, cancellationToken);
         }
         catch (Exception ex)
         {
@@ -197,7 +197,7 @@ private async Task SavePluginAsync(
         string destPath,
         string iconPath,
         string readMePath,
-        string manifestPath,
+        string metadataPath,
         Guid profileId,
         string checksum,
         CancellationToken cancellationToken)
@@ -216,12 +216,12 @@ private async Task SavePluginAsync(
 
         if (isNewPlugin)
         {
-            await AddNewPluginAsync(metadata, iconPath, readMePath, manifestPath, savedPath, 
+            await AddNewPluginAsync(metadata, iconPath, readMePath, metadataPath, savedPath,
                 profileId, pluginCategoryEntity.Id, checksum, cancellationToken);
         }
         else
         {
-            await AddPluginVersionAsync(pluginEntity!, metadata, iconPath, readMePath, manifestPath,
+            await AddPluginVersionAsync(pluginEntity!, metadata, iconPath, readMePath, metadataPath,
                 savedPath, pluginCategoryEntity.Id, checksum, cancellationToken);
         }
     }
@@ -238,7 +238,7 @@ private async Task AddNewPluginAsync(
         PluginMetadata metadata,
         string destinationIconPath,
         string destinationReadMePath,
-        string destinationManifestPath, 
+        string destinationMetadataPath, 
         string savedPath, 
         Guid profileId, 
         Guid pluginCategoryId, 
@@ -249,7 +249,7 @@ private async Task AddNewPluginAsync(
         var versionId = Guid.NewGuid();
 
         var version = CreatePluginVersionEntity(versionId, pluginId, metadata, destinationIconPath,
-            destinationReadMePath, destinationManifestPath, savedPath, pluginCategoryId, checksum);
+            destinationReadMePath, destinationMetadataPath, savedPath, pluginCategoryId, checksum);
         var plugin = new PluginEntity
         {
             Id = pluginId,
@@ -278,7 +278,7 @@ private async Task AddPluginVersionAsync(
         PluginMetadata metadata,
         string destinationIconPath,
         string destinationReadMePath,
-        string destinationManifestPath,
+        string destinationMetadataPath,
         string savedPath,
         Guid pluginCategoryId,
         string checksum,
@@ -310,7 +310,7 @@ private async Task AddPluginVersionAsync(
         }
 
         var version = CreatePluginVersionEntity(Guid.NewGuid(), plugin.Id, metadata, destinationIconPath,
-            destinationReadMePath, destinationManifestPath, savedPath, pluginCategoryId, checksum);
+            destinationReadMePath, destinationMetadataPath, savedPath, pluginCategoryId, checksum);
 
         await _pluginVersionService.Add(version, cancellationToken);
 
@@ -321,7 +321,7 @@ private async Task AddPluginVersionAsync(
     }
 
     private PluginVersionEntity CreatePluginVersionEntity(Guid id, Guid pluginId, PluginMetadata metadata,
-        string destinationIconPath, string destinationReadMePath, string destinationManifestPath, 
+        string destinationIconPath, string destinationReadMePath, string destinationMetadataPath,
         string path, Guid pluginCategoryId, string checksum)
     {
         return new PluginVersionEntity
@@ -342,8 +342,10 @@ private PluginVersionEntity CreatePluginVersionEntity(Guid id, Guid pluginId, Pl
             PluginCategoryId = pluginCategoryId,
             MinimumFlowSynxVersion = metadata.MinimumFlowSynxVersion,
             TargetFlowSynxVersion = metadata.TargetFlowSynxVersion,
+            Specifications = System.Text.Json.JsonSerializer.Serialize(metadata.Specifications),
+            Operations = System.Text.Json.JsonSerializer.Serialize(metadata.Operations),
             IsLatest = true,
-            Manifest = destinationManifestPath,
+            MetadataFile = destinationMetadataPath,
             Checksum = checksum,
             IsDeleted = false
         };
diff --git a/src/FlowSynx.Pluginregistry/wwwroot/app.css b/src/FlowSynx.Pluginregistry/wwwroot/app.css
