Merge branch 'bug_23790/since_the_bootstrap_5_update_modals_no_longer…

…_open_pr'
Normation · Dec 4, 2023 · 493bc2d · 493bc2d
2 parents b156c15 + f5e9d8a
commit 493bc2d
Show file tree

Hide file tree

Showing 53 changed files with 232 additions and 356 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/ViewModals.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/ViewModals.elm
@@ -25,7 +25,7 @@ displayModals model =
             EditAccount a -> ( String.isEmpty account.name , String.isEmpty account.name , (a.name/=account.name && List.member account.name (List.map .name model.accounts)) )
             _ -> ( False , False , False )
 
-    modalClass = if model.ui.modalState == NoModal then "" else " in"
+    modalClass = if model.ui.modalState == NoModal then "" else " show"
 
     (modalTitle, btnTxt, btnClass) = case model.ui.modalState of
        NoModal       -> ( "" , "Save", "default")
@@ -120,14 +120,12 @@ displayModals model =
               )
   in
     div [class ("modal fade " ++ modalClass)]
-    [ div [class "modal-backdrop fade in", onClick (ToggleEditPopup NoModal)][]
+    [ div [class "modal-backdrop fade show", onClick (ToggleEditPopup NoModal)][]
     , div [class "modal-dialog"]
       [ div [class "modal-content"]
         [ div [class "modal-header"]
-          [ div [class "close", attribute "data-bs-dismiss" "modal", onClick (ToggleEditPopup NoModal)]
-            [ span[][text (String.fromChar (Char.fromCode 215))]
-            ]
-          , h4 [class "modal-title"] [text modalTitle]
+          [ h5 [class "modal-title"] [text modalTitle]
+          , button [type_ "button", class "btn-close", attribute "data-bs-dismiss" "modal", attribute "aria-label" "Close"][]
           ]
         , div [class "modal-body"]
           [ popupBody
@@ -152,17 +150,15 @@ displayCopy model =
       t = case model.ui.copyState of
           NoCopy -> ""
           Token string -> string
-      modalClass = if model.ui.copyState == NoCopy then "" else " in"
+      modalClass = if model.ui.copyState == NoCopy then "" else " show"
     in
         div [class ("modal fade" ++ modalClass)]
-        [ div [class "modal-backdrop fade in", onClick (CloseCopyPopup)][]
+        [ div [class "modal-backdrop fade show", onClick (CloseCopyPopup)][]
         , div [class "modal-dialog"]
           [ div [class "modal-content"]
             [ div [class "modal-header"]
-              [ div [class "close", attribute "data-bs-dismiss" "modal", onClick (CloseCopyPopup)]
-                [ span[][text (String.fromChar (Char.fromCode 215))]
-                ]
-              , h4 [class "modal-title"] [text "Copy the token"]
+              [ h5 [class "modal-title"] [text "Copy the token"]
+              , button [type_ "button", class "btn-close", attribute "data-bs-dismiss" "modal", attribute "aria-label" "Close"][]
               ]
             , div [class "modal-body"]
               [ div[]

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm
@@ -406,7 +406,7 @@ view model =
             div [ class "modal-dialog" ] [
               div [ class "modal-content" ]  [-- uib-modal-transclude="">
                 div [ class "modal-header ng-scope" ] [
-                  h3 [ class "modal-title" ] [ text "Delete Technique"]
+                  h5 [ class "modal-title" ] [ text "Delete Technique"]
                 ]
               , div [ class "modal-body" ] [
                   text ("Are you sure you want to Delete Technique '")

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/NodeProperties/ViewUtils.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/NodeProperties/ViewUtils.elm
@@ -249,12 +249,12 @@ modalDelete model =
   case model.ui.modalState of
     NoModal -> text ""
     Deletion name ->
-      div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-      [ div [class "modal-backdrop fade in"][]
+      div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+      [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
       , div [ class "modal-dialog" ]
         [ div [ class "modal-content" ]
           [ div [ class "modal-header ng-scope" ]
-            [ h3 [ class "modal-title" ] [ text "Delete property"] ]
+            [ h5 [ class "modal-title" ] [ text "Delete property"] ]
           , div [ class "modal-body" ]
             [ text ("Are you sure you want to delete property '"++ name ++"'?") ]
           , div [ class "modal-footer" ]

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/View.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/View.elm
@@ -167,12 +167,12 @@ view model =
               , False
               )
         in
-          div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-          [ div [class "modal-backdrop fade in"][]
+          div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+          [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
           , div [ class "modal-dialog" ] [
               div [ class "modal-content" ] [
                 div [ class "modal-header ng-scope" ] [
-                  h3 [ class "modal-title" ] [ text "Delete Rule"]
+                  h5 [ class "modal-title" ] [ text "Delete Rule"]
                 ]
               , div [ class "modal-body" ]
                 [ h4 [class "text-center"][text ("Are you sure you want to Delete rule '"++ rule.name ++"'?")]
@@ -203,12 +203,12 @@ view model =
               )
 
         in
-          div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-          [ div [class "modal-backdrop fade in"][]
+          div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+          [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
           , div [ class "modal-dialog" ] [
               div [ class "modal-content" ]  [
                 div [ class "modal-header ng-scope" ] [
-                  h3 [ class "modal-title" ] [ text (txtDisable ++" Rule")]
+                  h5[ class "modal-title" ] [ text (txtDisable ++" Rule")]
                 ]
               , div [ class "modal-body" ]
                 [ h4 [class "text-center"][text ("Are you sure you want to "++ String.toLower txtDisable ++" rule '"++ rule.name ++"'?")]
@@ -228,12 +228,12 @@ view model =
             ]
           ]
       DeletionValidationCat category ->
-        div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-         [ div [class "modal-backdrop fade in"][]
+        div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+         [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
          , div [ class "modal-dialog" ] [
              div [ class "modal-content" ] [
                div [ class "modal-header ng-scope" ] [
-                 h3 [ class "modal-title" ] [ text "Delete category"]
+                 h5 [ class "modal-title" ] [ text "Delete category"]
                ]
              , div [ class "modal-body" ] [
                  h4 [class "text-center"][text ("Are you sure you want to delete category '"++ category.name ++"'?")]
@@ -253,12 +253,12 @@ view model =
         let
           action = if creation then "Create" else "Update"
         in
-          div [ tabindex -1, class "modal fade in", style "z-index" "1050", style "display" "block" ]
-          [ div [class "modal-backdrop fade in"][]
+          div [ tabindex -1, class "modal fade show", style "z-index" "1050", style "display" "block" ]
+          [ div [class "modal-backdrop fade show", onClick (ClosePopup Ignore)][]
           , div [ class "modal-dialog" ]
             [ div [ class "modal-content" ]
               [ div [ class "modal-header ng-scope" ]
-                [ h3 [ class "modal-title" ] [ text (action ++" Rule")]
+                [ h5 [ class "modal-title" ] [ text (action ++" Rule")]
                 ]
               , div [ class "modal-body" ]
                 [ h4 [class "text-center"]

diff --git a/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js b/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js
@@ -60,11 +60,7 @@ function escapeHTML (string) {
 }
 
 function callPopupWithTimeout(timeout, popupName){
-  setTimeout("createPopup('"+popupName+"')", timeout);
-}
-
-function createPopup(popupName){
-  $('#'+popupName).bsModal('show');
+  setTimeout("initBsModal('"+popupName+"')", timeout);
 }
 
 function reverseErrorDetails(){
@@ -146,14 +142,6 @@ function jqCheckAll( id, name )
     });
   });
 
-  // Logout
-  $(function() {
-    $('#logout').click(function() {
-      $('#ModalLogOut').bsModal('show');
-      return false;
-    });
-  });
-
 function processKey(e , buttonId){
     if (null == e)
         e = window.event ;
@@ -853,7 +841,18 @@ function initBsTooltips(){
 function removeBsTooltips(){
   document.querySelectorAll(".tooltip").forEach(e => e.remove());
 }
-//tooltip.hide()
+function initBsModal(modalName){
+  var selector = document.querySelector('#' + modalName);
+  var modal    = bootstrap.Modal.getInstance(selector);
+  var instance = (modal === null || modal === undefined) ? new bootstrap.Modal('#'+modalName) : modal;
+  instance.show();
+}
+function hideBsModal(modalName){
+  var selector = document.querySelector('#' + modalName);
+  var modal    = bootstrap.Modal.getInstance(selector);
+  if(modal === null || modal === undefined) return false;
+  modal.hide();
+}
 function initBsTabs(){
   var triggerTabList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
   triggerTabList.forEach(function (triggerEl) {

diff --git a/...ces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/comet/AsyncDeployment.scala b/...ces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/comet/AsyncDeployment.scala
@@ -166,7 +166,7 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
               }
             }
 
-            val callback = JsRaw("$('#errorDetailsDialog').bsModal('show');") & SetHtml("errorDetailsMessage", popupContent)
+            val callback = JsRaw("initBsModal('errorDetailsDialog');") & SetHtml("errorDetailsMessage", popupContent)
 
             commonStatement(
               start,
@@ -185,7 +185,7 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
   }
 
   private[this] def closePopup(): JsCmd = {
-    JsRaw("""$('#generatePoliciesDialog').hide();""")
+    JsRaw("""hideBsModal('generatePoliciesDialog')""")
   }
 
   private[this] def fullPolicyGeneration:      NodeSeq = {
@@ -207,7 +207,7 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
     </lift:authz>
   }
   private[this] def showGeneratePoliciesPopup: NodeSeq = {
-    val callback = JsRaw("$('#generatePoliciesDialog').bsModal('show');")
+    val callback = JsRaw("initBsModal('generatePoliciesDialog')")
     <lift:authz role="deployment_write"> {
       SHtml.a(
         Text("Regenerate all policies"),
@@ -239,16 +239,12 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
   }
 
   private[this] def errorPopup = {
-    <div class="modal fade" data-keyboard="true" tabindex="-1" id="errorDetailsDialog">
-      <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div class="modal fade" tabindex="-1" id="errorDetailsDialog" data-bs-backdrop="false">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <div class="close" data-bs-dismiss="modal">
-                    <span aria-hidden="true">&times;</span>
-                    <span class="visually-hidden">Close</span>
-                    </div>
-                    <h4 class="modal-title">Error</h4>
+                    <h5 class="modal-title">Error</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row space-bottom">
@@ -265,22 +261,18 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                 </div>
-            </div><!-- /.modal-content -->
-        </div><!-- /.modal-dialog -->
+            </div>
+        </div>
       </div>
   }
 
   private[this] def generatePoliciesPopup = {
-    <div class="modal fade" data-keyboard="true" tabindex="-1" id="generatePoliciesDialog">
-      <div class="modal-backdrop fade in" style="height: 100%;"></div>
+    <div class="modal fade" tabindex="-1" id="generatePoliciesDialog" aria-hidden="true" data-bs-backdrop="false" data-bs-dismiss="modal">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <div class="close" data-bs-dismiss="modal">
-              <span aria-hidden="true">&times;</span>
-              <span class="visually-hidden">Close</span>
-            </div>
-            <h4 class="modal-title">Regenerate Policies</h4>
+            <h5 class="modal-title">Regenerate Policies</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
             <div class="row space-bottom">
@@ -295,8 +287,8 @@ class AsyncDeployment extends CometActor with CometListener with Loggable {
             <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
             {fullPolicyGeneration}
           </div>
-        </div><!-- /.modal-content -->
-      </div><!-- /.modal-dialog -->
+        </div>
+      </div>
     </div>
   }
 }
diff --git a/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala b/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala
@@ -383,7 +383,7 @@ class DirectiveEditForm(
 
   private[this] def clonePopup(): JsCmd = {
     SetHtml("basePopup", newCreationPopup(technique, activeTechnique)) &
-    JsRaw(s""" createPopup("basePopup"); """)
+    JsRaw(s""" initBsModal("basePopup"); """)
   }
 
   ////////////// Callbacks //////////////
@@ -805,23 +805,23 @@ class DirectiveEditForm(
             if (workflowService.needExternalValidation()) {
               (
                 (crId: ChangeRequestId) => onSuccessCallback(Right(crId)),
-                (xml: NodeSeq) => JsRaw("$('#basePopup').bsModal('hide');") & onFailure()
+                (xml: NodeSeq) => JsRaw("hideBsModal('basePopup');") & onFailure()
               )
             } else {
               val success = {
                 if (action == DGModAction.Delete) {
                   val nSeq = <style>#policyConfiguration{{height: initial !important;}}</style>
                   (_: ChangeRequestId) =>
-                    JsRaw("$('#basePopup').bsModal('hide');") & onRemoveSuccessCallBack() & SetHtml(htmlId_policyConf, nSeq) &
+                    JsRaw("hideBsModal('basePopup');") & onRemoveSuccessCallBack() & SetHtml(htmlId_policyConf, nSeq) &
                     successNotification("Directive successfully deleted")
                 } else { (_: ChangeRequestId) =>
-                  JsRaw("$('#basePopup').bsModal('hide');") & successNotification("") & onSuccessCallback(Left(newDirective))
+                  JsRaw("hideBsModal('basePopup');") & successNotification("") & onSuccessCallback(Left(newDirective))
                 }
               }
 
               (
                 success,
-                (xml: NodeSeq) => JsRaw("$('#basePopup').bsModal('hide');") & onFailure()
+                (xml: NodeSeq) => JsRaw("hideBsModal('basePopup');") & onFailure()
               )
             }
           }
@@ -842,7 +842,7 @@ class DirectiveEditForm(
             popup.onSubmit()
           case Some(_) =>
             SetHtml("basePopup", popup.popupContent()) &
-            JsRaw("""createPopup("basePopup")""")
+            JsRaw("""initBsModal("basePopup")""")
         }
     }
   }

diff --git a/...rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala b/...rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala
@@ -176,17 +176,13 @@ class NodeGroupCategoryForm(
 
     if (parentCategory.isDefined && _nodeGroupCategory.children.isEmpty && _nodeGroupCategory.items.isEmpty) {
       val popupContent = {
-        <div class="modal-backdrop fade in" style="height: 100%;"></div>
-           <div class="modal-dialog">
+        <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
-                 <div class="close" data-bs-dismiss="modal">
-                   <span aria-hidden="true">&times;</span>
-                   <span class="visually-hidden">Close</span>
-                 </div>
-                 <h4 class="modal-title text-start">
+                 <h5 class="modal-title text-start">
                    Delete a group category
-                 </h4>
+                 </h5>
+                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
@@ -206,7 +202,7 @@ class NodeGroupCategoryForm(
       }
       SHtml.ajaxSubmit(
         "Delete",
-        () => SetHtml("basePopup", popupContent) & JsRaw("""createPopup("basePopup")"""),
+        () => SetHtml("basePopup", popupContent) & JsRaw("""initBsModal("basePopup")"""),
         ("class", "btn btn-danger")
       )
     } else {
@@ -226,7 +222,7 @@ class NodeGroupCategoryForm(
       )
       .toBox match {
       case Full(id) =>
-        JsRaw("""$('#basePopup').bsModal('hide');""") &
+        JsRaw("""hideBsModal('basePopup');""") &
         SetHtml(htmlIdCategory, NodeSeq.Empty) &
         onSuccessCallback(nodeGroupCategory.id.value) &
         successPopup

diff --git a/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala b/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
@@ -540,8 +540,8 @@ class NodeGroupForm(
           new ModificationValidationPopup(
             Right(change),
             workflowService,
-            crId => JsRaw("$('#confirmUpdateActionDialog').bsModal('hide');") & successCallback(crId),
-            xml => JsRaw("$('#confirmUpdateActionDialog').bsModal('hide');") & onFailure,
+            crId => JsRaw("hideBsModal('confirmUpdateActionDialog');") & successCallback(crId),
+            xml => JsRaw("hideBsModal('confirmUpdateActionDialog');") & onFailure,
             parentFormTracker = formTracker
           )
         }
@@ -551,13 +551,13 @@ class NodeGroupForm(
             popup.onSubmit()
           case Some(_) =>
             SetHtml("confirmUpdateActionDialog", popup.popupContent()) &
-            JsRaw("""createPopup("confirmUpdateActionDialog")""")
+            JsRaw("""initBsModal("confirmUpdateActionDialog")""")
         }
     }
   }
 
   def createPopup(name: String):           JsCmd = {
-    JsRaw(s"""createPopup("${name}");""")
+    JsRaw(s"""initBsModal("${name}");""")
   }
   private[this] def showCloneGroupPopup(): JsCmd = {