codeant-ai-for-open-source[bot] commented on code in PR #38102:
URL: https://github.com/apache/superset/pull/38102#discussion_r2828778922
##########
superset-frontend/src/components/Datasource/FoldersEditor/TreeItem.tsx:
##########
Review Comment:
**Suggestion:** The same `setNodeRef` callback is being attached both to the
outer wrapper `<div>` and to the inner
`TreeFolderContainer`/`TreeItemContainer` via `containerProps`, so React will
call the ref with multiple different elements and dnd-kit may end up measuring
the wrong node while the transform styles are applied to the wrapper, leading
to incorrect drag offsets and item/separator movement during dragging. To fix
this, ensure that `setNodeRef` is only assigned to the wrapper element that
actually receives the transform styles, and do not pass it down through
`containerProps` to the inner containers. [logic error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ dnd-kit tracks inner container instead of transformed wrapper.
- ⚠️ Drag measurements can desync if wrapper layout changes.
```
</details>
```suggestion
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open the dataset editor with folders enabled so `TreeItem` from
`superset-frontend/src/components/Datasource/FoldersEditor/TreeItem.tsx` is
rendered for
each row.
2. In `TreeItemComponent` the sortable hook is initialized (`useSortable({
id, ... })`)
and returns `setNodeRef`, `transform`, and `transition`, which are wired into
`containerProps` at lines 252–259 (`ref: setNodeRef, style, ...`).
3. Further down, at lines 339–361, the same `setNodeRef` callback is
attached both to the
outer wrapper `<div ref={setNodeRef} style={transformStyle}>` and passed
through
`restContainerProps` into `TreeFolderContainer` / `TreeItemContainer`, so
React invokes
`setNodeRef` for multiple different DOM elements for a single sortable item.
4. As a result, dnd-kit ultimately measures and tracks the inner container
element rather
than the wrapper that actually receives the transform styles, so the
sortable state is
bound to a different node than the one being visually transformed, which can
lead to
incorrect drag offsets or collision measurements when the wrapper and inner
container
differ in size (e.g., due to the separator or future layout changes).
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/components/Datasource/FoldersEditor/TreeItem.tsx
**Line:** 253:330
**Comment:**
*Logic Error: The same `setNodeRef` callback is being attached both to
the outer wrapper `<div>` and to the inner
`TreeFolderContainer`/`TreeItemContainer` via `containerProps`, so React will
call the ref with multiple different elements and dnd-kit may end up measuring
the wrong node while the transform styles are applied to the wrapper, leading
to incorrect drag offsets and item/separator movement during dragging. To fix
this, ensure that `setNodeRef` is only assigned to the wrapper element that
actually receives the transform styles, and do not pass it down through
`containerProps` to the inner containers.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38102&comment_hash=55d872a26e82f95d200a3caaa98ea1f82e76fc3a5c216223307e551475d458b5&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38102&comment_hash=55d872a26e82f95d200a3caaa98ea1f82e76fc3a5c216223307e551475d458b5&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
