Work in progress

RaphaelGauthier · Feb 14, 2024 · 6bd268c · 6bd268c
1 parent ef67ddf
commit 6bd268c
Show file tree

Hide file tree

Showing 19 changed files with 437 additions and 531 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/View.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/View.elm
@@ -16,16 +16,16 @@ view : Model -> Html Msg
 view model =
   div [class "tab-table-content"]
   ( List.append
-    [ ul [class "ui-tabs-nav"]
-      [ li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == RulesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode RulesView)]
-          [ text "By Rules"
-          ]
+    [ ul [class "nav nav-underline"]
+      [ li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == RulesView then " active" else "")), onClick (ChangeViewMode RulesView)]
+          [ text "By Rules" ]
         ]
-      , li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == NodesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode NodesView)]
-          [ text "By Nodes"
-          ]
+      , li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == NodesView then " active" else "")), onClick (ChangeViewMode NodesView)]
+          [ text "By Nodes" ]
         ]
       ]
     ]

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
@@ -157,7 +157,7 @@ showTechnique model technique origin ui editInfo =
     fakeMetadata = Http.Metadata "internal-elm-call" 200 "call from elm app" Dict.empty
     blocksOnError = checkBlocksOnError technique.elems
     areBlockOnError = Dict.isEmpty blocksOnError
-    activeTabClass = (\tab -> "ui-tabs-tab " ++ (if ui.tab == tab then "active" else ""))
+    activeTabClass = (\tab -> if ui.tab == tab then " active" else "")
     creation = case origin of
                  Creation _ -> True
                  Clone _ _ -> True
@@ -303,22 +303,26 @@ showTechnique model technique origin ui editInfo =
           ]
         ]
       ]
-    , div [ class "main-navbar" ] [
-        ul [ class "ui-tabs-nav nav nav-tabs" ] [
-          li [ class (activeTabClass General) , onClick (SwitchTab General)] [
-            a [] [ text "Information" ]
+    , div [ class "main-navbar" ]
+      [ ul [ class "nav nav-underline" ]
+        [ li [ class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass General)), onClick (SwitchTab General)]
+            [ text "Information"]
           ]
-        , li [ class (activeTabClass Parameters), onClick (SwitchTab Parameters) ] [
-            a [] [
-              text "Parameters "
+        , li [ class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass Parameters)), onClick (SwitchTab Parameters)]
+            [ text "Parameters "
             , span [ class ( "badge badge-secondary badge-resources " ++ if List.isEmpty technique.parameters then "empty" else "") ] [
                 span [] [ text (String.fromInt (List.length technique.parameters)) ]
               ]
             ]
           ]
-        , li [ class (activeTabClass Resources)  , onClick (SwitchTab Resources)] [
-            a [] [
-              text "Resources "
+        , li [ class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass Resources)), onClick (SwitchTab Resources)]
+            [ text "Resources "
             , span [  class  ( "badge badge-secondary badge-resources " ++ if List.isEmpty technique.resources then "empty" else "") ] [
                 if ((List.isEmpty technique.resources)|| (List.any (\s -> (s.state == Untouched) || (s.state == Modified)) technique.resources) ) then span [ class "nb-resources" ] [text (String.fromInt (List.length (List.filter  (\s -> s.state == Untouched || s.state == Modified) technique.resources ) ))] else text ""
               , if not (List.isEmpty (List.filter (.state >> (==) New) technique.resources)) then  span [class "nb-resources new"] [ text ((String.fromInt (List.length (List.filter (.state >> (==) New) technique.resources))))] else text ""
@@ -327,14 +331,15 @@ showTechnique model technique origin ui editInfo =
             ]
           ]
         , if (Maybe.Extra.isJust technique.output) then
-            li [ class (activeTabClass Output)  , onClick (SwitchTab Output)] [
-              a [] [
-                text "Compilation output "
-              , span [  class  ( "fa ") ] []
-              ]
+          li [ class "nav-item" ]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass Output)), onClick (SwitchTab Output)]
+            [ text "Compilation output "
+            , span [ class  ( "fa fa-check") ] []
             ]
