Show insertion plus button on sibling only (#5673)

* feat(canvas) show insertion plus button on sibling only * fix(tests) Fix insertion plus button tests
concrete-utopia · May 14, 2024 · 9e6233b · 9e6233b
1 parent 0263d64
commit 9e6233b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 29 deletions.
diff --git a/editor/src/components/canvas/controls/insertion-plus-button.spec.browser2.tsx b/editor/src/components/canvas/controls/insertion-plus-button.spec.browser2.tsx
@@ -285,13 +285,13 @@ describe('Insertion Plus Button', () => {
     expect(canvasBounds.y + BlueDotSize / 2).toEqual(expectedTop)
   }
 
-  it(`shows the buttons in the correct places for a flex container with a direction of 'row' that already has children`, async () => {
+  it(`shows the buttons in the correct places for a child of a flex container with a direction of 'row'`, async () => {
     const renderResult = await renderTestEditorWithCode(
       getProjectCode('row'),
       'await-first-dom-report',
     )
 
-    const targetPath = EP.fromString('storyboard/scene/parentsibling')
+    const targetPath = EP.fromString('storyboard/scene/parentsibling/firstdiv')
     await act(() => renderResult.dispatch([selectComponents([targetPath], false)], false))
     await renderResult.getDispatchFollowUpActionsFinished()
 
@@ -315,13 +315,13 @@ describe('Insertion Plus Button', () => {
     )
   })
 
-  it(`shows the buttons in the correct places for a flex container with a direction of 'row-reverse' that already has children`, async () => {
+  it(`shows the buttons in the correct places for a child of a flex container with a direction of 'row-reverse'`, async () => {
     const renderResult = await renderTestEditorWithCode(
       getProjectCode('row-reverse'),
       'await-first-dom-report',
     )
 
-    const targetPath = EP.fromString('storyboard/scene/parentsibling')
+    const targetPath = EP.fromString('storyboard/scene/parentsibling/firstdiv')
     await act(() => renderResult.dispatch([selectComponents([targetPath], false)], false))
     await renderResult.getDispatchFollowUpActionsFinished()
 
@@ -345,13 +345,13 @@ describe('Insertion Plus Button', () => {
     )
   })
 
-  it(`shows the buttons in the correct places for a flex container with a direction of 'column' that already has children`, async () => {
+  it(`shows the buttons in the correct places for a child of a flex container with a direction of 'column'`, async () => {
     const renderResult = await renderTestEditorWithCode(
       getProjectCode('column'),
       'await-first-dom-report',
     )
 
-    const targetPath = EP.fromString('storyboard/scene/parentsibling')
+    const targetPath = EP.fromString('storyboard/scene/parentsibling/firstdiv')
     await act(() => renderResult.dispatch([selectComponents([targetPath], false)], false))
     await renderResult.getDispatchFollowUpActionsFinished()
 
@@ -375,13 +375,13 @@ describe('Insertion Plus Button', () => {
     )
   })
 
-  it(`shows the buttons in the correct places for a flex container with a direction of 'column-reverse' that already has children`, async () => {
+  it(`shows the buttons in the correct places for a child of a flex container with a direction of 'column-reverse'`, async () => {
     const renderResult = await renderTestEditorWithCode(
       getProjectCode('column-reverse'),
       'await-first-dom-report',
     )
 
-    const targetPath = EP.fromString('storyboard/scene/parentsibling')
+    const targetPath = EP.fromString('storyboard/scene/parentsibling/firstdiv')
     await act(() => renderResult.dispatch([selectComponents([targetPath], false)], false))
     await renderResult.getDispatchFollowUpActionsFinished()
 
@@ -404,22 +404,4 @@ describe('Insertion Plus Button', () => {
       500,
     )
   })
-
-  it('shows the buttons in the correct places for a flex container that has no children', async () => {
-    const renderResult = await renderTestEditorWithCode(
-      getProjectCodeForEmptyFlexContainer(),
-      'await-first-dom-report',
-    )
-
-    const targetPath = EP.fromString('storyboard/scene/parentsibling')
-    await act(() => renderResult.dispatch([selectComponents([targetPath], false)], false))
-    await renderResult.getDispatchFollowUpActionsFinished()
-
-    await checkInsertButtonPosition(
-      renderResult,
-      'blue-dot-control-0',
-      0,
-      500 - InsertionButtonOffset,
-    )
-  })
 })
diff --git a/editor/src/components/canvas/controls/insertion-plus-button.tsx b/editor/src/components/canvas/controls/insertion-plus-button.tsx
@@ -67,9 +67,12 @@ export const InsertionControls: React.FunctionComponent = React.memo(
     }
     const selectedView = selectedViews[0]
 
-    const controlPropsFinished: ButtonControlProps[] | null =
-      collectInsertionControlsForElement(jsxMetadata, pathTrees, scale, selectedView) ??
-      collectInsertionControlsForElement(jsxMetadata, pathTrees, scale, EP.parentPath(selectedView))
+    const controlPropsFinished: ButtonControlProps[] | null = collectInsertionControlsForElement(
+      jsxMetadata,
+      pathTrees,
+      scale,
+      EP.parentPath(selectedView),
+    )
 
     if (controlPropsFinished == null) {
       return null