EPMRPP-104956 editor can drag drop selected folder - fixes styles

[kayarmolenka]

Summary by CodeRabbit

• New Features

  • Added support for "inside" drop positioning in sortable tree components with improved visual feedback.

• Style

  • Enhanced drop confirmation UI with clearer positioning and styling for drag-and-drop indicators.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e4aa224 and a8e91e1.

📒 Files selected for processing (3)

• src/components/sortable/treeSortableContainer/treeSortableContainer.module.scss
• src/components/sortable/treeSortableContainer/treeSortableContainer.tsx
• src/components/sortable/treeSortableItem/treeSortableItem.module.scss

---

Walkthrough

The changes extend the tree sortable drag-and-drop component to support an "inside" drop position variant. Updates include: importing TREE_DROP_POSITIONS constants, refactoring position handling from string literals to typed constants, adding styling for the inside position with adjusted popover placement, and updating hover button colors.

Changes

Cohort / File(s)	Summary
Tree Sortable Container Styles src/components/sortable/treeSortableContainer/treeSortableContainer.module.scss	Adds inside variant styling for drop-confirmation-popover with adjusted transform and positioning; updates ::after pseudo-element arrow placement with left centering; changes popover button hover color from primary to neutral background.
Tree Sortable Container Logic src/components/sortable/treeSortableContainer/treeSortableContainer.tsx	Imports TREE_DROP_POSITIONS constant; introduces POPOVER_OFFSET_PX and extends DEFAULT_LABELS; refactors position calculations and CSS class toggling to use typed position constants instead of string literals; adds INSIDE state handling.
Tree Sortable Item Styles src/components/sortable/treeSortableItem/treeSortableItem.module.scss	Adds background-color to drop-inside drop target pseudo-element for improved visual feedback.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• EPMRPP-104956 || drag and drop three sortable support for Folders #221: Directly overlaps with updates to treeSortableContainer styling and logic for TREE_DROP_POSITIONS constant implementation including the INSIDE variant and POPOVER_OFFSET addition.

Suggested reviewers

• AmsterGet
• allaprischepa
• maria-hambardzumian
• siarheirazuvalau

Poem

🐰 A popover hops inside with grace,
Constants guide each drop in place,
Inside, before, and after too,
Three positions, styling new,
The tree keeps bouncing, neat and sweet! 🌳✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change - it addresses drag-drop functionality for selected folders and specifically mentions style fixes, which aligns with the CSS modifications and positioning logic updates in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/EPMRPP-104956-editor-can-drag-drop-selected-folder-fixes-styles

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}