From d3d549d9adb98ffd203cbcddac4899e03c9d1a8f Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Tue, 19 Sep 2023 16:10:01 +0200
Subject: [PATCH] Remix Outlet should be autolocked (#4209)

* Autolock Outlets

* Added test

* Fix test
---
 .../remix/remix-rendering.spec.browser2.tsx   | 59 +++++++++++++++++++
 editor/src/core/shared/element-locking.ts     |  8 ++-
 2 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
index 2ef96ca2921b..e04c8615b146 100644
--- a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
+++ b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
@@ -178,6 +178,65 @@ describe('Remix content', () => {
     })
   })
 
+  it('Remix Outlet is automatically locked', async () => {
+    const project = createModifiedProject({
+      [StoryboardFilePath]: `import * as React from 'react'
+      import { RemixScene, Storyboard } from 'utopia-api'
+      
+      export var storyboard = (
+        <Storyboard data-uid='storyboard'>
+          <RemixScene
+            style={{
+              width: 700,
+              height: 759,
+              position: 'absolute',
+              left: 212,
+              top: 128,
+            }}
+            data-label='Playground'
+            data-uid='remix-scene'
+          />
+        </Storyboard>
+      )
+      `,
+      ['/src/root.js']: `import React from 'react'
+      import { Outlet } from '@remix-run/react'
+      
+      export default function Root() {
+        return (
+          <div data-uid='rootdiv'>
+            ${RootTextContent}
+            <Outlet data-uid='outlet'/>
+          </div>
+        )
+      }
+      `,
+      ['/src/routes/_index.js']: `import React from 'react'
+
+      export default function Index() {
+        return <div
+          style={{
+            width: 200,
+            height: 200,
+            position: 'absolute',
+            left: 0,
+            top: 0,
+          }}
+          data-uid='remix-div'
+        >
+          ${DefaultRouteTextContent}
+        </div>
+      }
+      `,
+    })
+
+    const renderResult = await renderRemixProject(project)
+
+    expect(
+      renderResult.getEditorState().editor.lockedElements.simpleLock.map(EP.toString),
+    ).toContain('storyboard/remix-scene:rootdiv/outlet')
+  })
+
   it('Two remix scenes, both have metadata', async () => {
     const project = createModifiedProject({
       [StoryboardFilePath]: `import * as React from 'react'
diff --git a/editor/src/core/shared/element-locking.ts b/editor/src/core/shared/element-locking.ts
index 22ceb95dd132..7624331311b6 100644
--- a/editor/src/core/shared/element-locking.ts
+++ b/editor/src/core/shared/element-locking.ts
@@ -12,9 +12,13 @@ export function updateSimpleLocks(
 ): Array<ElementPath> {
   let result: Array<ElementPath> = [...currentSimpleLockedItems]
   for (const [key, value] of Object.entries(newMetadata)) {
-    // This entry is the root element of an instance and it isn't present in the previous metadata,
+    // This entry is the root element of an instance or a remix Outlet, and it isn't present in the previous metadata,
     // which implies that it has been newly added.
-    if (EP.isRootElementOfInstance(value.elementPath) && !(key in priorMetadata)) {
+    if (
+      (EP.isRootElementOfInstance(value.elementPath) ||
+        MetadataUtils.isProbablyRemixOutlet(newMetadata, value.elementPath)) &&
+      !(key in priorMetadata)
+    ) {
       result.push(value.elementPath)
     }
   }