fix: do not display visibility toggle on componennt with codecomponen…

…t as root element with styleSections set to false or without visibility GitOrigin-RevId: b4ef737d305f9cb4c3361733b6b79f22e36454e9
plasmicapp · Dec 23, 2024 · 8fef3c5 · 8fef3c5
1 parent b71a7a0
commit 8fef3c5
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
 }