feat: hover over blueprint to delete - AB-939

[neelasha-writer]

Summary by CodeRabbit

• New Features
  • Right-click context menu added for components in the sidebar with a Delete option.
  • Delete option shown only for permitted component types.
  • Context-menu and dropdown selection both trigger the same delete flow for consistent behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a right-click context dropdown to the component tree branch component exposing a conditional "Delete" action for blueprint-type components, wires dropdown-select handling, gates visibility by delete permission, and emits a new "delete" event; also contains a trivial .gitignore line change.

Changes

Cohort / File(s)	Change Summary
Configuration \.gitignore	Trivial one-line replacement with identical content; no functional change.
Component Dropdown Integration src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue	Adds rightClickDropdownOptions (imports WdsDropdownMenuOption), binds right-click-options and @dropdown-select="handleDropdownSelect($event, componentId)", introduces handleDropdownSelect to emit "delete" when selected, exposes isDeleteAllowed to conditionally show the Delete option, and updates defineEmits to ["expandBranch","delete"].

Sequence Diagram(s)

(Skipped — change is confined to a single UI component and does not introduce a multi-component sequential flow warranting a diagram.)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• UladzislauK-Writer

Poem

🐰 I hop the tree, a menu I bring,
A tiny trash icon — a tidy little swing,
Blueprint revealed, permission in sight,
Click the delete, and off it takes flight. 🗑️

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title references AB-938 (citations for knowledge graph) but the actual changes only implement AB-939 (blueprint delete visibility via dropdown menu), making the title misleading.	Update the title to accurately reflect the implemented changes, e.g., 'feat: add delete option to blueprint component tree dropdown' or similar.
Linked Issues check	⚠️ Warning	The PR only addresses AB-939 (blueprint delete visibility) with dropdown menu implementation, but completely omits AB-938 (citations for knowledge graph), leaving one linked issue unimplemented.	Either implement the citations feature for AB-938 or remove it from the linked issues if this PR is scoped only to AB-939.
Out of Scope Changes check	⚠️ Warning	The .gitignore change (replacing '.aider*' with '.aider*') is unrelated to both AB-938 and AB-939 objectives and appears to be out-of-scope.	Remove the .gitignore change or explain its relevance; it should be submitted separately if not directly related to the stated PR objectives.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.}

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue`:
- Around line 20-26: The binding
:right-click-options="rightClickDropdownOptions" in
BuilderSidebarComponentTreeBranch.vue is unused because BuilderTree.vue doesn't
declare that prop; either remove that binding from
BuilderSidebarComponentTreeBranch.vue, or add a prop (e.g., rightClickOptions)
to BuilderTree.vue and wire it into its right-click handling code (handle
context menu / emit events) so rightClickDropdownOptions is respected; if you
add the prop, gate its value with isDeleteAllowed(props.componentId) so the
Delete option is only surfaced when allowed.

🧹 Nitpick comments (2)

src/ui/src/builder/BuilderTree.vue (1)

10-11: Make the dropdown keyboard-accessible (focus in/out).

Right now the three‑dots menu only appears on hover, so keyboard users can’t discover or trigger delete from the tree. Consider toggling isMainHovered on focus as well.

♿ Proposed tweak

-			`@mouseenter`="handleMouseEnter"
-			`@mouseleave`="handleMouseLeave"
+			`@mouseenter`="handleMouseEnter"
+			`@mouseleave`="handleMouseLeave"
+			`@focusin`="handleFocusIn"
+			`@focusout`="handleFocusOut"

 function handleMouseLeave(ev: MouseEvent) {
 	isMainHovered.value = false;
 	emit("mouseleave", ev);
 }
+
+function handleFocusIn(_ev: FocusEvent) {
+	isMainHovered.value = true;
+}
+
+function handleFocusOut(_ev: FocusEvent) {
+	isMainHovered.value = false;
+}

Also applies to: 142-149

src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue (1)

225-227: Guard delete by dropdown key.

handleDropdownSelect currently deletes regardless of which option was picked. If options expand in the future, this will delete unintentionally.

✅ Safer handler

-function handleDropdownSelect() {
-	handleDelete();
-}
+function handleDropdownSelect(key: string) {
+	if (key !== "delete") return;
+	handleDelete();
+}

[madeindjs]

BuilderTree has a delete event, but it's not used. I think you can remove this line and update BuilderTree

writer-framework/src/ui/src/builder/BuilderTree.vue

Line 115 in ceab788

delete: () => true,

[madeindjs]

delete is not used

[madeindjs]

These changes are not needed; the feature would work without them. I suggest you revert these changes since it's not necessary.

git checkout origin/dev -- src/ui/src/builder/BuilderTree.vue

[neelasha-writer]

Yup I see, will do

[madeindjs]

Suggested change

	function handleDropdownSelect() {
	handleDelete();
	function handleDropdownSelect(action: string) {
	if (action === "delete") handleDelete();

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue`:
- Line 28: The template is emitting
`@dropdown-select`="handleDropdownSelect($event, key)" but `key` is undefined;
update the template to pass the correct component identifier (e.g., use
`props.componentId` or the local `component.id`) so handleDropdownSelect
receives the actual id. Locate the binding in
BuilderSidebarComponentTreeBranch.vue and replace the second argument with the
proper identifier used elsewhere in this component (referenced by the handler
name handleDropdownSelect) so the delete emit sends the real component id
instead of undefined.
- Line 121: The emits constant from defineEmits is misnamed relative to usage in
expand(): change the emission usage so they match; either rename the defined
constant from emits to emit (i.e., use const emit = defineEmits(["expandBranch",
"delete"]) ) or update the expand() function to call emits("expandBranch", ...)
instead of emit(...); locate the defineEmits call and the expand() function in
BuilderSidebarComponentTreeBranch.vue and make one of these two consistent fixes
so the emitted event calls reference the same identifier.

♻️ Duplicate comments (1)

src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue (1)

20-20: Remove unused right-click-options prop.

This binding was already identified as unused in a previous review and confirmed to be removable. BuilderTree.vue does not define this prop.