Fixes #23928: Fix UI problems following the Bootstrap 5 upgrade

Normation · Jan 15, 2024 · 97f04b9 · 97f04b9
1 parent 225f278
commit 97f04b9
Show file tree

Hide file tree

Showing 27 changed files with 165 additions and 538 deletions.
diff --git a/api-authorizations/src/main/elm/sources/ApiAuthorizations.elm b/api-authorizations/src/main/elm/sources/ApiAuthorizations.elm
@@ -140,10 +140,10 @@ apiSelect listAcl api =
 displayApi : Api -> Html Msg
 displayApi api =
     div [  ]
-        [ h4 []
-            [ b [ class api.verb ] [ text api.verb ]
-            , text (" " ++ api.path)
-            ]
+        [ h5 []
+          [ b [ class api.verb ] [ text api.verb ]
+          , text (" " ++ api.path)
+          ]
         , div [] [ text (api.name ++ ": " ++ api.description) ]
         ]
 

diff --git a/api-authorizations/src/main/resources/toserve/apiauthorizations/media.css b/api-authorizations/src/main/resources/toserve/apiauthorizations/media.css
@@ -41,7 +41,7 @@
 }
 
 #user-token-app a.createToken:hover{
-  background-color: #9bc832 !important;
+  background-color: #13BEB7 !important;
   color: #fff !important;
   border-bottom-color: #8fb92a;
 }
@@ -116,7 +116,7 @@
   margin: 0;
 }
 
-.acl-category .label-acl > div > h4 {
+.acl-category .label-acl > div > h5 {
   margin-top: 0;
   margin-bottom: 4px;
 }
@@ -131,7 +131,7 @@
   background-color: #f8f9fc;
 }
 
