fix: remove "show" toggles on descendant component (#4711)

Closes #4670

Author: TrySound

.github/workflows/fixtures-test.yml

@@ -50,6 +50,9 @@ jobs:
       - name: Testing cli build command
         run: pnpm --filter='./fixtures/*' run --parallel fixtures:build
 
+      - name: Prepare for diffing
+        run: find . -type f -path "./fixtures/*/.webstudio/data.json" -exec sed 's|"origin": ".*"|"origin": "https://main.development.webstudio.is"|g' {} +
+
       - name: Test git diff
         # This command will fail if there are uncommitted changes, i.e something has broken
         run: git diff --name-only HEAD --exit-code

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -26,6 +26,7 @@ import {
   showAttribute,
   WsComponentMeta,
   blockTemplateComponent,
+  descendantComponent,
 } from "@webstudio-is/react-sdk";
 import { ROOT_INSTANCE_ID, type Instance } from "@webstudio-is/sdk";
 import {
@@ -281,22 +282,28 @@ const handleExpand = (item: TreeItem, isExpanded: boolean, all: boolean) => {
 };
 
 const ShowToggle = ({
-  instanceId,
+  instance,
   value,
 }: {
-  instanceId: Instance["id"];
+  instance: Instance;
   value: boolean;
 }) => {
+  // descendant component is not actually rendered
+  // but affects styling of nested elements
+  // hiding descendant does not hide nested elements and confuse users
+  if (instance.component === descendantComponent) {
+    return;
+  }
   const toggleShow = () => {
     const newValue = value === false;
     serverSyncStore.createTransaction([$props], (props) => {
       const { propsByInstanceId } = $propsIndex.get();
-      const instanceProps = propsByInstanceId.get(instanceId);
+      const instanceProps = propsByInstanceId.get(instance.id);
       let showProp = instanceProps?.find((prop) => prop.name === showAttribute);
       if (showProp === undefined) {
         showProp = {
           id: nanoid(),
-          instanceId,
+          instanceId: instance.id,
           name: showAttribute,
           type: "boolean",
           value: newValue,
@@ -660,9 +667,7 @@ export const NavigatorTree = () => {
                     }
                   },
                 }}
-                action={
-                  <ShowToggle instanceId={item.instance.id} value={show} />
-                }
+                action={<ShowToggle instance={item.instance} value={show} />}
               >
                 <TreeNodeContent
                   meta={meta}

apps/builder/app/builder/features/settings-panel/props-section/use-props-logic.ts

@@ -5,6 +5,7 @@ import {
   showAttribute,
   textContentAttribute,
   collectionComponent,
+  descendantComponent,
 } from "@webstudio-is/react-sdk";
 import type { PropValue } from "../shared";
 import { useStore } from "@nanostores/react";
@@ -195,19 +196,32 @@ export const usePropsLogic = ({
 
   const initialPropsNames = new Set(meta.initialProps ?? []);
 
-  const systemProps: PropAndMeta[] = systemPropsMeta.map(({ name, meta }) => {
-    let saved = getAndDelete<Prop>(unprocessedSaved, name);
-    if (saved === undefined && meta.defaultValue !== undefined) {
-      saved = getStartingProp(instance.id, meta, name);
-    }
-    getAndDelete(unprocessedKnown, name);
-    initialPropsNames.delete(name);
-    return {
-      prop: saved,
-      propName: name,
-      meta,
-    };
-  });
+  const systemProps: PropAndMeta[] = systemPropsMeta
+    .filter(({ name }) => {
+      // descendant component is not actually rendered
+      // but affects styling of nested elements
+      // hiding descendant does not hide nested elements and confuse users
+      if (
+        instance.component === descendantComponent &&
+        name === showAttribute
+      ) {
+        return false;
+      }
+      return true;
+    })
+    .map(({ name, meta }) => {
+      let saved = getAndDelete<Prop>(unprocessedSaved, name);
+      if (saved === undefined && meta.defaultValue !== undefined) {
+        saved = getStartingProp(instance.id, meta, name);
+      }
+      getAndDelete(unprocessedKnown, name);
+      initialPropsNames.delete(name);
+      return {
+        prop: saved,
+        propName: name,
+        meta,
+      };
+    });
 
   const canHaveTextContent =
     instanceMeta?.type === "container" &&