From 8fef3c5fcd90cf180a744495aea2258968e2a1dd Mon Sep 17 00:00:00 2001
From: Abbas Nazar <abbasnazar.970@gmail.com>
Date: Fri, 20 Dec 2024 21:59:30 +0500
Subject: [PATCH] fix: do not display visibility toggle on componennt with
 codecomponent as root element with styleSections set to false or without
 visibility

GitOrigin-RevId: b4ef737d305f9cb4c3361733b6b79f22e36454e9
---
 .../components/sidebar-tabs/Sections.tsx      |  2 +-
 .../components/sidebar-tabs/tpl-tree.tsx      |  2 +-
 .../client/components/studio/view-editor.tsx  |  5 ++++-
 .../src/wab/client/components/tpl-menu.tsx    |  6 +++++-
 platform/wab/src/wab/shared/core/tpls.ts      | 21 ++++++++++++++++++-
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/Sections.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/Sections.tsx
index 1f359b237b5..142b5a84869 100644
--- a/platform/wab/src/wab/client/components/sidebar-tabs/Sections.tsx
+++ b/platform/wab/src/wab/client/components/sidebar-tabs/Sections.tsx
@@ -582,7 +582,7 @@ export function getRenderBySection(
     [
       Section.Visibility,
       () =>
-        canToggleVisibility(tpl) &&
+        canToggleVisibility(tpl, viewCtx) &&
         showSection(Section.Visibility) && (
           <VisibilitySection
             key={`${tpl.uuid}-visibility`}
diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/tpl-tree.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/tpl-tree.tsx
index 468e1268cac..064c03db5bf 100644
--- a/platform/wab/src/wab/client/components/sidebar-tabs/tpl-tree.tsx
+++ b/platform/wab/src/wab/client/components/sidebar-tabs/tpl-tree.tsx
@@ -469,7 +469,7 @@ const TplTreeNode = observer(function TplTreeNode(props: {
         </Tooltip>
       );
     }
-    if (!Tpls.canToggleVisibility(item)) {
+    if (!Tpls.canToggleVisibility(item, viewCtx)) {
       // Can only toggle visibility for tags, components.  But we still want to
       // take up space here so things line up vertically.
       return (
diff --git a/platform/wab/src/wab/client/components/studio/view-editor.tsx b/platform/wab/src/wab/client/components/studio/view-editor.tsx
index 197627e9697..ac337bd23c3 100644
--- a/platform/wab/src/wab/client/components/studio/view-editor.tsx
+++ b/platform/wab/src/wab/client/components/studio/view-editor.tsx
@@ -622,7 +622,10 @@ class ViewEditor_ extends React.Component<ViewEditorProps, ViewEditorState> {
             const viewOps = this.viewOps();
             const focusedTpl = this.ensureViewCtx().focusedTpl();
 
-            if (focusedTpl && canToggleVisibility(focusedTpl)) {
+            if (
+              focusedTpl &&
+              canToggleVisibility(focusedTpl, this.ensureViewCtx())
+            ) {
               const currentVisibility =
                 viewOps.getEffectiveTplVisibility(focusedTpl);
               if (currentVisibility === TplVisibility.Visible) {
diff --git a/platform/wab/src/wab/client/components/tpl-menu.tsx b/platform/wab/src/wab/client/components/tpl-menu.tsx
index 336489f5371..b1f2133a379 100644
--- a/platform/wab/src/wab/client/components/tpl-menu.tsx
+++ b/platform/wab/src/wab/client/components/tpl-menu.tsx
@@ -610,7 +610,11 @@ export function makeTplMenu(
       }
     }
 
-    if (!forMultipleTpls && canToggleVisibility(tpl) && !contentEditorMode) {
+    if (
+      !forMultipleTpls &&
+      canToggleVisibility(tpl, viewCtx) &&
+      !contentEditorMode
+    ) {
       builder.genSub("Set visibility...", (push3) => {
         const choices = getVisibilityChoicesForTpl(viewCtx, tpl);
         choices.forEach((choice) => {
diff --git a/platform/wab/src/wab/shared/core/tpls.ts b/platform/wab/src/wab/shared/core/tpls.ts
index 1349c0c3f1d..33642596e3a 100644
--- a/platform/wab/src/wab/shared/core/tpls.ts
+++ b/platform/wab/src/wab/shared/core/tpls.ts
@@ -1745,7 +1745,26 @@ export function isTplVariantable(tplNode: any): tplNode is TplNode {
   return isTplTagOrComponent(tplNode) || isTplSlot(tplNode);
 }
 
-export function canToggleVisibility(tplNode: any): tplNode is TplNode {
+export function canToggleVisibility(
+  tplNode: any,
+  viewCtx: ViewCtx
+): tplNode is TplNode {
+  // Verify if the component's root element is a code component and styleSections is enabled
+  if (
+    isTplComponent(tplNode) &&
+    isTplCodeComponent(tplNode.component.tplTree)
+  ) {
+    const styleSections = viewCtx.getTplCodeComponentMeta(
+      tplNode.component.tplTree
+    )?.styleSections;
+    if (styleSections === false) {
+      return false;
+    } else if (Array.isArray(styleSections)) {
+      return styleSections.includes("visibility");
+    }
+
+    return true;
+  }
   return isTplVariantable(tplNode) && !hasTextAncestor(tplNode);
 }