From 97f04b90e37572592e58deb82256be011f67b512 Mon Sep 17 00:00:00 2001
From: Raphael Gauthier <raphael.gauthier@normation.com>
Date: Thu, 21 Dec 2023 16:21:09 +0100
Subject: [PATCH] Fixes #23928: Fix UI problems following the Bootstrap 5
 upgrade

---
 .../main/elm/sources/ApiAuthorizations.elm    |   8 +-
 .../toserve/apiauthorizations/media.css       |  14 +-
 .../ApiAccountsExtension.scala                |  61 ++-
 .../UserInformationExtension.scala            |   8 +-
 .../src/main/elm/sources/AuthBackends.elm     |   4 +-
 .../template/AuthBackendsManagement.html      |   2 +-
 branding/src/main/elm/sources/View.elm        |   9 +-
 .../main/resources/toserve/branding/media.css |  46 +--
 .../resources/toserve/branding/toasty.css     |  10 +-
 .../main/elm/sources/SupervisedTargets.elm    |   2 +-
 .../src/main/elm/sources/View.elm             |  10 +-
 .../template/ChangeValidationManagement.html  |  10 +-
 .../resources/template/changeRequest.html     |  11 +-
 .../ComponentChangeRequest.html               |  28 +-
 .../comet/WorkflowInformation.scala           |  19 +-
 .../snippet/ChangeRequestDetails.scala        |   8 +-
 .../snippet/ChangeRequestManagement.scala     |   4 +-
 .../snippet/ChangeValidationSettings.scala    |   4 +-
 .../src/main/elm/sources/DataSourceForm.elm   |   2 +-
 datasources/src/main/elm/sources/Port.elm     |   3 +-
 datasources/src/main/elm/sources/Update.elm   |  10 +-
 datasources/src/main/elm/sources/View.elm     |   8 +-
 .../template/dataSourceManagement.html        | 358 +-----------------
 .../datasources/rudder-datasources.css        |   7 +-
 .../OpenScapNodeDetailsExtension.scala        |   4 +-
 user-management/src/main/elm/sources/View.elm |  49 ++-
 .../usermanagement/user-management.css        |   4 +-
 27 files changed, 165 insertions(+), 538 deletions(-)

diff --git a/api-authorizations/src/main/elm/sources/ApiAuthorizations.elm b/api-authorizations/src/main/elm/sources/ApiAuthorizations.elm
index b2911d623..b92bef8a3 100644
--- 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
index 77da7ea5c..00231b786 100755
--- 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/api-authorizations/src/main/scala/com/normation/plugins/apiauthorizations/ApiAccountsExtension.scala b/api-authorizations/src/main/scala/com/normation/plugins/apiauthorizations/ApiAccountsExtension.scala
index b21c6900e..9d67893d0 100644
--- a/api-authorizations/src/main/scala/com/normation/plugins/apiauthorizations/ApiAccountsExtension.scala
+++ b/api-authorizations/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/api-authorizations/src/main/scala/com/normation/plugins/apiauthorizations/UserInformationExtension.scala b/api-authorizations/src/main/scala/com/normation/plugins/apiauthorizations/UserInformationExtension.scala
index a1071433a..799d150bb 100644
--- a/api-authorizations/src/main/scala/com/normation/plugins/apiauthorizations/UserInformationExtension.scala
+++ b/api-authorizations/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
index 3279add42..808c70f1f 100644
--- 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
index b1b6505e5..fd01a4108 100644
--- 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
index 8c127e555..8bd028b56 100644
--- 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 ]
         ]
 
