remove grid-area on grid prop change (#6123)

## Problem
If a `grid-area` prop was present in the style prop of an element, we
leave it there after the element is resized/moved even though the newly
added grid positioning props override the original `grid-area` prop.

## Fix
Remove the grid-area prop. Consolidating the shorthand props we add into
a `grid-area` prop will come on a follow-up PR.

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'),

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'
@@ -195,6 +202,39 @@ 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 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],
+    ])
+  })
 })
 
 const ProjectCode = `import * as React from 'react'
@@ -280,3 +320,55 @@ 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,
+            gridArea: '2 / 7 / 3 / 10',
+            backgroundColor: '#db48f6',
+          }}
+          data-uid='ddd'
+          data-testid='grid-child'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+
+function unsafeCast<T>(a: unknown): T {
+  return a as T
+}