Link comments to scenes based on the commentId prop (#4795)

* use `SceneCommentIdPropName` when referring to the comment id prop * `data-comment-id` * use `commentId`
concrete-utopia · Jan 30, 2024 · aa0a01d · aa0a01d
1 parent 0fb5ed0
commit aa0a01d
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 9 deletions.
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
diff --git a/editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx b/editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx
@@ -36,6 +36,7 @@ import { optionalMap } from '../../../../core/shared/optional-utils'
 import { useScenes } from '../../../../core/commenting/comment-hooks'
 import { safeIndex } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
+import { SceneCommentIdPropName } from '../../../../core/model/scene-id-utils'
 
 export function useCommentModeSelectAndHover(comment: CommentId | null): MouseCallbacks {
   const dispatch = useDispatch()
@@ -140,7 +141,10 @@ export function getIdOfScene(scene: ElementInstanceMetadata): string | null {
     return null
   }
 
-  const idProperty = getJSXAttributesAtPath(sceneElement.value.props, create('id'))
+  const idProperty = getJSXAttributesAtPath(
+    sceneElement.value.props,
+    create(SceneCommentIdPropName),
+  )
   const currentValue = optionalMap(jsxSimpleAttributeToValue, idProperty?.attribute)
   if (currentValue == null || isLeft(currentValue) || typeof currentValue.value !== 'string') {
     return null

diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx
@@ -43,8 +43,8 @@ import { stopPropagation } from '../../inspector/common/inspector-utils'
 import { canvasPointToWindowPoint } from '../dom-lookup'
 import { RemixNavigationAtom } from '../remix/utopia-remix-root-component'
 import { getIdOfScene } from './comment-mode/comment-mode-hooks'
-import { motion, useAnimation } from 'framer-motion'
 import type { EditorDispatch } from '../../editor/action-types'
+import { SceneCommentIdPropName } from '../../../core/model/scene-id-utils'
 import {
   canvasThreadMetadata,
   sceneThreadMetadata,
@@ -200,7 +200,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
                 : [
                     setProp_UNSAFE(
                       scene.elementPath,
-                      create('id'),
+                      create(SceneCommentIdPropName),
                       jsExpressionValue(sceneId, emptyComments),
                     ),
                   ]

diff --git a/editor/src/core/model/scene-id-utils.ts b/editor/src/core/model/scene-id-utils.ts
@@ -11,10 +11,10 @@ import * as PP from '../shared/property-path'
 import { assertNever } from '../shared/utils'
 import { isSceneAgainstImports, isRemixSceneAgainstImports } from './project-file-utils'
 
-const IdPropName = 'id'
+export const SceneCommentIdPropName = 'commentId'
 
 function getIdPropFromJSXElement(element: JSXElement): string | null {
-  const maybeIdProp = getJSXAttribute(element.props, IdPropName)
+  const maybeIdProp = getJSXAttribute(element.props, SceneCommentIdPropName)
   if (
     maybeIdProp == null ||
     maybeIdProp.type !== 'ATTRIBUTE_VALUE' ||
@@ -28,7 +28,7 @@ function getIdPropFromJSXElement(element: JSXElement): string | null {
 function setIdPropOnJSXElement(element: JSXElement, idPropValueToUse: string): JSXElement | null {
   const updatedProps = setJSXValueAtPath(
     element.props,
-    PP.create(IdPropName),
+    PP.create(SceneCommentIdPropName),
     jsExpressionValue(idPropValueToUse, emptyComments),
   )
 

diff --git a/editor/src/core/third-party/utopia-api-components.ts b/editor/src/core/third-party/utopia-api-components.ts
@@ -81,7 +81,11 @@ const BasicUtopiaSceneDescriptor = (
           jsxElementWithoutUID(
             name,
             [
-              jsxAttributesEntry('id', jsExpressionValue('scene', emptyComments), emptyComments),
+              jsxAttributesEntry(
+                'commentId',
+                jsExpressionValue('scene', emptyComments),
+                emptyComments,
+              ),
               jsxAttributesEntry('style', styleProp(), emptyComments),
             ],
             [],

diff --git a/editor/src/sample-projects/sample-project-utils.ts b/editor/src/sample-projects/sample-project-utils.ts
@@ -256,7 +256,7 @@ function createBeachesProjectContents(): ProjectContentTreeRoot {
             lastParseSuccess: null,
             lastSavedContents: null,
             fileContents: {
-              code: "import * as React from 'react'\nimport { Scene, Storyboard } from 'utopia-api'\nimport { App } from '/src/app.js'\nimport { Playground } from '/src/playground.js'\n\nexport var storyboard = (\n  <Storyboard>\n    <Scene\n      id='playground-scene'\n      style={{\n        width: 700,\n        height: 759,\n        position: 'absolute',\n        left: 212,\n        top: 128,\n      }}\n      data-label='Playground'\n    >\n      <Playground style={{}} />\n    </Scene>\n    <Scene\n      id='app-scene'\n      style={{\n        width: 744,\n        height: 1133,\n        position: 'absolute',\n        left: 1036,\n        top: 128,\n      }}\n      data-label='My App'\n    >\n      <App style={{}} />\n    </Scene>\n  </Storyboard>\n)\n",
+              code: "import * as React from 'react'\nimport { Scene, Storyboard } from 'utopia-api'\nimport { App } from '/src/app.js'\nimport { Playground } from '/src/playground.js'\n\nexport var storyboard = (\n  <Storyboard>\n    <Scene\n      id='playground-scene'\n      commentId='playground-scene'\n      style={{\n        width: 700,\n        height: 759,\n        position: 'absolute',\n        left: 212,\n        top: 128,\n      }}\n      data-label='Playground'\n    >\n      <Playground style={{}} />\n    </Scene>\n    <Scene\n      id='app-scene'\n      commentId='app-scene'\n      style={{\n        width: 744,\n        height: 1133,\n        position: 'absolute',\n        left: 1036,\n        top: 128,\n      }}\n      data-label='My App'\n    >\n      <App style={{}} />\n    </Scene>\n  </Storyboard>\n)\n",
               parsed: {
                 type: 'UNPARSED',
               },

diff --git a/utopia-api/src/primitives/scene.tsx b/utopia-api/src/primitives/scene.tsx
@@ -3,6 +3,7 @@ import { View } from './view'
 
 export interface SceneProps {
   id?: string
+  commentId?: string
   style?: React.CSSProperties
   'data-label'?: string
   'data-uid'?: string
@@ -22,5 +23,7 @@ export const Scene = React.memo((props: React.PropsWithChildren<SceneProps>) =>
     ...props,
     style: style,
   }
+  delete adjustedProps['commentId']
+
   return <View {...adjustedProps}>{props.children}</View>
 })