From 4559e3ae18e70f7fe25defac0e2601fc1a696337 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 19 Jul 2024 14:40:00 +0300
Subject: [PATCH] feat(editor): Cleanup unused keymap functions and add
 additional onSave events in new canvas (no-changelog) (#10106)

---
 .../components/MainHeader/WorkflowDetails.vue |  3 +-
 .../render-types/parts/CanvasHandlePlus.vue   |  2 +-
 .../render-types/CanvasNodeStickyNote.vue     |  5 ++
 packages/editor-ui/src/views/NodeView.v2.vue  | 57 +++++++++++++------
 4 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 2e56fcb60a..f85708d45e 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -116,7 +116,7 @@ const isNewWorkflow = computed(() => {
 });
 
 const isWorkflowSaving = computed(() => {
-	return uiStore.isActionActive['workflowSaving'];
+	return uiStore.isActionActive.workflowSaving;
 });
 
 const onWorkflowPage = computed(() => {
@@ -710,6 +710,7 @@ function showCreateWorkflowSuccessToast(id?: string) {
 					type="primary"
 					:saved="!uiStore.stateIsDirty && !isNewWorkflow"
 					:disabled="isWorkflowSaving || readOnly"
+					:is-saving="isWorkflowSaving"
 					with-shortcut
 					:shortcut-tooltip="$locale.baseText('saveWorkflowButton.hint')"
 					data-test-id="workflow-save-button"
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
index 27d9bceb1c..eb88dfb3a5 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
@@ -3,7 +3,7 @@ import { computed, useCssModule } from 'vue';
 
 const props = withDefaults(
 	defineProps<{
-		position: 'top' | 'right' | 'bottom' | 'left';
+		position?: 'top' | 'right' | 'bottom' | 'left';
 	}>(),
 	{
 		position: 'right',
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
index d740f17e76..d290dbe26b 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
@@ -7,6 +7,10 @@ import { NodeResizer } from '@vue-flow/node-resizer';
 import type { OnResize } from '@vue-flow/node-resizer/dist/types';
 import type { XYPosition } from '@vue-flow/core';
 
+defineOptions({
+	inheritAttrs: false,
+});
+
 const emit = defineEmits<{
 	update: [parameters: Record<string, unknown>];
 	move: [position: XYPosition];
@@ -62,6 +66,7 @@ function onDoubleClick(event: MouseEvent) {
 		@resize="onResize"
 	/>
 	<N8nSticky
+		v-bind="$attrs"
 		:id="id"
 		data-test-id="canvas-sticky-note-node"
 		:height="renderOptions.height"
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 5aa7069c1b..23e84da26d 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -496,7 +496,30 @@ function onPinNodes(ids: string[], source: PinDataSource) {
 }
 
 async function onSaveWorkflow() {
-	await workflowHelpers.saveCurrentWorkflow();
+	const saved = await workflowHelpers.saveCurrentWorkflow();
+	if (saved) {
+		canvasEventBus.emit('saved:workflow');
+	}
+}
+
+function addWorkflowSavedEventBindings() {
+	canvasEventBus.on('saved:workflow', npsSurveyStore.fetchPromptsData);
+	canvasEventBus.on('saved:workflow', onSaveFromWithinNDV);
+}
+
+function removeWorkflowSavedEventBindings() {
+	canvasEventBus.off('saved:workflow', npsSurveyStore.fetchPromptsData);
+	canvasEventBus.off('saved:workflow', onSaveFromWithinNDV);
+	canvasEventBus.off('saved:workflow', onSaveFromWithinExecutionDebug);
+}
+
+async function onSaveFromWithinNDV() {
+	if (ndvStore.activeNodeName) {
+		toast.showMessage({
+			title: i18n.baseText('generic.workflowSaved'),
+			type: 'success',
+		});
+	}
 }
 
 async function onCreateWorkflow() {
@@ -874,20 +897,6 @@ const chatTriggerNodePinnedData = computed(() => {
 	return workflowsStore.pinDataByNodeName(chatTriggerNode.value.name);
 });
 
-/**
- * Keyboard
- */
-
-function addKeyboardEventBindings() {
-	// document.addEventListener('keydown', this.keyDown);
-	// document.addEventListener('keyup', this.keyUp);
-}
-
-function removeKeyboardEventBindings() {
-	// document.removeEventListener('keydown', this.keyDown);
-	// document.removeEventListener('keyup', this.keyUp);
-}
-
 /**
  * History events
  */
@@ -1074,13 +1083,25 @@ function checkIfRouteIsAllowed() {
 async function initializeDebugMode() {
 	if (route.name === VIEWS.EXECUTION_DEBUG) {
 		titleSet(workflowsStore.workflowName, 'DEBUG');
+
 		if (!workflowsStore.isInDebugMode) {
 			await applyExecutionData(route.params.executionId as string);
 			workflowsStore.isInDebugMode = true;
 		}
+
+		canvasEventBus.on('saved:workflow', onSaveFromWithinExecutionDebug);
 	}
 }
 
+async function onSaveFromWithinExecutionDebug() {
+	if (route.name !== VIEWS.EXECUTION_DEBUG) return;
+
+	await router.replace({
+		name: VIEWS.WORKFLOW,
+		params: { name: workflowId.value },
+	});
+}
+
 /**
  * Canvas
  */
@@ -1223,9 +1244,9 @@ onMounted(async () => {
 
 	addUndoRedoEventBindings();
 	addPostMessageEventBindings();
-	addKeyboardEventBindings();
 	addSourceControlEventBindings();
 	addImportEventBindings();
+	addWorkflowSavedEventBindings();
 
 	registerCustomActions();
 
@@ -1239,9 +1260,9 @@ onMounted(async () => {
 onBeforeUnmount(() => {
 	removeUndoRedoEventBindings();
 	removePostMessageEventBindings();
-	removeKeyboardEventBindings();
 	removeSourceControlEventBindings();
 	removeImportEventBindings();
+	removeWorkflowSavedEventBindings();
 });
 </script>
 
@@ -1320,10 +1341,10 @@ onBeforeUnmount(() => {
 				@stop-execution="onStopExecution"
 				@switch-selected-node="onSwitchActiveNode"
 				@open-connection-node-creator="onOpenSelectiveNodeCreator"
+				@save-keyboard-shortcut="onSaveWorkflow"
 			/>
 			<!--
 				:renaming="renamingActive"
-				@save-keyboard-shortcut="onSaveKeyboardShortcut"
 			-->
 		</Suspense>
 	</WorkflowCanvas>