feat(templates): update Boilerplate based on new Bswup changes #10904 (#10908)

Author: msynk

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ForceUpdateSnackBar.razor

@@ -1,6 +1,6 @@
 @inherits AppComponentBase
 
-<BitSnackBar @ref=bitSnackBar AutoDismiss="false" OnDismiss="WrapHandled(OnDismiss)">
+<BitSnackBar @ref=bitSnackBar AutoDismiss="false" Persistent>
     <TitleTemplate>
         <BitText Typography="BitTypography.H5">@Localizer[nameof(AppStrings.ForceUpdateTitle)]</BitText>
     </TitleTemplate>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ForceUpdateSnackBar.razor.cs

@@ -4,10 +4,11 @@ public partial class ForceUpdateSnackBar
 {
     [AutoInject] private IAppUpdateService appUpdateService = default!;
 
-    private BitSnackBar bitSnackBar = default!;
 
     private Action? unsubscribe;
-    private bool isVisible = false;
+    private bool isShown = false;
+    private BitSnackBar bitSnackBar = default!;
+
 
     protected override async Task OnInitAsync()
     {
@@ -17,21 +18,19 @@ protected override async Task OnInitAsync()
 
         unsubscribe = PubSubService.Subscribe(ClientPubSubMessages.FORCE_UPDATE, async (_) =>
         {
-            if (isVisible) return;
-            isVisible = true;
+            if (isShown) return;
+
+            isShown = true;
             await bitSnackBar.Show(string.Empty);
         });
     }
 
+
     private async Task Update()
     {
         await appUpdateService.ForceUpdate();
     }
 
-    private void OnDismiss()
-    {
-        isVisible = false;
-    }
 
     protected override async ValueTask DisposeAsync(bool disposing)
     {

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/app.ts

@@ -74,6 +74,11 @@ class App {
         };
     };
     //#endif
+
+    public static forceUpdate() {
+        (window as any).BitBswupProgress.config({ autoReload: true });
+        (window as any).BitBswup.checkForUpdate();
+    }
 }
 
 (window as any).App = App;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Components/AppBswupProgressBar.razor

@@ -52,14 +52,10 @@
             #bit-bswup .bswup-progress-text::after {
                 content: var(--bit-bswup-percent-text, "");
             }
-
-            #bit-bswup[style*="--bit-bswup-percent: 100"] {
-                display: none !important;
-            }
 </style>
 
 <div>
-    <BswupProgress AppContainer="#app-container" HideApp="false" AutoReload="false" ShowLogs="false">
+    <BswupProgress AppContainer="#app-container" HideApp="false" AutoReload="false" ShowLogs="false" ShowAssets="false" AutoHide="true">
         <div class="bswup-progress-text" />
         <svg class="bswup-container">
             <circle r="40%" cx="50%" cy="50%" />

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Services/WebAppUpdateService.cs

@@ -7,6 +7,6 @@ public partial class WebAppUpdateService : IAppUpdateService
 
     public async Task ForceUpdate()
     {
-        await jsRuntime.InvokeVoidAsync("BitBswup.forceRefresh"); // TODO: Replace this with `BitBswup.checkForUpdate` after next bswup pre-release.
+        await jsRuntime.InvokeVoidAsync("App.forceUpdate");
     }
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/index.html

@@ -93,10 +93,6 @@
                 #bit-bswup .bswup-progress-text::after {
                     content: var(--bit-bswup-percent-text, "");
                 }
-
-                #bit-bswup[style*="--bit-bswup-percent: 100"] {
-                    display: none !important;
-                }
     </style>
     <style>
         .bit-lds-grid div {
@@ -210,8 +206,8 @@
     <script src="_content/Bit.Bswup/bit-bswup.js" blazorScript="_content/Bit.BlazorES2019/blazor.webassembly.js"></script>
     <script src="_content/Bit.Bswup/bit-bswup.progress.js"></script>
     <script>
-        const autoReload = false, showLogs = false, showAssets = false, appContainer = '#app-container', hideApp = false, handler = null;
-        startBswupProgress(autoReload, showLogs, showAssets, appContainer, hideApp, handler);
+        const autoReload = false, showLogs = false, showAssets = false, appContainer = '#app-container', hideApp = false, autoHide = true, handler = null;
+        BitBswupProgress.start(autoReload, showLogs, showAssets, appContainer, hideApp, autoHide, handler);
     </script>
     <script src="_content/Bit.Butil/bit-butil.js"></script>
     <!--#if (offlineDb == true) -->