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`.
concrete-utopia · Dec 13, 2024 · b722caa · b722caa
1 parent dcfd7ba
commit b722caa
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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