Filter common props from the data picker

editor/src/components/inspector/sections/component-section/component-section.spec.browser2.tsx

@@ -32,16 +32,6 @@ describe('Set element prop via the data picker', () => {
     expect(options).toEqual([
       'titleToo',
       'alternateTitle',
-      'style',
-      'width',
-      'height',
-      'position',
-      'left',
-      'top',
-      'backgroundColor',
-      'display',
-      'alignItems',
-      'justifyContent',
       'titles',
       'one',
       'also JS',
@@ -62,19 +52,19 @@ describe('Set element prop via the data picker', () => {
     expect(within(theInspector).queryByText('Alternate title')).not.toBeNull()
 
     // choose an object prop
-    currentOption = editor.renderedDOM.getByTestId(VariableFromScopeOptionTestId(13))
+    currentOption = editor.renderedDOM.getByTestId(VariableFromScopeOptionTestId(3))
     await mouseClickAtPoint(currentOption, { x: 2, y: 2 })
     expect(within(theScene).queryByText('The First Title')).not.toBeNull()
     expect(within(theInspector).queryByText('The First Title')).not.toBeNull()
 
     // choose an object prop
-    currentOption = editor.renderedDOM.getByTestId(VariableFromScopeOptionTestId(14))
+    currentOption = editor.renderedDOM.getByTestId(VariableFromScopeOptionTestId(4))
     await mouseClickAtPoint(currentOption, { x: 2, y: 2 })
     expect(within(theScene).queryByText('Sweet')).not.toBeNull()
     expect(within(theInspector).queryByText('Sweet')).not.toBeNull()
 
     // choose an array element
-    currentOption = editor.renderedDOM.getByTestId(VariableFromScopeOptionTestId(16))
+    currentOption = editor.renderedDOM.getByTestId(VariableFromScopeOptionTestId(6))
     await mouseClickAtPoint(currentOption, { x: 2, y: 2 })
     expect(within(theScene).queryByText('Chapter One')).not.toBeNull()
     expect(within(theInspector).queryByText('Chapter One')).not.toBeNull()
@@ -291,6 +281,113 @@ describe('Set element prop via the data picker', () => {
       'mary',
     ])
   })
+
+  it('style props are filterd from `props`', async () => {
+    const editor = await renderTestEditorWithCode(
+      DataPickerProjectShell(`
+      function TableOfContents({ titles }) {
+        const content = 'Content'
+
+        return (
+          <>
+            {titles.map((t) => (
+              <h2 data-uid='a9c'>{t}</h2>
+            ))}
+          </>
+        )
+      }
+
+      var Playground = (props) => {
+        const titleToo = 'Title too'
+        const currentCount = 12
+        const authors = ['Jack London', 'Mary Shelley']
+        const titleIdeas = ['Chapter One', 'Chapter Two']
+
+        return (
+          <div data-uid='root'>
+            <TableOfContents titles={titleIdeas} data-uid='toc' />
+          </div>
+        )
+      }`),
+      'await-first-dom-report',
+    )
+    await selectComponentsForTest(editor, [EP.fromString('sb/scene/pg:root/toc')])
+
+    const dataPickerOpenerButton = editor.renderedDOM.getByTestId(DataPickerPopupButtonTestId)
+    await mouseClickAtPoint(dataPickerOpenerButton, { x: 2, y: 2 })
+
+    const dataPickerPopup = editor.renderedDOM.queryByTestId(DataPickerPopupTestId)
+    expect(dataPickerPopup).not.toBeNull()
+
+    const options = [
+      ...editor.renderedDOM.baseElement.querySelectorAll(`[data-testid^="variable-from-scope"]`),
+    ].map((node) => node.firstChild!.firstChild!.textContent)
+
+    expect(options).toEqual([
+      'authors',
+      'authors[0]',
+      'authors[1]',
+      'titleIdeas',
+      'titleIdeas[0]',
+      'titleIdeas[1]',
+      'props',
+      'titleToo',
+      'currentCount',
+    ])
+  })
+
+  it('style props are filterd from destructured props', async () => {
+    const editor = await renderTestEditorWithCode(
+      DataPickerProjectShell(`
+      function TableOfContents({ titles }) {
+        const content = 'Content'
+
+        return (
+          <>
+            {titles.map((t) => (
+              <h2 data-uid='a9c'>{t}</h2>
+            ))}
+          </>
+        )
+      }
+
+      var Playground = ({ style, className, css }) => {
+        const titleToo = 'Title too'
+        const currentCount = 12
+        const authors = ['Jack London', 'Mary Shelley']
+        const titleIdeas = ['Chapter One', 'Chapter Two']
+
+        return (
+          <div data-uid='root'>
+            <TableOfContents titles={titleIdeas} data-uid='toc' />
+          </div>
+        )
+      }`),
+      'await-first-dom-report',
+    )
+    await selectComponentsForTest(editor, [EP.fromString('sb/scene/pg:root/toc')])
+
+    const dataPickerOpenerButton = editor.renderedDOM.getByTestId(DataPickerPopupButtonTestId)
+    await mouseClickAtPoint(dataPickerOpenerButton, { x: 2, y: 2 })
+
+    const dataPickerPopup = editor.renderedDOM.queryByTestId(DataPickerPopupTestId)
+    expect(dataPickerPopup).not.toBeNull()
+
+    const options = [
+      ...editor.renderedDOM.baseElement.querySelectorAll(`[data-testid^="variable-from-scope"]`),
+    ].map((node) => node.firstChild!.firstChild!.textContent)
+
+    expect(options).toEqual([
+      'authors',
+      'authors[0]',
+      'authors[1]',
+      'titleIdeas',
+      'titleIdeas[0]',
+      'titleIdeas[1]',
+      'titleToo',
+      'currentCount',
+    ])
+  })
 })
 
 // comment out tests temporarily because it causes a dom-walker test to fail
@@ -666,6 +763,8 @@ export var storyboard = (
           alignItems: 'center',
           justifyContent: 'center',
         }}
+        className='playground'
+        css={{ color: 'red' }}
         data-uid='pg'
       />
     </Scene>

editor/src/components/inspector/sections/component-section/data-picker-popup.tsx

@@ -1,9 +1,8 @@
-import { Button } from 'antd'
 import React from 'react'
 import { jsExpressionOtherJavaScriptSimple } from '../../../../core/shared/element-template'
 import { optionalMap } from '../../../../core/shared/optional-utils'
 import type { PropertyPath } from '../../../../core/shared/project-file-types'
-import { useColorTheme, FlexColumn, UtopiaStyles, UtopiaTheme } from '../../../../uuiui'
+import { useColorTheme, UtopiaTheme, Button, FlexColumn, UtopiaStyles } from '../../../../uuiui'
 import { setProp_UNSAFE } from '../../../editor/actions/action-creators'
 import { useDispatch } from '../../../editor/store/dispatch-context'
 import { useRefEditorState } from '../../../editor/store/store-hook'

editor/src/components/inspector/sections/component-section/variables-in-scope-utils.ts

@@ -4,7 +4,7 @@ import type {
   ObjectControlDescription,
 } from 'utopia-api/core'
 import type { ElementPath, PropertyPath } from '../../../../core/shared/project-file-types'
-import type { VariableData } from '../../../canvas/ui-jsx-canvas'
+import type { VariableData, VariablesInScope } from '../../../canvas/ui-jsx-canvas'
 import { useEditorState, Substores } from '../../../editor/store/store-hook'
 import type { VariableOption } from './data-picker-popup'
 import * as EP from '../../../../core/shared/element-path'
@@ -137,6 +137,29 @@ function orderVariablesInScope(
   return [...valuesMatchingPropertyDescription, ...valuesMatchingPropertyShape, ...restOfValues]
 }
 
+const filterKeyFromObject =
+  (propName: string) =>
+  <T extends Record<string, unknown>>(variablesInScope: T): T => {
+    let next = { ...variablesInScope }
+    delete next[propName]
+    return next
+  }
+
+const filterObjectPropFromVariablesInScope =
+  ({ prop, key }: { prop: string; key: string }) =>
+  (variablesInScope: VariableData): VariableData => {
+    const target = variablesInScope[prop]
+    if (target == null || typeof target !== 'object') {
+      return variablesInScope
+    }
+    let next = { ...variablesInScope }
+    next[prop] = {
+      insertionCeiling: next[prop].insertionCeiling,
+      spiedValue: filterKeyFromObject(key)(target.spiedValue as Record<string, unknown>),
+    }
+    return next
+  }
+
 export function useVariablesInScopeForSelectedElement(
   selectedView: ElementPath,
   propertyPath: PropertyPath,
@@ -161,12 +184,23 @@ export function useVariablesInScopeForSelectedElement(
       return []
     }
 
-    const variablesInScopeForSelectedPath = variablesInScope[EP.toString(selectedViewPath)]
+    let variablesInScopeForSelectedPath = variablesInScope[EP.toString(selectedViewPath)]
 
     if (variablesInScopeForSelectedPath == null) {
       return []
     }
 
+    variablesInScopeForSelectedPath = [
+      filterKeyFromObject('className'),
+      filterKeyFromObject('data-uid'),
+      filterKeyFromObject('style'),
+      filterKeyFromObject('css'),
+      filterObjectPropFromVariablesInScope({ prop: 'props', key: 'className' }),
+      filterObjectPropFromVariablesInScope({ prop: 'props', key: 'data-uid' }),
+      filterObjectPropFromVariablesInScope({ prop: 'props', key: 'style' }),
+      filterObjectPropFromVariablesInScope({ prop: 'props', key: 'css' }),
+    ].reduce((vars, fn) => fn(vars), variablesInScopeForSelectedPath)
+
     const orderedVariablesInScope = orderVariablesInScope(
       variablesInScopeForSelectedPath,
       controlDescriptions,