feat(meshservice): seems to be working

Signed-off-by: slonka <slonka@users.noreply.github.com>
kumahq · Oct 11, 2024 · 140f3f6 · 140f3f6
1 parent 9e64ab2
commit 140f3f6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/app/_assets/javascripts/tabs.js b/app/_assets/javascripts/tabs.js
@@ -5,6 +5,7 @@ class TabsComponent {
 
     this.addEventListeners();
     this.setInitialMeshServiceState(localStorage.getItem("meshservice"))
+    this.currentTabSlug = "Kubernetes"
   }
 
   addEventListeners() {
@@ -27,6 +28,38 @@ class TabsComponent {
         item.setAttribute("checked", checked)
       }
     });
+    this.hideMeshServiceTabs(checked)
+  }
+
+  hideMeshServiceTabs(checked) {
+    // do nothing on non meshservice capable elements
+    if (this.elem.querySelectorAll('.tabs-component-tabs a[data-slug$=""]').length === 0) {
+      return
+    }
+
+    const that = this
+    this.elem.querySelectorAll('.tabs-component-tabs a[data-slug$=""]').forEach((item) => {
+      if (checked === "false") {
+        item.parentElement.hidden = true
+        item.parentElement.classList.remove("is-active")
+      } else if (checked === "true") {
+        item.parentElement.hidden = false
+        if (item.attributes['aria-controls'].nodeValue.includes(that.currentTabSlug)) {
+          item.parentElement.classList.add("is-active")
+        }
+      }
+    });
+    this.elem.querySelectorAll('.tabs-component-tabs a:not([data-slug$=""])').forEach((item) => {
+      if (checked === "true") {
+        item.parentElement.hidden = true
+        item.parentElement.classList.remove("is-active")
+      } else if (checked === "false") {
+        item.parentElement.hidden = false
+        if (item.attributes['aria-controls'].nodeValue.includes(that.currentTabSlug)) {
+          item.parentElement.classList.add("is-active")
+        }
+      }
+    });
   }
 
   selectTab(event) {
@@ -66,13 +99,16 @@ class TabsComponent {
   onTabSelected(event) {
     const { tabSlug } = event.detail;
     this.setSelectedTabBySlug(tabSlug);
+    this.currentTabSlug = tabSlug
   }
 
   onNewMeshServiceChanged(event) {
     if (event.currentTarget.checked === true) {
       localStorage.setItem("meshservice", "true")
+      this.hideMeshServiceTabs("true")
     } else {
       localStorage.setItem("meshservice", "false")
+      this.hideMeshServiceTabs("false")
     }
   }
 

diff --git a/jekyll-kuma-plugins/lib/jekyll/kuma-plugins/liquid/tags/policyyaml.rb b/jekyll-kuma-plugins/lib/jekyll/kuma-plugins/liquid/tags/policyyaml.rb
@@ -154,10 +154,10 @@ def render(context)
 
             if use_meshservice
               htmlContent += "
-{% tab #{@tabs_name} Kubernetes&nbsp; %}
+{% tab #{@tabs_name} Kubernetes%}
 #{kube_style2_content}
 {% endtab %}
-{% tab #{@tabs_name} Universal&nbsp; %}
+{% tab #{@tabs_name} Universal%}
 #{uni_style2_content}
 {% endtab %}"
             end