feat: improve delete blueprint visibility (#1273)

Co-authored-by: Neelasha Bhattacharjee <46113280+Neelashab@users.noreply.github.com>

Author: neelasha-writer

src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue

@@ -10,6 +10,7 @@
 				class="rootBranch"
 				:component-id="rootComponentId"
 				:query="query"
+				@delete="handleComponentDelete"
 			/>
 		</div>
 
@@ -36,6 +37,7 @@
 						:key="blueprint.id"
 						:component-id="blueprint.id"
 						:query="query"
+						@delete="handleComponentDelete"
 					/>
 					<div
 						v-if="section.items.length === 0"
@@ -94,11 +96,8 @@ const wfbm = inject(injectionKeys.builderManager);
 const query = ref("");
 
 const tracking = useWriterTracking(wf);
-const { createAndInsertComponent, setContentValue } = useComponentActions(
-	wf,
-	wfbm,
-	tracking,
-);
+const { createAndInsertComponent, setContentValue, removeComponentSubtree } =
+	useComponentActions(wf, wfbm, tracking);
 
 const rootComponentId = wfbm.activeRootId;
 
@@ -201,6 +200,10 @@ async function addSharedBlueprint() {
 	wfbm.setSelection(pageId);
 	tracking.track("blueprints_shared_added");
 }
+
+function handleComponentDelete(componentId: string) {
+	removeComponentSubtree(componentId);
+}
 </script>
 
 <style scoped>

src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue

@@ -17,7 +17,15 @@
 		:disable-collapse="COMPONENT_TYPES_ROOT.has(component.type)"
 		:no-nested-space="COMPONENT_TYPES_ROOT.has(component.type)"
 		:collapsed="isOutsideActivePage"
+		:right-click-options="rightClickDropdownOptions"
+		:dropdown-options="
+			component?.type === 'blueprints_blueprint' &&
+			isDeleteAllowed(props.componentId)
+				? rightClickDropdownOptions
+				: undefined
+		"
 		@select="select"
+		@dropdown-select="handleDropdownSelect($event)"
 		@dragover="handleDragOver"
 		@dragstart="handleDragStart"
 		@dragend="handleDragEnd"
@@ -53,6 +61,7 @@
 				:component-id="childComponent.id"
 				:query="query"
 				@expand-branch="expand"
+				@delete="$emit('delete', $event)"
 			/>
 		</template>
 	</BuilderTree>
@@ -83,6 +92,7 @@ import {
 	COMPONENT_TYPES_TOP_LEVEL,
 } from "@/constants/component";
 import WdsIcon from "@/wds/WdsIcon.vue";
+import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue";
 
 const props = defineProps({
 	componentId: { type: String, required: true },
@@ -91,6 +101,9 @@ const props = defineProps({
 
 const treeBranch = ref<ComponentPublicInstance<typeof BuilderTree>>();
 
+const rightClickDropdownOptions: WdsDropdownMenuOption[] = [
+	{ label: "Delete", value: "delete", icon: "trash-2" },
+];
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const selected = computed(() => wfbm.isComponentIdSelected(props.componentId));
@@ -101,11 +114,12 @@ const {
 	moveComponent,
 	goToComponentParentPage,
 	isDraggingAllowed,
+	isDeleteAllowed,
 } = useComponentActions(wf, wfbm, tracking);
 const { getComponentInfoFromDrag, removeInsertionCandidacy, isParentSuitable } =
 	useDragDropComponent(wf);
 const { isComponentVisible } = useEvaluator(wf);
-const emit = defineEmits(["expandBranch"]);
+const emits = defineEmits(["expandBranch", "delete"]);
 
 const q = computed(() => props.query?.toLocaleLowerCase() ?? "");
 
@@ -145,7 +159,7 @@ async function select(ev: MouseEvent | KeyboardEvent) {
 function expand() {
 	if (!treeBranch.value) return;
 	treeBranch.value.expand();
-	emit("expandBranch");
+	emits("expandBranch");
 }
 
 function scrollToShow() {
@@ -201,6 +215,12 @@ function handleDrop(ev: DragEvent) {
 	removeInsertionCandidacy(ev);
 }
 
+function handleDropdownSelect(action: string) {
+	if (action === "delete" && isDeleteAllowed(props.componentId)) {
+		emits("delete", props.componentId);
+	}
+}
+
 const isOutsideActivePage = computed(() => {
 	if (!wf.activePageId.value) return false;