diff --git a/branding/src/main/resources/toserve/branding/media.css b/branding/src/main/resources/toserve/branding/media.css
index 66fd98135..caeb7a190 100755
--- a/branding/src/main/resources/toserve/branding/media.css
+++ b/branding/src/main/resources/toserve/branding/media.css
@@ -10,7 +10,7 @@ main{
 	background-image: url(data:image/png;base64,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);
 }
 label.form-control{
-	background-color: #eeeeef;
+	background-color: #F8F9FC;
 	box-shadow: none;
 	border-left: none;
 	padding: 8px 12px !important;
@@ -40,7 +40,7 @@ form{
   display: block;
   text-decoration: none !important;
   transition-duration: .2s;
-  border-bottom: 2px solid #e5e5e5;
+  border-bottom: 2px solid #D6DEEF;
   background-color: #fff;
   font-weight: bold;
   transition-duration: .2s;
@@ -51,13 +51,13 @@ form{
   border-bottom-color: #13beb7;
 }
 .panel-heading a.collapsed{
-	border-bottom: 2px solid #e5e5e5;
+	border-bottom: 2px solid #D6DEEF;
 }
 /* -- PANEL SEPARATION -- */
 .panel-body > .panel-col:first-child{
 	padding: 15px;
 	margin-right: -1px;
-	border-right: 1px solid #ccc;
+	border-right: 1px solid #D6DEEF;
 	position: relative;
 	background-color: #fff;
 }
@@ -84,12 +84,12 @@ form{
 	height: 0;
 	border-top: 20px solid transparent;
 	border-bottom: 20px solid transparent;
-	border-left: 20px solid #ccc;
+	border-left: 20px solid #D6DEEF;
 	display: block;
 }
 .panel-body > .panel-col:last-child{
   padding: 15px;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #D6DEEF;
   background-color: #f0f0f0;
   display: flex;
 }
@@ -97,7 +97,7 @@ form{
 @media screen and (min-width: 992px){
 	.panel-body > .panel-col:first-child{
 		margin-right: -1px;
-		border-right: 1px solid #ccc;
+		border-right: 1px solid #D6DEEF;
 	}
 	.panel-body > .panel-col:last-child:before{
 		left: -1px;
@@ -115,10 +115,10 @@ form{
 		height: 0;
 		border-top: 20px solid transparent;
 		border-bottom: 20px solid transparent;
-		border-left: 20px solid #ccc;
+		border-left: 20px solid #D6DEEF;
 	}
 	.panel-body > .panel-col:last-child{
-		border-left: 1px solid #ccc;
+		border-left: 1px solid #D6DEEF;
 		background-color: #f0f0f0;
 	}
 }
@@ -126,7 +126,7 @@ form{
 .preview-window{
 	background-color: #fff;
 	margin:auto;
-	border:1px solid #ccc;
+	border:1px solid #D6DEEF;
 	width:100%;
 	max-width: 400px;
 	position: relative;
@@ -242,7 +242,7 @@ form{
   margin: auto;
   height: 20px;
   border-radius: 4px;
-  border:1px solid #ccc;
+  border:1px solid #D6DEEF;
   margin-top: 12px;
 }
 .preview-window .fake-form .fake-btn{
@@ -310,7 +310,7 @@ ui-dropdown-panel{
     z-index:9999 !important;
 }
 .input-group > .input-group-addon + ui-picker{
-    border-color: #cccccc;
+    border-color: #D6DEEFccc;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
@@ -327,8 +327,8 @@ ui-dropdown-panel{
     border-bottom-left-radius: 0;
     padding: 11px 10px;
     background-image: none;
-    background-color: #eeeeef;
-    border: 1px solid #ccc;
+    background-color: #F8F9FC;
+    border: 1px solid #D6DEEF;
     border-top: none;
     border-bottom: none;
 }
@@ -343,21 +343,20 @@ ui-dropdown-panel{
 #branding-main{
   padding-bottom: 40px;
 }
-#branding-main .panel-heading{
-  margin:0;
-  padding:0;
-}
+#branding-main .panel-heading,
 #branding-main .panel-heading .panel-title{
+  margin:0;
   padding:0;
 }
+
 #branding-main .input-group .input-group-addon {
-  border: 1px solid #ccc;
+  border: 1px solid #D6DEEF;
 }
 #branding-main .input-group > .input-group-addon:first-child {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   border-right:none;
-  background-color: #eee;
+  background-color: #F8F9FC;
 }
 #branding-main .input-group > .input-group-addon:last-child {
   border-top-right-radius: 4px;
@@ -396,7 +395,7 @@ span.input-group-addon.upload-btn:hover {
 }
 #branding-main .toolbar {
     background-color: #fff;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid #D6DEEF;
     position: fixed;
     z-index: 200;
     text-align: right;
@@ -409,7 +408,10 @@ span.input-group-addon.upload-btn:hover {
     min-width: 80px;
 }
 #branding-main .panel{
-  overflow: hidden
+  overflow: hidden;
+  border: 1px solid #D6DEEF;
+  margin-bottom: 20px;
+  border-radius: 4px;
 }
 #branding-main .panel-body{
   padding: 0;
diff --git a/branding/src/main/resources/toserve/branding/toasty.css b/branding/src/main/resources/toserve/branding/toasty.css
index abec35ed9..200fb255f 100644
--- a/branding/src/main/resources/toserve/branding/toasty.css
+++ b/branding/src/main/resources/toserve/branding/toasty.css
@@ -20,17 +20,17 @@
 }
 
 .toasty-success {
-    background-color: rgba(155, 200, 50, .9);
-    border: 1px solid #a4c74e
+    background-color: #13BEB7;
+    border: 1px solid #109f9a;
 ;}
 
 .toasty-warning {
-    background-color: #ff851b
+    background-color: #EF9600;
 }
 
 .toasty-error {
-    background-color: rgba(200, 0, 4, .9);
-    border: 1px solid #c3000e;
+    background-color: #DA291C;
+    border: 1px solid #ac2925;
 }
 
 .animated {
diff --git a/change-validation/src/main/elm/sources/SupervisedTargets.elm b/change-validation/src/main/elm/sources/SupervisedTargets.elm
index 424baa553..121255d67 100644
--- a/change-validation/src/main/elm/sources/SupervisedTargets.elm
+++ b/change-validation/src/main/elm/sources/SupervisedTargets.elm
@@ -338,7 +338,7 @@ displayCategory category =
         [ div [ class "panel panel-default" ]
             [ div [ class "panel-heading", Html.Attributes.id listGroupHeadingId ]
                 [ h4 [ class "panel-title" ]
-                    [ a [ Html.Attributes.href ("#" ++ listGroupId), Html.Attributes.attribute "role" "button", Html.Attributes.attribute "data-toggle" "collapse", Html.Attributes.attribute "aria-expanded" "true", Html.Attributes.attribute "aria-controls" listGroupId ]
+                    [ a [ Html.Attributes.href ("#" ++ listGroupId), Html.Attributes.attribute "role" "button", Html.Attributes.attribute "data-bs-toggle" "collapse", Html.Attributes.attribute "aria-expanded" "true", Html.Attributes.attribute "aria-controls" listGroupId ]
                         [ span [ class "fa fa-folder" ] []
                         , text category.name
                         ]
diff --git a/change-validation/src/main/elm/sources/View.elm b/change-validation/src/main/elm/sources/View.elm
index 1f11092af..6ed76e5f5 100644
--- a/change-validation/src/main/elm/sources/View.elm
+++ b/change-validation/src/main/elm/sources/View.elm
@@ -15,9 +15,9 @@ createInfoTootlip : String -> String -> Html msg
 createInfoTootlip content placement =
   span
   [
-      class "glyphicon glyphicon-exclamation-sign center-box-element input-icon bstool"
-    , attribute "data-toggle" "tooltip"
-    , attribute "data-placement" placement
+      class "fa fa-exclamation-triangle center-box-element input-icon bstool"
+    , attribute "data-bs-toggle" "tooltip"
+    , attribute "data-bs-placement" placement
     , attribute "title" content
   ][]
 
@@ -198,13 +198,13 @@ displayArrows model =
       [
         button [ onClick LeftToRight, class rightArrowBtnType, disabled (isEmpty model.leftChecked) ]
         [
-          span [ class "glyphicon glyphicon-chevron-right" ][]
+          span [ class "fa fa-chevron-right" ][]
         ],
         br [] [],
         br [] [],
         button [ onClick RightToLeft,class leftArrowBtnType, disabled (isEmpty model.rightChecked)]
         [
-          span [ class "glyphicon glyphicon-chevron-left" ] []
+          span [ class "fa fa-chevron-left" ] []
         ]
       ]
 
diff --git a/change-validation/src/main/resources/template/ChangeValidationManagement.html b/change-validation/src/main/resources/template/ChangeValidationManagement.html
index 394723612..a6229a0e6 100644
--- a/change-validation/src/main/resources/template/ChangeValidationManagement.html
+++ b/change-validation/src/main/resources/template/ChangeValidationManagement.html
@@ -39,7 +39,7 @@ <h1>
 
           <div class="template-main">
             <div class="main-container">
-              <div class="main-details" data-spy="scroll" data-target="#navbar-scrollspy">
+              <div class="main-details" data-bs-spy="scroll" data-bs-target="#navbar-scrollspy">
 
                 <div class="lift:ChangeValidationSettings.activation" id="workflowForm">
                   <h3 class="page-title" style="margin-top: 0;">Change validation status</h3>
@@ -135,7 +135,7 @@ <h3 class="page-title">Configure email notification</h3>
                           <span>/var/rudder/plugins/change-validation/validation-mail.template</span>
                           <a class="btn-goto btn-clipboard"
                             data-clipboard-text="/var/rudder/plugins/change-validation/validation-mail.template"
-                            data-toggle='tooltip' data-placement='bottom' data-container="html"
+                            data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-container="html"
                             title="Copy to clipboard">
                             <i class="far fa-clipboard"></i>
                           </a>
@@ -144,7 +144,7 @@ <h3 class="page-title">Configure email notification</h3>
                           <span>/var/rudder/plugins/change-validation/deployment-mail.template</span>
                           <a class="btn-goto btn-clipboard"
                             data-clipboard-text="/var/rudder/plugins/change-validation/deployment-mail.template"
-                            data-toggle='tooltip' data-placement='bottom' data-container="html"
+                            data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-container="html"
                             title="Copy to clipboard">
                             <i class="far fa-clipboard"></i>
                           </a>
@@ -153,7 +153,7 @@ <h3 class="page-title">Configure email notification</h3>
                           <span>/var/rudder/plugins/change-validation/cancelled-mail.template</span>
                           <a class="btn-goto btn-clipboard"
                             data-clipboard-text="/var/rudder/plugins/change-validation/cancelled-mail.template"
-                            data-toggle='tooltip' data-placement='bottom' data-container="html"
+                            data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-container="html"
                             title="Copy to clipboard">
                             <i class="far fa-clipboard"></i>
                           </a>
@@ -162,7 +162,7 @@ <h3 class="page-title">Configure email notification</h3>
                           <span>/var/rudder/plugins/change-validation/deployed-mail.template</span>
                           <a class="btn-goto btn-clipboard"
                             data-clipboard-text="/var/rudder/plugins/change-validation/deployed-mail.template"
-                            data-toggle='tooltip' data-placement='bottom' data-container="html"
+                            data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-container="html"
                             title="Copy to clipboard">
                             <i class="far fa-clipboard"></i>
                           </a>
diff --git a/change-validation/src/main/resources/template/changeRequest.html b/change-validation/src/main/resources/template/changeRequest.html
index cdf37c338..21ba21e1f 100644
--- a/change-validation/src/main/resources/template/changeRequest.html
+++ b/change-validation/src/main/resources/template/changeRequest.html
@@ -33,15 +33,12 @@
   </div>
 
   <div>
-    <div id="successWorkflow" class="modal fade" data-keyboard="true" tabindex="-1">
+    <div id="successWorkflow" class="modal fade" data-bs-keyboard="true" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <div class="close" data-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                        <span class="sr-only">Close</span>
-                    </div>
-                    <h4 class="modal-title">Success</h4>
+                    <h5 class="modal-title">Success</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row">
@@ -56,7 +53,7 @@ <h4 class="text-center">
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-default" data-bs-dismiss="modal" aria-label="Close">Close</button>
                 </div>
             </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
diff --git a/change-validation/src/main/resources/toserve/changevalidation/ComponentChangeRequest.html b/change-validation/src/main/resources/toserve/changevalidation/ComponentChangeRequest.html
index 176e5694d..993139b47 100644
--- a/change-validation/src/main/resources/toserve/changevalidation/ComponentChangeRequest.html
+++ b/change-validation/src/main/resources/toserve/changevalidation/ComponentChangeRequest.html
@@ -21,7 +21,7 @@ <h1>
 </component-header>
 
 <component-details>
-  <div id="detailsForm" class="col-lg-6 col-xs-12">
+  <div id="detailsForm" class="col-lg-6 col-xs-12 pe-3 ps-3">
     <div id="formError"></div>
     <div id="CRName"></div>
     <div class="form-group">
@@ -49,7 +49,7 @@ <h1>
 <component-warnUnmergeable>
   <div class="callout-fade callout-warning">
     <div class="marker">
-      <span class="glyphicon glyphicon-info-sign"></span>
+      <span class="fa fa-info-circle"></span>
     </div>
     <div>
       <p>Configuration state of the object modified by this change request has change since the
@@ -83,20 +83,16 @@ <h1>
 
 <component-popup>
   <div id="changeStatePopup">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <div class="close" data-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                        <span class="sr-only">Close</span>
-                    </div>
-                    <h4 class="modal-title">Change Request state</h4>
-                </div>
-                <div id="form"></div>
-            </div>
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Change Request state</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
+        <div id="form"></div>
+      </div>
     </div>
-</div>
+  </div>
 </component-popup>
 
 <component-popupContent>
@@ -116,7 +112,7 @@ <h4 class="modal-title">Change Request state</h4>
     <div id ="reason" class="space-top"></div>
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+    <button type="button" class="btn btn-default" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
     <button type="button" class="btn" id="confirm">Confirm</button>
 </div>
 </component-popupContent>
@@ -126,6 +122,6 @@ <h4 class="modal-title">Change Request state</h4>
     <div id="backStep" ></div>
     <div id="nextStep" style="float:right"></div>
   </div>
-  <div id="popupContent" class="modal fade" data-keyboard="true" tabindex="-1"></div>
+  <div id="popupContent" class="modal fade" data-bs-keyboard="true" tabindex="-1" data-bs-backdrop="false"></div>
 </component-actionbuttons>
 </xml:group>
diff --git a/change-validation/src/main/scala/com/normation/plugins/changevalidation/comet/WorkflowInformation.scala b/change-validation/src/main/scala/com/normation/plugins/changevalidation/comet/WorkflowInformation.scala
index 373d1a5d6..a0d2f998d 100644
--- a/change-validation/src/main/scala/com/normation/plugins/changevalidation/comet/WorkflowInformation.scala
+++ b/change-validation/src/main/scala/com/normation/plugins/changevalidation/comet/WorkflowInformation.scala
@@ -62,17 +62,12 @@ class WorkflowInformation extends CometActor with CometListener with Loggable {
   override val defaultHtml = NodeSeq.Empty
 
   val layout = {
-    <li class="dropdown notifications-menu">
-      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+    <li class="nav-item dropdown notifications-menu">
+      <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
         <span>CR</span>
         <span id="number" class="badge rudder-badge"></span>
-        <i class="fa fa-angle-down" style="margin-left:15px;"></i>
       </a>
-      <ul class="dropdown-menu" role="menu">
-        <li>
-          <ul class="menu"></ul>
-        </li>
-      </ul>
+      <ul class="dropdown-menu" role="menu"></ul>
     </li>
   }
 
@@ -90,10 +85,10 @@ class WorkflowInformation extends CometActor with CometListener with Loggable {
           if (workflowEnabled && (isValidator || isDeployer)) {
             {
               if (isValidator) pendingModifications
-              else ".menu *+" #> NodeSeq.Empty
+              else ".dropdown-menu *+" #> NodeSeq.Empty
             } & {
               if (isDeployer) pendingDeployment
-              else ".menu *+" #> NodeSeq.Empty
+              else ".dropdown-menu *+" #> NodeSeq.Empty
             } &
             "#number *" #> requestCount(workflowService)
           } else {
@@ -124,7 +119,7 @@ class WorkflowInformation extends CometActor with CometListener with Loggable {
   def pendingModifications = {
     val xml = pendingModificationRec(workflowService)
 
-    ".menu *+" #> xml
+    ".dropdown-menu *+" #> xml
   }
 
   private[this] def pendingModificationRec(workflowService: WorkflowService): NodeSeq = {
@@ -151,7 +146,7 @@ class WorkflowInformation extends CometActor with CometListener with Loggable {
   def pendingDeployment = {
     val xml = pendingDeploymentRec(workflowService)
 
-    ".menu *+" #> xml
+    ".dropdown-menu *+" #> xml
   }
 
   private[this] def pendingDeploymentRec(workflowService: WorkflowService): NodeSeq = {
diff --git a/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestDetails.scala b/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestDetails.scala
index 04b6c1df5..a09195ccd 100644
--- a/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestDetails.scala
+++ b/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestDetails.scala
@@ -304,7 +304,7 @@ class ChangeRequestDetails extends DispatchSnippet with Loggable {
           .openOr(<div class="error">Cannot find the status of this change request</div>)
       ) &
       SetHtml("changeRequestChanges", new ChangeRequestChangesForm(cr).dispatch("changes")(NodeSeq.Empty)) &
-      JsRaw("""$('#changeStatePopup').bsModal('hide');""")
+      JsRaw("""hideBsModal('popupContent');""")
     }
 
     var nextChosen                                                = nextSteps.head
@@ -313,7 +313,7 @@ class ChangeRequestDetails extends DispatchSnippet with Loggable {
         nextSteps.map(v => (v, v._1.value)),
         Full(nextChosen),
         { t: (WorkflowNodeId, stepChangeFunction) => nextChosen = t }
-      ) % ("class" -> "form-control space-bottom")
+      ) % ("class" -> "form-select space-bottom")
     }
 
     def buildReasonField(mandatory: Boolean, containerClass: String) = {
@@ -412,7 +412,7 @@ class ChangeRequestDetails extends DispatchSnippet with Loggable {
           case Full(next) =>
             SetHtml("workflowActionButtons", displayActionButton(cr, next)) &
             SetHtml("newStatus", Text(next.value)) &
-            closePopup & JsRaw(""" callPopupWithTimeout(200, "successWorkflow"); """)
+            closePopup & JsRaw(""" initBsModal("successWorkflow"); """)
           case eb: EmptyBox =>
             val fail = eb ?~! "could not change Change request step"
             formTracker.addFormError(error(fail.msg))
@@ -424,7 +424,7 @@ class ChangeRequestDetails extends DispatchSnippet with Loggable {
     }
 
     SetHtml("popupContent", content(nextChosen)) &
-    JsRaw("createPopup('popupContent')")
+    JsRaw("initBsModal('popupContent')")
 
   }
 }
diff --git a/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestManagement.scala b/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestManagement.scala
index 25c6b0012..581e0104a 100644
--- a/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestManagement.scala
+++ b/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeRequestManagement.scala
@@ -208,7 +208,7 @@ class ChangeRequestManagement extends DispatchSnippet with Loggable {
         SHtml.ajaxSubmit(
           "",
           () => SetHtml("actualFilter", transform(value)),
-          ("class", "expand hide")
+          ("class", "expand visually-hidden")
         )
       }
 
@@ -223,7 +223,7 @@ class ChangeRequestManagement extends DispatchSnippet with Loggable {
         (multipleValues ::: selectValues).map { case (a, b) => SelectableOption(a, b) },
         Full(default),
         list => value = list,
-        ("class", "form-control"),
+        ("class", "form-select w-auto mb-3 ms-2 me-2"),
         ("id", "select-status")
       )
       (s"value='${default}' [selected]" #> "selected").apply(("select *" #> {
diff --git a/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeValidationSettings.scala b/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeValidationSettings.scala
index 2dd13cf9e..5ec17cc68 100644
--- a/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeValidationSettings.scala
+++ b/change-validation/src/main/scala/com/normation/plugins/changevalidation/snippet/ChangeValidationSettings.scala
@@ -162,7 +162,7 @@ class ChangeValidationSettings extends DispatchSnippet {
         case Full(_) =>
           val tooltipid = Helpers.nextFuncName
           <span class="tooltipable" tooltipid={tooltipid} title="">
-              <span class="glyphicon glyphicon-info-sign info"></span>
+              <span class="fa fa-info-circle info"></span>
             </span>
             <div class="tooltipContent" id={tooltipid}>
               Allow users to validate Change Requests they created themselves? Validating is moving a Change Request to the "<b>Pending deployment</b>" status
@@ -176,7 +176,7 @@ class ChangeValidationSettings extends DispatchSnippet {
         case Full(_) =>
           val tooltipid = Helpers.nextFuncName
           <span class="tooltipable" tooltipid={tooltipid} title="">
-              <span class="glyphicon glyphicon-info-sign info"></span>
+              <span class="fa fa-info-circle info"></span>
             </span>
             <div class="tooltipContent" id={tooltipid}>
               Allow users to deploy Change Requests they created themselves? Deploying is effectively applying a Change Request in the "<b>Pending deployment</b>" status.
diff --git a/datasources/src/main/elm/sources/DataSourceForm.elm b/datasources/src/main/elm/sources/DataSourceForm.elm
index c9bb89918..8d8cd996f 100644
--- a/datasources/src/main/elm/sources/DataSourceForm.elm
+++ b/datasources/src/main/elm/sources/DataSourceForm.elm
@@ -308,7 +308,7 @@ jsonPathForm httpData =
              div [ class "form-group clearfix"] [
                 label [ for "jsonpath", class "optional" ] [
                   text "JSON path"
-                , span [ class "fa fa-question-circle icon-info"] [] --, ng-mouseover "toggleInfo($event, 'show')", ng-mouseout "toggleInfo($event, 'hide')", data-toggle "popover", data-placement "right", data-content "You can also use Rudder variable expansion here. See help for URL above.",></span ] [
+                , span [ class "fa fa-question-circle icon-info", attribute "data-bs-toggle" "tooltip", attribute "data-bs-container" "body", title "You can also use Rudder variable expansion here. See help for URL above."] []
                 ]
               , div [ class "input-group" ] [
                   label [ class "input-group-addon addon has-example-help", for "jsonpath"] [text "$."]
diff --git a/datasources/src/main/elm/sources/Port.elm b/datasources/src/main/elm/sources/Port.elm
index 208dc9410..6ab0206ec 100644
--- a/datasources/src/main/elm/sources/Port.elm
+++ b/datasources/src/main/elm/sources/Port.elm
@@ -1,3 +1,4 @@
 port module Port exposing (..)
 
-port errorNotification   : String -> Cmd msg
\ No newline at end of file
+port errorNotification : String -> Cmd msg
+port initTooltips      : String -> Cmd msg
\ No newline at end of file
diff --git a/datasources/src/main/elm/sources/Update.elm b/datasources/src/main/elm/sources/Update.elm
index 062dc82cd..e3d484176 100644
--- a/datasources/src/main/elm/sources/Update.elm
+++ b/datasources/src/main/elm/sources/Update.elm
@@ -4,7 +4,7 @@ import APICalls exposing (deleteDataSource, saveDataSource)
 import Model exposing (..)
 import List.Extra
 import Messages exposing (..)
-import Port exposing (errorNotification)
+import Port exposing (..)
 import Utils exposing (errorMessage)
 
 
@@ -17,12 +17,12 @@ update msg model =
   in
   case msg of
     UpdateUI ui ->
-      ({ model | ui = ui}, Cmd.none)
+      ({ model | ui = ui}, initTooltips "")
 
     SelectDataSource dataSource ->
-      ({ model | mode = ShowDatasource dataSource (Just dataSource)}, Cmd.none)
+      ({ model | mode = ShowDatasource dataSource (Just dataSource)}, initTooltips "")
     NewDataSource ->
-      ({ model | mode = ShowDatasource newDataSource Nothing}, Cmd.none)
+      ({ model | mode = ShowDatasource newDataSource Nothing}, initTooltips "")
 
     UpdateDataSource dataSource ->
       case model.mode of
@@ -75,7 +75,7 @@ update msg model =
     GetDataSources result ->
       case result of
           Ok dataSources ->
-            ({ model | dataSources = dataSources}, Cmd.none)
+            ({ model | dataSources = dataSources}, initTooltips "")
           Err e ->
             (model, errorNotification (errorMessage e))
 
diff --git a/datasources/src/main/elm/sources/View.elm b/datasources/src/main/elm/sources/View.elm
index 5ac6d14c6..8ef3cee44 100644
--- a/datasources/src/main/elm/sources/View.elm
+++ b/datasources/src/main/elm/sources/View.elm
@@ -76,8 +76,8 @@ view model =
 
   , case model.ui.deleteModal of
       Just datasource ->
-        div [ class "modal fade datasource-modal", id "deleteModal", tabindex -1] [ -- role "dialog" ] [
-          div [ class "modal-dialog"] [ -- role "document" ] [
+        div [ class "modal fade datasource-modal", id "deleteModal", tabindex -1] [
+          div [ class "modal-dialog"] [
             div [ class "modal-content" ] [
             div [ class "modal-header" ] [
               button [ type_ "button", class "close", onClick (UpdateUI {ui | deleteModal = Nothing}) ] [
@@ -85,12 +85,12 @@ view model =
                   text "&times;"
                 ]
               ]
-            , h4 [ class "modal-title"] [
+            , h5 [ class "modal-title"] [
                 text ("Delete " ++ datasource.name)
               ]
             ]
           , div [ class "modal-body" ] [
-              h4 [ class "text-center" ] [
+              h5 [ class "text-center" ] [
                 text "Are your sure you want to delete this datasource ?"
               ]
             ]
diff --git a/datasources/src/main/resources/template/dataSourceManagement.html b/datasources/src/main/resources/template/dataSourceManagement.html
index 582107a9f..7eb567cd8 100644
--- a/datasources/src/main/resources/template/dataSourceManagement.html
+++ b/datasources/src/main/resources/template/dataSourceManagement.html
@@ -4,10 +4,9 @@
     <link data-lift="with-cached-resource" href="/toserve/datasources/rudder-datasources.css" rel="stylesheet" type="text/css">
     <script type="text/javascript" data-lift="with-cached-resource" src="/toserve/datasources/rudder-datasources.js"></script>
   </head_merge>
-  <main class="rudder-template" id="datasource" ng-controller="datasourceCtrl">
+  <main class="rudder-template" id="datasource">
   </main>
 
-<<<<<<< HEAD
   <script>
     var hasWriteRights = false;
   </script>
@@ -24,361 +23,16 @@
         , hasWriteRights : hasWriteRights
       }
       var app = Elm.DataSources.init({ node: main, flags: initValues});
-=======
-      <div class="template-sidebar sidebar-left">
-        <div class="sidebar-header">
-          <div class="header-title">
-            <h1><span>Data sources</span></h1>
-            <div class="header-buttons">
-              <button type="button" class="btn btn-success" ng-click="createNewDatasource()">Create <i class="add-icon ion ion-android-add-circle"></i></button>
-            </div>
-          </div>
-        </div>
->>>>>>> branches/rudder/7.3
 
       app.ports.errorNotification.subscribe(function(str) {
         createErrorNotification(str)
       });
+      app.ports.initTooltips.subscribe(function(str) {
+        setTimeout(function(){
+          initBsTooltips();
+        }, 400);
+      });
     })
   </script>
-
-<<<<<<< HEAD
-=======
-      </div>
-
-      <div class="template-main" ng-cloak>
-        <div class="main-container datasource-bloc" ng-if="selectedDatasource">
-          <div class="main-header">
-            <div class="header-title">
-              <h1>
-                <span ng-if="selectedDatasource.name.length>0">{{selectedDatasource.name}}</span>
-                <span ng-if="!selectedDatasource.name && selectedDatasource.isNew" style="opacity: 0.4;">New data source</span>
-                <span ng-if="!selectedDatasource.name && !selectedDatasource.isNew" style="font-style:italic; color:#777;">Unnamed</span>
-
-                <span class="badge-disabled" ng-if="!selectedDatasource.enabled"></span>
-              </h1>
-              <div class="header-buttons">
-                <div class="btn-group" role="group">
-                  <button type="button" class="btn btn-danger" ng-click="deleteDatasource()" ng-if="!selectedDatasource.isNew">Delete <i class="fa fa-times-circle"></i> </button>
-                </div>
-                <div class="btn-group" role="group">
-                  <button type="button" class="btn btn-default" ng-hide="selectedDatasource.isNew" ng-click="toggleEnabled()">{{selectedDatasource.enabled ? 'Disable' : 'Enable'}} <i class="fa" ng-class="{'fa-ban' : selectedDatasource.enabled, 'fa-circle-o' : !selectedDatasource.enabled}"></i></button>
-                </div>
-                <div class="btn-group pull-right" role="group">
-                  <lift:authz role="administration_write">
-                    <button type="button" class="btn btn-default" ng-click="selectDatasource(selectedDatasource.id)" ng-if="!selectedDatasource.isNew">Reset <i class="fa fa-rotate-left"></i></button>
-                    <button type="button" class="btn btn-default" ng-click="createNewDatasource()" ng-if="selectedDatasource.isNew">Reset <i class="fa fa-rotate-left"></i></button>
-                    <button type="button" class="btn btn-success" ng-click="saveDatasource()" ng-disabled="!forms.datasourceForm.$valid" >Save <i class="fa fa-download"></i></i></button>
-                  </lift:authz>
-                </div>
-              </div>
-            </div>
-            <div class="header-description" ng-if="selectedDatasource.description.length > 0">
-              <p>{{selectedDatasource.description}}</p>
-            </div>
-          </div>
-
-          <div class="main-navbar"><ul class="ui-tabs-nav "></ul></div>
-
-          <div class="main-details">
-            <form class="bloc-body show-details" name="forms.datasourceForm">
-              <div class="form-group">
-                <label for="name">Name</label>
-                <input type="text" class="form-control" id="name" ng-value="selectedDatasource.name" name="datasourceName" required ng-model="selectedDatasource.name" ng-change="updateKeyName(selectedDatasource.name)">
-                <span class="text-danger" ng-show="forms.datasourceForm.datasourceName.$error.required && forms.datasourceForm.datasourceName.$dirty">Name is required</span>
-              </div>
-              <div class="form-group">
-                <label for="key">Key name</label>
-                <div class="group-warning" ng-show="selectedDatasource.isNew"><span class="fa fa-info-circle"></span>Key name cannot be modified after creation.</div>
-                <input type="text" class="form-control has-example-help" id="key" name="datasourceKey" ng-value="selectedDatasource.id" required ng-model="selectedDatasource.id" ng-if="selectedDatasource.isNew" ng-change="updateKeyName(selectedDatasource.id)">
-                <input type="text" disabled class="form-control has-example-help" ng-if="!selectedDatasource.isNew" ng-value="selectedDatasource.id" ng-model="selectedDatasource.id"/>
-                <div class="example-help">
-                  The key name will be used to access imported data, such as <pre>${node.properties[{{selectedDatasource.id ? selectedDatasource.id : "key_name"}}]}</pre>
-                </div>
-                <span class="text-danger" ng-show="forms.datasourceForm.datasourceKey.$error.required && forms.datasourceForm.datasourceKey.$dirty">Key name is required</span>
-              </div>
-              <div class="form-group">
-                <label for="description" class="optional">Description</label>
-                <textarea class="form-control" id="description" ng-value="selectedDatasource.description" ng-model="selectedDatasource.description"></textarea>
-              </div>
-              <div class="form-group">
-                <label class="bloc">Type</label>
-                <div class="btn-group" data-toggle="buttons">
-                  <label class="btn btn-default active disabled">HTTP</label>
-                </div>
-              </div>
-              <div class="form-group">
-                <label class="bloc">Method</label>
-                <div class="btn-group">
-                  <label class="btn btn-default btn-radio" for="get" ng-class="{'active':selectedDatasource.type.parameters.requestMethod=='GET'}">
-                    <input type="radio" id="get" ng-model="selectedDatasource.type.parameters.requestMethod" value="GET"> GET
-                  </label>
-                  <label class="btn btn-default btn-radio" for="post" ng-class="{'active':selectedDatasource.type.parameters.requestMethod=='POST'}">
-                    <input type="radio" id="post" ng-model="selectedDatasource.type.parameters.requestMethod" value="POST"> POST
-                  </label>
-                </div>
-              </div>
-              <div class="form-group" ng-show="selectedDatasource.type.parameters.requestMethod=='POST'">
-                <label><a ng-click="toggleWell($event)">Parameters<span class="fa fa-chevron-right"></span></a></label>
-                <div class="well" style="display:none">
-                  <div class="group-warning" ng-hide="selectedDatasource.type.parameters.params.length>0"><span class="fa fa-info-circle"></span>No parameters defined for this data source.</div>
-                  <div class="input-group group-header" ng-repeat="param in selectedDatasource.type.parameters.params track by $index">
-                    <input type="text" class="form-control" ng-model="param.name">
-                    <span class="input-group-addon">:</span>
-                    <input type="text" class="form-control" ng-model="param.value">
-                    <span class="input-group-btn">
-                      <button class="btn btn-danger" type="button" ng-click="removeObj(selectedDatasource.type.parameters.params, $index)"><span class="fa fa-minus"></span></button>
-                    </span>
-                  </div>
-                  <div class="new-headers">
-                    <div class="bs-callout bs-callout-info text-info">Don't forget to click on the green plus to add the new parameter!</div>
-                    <div class="input-group group-header">
-                      <input type="text" class="form-control " ng-value="selectedDatasource.newParam.name" ng-model="selectedDatasource.newParam.name" placeholder="name">
-                      <span class="input-group-addon">:</span>
-                      <input type="text" class="form-control " ng-value="selectedDatasource.newParam.value" ng-model="selectedDatasource.newParam.value" placeholder="value">
-                      <span class="input-group-btn">
-                        <button class="btn btn-success " type="button" ng-click="addNewObj(selectedDatasource.type.parameters.params,selectedDatasource.newParam)"><span class="fa fa-plus"></span></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="form-group clearfix">
-                <label for="url">URL</label>
-                <input type="text" class="form-control has-example-help" id="url" ng-value="selectedDatasource.type.parameters.url" ng-model="selectedDatasource.type.parameters.url">
-                <div class="example-help">
-                  You can use Rudder variable expansion (<pre>${rudder.node.xxx}, ${rudder.param.xxx}, ${node.properties[xxx]}</pre>) here. They will be replaced by their values for each node at the time the HTTP query is run.
-                </div>
-              </div>
-              <div class="form-group">
-                <label class="optional-link"><a ng-click="toggleHeaders('headers',$event);"><b>Headers</b><span class="fa fa-chevron-right"></span></a></label>
-                <div id="headers" class="well" style="display:none;">
-                  <div class="group-warning" ng-hide="selectedDatasource.type.parameters.headers.length>0"><span class="fa fa-info-circle"></span>No headers defined for this data source.</div>
-                  <div class="input-group group-header" ng-repeat="header in selectedDatasource.type.parameters.headers track by $index">
-                    <input type="text" class="form-control" ng-model="header.name">
-                    <span class="input-group-addon">:</span>
-                    <input type="text" class="form-control" ng-model="header.value">
-                    <span class="input-group-btn">
-                      <button class="btn btn-danger" type="button" ng-click="removeObj(selectedDatasource.type.parameters.headers, $index)"><span class="fa fa-minus"></span></button>
-                    </span>
-                  </div>
-                  <div id="new-headers" class="new-headers">
-                    <div class="bs-callout bs-callout-info text-info">Don't forget to click on the green plus to add the new header!</div>
-                    <div class="input-group group-header">
-                      <input type="text" class="form-control" id="new-header" ng-value="selectedDatasource.newHeader.name" ng-model="selectedDatasource.newHeader.name" placeholder="name">
-                      <span class="input-group-addon">:</span>
-                      <input type="text" class="form-control" ng-value="selectedDatasource.newHeader.value" ng-model="selectedDatasource.newHeader.value" placeholder="value">
-                      <span class="input-group-btn">
-                        <button class="btn btn-success" type="button" ng-click="addNewObj(selectedDatasource.type.parameters.headers,selectedDatasource.newHeader)"><span class="fa fa-plus"></span></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="form-group clearfix">
-                <label for="jsonpath" class="optional">
-                  JSON path
-                  <span class="fa fa-question-circle icon-info" ng-mouseover="toggleInfo($event, 'show')" ng-mouseout="toggleInfo($event, 'hide')" data-toggle="popover" data-placement="right" data-content="You can also use Rudder variable expansion here. See help for URL above."></span>
-                </label>
-                <div class="input-group">
-                  <label class="input-group-addon addon has-example-help" for="jsonpath">$.</label>
-                  <input type="text" class="form-control has-example-help" id="jsonpath" ng-value="selectedDatasource.type.parameters.path" ng-model="selectedDatasource.type.parameters.path">
-                </div>
-                <div class="example-help">
-                  When a JSON document is returned, you can define a JSON path expression (see <a href="https://github.com/jayway/JsonPath/#getting-started" target="_blank">documentation</a>) to select only a sub-part of the document as the actual data to use as a node property.
-                </div>
-              </div>
-              <div class="form-group">
-                <label><a ng-click="toggleWell($event)">Advanced options <span class="fa fa-chevron-right"></span></a></label>
-                <div class="well options" style="display:none">
-                  <ul class="form-group ">
-                    <li class="rudder-form">
-                      <div class="input-group">
-                        <label class="input-group-addon" for="checkSsl">
-                          <input type="checkbox" id="checkSsl" ng-model="selectedDatasource.type.parameters.checkSsl" ng-true-value="false" ng-false-value="true"/>
-                          <label for="checkSsl" class="label-radio">
-                            <span class="ion ion-checkmark-round"></span>
-                          </label>
-                          <span class="ion ion-checkmark-round check-icon"></span>
-                        </label>
-                        <label class="form-control" for="checkSsl">
-                          Ignore SSL certificate validation
-                        </label>
-                      </div>
-                    </li>
-                  </ul>
-                  <label>HTTP request timeout</label>
-                  <div class="input-group group-update-frequency">
-                    <input type="number" class="form-control " id="requesttimeout-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.requestTimeout.minute">
-                    <label for="requesttimeout-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.requestTimeout.minute<2}">s</span></label>
-                    <input type="number" class="form-control " id="requesttimeout-seconds" ng-min="0" ng-model="selectedDatasource.modifiedTimes.requestTimeout.second">
-                    <label for="requesttimeout-seconds" class="input-group-addon">second<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.requestTimeout.second<2}">s</span></label>
-                  </div>
-                  <label>Data source update max duration</label>
-                  <div class="input-group group-update-frequency">
-                    <input type="number" class="form-control " id="updatetimeout-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.updateTimeout.minute">
-                    <label for="updatetimeout-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.updateTimeout.minute<2}">s</span></label>
-                    <input type="number" class="form-control " id="updatetimeout-seconds" ng-min="0" ng-model="selectedDatasource.modifiedTimes.updateTimeout.second">
-                    <label for="updatetimeout-seconds" class="input-group-addon">second<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.updateTimeout.second<2}">s</span></label>
-                  </div>
-                  <label>Maximum number of parallel requests</label>
-                  <div class="input-group group-update-frequency">
-                    <input type="number" class="form-control " id="maxParallelReq" ng-min="0" ng-model="selectedDatasource.type.parameters.maxParallelReq">
-                  </div>
-                </div>
-              </div>
-              <div class="form-group">
-                <label class="bloc"><a ng-click="toggleWell($event)">Update triggers<span class="fa fa-chevron-right"></span></a></label>
-                <div class="well" style="display:none">
-                  <ul class="form-group ">
-                    <li class="rudder-form">
-                      <div class="input-group">
-                        <label class="input-group-addon" for="neverUpdate">
-                          <input type="checkbox" id="neverUpdate" ng-model="selectedDatasource.runParameters.schedule.type" ng-true-value="'scheduled'" ng-false-value="'notscheduled'">
-                          <label for="neverUpdate" class="label-radio">
-                            <span class="ion ion-checkmark-round"></span>
-                          </label>
-                          <span class="ion ion-checkmark-round check-icon"></span>
-                        </label>
-                        <label class="form-control" for="neverUpdate">
-                          Update periodically - {{selectedDatasource.runParameters.schedule.type}}
-                        </label>
-                      </div>
-                    </li>
-                  </ul>
-                  <div class="input-group group-update-frequency" ng-hide="selectedDatasource.runParameters.schedule.type=='notscheduled'">
-                    <input type="number" class="form-control " id="updateFrequency-hours" ng-min="0" ng-model="selectedDatasource.modifiedTimes.schedule.hour">
-                    <label for="updateFrequency-hours" class="input-group-addon">hour<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.schedule.hour<2}">s</span></label>
-                    <input type="number" class="form-control " id="updateFrequency-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.schedule.minute">
-                    <label for="updateFrequency-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.schedule.minute<2}">s</span></label>
-                  </div>
-                  <ul class="form-group ">
-                    <li class="rudder-form">
-                      <div class="input-group">
-                        <label class="input-group-addon" for="onGeneration">
-                          <input type="checkbox" id="onGeneration" ng-model="selectedDatasource.runParameters.onGeneration" ng-checked="selectedDatasource.runParameters.onGeneration">
-                          <label for="onGeneration" class="label-radio">
-                            <span class="ion ion-checkmark-round"></span>
-                          </label>
-                          <span class="ion ion-checkmark-round check-icon"></span>
-                        </label>
-                        <label class="form-control" for="onGeneration">
-                          Update when a policy generation starts
-                        </label>
-                      </div>
-                    </li>
-                    <li class="rudder-form">
-                      <div class="input-group">
-                        <label class="input-group-addon" for="onNewNode">
-                          <input type="checkbox" id="onNewNode" ng-model="selectedDatasource.runParameters.onNewNode" ng-checked="selectedDatasource.runParameters.onNewNode">
-                          <label for="onNewNode" class="label-radio">
-                            <span class="ion ion-checkmark-round"></span>
-                          </label>
-                          <span class="ion ion-checkmark-round check-icon"></span>
-                        </label>
-                        <label class="form-control" for="onNewNode">
-                          Update when a new node is accepted
-                        </label>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div class="form-group">
-                <label class="bloc"><a ng-click="toggleWell($event)">What to do when a query for a Node returns a 404 error?<span class="fa fa-chevron-right"></span></a></label>
-                <div class="well" style="display:none">
-                  <ul class="form-group ">
-                    <li class="rudder-form">
-                      <div class="input-group">
-                        <label class="input-group-addon" for="onMissingDelete">
-                          <input type="radio" id="onMissingDelete" ng-model="selectedDatasource.type.parameters.onMissing.name" value="delete">
-                          <label for="onMissingDelete" class="label-radio">
-                            <span class="ion ion-checkmark-round"></span>
-                          </label>
-                          <span class="ion ion-checkmark-round check-icon"></span>
-                        </label>
-                        <label class="form-control" for="onMissingDelete">
-                          Delete the node property corresponding to that data source (default behavior)
-                        </label>
-                      </div>
-                    </li>
-                  </ul>
-                  <ul class="form-group ">
-                    <li class="rudder-form">
-                      <div class="input-group">
-                        <label class="input-group-addon" for="onMissingNoChange">
-                          <input type="radio" id="onMissingNoChange" ng-model="selectedDatasource.type.parameters.onMissing.name" value="noChange">
-                          <label for="onMissingNoChange" class="label-radio">
-                            <span class="ion ion-checkmark-round"></span>
-                          </label>
-                          <span class="ion ion-checkmark-round check-icon"></span>
-                        </label>
-                        <label class="form-control" for="onMissingNoChange">
-                          Do not change the node property corresponding to that data source
-                        </label>
-                      </div>
-                    </li>
-                    <li class="rudder-form">
-                      <div class="input-group">
-                        <label class="input-group-addon" for="onMissingDefaultValue">
-                          <input type="radio" id="onMissingDefaultValue" ng-model="selectedDatasource.type.parameters.onMissing.name" value="defaultValue">
-                          <label for="onMissingDefaultValue" class="label-radio">
-                            <span class="ion ion-checkmark-round"></span>
-                          </label>
-                          <span class="ion ion-checkmark-round check-icon"></span>
-                        </label>
-                        <label class="form-control" for="onMissingDefaultValue">
-                          Set the node property corresponding to the data source to the following value:
-                        </label>
-                        <div class="input-group group-onmissing-value" ng-hide="selectedDatasource.type.parameters.onMissing.name!='defaultValue'">
-                          <label for="onMissingDefaultValueValue" class="form-control">(string or JSON allowed, empty is equivalent to deleting the property)</label>
-                          <textarea class="form-control " id="onMissingDefaultValueValue" ng-model="selectedDatasource.type.parameters.onMissing.value"></textarea>
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </form>
-          </div>
-        </div>
-
-        <div class="jumbotron jumbotron-datasource" ng-if="!selectedDatasource">
-          <h1>Node properties data sources</h1>
-          <p>
-            Nodes have properties that can be used to create groups or in techniques and directives parameters.
-            These properties are <b>key/value</b> pairs, where values can be a simple string or a well formed JSON document.
-          </p>
-          <p>
-            You can automatically import node properties by creating data sources that will query a third party REST API to retrieve data and it in a given property key for each node it's available for.
-          </p>
-          <p><button class="btn btn-success btn-lg" type="button" ng-click="createNewDatasource()">Create <i class="add-icon ion ion-android-add-circle"></i></button></p>
-        </div>
-
-      </div>
-
-
-    <div class="modal fade datasource-modal" id="deleteModal" tabindex="-1" role="dialog">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-            <h4 class="modal-title">Delete {{selectedDatasource.name}}</h4>
-          </div>
-          <div class="modal-body">
-            <h4 class="text-center">Are your sure you want to delete this datasource ?</h4>
-          </div>
-          <div class="modal-footer">
-            <lift:authz role="administration_write">
-              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-              <button type="button" class="btn btn-danger" ng-click="confirmDeleteDatasource()">Delete</button>
-            <lift:authz role="administration_write">
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
->>>>>>> branches/rudder/7.3
 </lift:surround>
 
diff --git a/datasources/src/main/resources/toserve/datasources/rudder-datasources.css b/datasources/src/main/resources/toserve/datasources/rudder-datasources.css
index 76b50d938..0037d76e4 100644
--- a/datasources/src/main/resources/toserve/datasources/rudder-datasources.css
+++ b/datasources/src/main/resources/toserve/datasources/rudder-datasources.css
@@ -182,8 +182,8 @@ label.optional.option-span > span:after{
 .datasource-bloc .bloc-body .btn-radio.active{
   cursor:default;
   color:#fff;
-  background-color: #9bc832;
-  border-color: #7b9e28;
+  background-color: #13BEB7;
+  border-color: #109f9a;
   box-shadow: none;
 }
 .datasource-bloc .bloc-body .btn-radio.active[disabled]{
@@ -381,9 +381,6 @@ ul > li.rudder-form > .input-group .input-group-addon{
 ul.list-sm > li.rudder-form > .input-group .input-group-addon{
   padding: 0 7px;
 }
-ul > li.rudder-form > .input-group label.form-control .glyphicon.info{
-  top:3px;
-}
 ul > li.rudder-form:last-child > .input-group label.form-control{
   border-bottom-right-radius:4px;
 }
diff --git a/openscap/src/main/scala/com/normation/plugins/openscappolicies/extension/OpenScapNodeDetailsExtension.scala b/openscap/src/main/scala/com/normation/plugins/openscappolicies/extension/OpenScapNodeDetailsExtension.scala
index 27c8f2186..6a6f53993 100644
--- a/openscap/src/main/scala/com/normation/plugins/openscappolicies/extension/OpenScapNodeDetailsExtension.scala
+++ b/openscap/src/main/scala/com/normation/plugins/openscappolicies/extension/OpenScapNodeDetailsExtension.scala
@@ -47,7 +47,7 @@ class OpenScapNodeDetailsExtension(
                   <h3 class="page-title">OpenSCAP reporting</h3>
                   <div class="col-xs-12 callout-fade callout-info">
                     <div class="marker">
-                      <span class="glyphicon glyphicon-info-sign"></span>
+                      <span class="fa fa-info-circle"></span>
                     </div>
                     <p>That tab gives access to OpenSCAP report configured for that node.</p>
                     <br/>
@@ -106,7 +106,7 @@ class OpenScapNodeDetailsExtension(
         <h3 class="page-title">OpenSCAP reporting</h3>
         <div class="col-xs-12 callout-fade callout-info">
           <div class="marker">
-            <span class="glyphicon glyphicon-info-sign"></span>
+            <span class="fa fa-info-circle"></span>
           </div>
           <p>That tab gives access to OpenSCAP report configured for that node. Below is the raw report as sent by the node.</p>
           <br/>
diff --git a/user-management/src/main/elm/sources/View.elm b/user-management/src/main/elm/sources/View.elm
index 6808ec4da..0c5775154 100644
--- a/user-management/src/main/elm/sources/View.elm
+++ b/user-management/src/main/elm/sources/View.elm
@@ -35,32 +35,27 @@ view model =
 
 showDeleteModal : String -> Html Msg
 showDeleteModal username =
-                  div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-                  [
-                      div [class "modal-dialog"]
-                      [
-                          div [class "modal-content"]
-                          [
-                              div [class "modal-header"]
-                              [
-                                div [class "close", attribute "data-dismiss" "modal", onClick CloseDeleteModal][i [class "fa fa-times"][]]
-                              , h4 [class "modal-title"][text "Delete a user"]
-                              ]
-                            , div [class "modal-body"]
-                              [
-                                div [class "row"]
-                                [
-                                  h4 [class "col-lg-12 col-sm-12 col-xs-12 text-center"][text "Are you sure you want to delete user " , b[][text username] , text "?"]
-                                ]
-                              ]
-                            , div [class "modal-footer"]
-                              [
-                                button [class "btn btn-default", onClick CloseDeleteModal][text "Cancel"]
-                              , button [class "btn btn-danger", onClick (CallApi ( deleteUser username ))][text "Delete"]
-                              ]
-                          ]
-                      ]
-                  ]
+  div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+  [ div [class "modal-backdrop fade show", onClick CloseDeleteModal][]
+  , div [class "modal-dialog"]
+    [ div [class "modal-content"]
+      [ div [class "modal-header"]
+        [ h5 [class "modal-title"][text "Delete a user"]
+        , button [type_ "button", class "btn-close", attribute "data-bs-dismiss" "modal", attribute "aria-label" "Close", onClick CloseDeleteModal][]
+        ]
+      , div [class "modal-body"]
+        [ div [class "row"]
+          [ h5 [class "text-center"][text "Are you sure you want to delete user " , b[][text username] , text "?"]
+          ]
+        ]
+      , div [class "modal-footer"]
+        [ button [class "btn btn-default", onClick CloseDeleteModal][text "Cancel"]
+        , button [class "btn btn-danger", onClick (CallApi ( deleteUser username ))][text "Delete"]
+        ]
+      ]
+    ]
+  ]
+
 hashPasswordMenu : Bool -> Html Msg
 hashPasswordMenu isHashedPasswd =
     let
@@ -283,7 +278,7 @@ displayUsersConf model u =
                     ]
                     , div [ class "callout-fade callout-info" ]
                     [
-                          div [ class "marker marker" ] [ span [ class "glyphicon glyphicon-info-sign" ] [] ]
+                          div [ class "marker marker" ] [ span [ class "fa fa-info-circle" ] [] ]
                         , text msgProvider
                         , lstOfExtProviders
                         , (displayRoleListOverrideWarning model.roleListOverride)
diff --git a/user-management/src/main/resources/toserve/usermanagement/user-management.css b/user-management/src/main/resources/toserve/usermanagement/user-management.css
index 86224d50f..1fedabf49 100644
--- a/user-management/src/main/resources/toserve/usermanagement/user-management.css
+++ b/user-management/src/main/resources/toserve/usermanagement/user-management.css
@@ -156,7 +156,7 @@ h3 {
   width            : 26px;
   height           : 26px;
   border-radius    : 3px;
-  background-color : #9bc832;
+  background-color : #13BEB7;
   display          : inline-flex;
   align-items      : center;
   font-size        : 20px;
@@ -401,7 +401,7 @@ h3 {
 
 .addBtn {
   margin           : 5px 0 0 10px;
-  background-color : #9bc832;
+  background-color : #13BEB7;
   color            : white;
   padding          : 2px;
   font-size        : 10;