From ae46714a4a6b5efed3c4fccb0510f2e1e5d37a23 Mon Sep 17 00:00:00 2001
From: Berci Kormendy <korber314@gmail.com>
Date: Thu, 25 Jul 2024 12:44:40 +0200
Subject: [PATCH 1/2] remove `grid-area` on grid prop change

---
 .../strategies/grid-helpers.ts                |  1 +
 ...-resize-element-strategy.spec.browser2.tsx | 68 +++++++++++++++++++
 2 files changed, 69 insertions(+)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index d02379c7bb14..5118951e8afb 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -232,6 +232,7 @@ export function setGridPropsCommands(
   let commands: CanvasCommand[] = [
     deleteProperties('always', elementPath, [
       PP.create('style', 'gridRow'),
+      PP.create('style', 'gridArea'),
       PP.create('style', 'gridColumn'),
       PP.create('style', 'gridColumnStart'),
       PP.create('style', 'gridColumnEnd'),
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 2ef544e0c74a..1418d1b7f863 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -195,6 +195,26 @@ describe('grid rearrange move strategy', () => {
       }
     })
   })
+
+  it('removes the grid-area prop on resize', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCodeWithGridArea, 'await-first-dom-report')
+
+    await runCellResizeTest(
+      editor,
+      'column-end',
+      gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10),
+    )
+
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, gridArea } =
+      editor.renderedDOM.getByTestId('grid-child').style
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, gridArea }).toEqual({
+      gridArea: '',
+      gridColumnEnd: '11',
+      gridColumnStart: '7',
+      gridRowStart: '2',
+      gridRowEnd: 'auto',
+    })
+  })
 })
 
 const ProjectCode = `import * as React from 'react'
@@ -280,3 +300,51 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+const ProjectCodeWithGridArea = `import * as React from 'react'
+import { Scene, Storyboard, Placeholder } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 847,
+        height: 895,
+        position: 'absolute',
+        left: 46,
+        top: 131,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: '75px 75px 75px 75px',
+          gridTemplateColumns:
+            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+          gridGap: 16,
+          height: 482,
+          width: 786,
+          position: 'absolute',
+          left: 31,
+          top: 0,
+        }}
+        data-uid='grid'
+      >
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#f3785f',
+            gridArea: '2 / 3 / 7 / 10',
+          }}
+          data-uid='ddd'
+          data-testid='grid-child'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`

From 3c6ab527a06be927a272baa07dc7029483459451 Mon Sep 17 00:00:00 2001
From: Berci Kormendy <korber314@gmail.com>
Date: Thu, 25 Jul 2024 15:06:13 +0200
Subject: [PATCH 2/2] more focued test

---
 ...-resize-element-strategy.spec.browser2.tsx | 48 ++++++++++++++-----
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 1418d1b7f863..c541fb3c67f1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -1,3 +1,10 @@
+import type {
+  JSExpressionNestedObject,
+  JSExpressionValue,
+  JSXAttributesEntry,
+  JSXElement,
+} from 'utopia-shared/src/types'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import { getRectCenter, localRectangle } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
@@ -205,15 +212,28 @@ describe('grid rearrange move strategy', () => {
       gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10),
     )
 
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, gridArea } =
-      editor.renderedDOM.getByTestId('grid-child').style
-    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, gridArea }).toEqual({
-      gridArea: '',
-      gridColumnEnd: '11',
-      gridColumnStart: '7',
-      gridRowStart: '2',
-      gridRowEnd: 'auto',
-    })
+    const styleProp = (
+      unsafeCast<JSXElement>(
+        MetadataUtils.getJsxElementChildFromMetadata(
+          editor.getEditorState().editor.jsxMetadata,
+          EP.fromString('sb/scene/grid/ddd'),
+        ),
+      ).props.find(
+        (p): p is JSXAttributesEntry => p.type === 'JSX_ATTRIBUTES_ENTRY' && p.key === 'style',
+      )?.value as JSExpressionNestedObject
+    ).content.flatMap((c) =>
+      c.type === 'PROPERTY_ASSIGNMENT'
+        ? [[c.key, unsafeCast<JSExpressionValue<any>>(c.value).value]]
+        : [],
+    )
+
+    expect(styleProp).toEqual([
+      ['minHeight', 0],
+      ['backgroundColor', '#db48f6'],
+      ['gridColumnStart', 7],
+      ['gridColumnEnd', 11],
+      ['gridRow', 2],
+    ])
   })
 })
 
@@ -334,11 +354,11 @@ export var storyboard = (
         }}
         data-uid='grid'
       >
-        <div
+         <div
           style={{
             minHeight: 0,
-            backgroundColor: '#f3785f',
-            gridArea: '2 / 3 / 7 / 10',
+            gridArea: '2 / 7 / 3 / 10',
+            backgroundColor: '#db48f6',
           }}
           data-uid='ddd'
           data-testid='grid-child'
@@ -348,3 +368,7 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+function unsafeCast<T>(a: unknown): T {
+  return a as T
+}