-.acl-category .label-acl > div > h4 > b{
+.acl-category .label-acl > div > h5 > b{
   font-weight:normal;
   text-transform:UPPERCASE;
   transition-duration:.2s;
@@ -141,16 +141,16 @@
   margin-right:2px;
   font-size: 0.9em
 }
-.acl-category .label-acl:hover > div > h4 > b.delete{
+.acl-category .label-acl:hover > div > h5 > b.delete{
   color:#e25f5d;
 }
-.acl-category .label-acl:hover > div > h4 > b.get{
+.acl-category .label-acl:hover > div > h5 > b.get{
   color:#6db95b;
 }
-.acl-category .label-acl:hover > div > h4 > b.post{
+.acl-category .label-acl:hover > div > h5 > b.post{
   color:#609ade;
 }
-.acl-category .label-acl:hover > div > h4 > b.put{
+.acl-category .label-acl:hover > div > h5 > b.put{
   color:#935cc1;
 }
 .acl-category .label-acl > div > div{

diff --git a/...zations/src/main/scala/com/normation/plugins/apiauthorizations/ApiAccountsExtension.scala b/...zations/src/main/scala/com/normation/plugins/apiauthorizations/ApiAccountsExtension.scala
@@ -106,48 +106,39 @@ class ApiAccountsExtension(val status: PluginStatus)(implicit val ttag: ClassTag
   }
 
   def body(xml: NodeSeq): NodeSeq = {
-    print("ok")
     ("#acl-app" #>
-    <div>
+      <div>
         <head_merge>
           <link rel="stylesheet" type="text/css" href="/toserve/apiauthorizations/media.css" media="screen" data-lift="with-cached-resource" />
           <script type="text/javascript" data-lift="with-cached-resource"  src="/toserve/apiauthorizations/rudder-apiauthorizations.js"></script>
         </head_merge>
-        <div id="acl-configuration" ng-if="myNewAccount.authorizationType === 'acl'">
-          <!-- load elm app -->
-          <div id="apiauthorization-app">
-            <div id="apiauthorization-content"/>
-          </div>
-          <script>
-          //<![CDATA[
-            var appAcl;
-            $(document).ready(function(){
-              app.ports.initAcl.subscribe(function(){
-                // init elm app
-                var node = document.getElementById("apiauthorization-app");
-                var main = document.getElementById("apiauthorization-content");
-
-                var initValues = {
-                    contextPath : contextPath
-                  , token: { id: "account.id", acl: []}
-                  , rudderApis: rudderApis
-                };
-
-                appAcl = Elm.ApiAuthorizations.init({node: main, flags: initValues});
-
-                //set back selected acl to the API accounts app
-                appAcl.ports.giveAcl.subscribe(function(acl) {
-                  app.ports.getCheckedAcl.send(acl)
-                });
-              });
-              //get the acl list of the selected account
-              app.ports.shareAcl.subscribe(function(acl){
-                appAcl.ports.getToken.send(acl)
+        <script>
+        //<![CDATA[
+          var appAcl;
+          $(document).ready(function(){
+            app.ports.initAcl.subscribe(function(){
+              // init elm app
+              var node = document.getElementById("apiauthorization-content");
+              var initValues = {
+                  contextPath : contextPath
+                , token: { id: "account.id", acl: []}
+                , rudderApis: rudderApis
+              };
+
+              appAcl = Elm.ApiAuthorizations.init({node: node, flags: initValues});
+
+              //set back selected acl to the API accounts app
+              appAcl.ports.giveAcl.subscribe(function(acl) {
+                app.ports.getCheckedAcl.send(acl)
               });
             });
-          // ]]>
-          </script>
-        </div>
+            //get the acl list of the selected account
+            app.ports.shareAcl.subscribe(function(acl){
+              appAcl.ports.getToken.send(acl)
+            });
+          });
+        // ]]>
+        </script>
       </div>).apply(xml)
   }
 

diff --git a/...ons/src/main/scala/com/normation/plugins/apiauthorizations/UserInformationExtension.scala b/...ons/src/main/scala/com/normation/plugins/apiauthorizations/UserInformationExtension.scala
@@ -20,7 +20,7 @@ class UserInformationExtension(val status: PluginStatus)(implicit val ttag: Clas
       <li class="user user-menu">
         <a href="#">
           <span>
-            <span class="hidden-xs glyphicon glyphicon-user"></span>
+            <span class="hidden-xs fa fa-user"></span>
             admin
           </span>
         </a>
@@ -30,9 +30,9 @@ class UserInformationExtension(val status: PluginStatus)(implicit val ttag: Clas
      * We want to do:
 
      <li class="dropdown user user-menu ">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
           <span>
-            <span class="hidden-xs glyphicon glyphicon-user"></span>
+            <span class="hidden-xs fa fa-user"></span>
             admin
           </span>
           <i class="fa fa-angle-down" style="margin-left:15px;"></i>
@@ -80,7 +80,7 @@ class UserInformationExtension(val status: PluginStatus)(implicit val ttag: Clas
       "#user-menu [class+]" #> "dropdown notifications-menu"
       & "#user-menu-action [style+]" #> "cursor:pointer"
       & "#user-menu-action [class+]" #> "dropdown-toggle"
-      & "#user-menu-action [data-toggle+]" #> "dropdown"
+      & "#user-menu-action [data-bs-toggle+]" #> "dropdown"
       & "#user-menu-action *+" #> <i class="fa fa-angle-down" style="margin-left:15px;"></i>
       andThen "#user-menu *+" #> embedAppXml // need to be andThen, else other children mod are erased :/
     ).apply(xml)

diff --git a/auth-backends/src/main/elm/sources/AuthBackends.elm b/auth-backends/src/main/elm/sources/AuthBackends.elm
@@ -275,7 +275,7 @@ displayBackendId id =
 backendDescription : String -> Html Msg
 backendDescription desc =
     p [ class "col-xs-12 callout-fade callout-info" ]
-        [ div [ class "marker" ] [ span [ class "glyphicon glyphicon-info-sign" ] [] ]
+        [ div [ class "marker" ] [ span [ class "fa fa-info-circle" ] [] ]
         , text desc
         ]
 
@@ -303,7 +303,7 @@ displayProvidConfig config =
     div [ class "col-xs-12" ]
         [ h4 [] [ text "Currently configured provider sequence" ]
         , div [ class "col-xs-12 callout-fade callout-info" ]
-            [ div [ class "marker" ] [ span [ class "glyphicon glyphicon-info-sign" ] [] ]
+            [ div [ class "marker" ] [ span [ class "fa fa-info-circle" ] [] ]
             , p []
                 [ text """Rudder relies on authentication providers to decide if an user can log in
                    into the application.

diff --git a/auth-backends/src/main/resources/template/AuthBackendsManagement.html b/auth-backends/src/main/resources/template/AuthBackendsManagement.html
@@ -20,7 +20,7 @@ <h3 class="page-title">Authentication Backends Configuration</h3>
         <div class="portlet-content">
           <div class="col-xs-12 callout-fade callout-warning">
             <div class="marker">
-              <span class="glyphicon glyphicon-info-sign"></span>
+              <span class="fa fa-info-circle"></span>
             </div>
             <p>
               This page shows you the current authentication backends used by Rudder to allow users to log in into Rudder.

diff --git a/branding/src/main/elm/sources/View.elm b/branding/src/main/elm/sources/View.elm
@@ -175,16 +175,15 @@ fileField msg inputId txt =
 createPanel : String -> String -> List (Html msg) -> Html msg
 createPanel panelTitle panelId bodyContent =
     let
-        hrefId =
-            "#" ++ panelId
+        hrefId = "#" ++ panelId
     in
     div [ class "panel panel-default" ]
         [ div [ class "panel-heading" ]
-            [ h2 [ class "panel-title" ]
-                [ a [ attribute "data-toggle" "collapse", attribute "data-target" hrefId, href hrefId ] [ text panelTitle ]
+            [ h4 [ class "panel-title" ]
+                [ a [ attribute "data-bs-toggle" "collapse", attribute "data-bs-target" hrefId, href hrefId ] [ text panelTitle ]
                 ]
             ]
-        , div [ id panelId, class "panel-collapse collapse in" ]
+        , div [ id panelId, class "panel-collapse collapse show" ]
             [ div [ class "panel-body" ] bodyContent ]
         ]