From b722caae11e89124aa20ace4d18e0cfc554ad9d2 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 21 Jun 2024 10:28:12 +0100
Subject: [PATCH] fix(inspector) Prevent None Controls From Adding Rows To
 Inspector. (#6016)

- Added in cases to stop `none` controls from reaching a
`RowForControl`.
- Changed `RowForControlProps.controlDescription` to `exclude
`NoneControlDescription`.
---
 .../component-section/component-section.tsx   | 19 +++++++++--
 .../component-section/folder-section.tsx      | 33 +++++++++++--------
 .../row-or-folder-wrapper.tsx                 |  3 ++
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
index 17dc374e99c5..e2ebe28ee57c 100644
--- a/editor/src/components/inspector/sections/component-section/component-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -8,6 +8,7 @@ import type {
   ArrayControlDescription,
   BaseControlDescription,
   ControlDescription,
+  NoneControlDescription,
   ObjectControlDescription,
   RegularControlDescription,
   TupleControlDescription,
@@ -999,6 +1000,11 @@ const ArrayControlItem = React.memo((props: ArrayControlItemProps) => {
   const contextMenuItems = Utils.stripNulls([addOnUnsetValues([index], propMetadata.onUnsetValues)])
 
   const contextMenuId = `context-menu-for-${PP.toString(propPathWithIndex)}`
+
+  if (controlDescription.propertyControl.control === 'none') {
+    return null
+  }
+
   return (
     <InspectorContextMenuWrapper
       id={contextMenuId}
@@ -1147,6 +1153,12 @@ const TupleControlItem = React.memo((props: TupleControlItemProps) => {
   )
   const contextMenuItems = Utils.stripNulls([addOnUnsetValues([index], propMetadata.onUnsetValues)])
 
+  const indexedPropertyControls = controlDescription.propertyControls[index]
+
+  if (indexedPropertyControls.control === 'none') {
+    return null
+  }
+
   return (
     <InspectorContextMenuWrapper
       id={`context-menu-for-${PP.toString(propPathWithIndex)}`}
@@ -1155,7 +1167,7 @@ const TupleControlItem = React.memo((props: TupleControlItemProps) => {
       key={index}
     >
       <RowForControl
-        controlDescription={controlDescription.propertyControls[index]}
+        controlDescription={indexedPropertyControls}
         isScene={isScene}
         propPath={PP.appendPropertyPathElems(propPath, [index])}
         setGlobalCursor={props.setGlobalCursor}
@@ -1309,6 +1321,9 @@ const RowForObjectControl = React.memo((props: RowForObjectControlProps) => {
         open,
         mapToArray((innerControl: RegularControlDescription, prop: string, index: number) => {
           const innerPropPath = PP.appendPropertyPathElems(propPath, [prop])
+          if (innerControl.control === 'none') {
+            return null
+          }
           return (
             <RowForControl
               key={`object-control-row-${PP.toString(innerPropPath)}`}
@@ -1408,7 +1423,7 @@ const RowForUnionControl = React.memo((props: RowForUnionControlProps) => {
 RowForUnionControl.displayName = 'RowForUnionControl'
 
 interface RowForControlProps extends AbstractRowForControlProps {
-  controlDescription: RegularControlDescription
+  controlDescription: Exclude<RegularControlDescription, NoneControlDescription>
   disableToggling?: boolean
 }
 
diff --git a/editor/src/components/inspector/sections/component-section/folder-section.tsx b/editor/src/components/inspector/sections/component-section/folder-section.tsx
index a69bc439e1cd..f360d0343489 100644
--- a/editor/src/components/inspector/sections/component-section/folder-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/folder-section.tsx
@@ -88,6 +88,9 @@ export const FolderSection = React.memo((props: FolderSectionProps) => {
 
   const createRowForControl = (propName: string, focusOnMount: boolean) => {
     const controlDescription = props.propertyControls[propName]
+    if (controlDescription.control === 'none') {
+      return null
+    }
     return (
       <RowOrFolderWrapper
         key={`section-row-${propName}`}
@@ -126,19 +129,23 @@ export const FolderSection = React.memo((props: FolderSectionProps) => {
               propValue,
               propName,
             )
-            return (
-              <RowForControl
-                key={propName}
-                propPath={PP.create(propName)}
-                controlDescription={controlDescription}
-                isScene={false}
-                setGlobalCursor={props.setGlobalCursor}
-                indentationLevel={props.indentationLevel}
-                shouldIncreaseIdentation={true}
-                showHiddenControl={props.showHiddenControl}
-                focusOnMount={false}
-              />
-            )
+            if (controlDescription.control === 'none') {
+              return null
+            } else {
+              return (
+                <RowForControl
+                  key={propName}
+                  propPath={PP.create(propName)}
+                  controlDescription={controlDescription}
+                  isScene={false}
+                  setGlobalCursor={props.setGlobalCursor}
+                  indentationLevel={props.indentationLevel}
+                  shouldIncreaseIdentation={true}
+                  showHiddenControl={props.showHiddenControl}
+                  focusOnMount={false}
+                />
+              )
+            }
           }
         }),
       )}
diff --git a/editor/src/components/inspector/sections/component-section/row-or-folder-wrapper.tsx b/editor/src/components/inspector/sections/component-section/row-or-folder-wrapper.tsx
index 33fca0406c77..57c16b86ea69 100644
--- a/editor/src/components/inspector/sections/component-section/row-or-folder-wrapper.tsx
+++ b/editor/src/components/inspector/sections/component-section/row-or-folder-wrapper.tsx
@@ -19,6 +19,9 @@ type RowOrFolderWrapperProps = {
 }
 
 export const RowOrFolderWrapper = React.memo((props: RowOrFolderWrapperProps) => {
+  if (props.controlDescription.control === 'none') {
+    return null
+  }
   return (
     <UIGridRow padded={false} tall={false} variant='<-------------1fr------------->'>
       <RowForControl