Create abstract BackendComponentBase and refactor Backend to BackendP…

…rovider

Introduced an abstract BackendComponentBase to consolidate backend functionality for reuse and maintainability. Also, Backend has been renamed to BackendProvider for better clarity and consistency, and it now inherits from BackendComponentBase. This promotes better separation of concerns and a more structured approach to component hierarchy.

src/framework/Elsa.Studio.Shared/Components/StudioComponentBase.cs

@@ -6,7 +6,7 @@ namespace Elsa.Studio.Components;
 
 /// Base class for components. This class sets the <see cref="BlazorServiceAccessor.Services"/> property to the <see cref="IServiceProvider"/> instance.
 /// See https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/dependency-injection?view=aspnetcore-7.0#access-server-side-blazor-services-from-a-different-di-scope
-public class StudioComponentBase : ComponentBase, IHandleEvent, IHandleAfterRender
+public abstract class StudioComponentBase : ComponentBase, IHandleEvent, IHandleAfterRender
 {
     private bool _hasCalledOnAfterRender;
 

src/hosts/Elsa.Studio.Host.CustomElements/Components/BackendComponentBase.cs

@@ -0,0 +1,25 @@
+using Elsa.Studio.Components;
+using Elsa.Studio.Host.CustomElements.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace Elsa.Studio.Host.CustomElements.Components;
+
+public abstract class BackendComponentBase : StudioComponentBase
+{
+    [Parameter] public string? RemoteEndpoint { get; set; }
+    [Parameter] public string? ApiKey { get; set; }
+    [Parameter] public string? AccessToken { get; set; }
+    [Inject] private BackendService BackendService { get; set; } = default!;
+
+    protected override void OnInitialized()
+    {
+        if (!string.IsNullOrWhiteSpace(RemoteEndpoint))
+            BackendService.RemoteEndpoint = RemoteEndpoint;
+
+        if (!string.IsNullOrWhiteSpace(ApiKey))
+            BackendService.ApiKey = ApiKey;
+
+        if (!string.IsNullOrWhiteSpace(AccessToken))
+            BackendService.AccessToken = AccessToken;
+    }
+}

src/hosts/Elsa.Studio.Host.CustomElements/Components/BackendProvider.razor

@@ -0,0 +1,8 @@
+@using Elsa.Studio.Host.CustomElements.Services
+@using Elsa.Studio.Contracts
+@using Elsa.Studio.Options
+@using Microsoft.Extensions.Options
+@inherits BackendComponentBase
+
+@code {
+}

src/hosts/Elsa.Studio.Host.CustomElements/Components/WorkflowDefinitionEditorWrapper.razor

@@ -1,5 +1,5 @@
 @using Elsa.Studio.Contracts
-@inherits StudioComponentBase
+@inherits BackendComponentBase
 @inject IThemeService ThemeService
 
 <MudThemeProvider IsDarkMode="false" Theme="@ThemeService.CurrentTheme"/>

src/hosts/Elsa.Studio.Host.CustomElements/Program.cs

@@ -17,7 +17,7 @@
 
 // Register the custom elements.
 builder.RootComponents.RegisterCustomElsaStudioElements();
-builder.RootComponents.RegisterCustomElement<Backend>("elsa-backend");
+builder.RootComponents.RegisterCustomElement<BackendProvider>("elsa-backend-provider");
 builder.RootComponents.RegisterCustomElement<WorkflowDefinitionEditorWrapper>("elsa-workflow-definition-editor");
 
 // Register local services.

src/samples/BlazorApp1/Components/Pages/Home.razor

@@ -1,5 +1,4 @@
 @page "/"
 @rendermode InteractiveServer
-<Backend RemoteEndpoint="https://localhost:5001/elsa/api" ApiKey="48587230567A646D394B435A6277734A-4802fa49-e91e-45e8-b00f-b5492377e20b">
-    <WorkflowDefinitionEditorWrapper DefinitionId="57305c33e237893b"></WorkflowDefinitionEditorWrapper>
-</Backend>
+<BackendProvider RemoteEndpoint="https://localhost:5001/elsa/api" ApiKey="48587230567A646D394B435A6277734A-4802fa49-e91e-45e8-b00f-b5492377e20b"/>
+<WorkflowDefinitionEditorWrapper DefinitionId="57305c33e237893b"></WorkflowDefinitionEditorWrapper>