-            else
-              text ""
+          ]
+          else
+            text ""
         ]
       ]
     , div [ class "main-details", id "details"]

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/GroupCompliance/View.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/GroupCompliance/View.elm
@@ -16,16 +16,16 @@ view : Model -> Html Msg
 view model =
   div [class "tab-table-content"]
   ( List.append
-    [ ul [class "ui-tabs-nav"]
-      [ li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == RulesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode RulesView)]
-          [ text "By Rules"
-          ]
+    [ ul [class "nav nav-underline"]
+      [ li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == RulesView then " active" else "")), onClick (ChangeViewMode RulesView)]
+          [ text "By Rules" ]
         ]
-      , li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == NodesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode NodesView)]
-          [ text "By Nodes"
-          ]
+      , li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == NodesView then " active" else "")), onClick (ChangeViewMode NodesView)]
+          [ text "By Rules" ]
         ]
       ]
     ]

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
@@ -372,7 +372,7 @@ $(document).ready(function() {
       return ((a < b) ? 1 : ((a > b) ? -1 : 0));
     }
   } );
-  sidebarControl(".sidebar");
+  sidebarControl();
   initBsTooltips();
 });
 
@@ -773,23 +773,22 @@ function buildScrollSpyNav(){
     });
 }
 
-function sidebarControl(a){
-  var b = this
-    , c = 400;
-  $(document).on("click", a + " li a", function(a) {
+function sidebarControl(){
+  var speed = 400;
+  $(".sidebar li a").on("click", function(a) {
     var d = $(this)
       , e = d.next();
     if (e.is(".treeview-menu") && e.is(":visible"))
-      e.slideUp(c, function() {
+      e.slideUp(speed, function() {
         e.removeClass("menu-open")
       }),
       e.parent("li").removeClass("active");
     else if (e.is(".treeview-menu") && !e.is(":visible")) {
       var f = d.parents("ul").first()
-        , g = f.find("ul:visible").slideUp(c);
+        , g = f.find("ul:visible").slideUp(speed);
       g.removeClass("menu-open");
       var h = d.parent("li");
-      e.slideDown(c, function() {
+      e.slideDown(speed, function() {
         e.addClass("menu-open"),
         f.find("li.active").removeClass("active"),
         h.addClass("active")

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
@@ -99,7 +99,7 @@ class NodeGroupCategoryForm(
 
   def showForm(): NodeSeq = {
     val html = SHtml.ajaxForm(
-      <div id="GroupTabs" class="main-container">
+      <div class="main-container">
         <div class="main-header">
           <div class="header-title">
             <h1>
@@ -117,9 +117,9 @@ class NodeGroupCategoryForm(
           </div>
         </div>
         <div class="main-navbar">
-          <ul id="groupTabMenu" class="ui-tabs-nav ui-widget-header">
-            <li class="ui-tabs-tab ui-tab ui-tabs-active ui-state-active">
-              <a href="#categoryParametersTab">Parameters</a>
+          <ul id="groupTabMenu" class="nav nav-underline">
+            <li class="nav-item">
+              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#categoryParametersTab" type="button" role="tab" aria-controls="categoryParametersTab" aria-selected="true">Parameters</button>
             </li>
           </ul>
         </div>

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
@@ -180,10 +180,7 @@ class NodeGroupForm(
   }
 
   def showForm(): NodeSeq = {
-    val html = SHtml.ajaxForm(body) ++
-      Script(
-        OnLoad(JsRaw("$('#GroupTabs').tabs( {active : 0 });"))
-      )
+    val html = SHtml.ajaxForm(body)
 
     nodeGroup match {
       case Left(target)                     => showFormTarget(target)(html) ++ showRelatedRulesTree(target)
@@ -350,9 +347,13 @@ class NodeGroupForm(
     ("group-pendingchangerequest" #> NodeSeq.Empty
     & "#group-name" #> <span>{groupNameString}<span class="group-system"></span></span>
     & "group-name" #> groupName.readOnlyValue
-    & "#groupTabMenu" #> <ul id="groupTabMenu">
-                           <li><a href="#groupParametersTab">Parameters</a></li>
-                           <li><a id="relatedRulesLinkTab" href="#groupRulesTab">Related rules</a></li>
+    & "#groupTabMenu" #> <ul id="groupTabMenu" class="nav nav-underline">
+                           <li class="nav-item">
+                             <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#groupParametersTab" type="button" role="tab" aria-controls="groupParametersTab">Parameters</button>
+                           </li>
+                           <li>
+                             <button class="nav-link" data-bs-toggle="tab" data-bs-target="#groupRulesTab" type="button" role="tab" aria-controls="groupRulesTab">Related rules</button>
+                           </li>
                          </ul>
     & "group-rudderid" #> <div>
                     <label class="wbBaseFieldLabel">Group ID</label>

diff --git a/...dder-web/src/main/scala/com/normation/rudder/web/components/ShowNodeDetailsFromNode.scala b/...dder-web/src/main/scala/com/normation/rudder/web/components/ShowNodeDetailsFromNode.scala
@@ -198,7 +198,7 @@ class ShowNodeDetailsFromNode(
   ): NodeSeq = {
     nodeFactRepo.get(nodeId).toBox match {
       case Full(None) =>
-        (<ul id="NodeDetailsTabMenu" class="rudder-ui-tabs ui-tabs-nav"></ul>
+        (<ul id="NodeDetailsTabMenu" class="nav nav-underline"></ul>
           <div class="col-xs-12">
             <div class="info-card critical">
               <div class="card-info">
@@ -230,14 +230,10 @@ class ShowNodeDetailsFromNode(
                 bindNode(nf, withinPopup, globalMode, globalScore) ++ Script(
                   DisplayNode.jsInit(node.id, "") &
                   JsRaw(s"""
-                    $$( "#${detailsId}" ).tabs({ active : ${tab} } );
-                    $$('#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a').on('click',function(){
-                      var tab = $$(this).attr('href');
-                      $$('#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a.active').removeClass('active');
-                      $$(this).addClass('active');
-                      $$('#nodeInventory > .sInventory > .sInventory').hide();
-                      $$(tab).show();
-                    });
+                    var nodeTabs = $$("#${detailsId} .main-navbar > .nav > li ");
+                    var activeTabBtn = nodeTabs.get(${tab}).querySelector("button");
+                    activeTabBtn.classList.add('active');
+                    var activeTab = document.querySelector("#"+activeTabBtn.getAttribute("aria-controls")).classList.add('active', 'show')
                     """) &
                   buildJsTree(groupTreeId)
                 )

diff --git a/...rces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala b/...rces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
@@ -152,7 +152,6 @@ object DisplayNode extends Loggable {
 
   def jsInit(nodeId: NodeId, salt: String = ""): JsCmd = {
     val jsId           = JsNodeId(nodeId, salt)
-    val detailsId      = htmlId(jsId, "details_")
     val softGridDataId = htmlId(jsId, "soft_grid_data_")
     val softPanelId    = "soft_tab"
     val eltIdswidth    =
@@ -175,8 +174,7 @@ object DisplayNode extends Loggable {
     )
 
     JsRaw("var " + softGridDataId + "= null") &
-    OnLoad(
-      JsRaw("$('#" + detailsId + "').tabs()") & {
+    OnLoad( {
         eltIds.map { i =>
           JsRaw(s"""
               $$('#${htmlId(jsId, i + "_")}').dataTable({
@@ -324,16 +322,24 @@ object DisplayNode extends Loggable {
       </div>
       <div class="tabs">
         <div class="main-navbar">
-          <ul class="rudder-ui-tabs">
-            <li><a href={htmlId_#(jsId, "node_summary_")}>Summary</a></li>
-            <li><a href={htmlId_#(jsId, "node_inventory_")}>Inventory</a></li>
+          <ul class="nav nav-underline">
+            <li class="nav-item">
+              <button class="nav-link active" data-bs-toggle="tab" data-bs-target={htmlId_#(jsId, "node_summary_")} type="button" role="tab" aria-controls={htmlId_#(jsId, "node_summary_")} aria-selected="false">Summary</button>
+            </li>
+            <li class="nav-item">
+              <button class="nav-link active" data-bs-toggle="tab" data-bs-target={htmlId_#(jsId, "node_inventory_")} type="button" role="tab" aria-controls={htmlId_#(jsId, "node_inventory_")} aria-selected="false">Inventory</button>
+            </li>
           </ul>
         </div>
-        <div id={htmlId(jsId, "node_summary_")}>
-          {showNodeDetails(nodeFact, globalMode, None, salt)}
-        </div>
-        <div id={htmlId(jsId, "node_inventory_")}>
-          {showInventoryVerticalMenu(sm, nodeFact.toCore)}
+        <div class="tab-content">
+          <div id={htmlId(jsId, "node_summary_")} class="tab-pane active show">
+            <div class="d-flex">
+              {showNodeDetails(nodeFact, globalMode, None, salt)}
+            </div>
+          </div>
+          <div id={htmlId(jsId, "node_inventory_")} class="tab-pane">
+            {showInventoryVerticalMenu(sm, nodeFact.toCore)}
+          </div>
         </div>
       </div>
     </div>

diff --git a/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/ReportDisplayer.scala b/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/ReportDisplayer.scala
@@ -53,7 +53,6 @@ import com.normation.rudder.repository.RoRuleRepository
 import com.normation.rudder.services.reports._
 import com.normation.rudder.users.CurrentUser
 import com.normation.rudder.web.ChooseTemplate
-import com.normation.rudder.web.model.JsNodeId
 import net.liftweb.common._
 import net.liftweb.http.SHtml
 import net.liftweb.http.js.JE._
@@ -98,21 +97,26 @@ class ReportDisplayer(
       addOverriden: Boolean,
       onlySystem:   Boolean
   ): NodeSeq = {
-    val id       = JsNodeId(node.id)
     val callback = {
       SHtml.ajaxInvoke(() =>
         SetHtml(containerId, displayReports(node, getReports, tableId, containerId, addOverriden, onlySystem))
       )
     }
     Script(OnLoad(JsRaw(s"""
-      if($$("[aria-controls='${tabId}']").hasClass('ui-tabs-active')){
+      const triggerEl = document.querySelector("[aria-controls='${tabId}']");
+      if(triggerEl.classList.contains('active')){
         ${callback.toJsCmd}
       }
-      $$("#details_${id}").on( "tabsactivate", function(event, ui) {
-        if(ui.newPanel.attr('id')== '${tabId}') {
-          ${callback.toJsCmd}
-        }
-      });
+      const tabEl = document.querySelectorAll('.nav-underline button[data-bs-toggle="tab"]')
+      var tabId;
+      tabEl.forEach((element) =>
+        element.addEventListener('shown.bs.tab', event => {
+          tabId = event.target.getAttribute("aria-controls");
+          if(tabId = '${tabId}') {
+            ${callback.toJsCmd}
+          }
+        })
+      );
     """)))
   }
 

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss
@@ -44,12 +44,16 @@ $primary    : $rudder-primary;
 $success    : $rudder-success;
 $warning    : $rudder-warning;
 $danger     : $rudder-danger;
+
 $body-color : $rudder-txt-primary;
 $link-color : $rudder-txt-link;
 
+$nav-underline-border-width : 0.2rem;
+$nav-underline-link-active-color: $rudder-txt-primary;
+
 @import "../../node_modules/bootstrap/scss/bootstrap";
 
-/* --- BUTTONS OVERRIDE
+/* --- BUTTONS
 -- Bootstrap is using the WCAG 2.0 algorithm to determine the (text, hover, disabled..) colors of the button following its background color.
 -- According to the WCAG algorithm, the success color we used isn't dark enough to have a white text, so we have to override the btn-success rule
 */
@@ -86,15 +90,38 @@ $link-color : $rudder-txt-link;
     line-height: 1.5;
     border-radius: 3px;
   }
-
   &.active {
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   }
 }
-// --- FORM-GROUP OVERRIDE
+// --- FORM-GROUP
 .form-group{
   margin-bottom: 5px;
   label{
     font-weight: bold;
   }
+}
+// --- NAV & TABS
+.nav-underline {
+  padding: 0 15px;
+  margin-bottom: 0;
+  position: relative;
+
+  &:before {
+    content: "";
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: $rudder-border-color-default;
+    z-index: 0;
+  }
+  .nav-link {
+    position: relative;
+  }
+  .nav-link.active, .show>.nav-link {
+    font-weight: normal;
+    border-bottom-color: $rudder-txt-link;
+  }
 }