feat: UX for double click on nodes [AB-879] (#1245)

* feat: UX for double click on nodes [AB-879]

* feat: change selection code [AB-879]

* feat: tracking dbl clck and button [AB-879]

* feat: review changes [AB-879]

* feat: review changes

* Apply suggestion from @madeindjs

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>

---------

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>

Author: bybash

src/ui/src/builder/BuilderApp.vue

@@ -270,6 +270,7 @@ const notes = computed(() =>
 async function handleKeydown(ev: KeyboardEvent) {
 	if (ev.key === "Escape") {
 		ssbm.setSelection(null);
+		ssbm.expandedEditorForComponent.value = null;
 		return;
 	}
 

src/ui/src/builder/BuilderEmbeddedCodeEditor.vue

@@ -115,6 +115,19 @@ onMounted(() => {
 		emit("update:modelValue", newCode);
 	});
 	resizeObserver.observe(rootEl.value);
+
+	// when in modal, focus the editor and set the cursor to the last line
+	if (props.variant === "half-screen") {
+		editor.focus();
+		editor.setPosition({
+			lineNumber: editor.getModel().getLineCount(),
+			column: editor
+				.getModel()
+				.getLineLastNonWhitespaceColumn(
+					editor.getModel().getLineCount(),
+				),
+		});
+	}
 });
 
 function updateDimensions() {

src/ui/src/builder/builderManager.ts

@@ -414,18 +414,18 @@ export function generateBuilderManager() {
 
 	const activeBlueprintRunId = computed(() => {
 		const logEntries = getLogEntries();
-		const runId =
-			logEntries.find((entry) => {
-				return !!entry.blueprintExecution;
-			})?.blueprintExecution?.runId;
+		const runId = logEntries.find((entry) => {
+			return !!entry.blueprintExecution;
+		})?.blueprintExecution?.runId;
 		if (!runId) return null;
 		const isActive = Boolean(
-			logEntries
-				.filter((entry) => {
-					return entry?.blueprintExecution?.runId === runId
-						&& !entry?.blueprintExecution?.exit;
-				})?.[0]
-		)
+			logEntries.filter((entry) => {
+				return (
+					entry?.blueprintExecution?.runId === runId &&
+					!entry?.blueprintExecution?.exit
+				);
+			})?.[0],
+		);
 		return isActive ? runId : null;
 	});
 
@@ -435,6 +435,7 @@ export function generateBuilderManager() {
 		mode,
 		activeRootId,
 		openPanels: ref(new Set<"code" | "log">()),
+		expandedEditorForComponent: ref<string | null>(null),
 		isSettingsBarCollapsed: ref(false),
 		isComponentIdSelected,
 		selectionStatus,

src/ui/src/builder/settings/BuilderSettingsProperties.vue

@@ -90,6 +90,7 @@
 					:unit="fieldValue.type"
 					:error="errorsByFields[fieldKey]"
 					:is-expansible="isExpansible(fieldValue)"
+					:should-expand="isExpansible(fieldValue) && isFieldExpanded"
 					@expand="handleExpand(fieldKey)"
 					@shrink="handleShrink(fieldKey)"
 				>
@@ -288,6 +289,12 @@ const secretsManager = inject(injectionKeys.secretsManager);
 
 const expandedFields = ref(new Set());
 
+const isFieldExpanded = computed(() => {
+	return (
+		ssbm.expandedEditorForComponent.value === selectedComponent.value?.id
+	);
+});
+
 const selectedInstancePath = computed<InstancePath>(() =>
 	parseInstancePathString(ssbm.firstSelectedItem?.value?.instancePath),
 );
@@ -392,10 +399,12 @@ function sortByOrder(fieldEntries: FieldEntry[]): FieldEntry[] {
 }
 
 function handleExpand(fieldKey: string) {
+	ssbm.expandedEditorForComponent.value = selectedComponent.value?.id ?? null;
 	expandedFields.value.add(fieldKey);
 }
 
 function handleShrink(fieldKey: string) {
+	ssbm.expandedEditorForComponent.value = null;
 	expandedFields.value.delete(fieldKey);
 }
 </script>

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

@@ -155,16 +155,41 @@ async function addPage() {
 }
 
 async function addBlueprint() {
+	const key = getNewBlueprintKey();
+
 	const pageId = createAndInsertComponent(
 		"blueprints_blueprint",
 		"blueprints_root",
+		undefined,
+		key
+			? {
+					content: {
+						key,
+					},
+				}
+			: undefined,
 	);
-	wf.setActivePageId(pageId);
+
 	await nextTick();
+	wf.setActivePageId(pageId);
 	wfbm.setSelection(pageId);
 	tracking.track("blueprints_new_added");
 }
 
+function getNewBlueprintKey() {
+	const existingKeys = allBlueprints.value
+		.map((bp) => bp.content?.key)
+		.filter((key) => key?.startsWith("BLUEPRINT_"))
+		.map((key) => Number.parseInt(key.replace("BLUEPRINT_", ""), 10))
+		.filter((num) => !Number.isNaN(num));
+
+	const maxIndex =
+		existingKeys.length > 0
+			? Math.max(...existingKeys)
+			: allBlueprints.value.length + 10;
+	return `BLUEPRINT_${maxIndex + 1}`;
+}
+
 async function addSharedBlueprint() {
 	const pageId = createAndInsertComponent(
 		"blueprints_blueprint",

src/ui/src/components/blueprints/BlueprintsRoot.vue

@@ -1,5 +1,19 @@
 <template>
 	<div class="BlueprintsRoot" data-writer-container>
+		<div
+			v-if="displayedBlueprintId || displayedBlueprintKey"
+			class="BlueprintsRoot_titleContainer"
+		>
+			<span class="BlueprintsRoot_title_prefix">Blueprint:</span>
+			<div>
+				{{
+					displayedBlueprintKey
+						? displayedBlueprintKey
+						: displayedBlueprintId
+				}}
+			</div>
+			<div v-if="selectedItemKey">> {{ selectedItemKey }}</div>
+		</div>
 		<template v-for="vnode in getChildrenVNodes()" :key="vnode.key">
 			<component
 				:is="vnode"
@@ -28,8 +42,11 @@ export default {
 <script setup lang="ts">
 import { computed, inject, onMounted } from "vue";
 import injectionKeys from "@/injectionKeys";
+import { getSourceBlueprintName } from "@/builder/useComponentDescription";
+import { useComponentInformation } from "@/composables/useComponentInformation";
 
 const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
 const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
 
 const displayedBlueprintId = computed(() => {
@@ -48,13 +65,21 @@ const displayedBlueprintId = computed(() => {
 	return pageComponents[0].id;
 });
 
-onMounted(() => {
-	if (
-		displayedBlueprintId.value &&
-		wf.activePageId.value !== displayedBlueprintId.value
-	) {
-		wf.setActivePageId(displayedBlueprintId.value);
+const displayedBlueprintKey = computed(() => {
+	const displayedBlueprint = wf.getComponentById(displayedBlueprintId.value);
+	return displayedBlueprint?.content?.key;
+});
+
+const selectedItemKey = computed(() => {
+	const { component, definition: def } = useComponentInformation(
+		wf,
+		wfbm.firstSelectedId,
+	);
+	if (!component.value || component.value.type === "blueprints_blueprint") {
+		return null;
 	}
+
+	return component.value?.content?.alias || def.value?.name || "Unknown";
 });
 </script>
 
@@ -68,6 +93,34 @@ onMounted(() => {
 	width: 100%;
 }
 
+.BlueprintsRoot_titleContainer {
+	position: absolute;
+	top: 24px;
+	left: 24px;
+	font-family: Poppins, "Helvetica Neue", "Lucida Grande", sans-serif;
+	font-size: 10px;
+	font-weight: 500;
+	line-height: 10px; /* 100% */
+	letter-spacing: 0.5px;
+	text-transform: none;
+	z-index: 1;
+	pointer-events: none;
+	user-select: none;
+
+	background: var(--builderSubtleSeparatorColor);
+	padding: 8px;
+	border-radius: 8px;
+	border: 1px solid var(--builderSeparatorColor);
+	display: flex;
+	align-items: baseline;
+	gap: 4px;
+}
+
+.BlueprintsRoot_title_prefix {
+	text-transform: none;
+	color: var(--builderSecondaryTextColor);
+}
+
 .BlueprintsRoot.selected {
 	background-color: var(--emptinessColor);
 }

src/ui/src/components/blueprints/abstract/BlueprintsNode.vue

@@ -11,6 +11,7 @@
 			'BlueprintsNode--stopped': completionStyle == 'stopped',
 			'BlueprintsNode--error': completionStyle == 'error',
 		}"
+		@dblclick="handleDoubleClick"
 	>
 		<div
 			v-if="isIntelligent && completionStyle === null"
@@ -110,6 +111,7 @@
 				/>
 				<BlueprintsNodeActions
 					:show-display-error-option="canDisplayErrorOut"
+					:show-open-editor-option="isCodeComponent"
 					@show-error="forceDisplayErrorOut = true"
 				/>
 			</div>
@@ -137,7 +139,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, nextTick, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import BlueprintsNodeNamer from "../base/BlueprintsNodeNamer.vue";
@@ -151,11 +153,15 @@ import BlueprintsNodeLogs from "./BlueprintsNodeLogs.vue";
 import BlueprintsNodeTools from "./BlueprintsNodeTools.vue";
 import { useBlueprintNodeTools } from "@/composables/useBlueprintNodeTools";
 import { getSourceBlueprintName } from "@/builder/useComponentDescription";
+import { useToasts } from "@/builder/useToast";
+import { useWriterTracking } from "@/composables/useWriterTracking";
 
 const emit = defineEmits(["outMousedown", "engaged"]);
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
-const { removeOut } = useComponentActions(wf, wfbm);
+const { removeOut, goToComponentParentPage } = useComponentActions(wf, wfbm);
+const { pushToast } = useToasts();
+const tracking = useWriterTracking(wf);
 const componentId = inject(injectionKeys.componentId);
 const fields = inject(injectionKeys.evaluatedFields);
 
@@ -173,6 +179,10 @@ const isDeprecated = computed(() => {
 
 const { component, definition: def } = useComponentInformation(wf, componentId);
 
+const isCodeComponent = computed(() => {
+	return component.value?.type === "blueprints_code";
+});
+
 const displayName = computed(() => {
 	if (!component.value) return "Unknown";
 	return (
@@ -411,6 +421,44 @@ const possibleImageUrls = computed(() => {
 	return paths.map((p) => convertAbsolutePathtoFullURL(p));
 });
 
+async function handleDoubleClick(ev: MouseEvent) {
+	if (
+		component.value.type === "blueprints_code" ||
+		component.value.type === "blueprints_setstate" ||
+		component.value.type === "blueprints_returnvalue" ||
+		component.value.type === "blueprints_logmessage"
+	) {
+		const isSelected = wfbm.isComponentIdSelected(componentId);
+		if (isSelected) {
+			// Expand the code editor
+			wfbm.expandedEditorForComponent.value = componentId;
+			tracking.track(
+				isCodeComponent.value
+					? "dbl_click_for_code_editor_opened"
+					: "dbl_click_for_value_opened",
+			);
+		}
+	} else if (component.value.type === "blueprints_runblueprint") {
+		const bpKey = component.value.content?.blueprintKey ?? "";
+		if (!bpKey) return;
+
+		const blueprint = wf
+			.getComponents("blueprints_root")
+			.find((page) => page.content.key === bpKey);
+
+		if (!blueprint) return;
+		goToComponentParentPage(blueprint.id);
+		await nextTick();
+		wfbm.handleSelectionFromEvent(ev, blueprint.id, undefined, "tree");
+
+		pushToast({
+			type: "success",
+			message: `Navigated to ${blueprint.content.key} blueprint`,
+		});
+		tracking.track("dbl_click_for_blueprint_navigated");
+	}
+}
+
 function openLogs() {
 	const item = latestKnownOutcomes.value.at(-1);
 	if (!item) return;

src/ui/src/components/blueprints/abstract/BlueprintsNodeActions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from "vue";
+import { computed, inject, nextTick } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useComponentInformation } from "@/composables/useComponentInformation";
 import { useBlueprintComponentResultId } from "@/composables/useBlueprintComponentResultId";
@@ -22,6 +22,7 @@ const instancePath = inject(injectionKeys.instancePath);
 
 const props = defineProps({
 	showDisplayErrorOption: { type: Boolean },
+	showOpenEditorOption: { type: Boolean },
 });
 
 const emits = defineEmits({
@@ -39,6 +40,13 @@ function copyComponentId() {
 	copy(resultId.value);
 }
 
+async function openEditorForComponent() {
+	wfbm.setSelection(componentId, undefined, "click");
+	await nextTick();
+	wfbm.expandedEditorForComponent.value = componentId;
+	tracking.track("button_click_for_code_editor_opened");
+}
+
 const settingsActions = useBuilderSettingsActions(
 	wf,
 	wfbm,
@@ -96,6 +104,17 @@ const dropdownOptions = computed(() => {
 
 <template>
 	<div class="BlueprintsNodeActions">
+		<WdsButton
+			v-if="props.showOpenEditorOption"
+			size="smallIcon"
+			variant="neutral"
+			data-writer-tooltip-placement="bottom"
+			data-writer-unselectable
+			data-writer-tooltip="Open editor"
+			@click.prevent="openEditorForComponent"
+		>
+			<WdsIcon name="code" />
+		</WdsButton>
 		<WdsButton
 			v-if="resultId"
 			size="smallIcon"

src/ui/src/composables/useWriterTracking.ts

@@ -41,7 +41,11 @@ type WriterTrackingEventName =
 	| "blueprints_block_output_copied"
 	| "blueprints_shared_added"
 	| "blueprints_shared_published"
-	| "blueprints_shared_installed";
+	| "blueprints_shared_installed"
+	| "dbl_click_for_code_editor_opened"
+	| "dbl_click_for_value_opened"
+	| "button_click_for_code_editor_opened"
+	| "dbl_click_for_blueprint_navigated";
 
 type EventProperties = {
 	[key: string]: unknown;