[Blazor] Upgrade Bootstrap to v5 (#1551)

* Update Graphical libraries (boostrap5, etc) * Fix enum selectitem
jhipster · Feb 1, 2025 · f65bd15 · f65bd15
1 parent 3aa7cd3
commit f65bd15
Show file tree

Hide file tree

Showing 21 changed files with 167 additions and 247 deletions.
diff --git a/.gitignore b/.gitignore
@@ -155,4 +155,4 @@ coverage/
 # added by generate-blueprint:
 generators/**/package-lock.json
 
-[Oo]bj/
+[Oo]bj/
diff --git a/generators/blazor/templates/src/client/Project.Client/Pages/Account/Register.razor.ejs b/generators/blazor/templates/src/client/Project.Client/Pages/Account/Register.razor.ejs
@@ -4,7 +4,7 @@
 @namespace <%= namespace %>.Client.Pages.Account
     <div>
         <div>
-            <div class="row justify-content-center">
+            <div class="d-flex justify-content-center">
                 <div class="col-md-8">
                     <h1>Registration</h1>
                     @if (Success)
@@ -34,37 +34,37 @@
                 </div>
             </div>
 
-            <div class="row justify-content-center">
+            <div class="d-flex justify-content-center">
                 <div class="col-md-8">
 
                     <EditForm EditContext="@EditContext" OnValidSubmit="@HandleSubmit" @ref="editForm">
                         <DataAnnotationsValidator />
-                        <div class="form-group">
-                            <label class="form-control-label" for="login">Username</label>
+                        <div row mb-3>
+                            <label class="form-label" for="login">Username</label>
                             <DynInputText id="login" @bind-Value="RegisterModel.Username" class="form-control" placeholder="Username" />
                             <div class="form-text text-danger">
                                 <ValidationMessage For="@(() => RegisterModel.Username)" />
                             </div>
                         </div>
 
-                        <div class="form-group">
-                            <label class="form-control-label" for="email">Email</label>
+                        <div row mb-3>
+                            <label class="form-label" for="email">Email</label>
                             <DynInputText id="email" @bind-Value="RegisterModel.Email" type="email" class="form-control" placeholder="Email" />
                             <div class="form-text text-danger">
                                 <ValidationMessage For="@(() => RegisterModel.Email)" />
                             </div>
                         </div>
 
-                        <div class="form-group">
-                            <label class="form-control-label" for="password">New password</label>
+                        <div row mb-3>
+                            <label class="form-label" for="password">New password</label>
                             <DynInputText id="password" @bind-Value="RegisterModel.Password" type="password" class="form-control" placeholder="New password" />
                             <div class="form-text text-danger">
                                 <ValidationMessage For="@(() => RegisterModel.Password)" />
                             </div>
                         </div>
 
-                        <div class="form-group">
-                            <label class="form-control-label" for="confirmPassword">New password confirmation</label>
+                        <div row mb-3>
+                            <label class="form-label" for="confirmPassword">New password confirmation</label>
                             <DynInputText id="confirmPassword" @bind-Value="RegisterModel.ConfirmPassword" type="password" class="form-control" placeholder="Confirm password" />
                             <div class="form-text text-danger">
                                 <ValidationMessage For="@(() => RegisterModel.ConfirmPassword)" />

diff --git a/...lazor/templates/src/client/Project.Client/Pages/Admin/UserManagement/UserDetail.razor.ejs b/...lazor/templates/src/client/Project.Client/Pages/Admin/UserManagement/UserDetail.razor.ejs
@@ -4,7 +4,7 @@
 
 @attribute [Authorize(Roles = "ROLE_ADMIN")]
 
-<div class="row justify-content-center">
+<div class="d-flex justify-content-center">
     <div class="col-8">
 
         @if (CurrentUser != null)
@@ -53,7 +53,7 @@
                             @foreach (var authority in CurrentUser.Authorities)
                             {
                                 <li>
-                                    <span class="badge badge-info">@authority</span>
+                                    <span class="badge bg-info">@authority</span>
                                 </li>
                             }
                         </ul>

diff --git a/...r/templates/src/client/Project.Client/Pages/Admin/UserManagement/UserManagement.razor.ejs b/...r/templates/src/client/Project.Client/Pages/Admin/UserManagement/UserManagement.razor.ejs
@@ -8,10 +8,12 @@
     <h2>
         <span id="user-management-page-heading">Users</span>
 
-        <a class="btn btn-primary float-right jh-create-entity" href="/admin/user-management/new">
-            <Icon Name='"fa-plus"' />
-            <span>Create a new User</span>
-        </a>
+        <Div Class="d-flex justify-content-end">
+            <a class="btn btn-primary float-right jh-create-entity" href="/admin/user-management/new">
+                <Icon Name='"fa-plus"' />
+                <span>Create a new User</span>
+            </a>
+        </Div>
     </h2>
 
     @*<jhi-alert-error></jhi-alert-error>*@
@@ -69,14 +71,14 @@
                                 @foreach (var authority in user.Authorities)
                                 {
                                     <div>
-                                        <span class="badge badge-info">@authority</span>
+                                        <span class="badge bg-info">@authority</span>
                                     </div>
                                 }
                             </td>
                             <td>@($"{user.CreatedDate:dd/MM/yy HH:mm}")</td>
                             <td>@user.LastModifiedBy</td>
                             <td>@($"{user.LastModifiedDate:dd/MM/yy HH:mm}")</td>
-                            <td class="text-right">
+                            <td class="text-end">
                                 <div class="btn-group">
                                     <a type="submit"
                                        href="/admin/user-management/@user.Login/view"
@@ -118,11 +120,11 @@
         </div>
 
         @*<div *ngIf="users">
-                <div class="row justify-content-center">
+                <div class="d-flex justify-content-center">
                     <jhi-item-count [page]="page" [total]="totalItems" [itemsPerPage]="itemsPerPage"></jhi-item-count>
                 </div>
 
-                <div class="row justify-content-center">
+                <div class="d-flex justify-content-center">
                     <ngb-pagination [collectionSize]="totalItems" [(page)]="page" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage(page)"></ngb-pagination>
                 </div>
             </div>*@

diff --git a/...lazor/templates/src/client/Project.Client/Pages/Admin/UserManagement/UserUpdate.razor.ejs b/...lazor/templates/src/client/Project.Client/Pages/Admin/UserManagement/UserUpdate.razor.ejs
@@ -5,7 +5,7 @@
 
 @attribute [Authorize(Roles = "ROLE_ADMIN")]
 
-<div class="row justify-content-center">
+<div class="d-flex justify-content-center">
     <div class="col-8">
         @if (CurrentUser != null)
         {
@@ -18,14 +18,14 @@
 
     @if (!string.IsNullOrWhiteSpace(CurrentUser.Id))
     {
-<div class="form-group">
+<div row mb-3>
     <label>ID</label>
     <input type="text" class="form-control" name="id" @bind-value="@CurrentUser.Id" readonly>
 </div>
     }
 
-    <div class="form-group">
-        <label class="form-control-label">Login</label>
+    <div row mb-3>
+        <label class="form-label">Login</label>
         <input type="text" class="form-control" name="login"
                @bind-value="@CurrentUser.Login">
 
@@ -47,8 +47,8 @@
             </div>*@
     </div>
 
-    <div class="form-group">
-        <label class="form-control-label">First Name</label>
+    <div row mb-3>
+        <label class="form-label">First Name</label>
         <input type="text" class="form-control" name="firstName" @bind-value="@CurrentUser.FirstName">
 
         @*TODO <div *ngIf="editForm.get('firstName')!.invalid && (editForm.get('firstName')!.dirty || editForm.get('firstName')!.touched)">
@@ -59,7 +59,7 @@
             </div>*@
     </div>
 
-    <div class="form-group">
+    <div row mb-3>
         <label>Last Name</label>
         <input type="text" class="form-control" name="lastName"
                @bind-value="@CurrentUser.LastName">
@@ -72,8 +72,8 @@
             </div>*@
     </div>
 
-    <div class="form-group">
-        <label class="form-control-label">Email</label>
+    <div row mb-3>
+        <label class="form-label">Email</label>
         <input type="email" class="form-control" name="email" @bind-value="@CurrentUser.Email">
 
         @*TODO <div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
@@ -113,7 +113,7 @@
         </label>
     </div>
 
-    <div class="form-group">
+    <div row mb-3>
         <label>Profiles</label>
         <Select TValue="string" Multiple="true" SelectedValues="@CurrentAuthorities" SelectedValuesChanged="@OnSelectAuthoritiesChanged">
             @foreach (var authority in Authorities)

diff --git a/.../templates/src/client/Project.Client/Pages/Entities/_entityClass_/_entityClass_.razor.ejs b/.../templates/src/client/Project.Client/Pages/Entities/_entityClass_/_entityClass_.razor.ejs
@@ -16,12 +16,14 @@ _%>
     <h2 id="page-heading">
         <span><%= entityClassNamePluralized %></span>
 
-        <a id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-<%= lowerCasedEntityClass %>" href="/<%= lowerCasedEntityClass %>/new">
-            <Icon Name='"fa-plus"' />
-            <span class="hidden-sm-down">
-                Create a new <%= entityClassName %>
-            </span>
-        </a>
+        <Div Class="d-flex justify-content-end">
+            <a id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-<%= lowerCasedEntityClass %>" href="/<%= lowerCasedEntityClass %>/new">
+                <Icon Name='"fa-plus"' />
+                <span class="hidden-sm-down">
+                    Create a new <%= entityClassName %>
+                </span>
+            </a>
+        </Div>
     </h2>
 
     @*<jhi-alert-error></jhi-alert-error>
@@ -56,7 +58,7 @@ _%>
     }
     else
     {
-        <div class="table-responsive" id="entities">
+        <div class="table-responsive table-entities" id="entities">
             <table class="table table-striped" aria-describedby="page-heading">
                 <thead>
                     <tr>
@@ -115,7 +117,7 @@ _%>
                             </td>
                                 <%_ }
                             }); _%>
