From 9e6233bd18eab0696787627dbf072d40634f0278 Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Tue, 14 May 2024 15:52:15 +0100
Subject: [PATCH] Show insertion plus button on sibling only (#5673)

* feat(canvas) show insertion plus button on sibling only

* fix(tests) Fix insertion plus button tests
---
 .../insertion-plus-button.spec.browser2.tsx   | 34 +++++--------------
 .../canvas/controls/insertion-plus-button.tsx |  9 +++--
 2 files changed, 14 insertions(+), 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
index 45a380fc8ead..4f48c3038c46 100644
--- 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
index ff6985d71906..55cae8eaa0c6 100644
--- 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