Check whether component supports children for wrapping (#4429)

* wip * move todo * check exported component for children * update snapshots * bump utopia-api * clean up after merge * revert overabstraction * more lenient element checking * revert package json anc package lock * re-update snapshots * remove todo * test * re-re update snapshots * remove outdated comment * Update editor/src/core/third-party/remix-controls.ts Co-authored-by: RheeseyB <[email protected]> * move getTopLevelElementByExportsDetail --------- Co-authored-by: RheeseyB <[email protected]>
concrete-utopia · Oct 30, 2023 · adcecf3 · adcecf3
1 parent 9c75ba6
commit adcecf3
Show file tree

Hide file tree

Showing 23 changed files with 362 additions and 254 deletions.
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
diff --git a/editor/src/components/canvas/canvas-globals.spec.ts b/editor/src/components/canvas/canvas-globals.spec.ts
@@ -27,6 +27,7 @@ const cardComponentDescriptor: ComponentDescriptor = {
       label: 'Title',
     },
   },
+  supportsChildren: false,
   variants: [
     {
       insertMenuLabel: 'Card Default',
@@ -77,6 +78,7 @@ const modifiedCardComponentDescriptor: ComponentDescriptor = {
       label: 'Border',
     },
   },
+  supportsChildren: false,
   variants: [
     {
       insertMenuLabel: 'Card Default',
@@ -123,6 +125,7 @@ const selectorComponentDescriptor: ComponentDescriptor = {
       options: ['True', 'False', 'FileNotFound'],
     },
   },
+  supportsChildren: false,
   variants: [
     {
       insertMenuLabel: 'True False Selector',
@@ -213,6 +216,7 @@ describe('validateControlsToCheck', () => {
                     "label": "Title",
                   },
                 },
+                "supportsChildren": false,
                 "variants": Array [
                   Object {
                     "elementToInsert": [Function],
@@ -351,6 +355,7 @@ describe('validateControlsToCheck', () => {
                       "label": "Title",
                     },
                   },
+                  "supportsChildren": false,
                   "variants": Array [
                     Object {
                       "elementToInsert": [Function],
@@ -406,6 +411,7 @@ describe('validateControlsToCheck', () => {
                     ],
                   },
                 },
+                "supportsChildren": false,
                 "variants": Array [
                   Object {
                     "elementToInsert": [Function],
@@ -468,6 +474,7 @@ describe('validateControlsToCheck', () => {
                     "label": "Title",
                   },
                 },
+                "supportsChildren": false,
                 "variants": Array [
                   Object {
                     "elementToInsert": [Function],
@@ -518,6 +525,7 @@ describe('validateControlsToCheck', () => {
                     "label": "Title",
                   },
                 },
+                "supportsChildren": false,
                 "variants": Array [
                   Object {
                     "elementToInsert": [Function],
@@ -544,6 +552,7 @@ describe('validateControlsToCheck', () => {
                     "label": "Title",
                   },
                 },
+                "supportsChildren": false,
                 "variants": Array [
                   Object {
                     "elementToInsert": [Function],

diff --git a/editor/src/components/canvas/canvas-globals.ts b/editor/src/components/canvas/canvas-globals.ts
@@ -86,6 +86,7 @@ export async function validateControlsToCheck(
           (descriptorWithName) => {
             return {
               properties: descriptorWithName.properties,
+              supportsChildren: descriptorWithName.supportsChildren,
               variants: descriptorWithName.variants,
             }
           },

diff --git a/editor/src/components/canvas/ui/floating-insert-menu.tsx b/editor/src/components/canvas/ui/floating-insert-menu.tsx
@@ -273,6 +273,7 @@ export const CustomComponentOption = (props: OptionProps<InsertMenuItem, false>)
     <div
       ref={innerRef}
       {...innerProps}
+      data-testid={`floating-menu-item-${label}`}
       style={{
         boxSizing: 'border-box',
         height: UtopiaTheme.layout.rowHeight.smaller,