-                            <td class="text-right">
+                            <td class="text-end">
                                 <div class="btn-group">
                                     <a href="/<%= lowerCasedEntityClass %>/@<%= lowerCasedEntityClass %>.Id/view" class="btn btn-info btn-sm">
                                         <Icon Name='"fa-eye"'/>

diff --git a/...ates/src/client/Project.Client/Pages/Entities/_entityClass_/_entityClass_Detail.razor.ejs b/...ates/src/client/Project.Client/Pages/Entities/_entityClass_/_entityClass_Detail.razor.ejs
@@ -11,7 +11,7 @@ _%>
 
 @attribute [Authorize(Roles = "ROLE_USER")]
 
-<div class="row justify-content-center">
+<div class="d-flex justify-content-center">
     <div class="col-8">
         <%_ if (isNumericPrimaryKey(primaryKeyType)) { _%>
         @if (<%= entityClassName %> != null && <%= entityClassName %>.Id != 0 && <%= entityClassName %>.Id.ToString().Length > 0)

diff --git a/...ates/src/client/Project.Client/Pages/Entities/_entityClass_/_entityClass_Update.razor.ejs b/...ates/src/client/Project.Client/Pages/Entities/_entityClass_/_entityClass_Update.razor.ejs
@@ -8,17 +8,18 @@ _%>
 @page "/<%= lowerCasedEntityClass %>/new"
 @page "/<%= lowerCasedEntityClass %>/{Id<%_ if(primaryKeyType !== 'string') { %>:<%= getNonNullableType(primaryKeyType)  %> <%_ } _%> }/edit"
 @using Microsoft.AspNetCore.Authorization
-@namespace <%= namespace %>.Client.Pages.Entities.<%= entityClassName %>
 <%_ fields.forEach(field => {
     if (field.id) return; _%>
     <%_ if (field.fieldIsEnum) { _%>
 @using <%= namespace %>.Crosscutting.Enums
     <%_ }
 }); _%>
 
+@namespace <%= namespace %>.Client.Pages.Entities.<%= entityClassName %>
+
 @attribute [Authorize(Roles = "ROLE_USER")]
 
-<div class="row justify-content-center">
+<div class="d-flex justify-content-center">
     <div class="col-8">
         <EditForm Model="@<%= asModel(entityClassName) %>" OnValidSubmit="@Save">
             <h2 id="jhi-<%= lowerCasedEntityClass %>-heading">Create or edit a <%= entityClassName %></h2>
@@ -34,7 +35,7 @@ _%>
                 @if (Id != null)
                 <%_ } _%>
                 {
-                    <div class="form-group">
+                    <div row mb-3>
                         <label for="id">ID</label>
                         <input type="text" class="form-control" id="id" name="id" readonly @bind-value="@<%= asModel(entityClassName) %>.Id" />
                     </div>
@@ -50,8 +51,8 @@ _%>
                     }
                 </Select>
                     <%_ } else { _%>
-                <div class="form-group">
-                    <label class="form-control-label" for="field_<%= field.fieldName %>"><%= field.fieldNameHumanized %></label>
+                <div row mb-3>
+                    <label class="form-label" for="field_<%= field.fieldName %>"><%= field.fieldNameHumanized %></label>
                     <input type="text" class="form-control" name="<%= field.fieldName %>" id="field_<%= field.fieldName %>"
                             @bind-value="@<%= asModel(entityClassName) %>.<%= field.fieldNamePascalized %>" />
                 </div>
@@ -60,8 +61,8 @@ _%>
 
             <%_ relationships.forEach(relation => { 
                 if (relation.relationshipType === 'one-to-one' || relation.relationshipType === 'many-to-one') { _%>
-                <div class="form-group">
-                    <label class="form-control-label" for="field_<%= relation.otherEntityNameLowerCased %>"><%= relation.relationshipFieldNamePascalizedPlural %></label>
+                <div row mb-3>
+                    <label class="form-label" for="field_<%= relation.otherEntityNameLowerCased %>"><%= relation.relationshipFieldNamePascalizedPlural %></label>
                     <select class="form-control" id="field_<%= relation.otherEntityNameLowerCased %>" name="<%= relation.otherEntityNameLowerCased %>" @bind="@<%= relation.otherEntityNamePascalized %>Id">
                         <option value="0"></option>
                         @foreach (var <%= relation.otherEntityNameLowerCased %> in <%= relation.otherEntityNamePascalized %>Ids)
@@ -78,8 +79,8 @@ _%>
                     </select>
                 </div>
                 <%_ } else if ((relation.relationshipType === 'many-to-many' || relation.relationshipType === 'one-to-many') && relation.ownerSide === true ) { _%>
-                <div class="form-group">
-                    <label class="form-control-label" for="field_<%= relation.otherEntityNameLowerCased %>"><%= relation.relationshipFieldNamePascalizedPlural %></label>
+                <div row mb-3>
+                    <label class="form-label" for="field_<%= relation.otherEntityNameLowerCased %>"><%= relation.relationshipFieldNamePascalizedPlural %></label>
                     <Select  class="form-control" name="<%= relation.otherEntityNameLowerCased %>"  TValue="<%= primaryKeyType %>" @bind-SelectedValues="Selected<%= relation.relationshipFieldNamePascalizedPlural %>" Multiple="true">
                         @foreach (var <%= relation.otherEntityNameLowerCased %> in <%= relation.otherEntityNamePascalized %>Ids)
                         {

diff --git a/generators/blazor/templates/src/client/Project.Client/Pages/Login.razor.ejs b/generators/blazor/templates/src/client/Project.Client/Pages/Login.razor.ejs
@@ -1,6 +1,6 @@
 @namespace <%= namespace %>.Client.Pages
 
-<div class="row justify-content-center">
+<div class="d-flex justify-content-center">
     @if (IsAuthenticateError)
     {
         <div class="col-md-8">
@@ -12,13 +12,13 @@
 
     <div class="col-md-8">
         <EditForm Model="@LoginModel" OnValidSubmit="@HandleSubmit">
-            <div class="form-group">
+            <div row mb-3>
                 <label class="username-label" for="username">Login</label>
                 <input type="text" class="form-control" name="username" id="username" placeholder="Your username"
                        @bind-value="@LoginModel.Username" >
             </div>
 
-            <div class="form-group">
+            <div row mb-3>
                 <label for="password">Password</label>
                 <input type="password" class="form-control" name="password" id="password" placeholder="Your password"
                        @bind-value="@LoginModel.Password">

diff --git a/generators/blazor/templates/src/client/Project.Client/Program.cs.ejs b/generators/blazor/templates/src/client/Project.Client/Program.cs.ejs
@@ -7,7 +7,7 @@ using AutoMapper;
 using Blazored.Modal;
 using Blazored.SessionStorage;
 using Blazorise;
-using Blazorise.Bootstrap;
+using Blazorise.Bootstrap5;
 using Blazorise.Icons.FontAwesome;
 using <%= namespace %>.Client.Pages.Utils;
 using <%= namespace %>.Client.Services;
@@ -34,7 +34,7 @@ public class Program
             {
                 options.Immediate = true;
             })
-            .AddBootstrapProviders()
+            .AddBootstrap5Providers()
             .AddFontAwesomeIcons();
 
 

diff --git a/generators/blazor/templates/src/client/Project.Client/Project.Client.csproj.ejs b/generators/blazor/templates/src/client/Project.Client/Project.Client.csproj.ejs
@@ -20,7 +20,7 @@
     <PackageReference Include="AutoMapper" />
     <PackageReference Include="Blazored.Modal" />
     <PackageReference Include="Blazored.SessionStorage" />
-    <PackageReference Include="Blazorise.Bootstrap" />
+    <PackageReference Include="Blazorise.Bootstrap5" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" />
@@ -31,7 +31,7 @@
   </ItemGroup>
 
   <Target Name="RestoreFrontEndLibraries" BeforeTargets="BeforeBuild">
-    <Exec Command="libman restore" LogStandardErrorAsError="true"/>
+    <Exec Command="libman restore" LogStandardErrorAsError="true" />
   </Target>
 
   <Target Name="CompileStaticAssets" AfterTargets="AfterBuild">
-Original file line number
+Diff line change
@@ Expand Up / @@ -155,4 +155,4 @@ coverage/ @@
     # added by generate-blueprint:
     generators/**/package-lock.json
-    [Oo]bj/
+    [Oo]bj/