refactor(editor): Fix NodeView/Canvas related TS errors (#9581)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

packages/editor-ui/src/stores/canvas.store.ts

@@ -52,7 +52,8 @@ export const useCanvasStore = defineStore('canvas', () => {
 
 	const jsPlumbInstanceRef = ref<BrowserJsPlumbInstance>();
 	const isDragging = ref<boolean>(false);
-	const lastSelectedConnection = ref<Connection | null>(null);
+	const lastSelectedConnection = ref<Connection>();
+
 	const newNodeInsertPosition = ref<XYPosition | null>(null);
 
 	const nodes = computed<INodeUi[]>(() => workflowStore.allNodes);
@@ -68,6 +69,9 @@ export const useCanvasStore = defineStore('canvas', () => {
 	const nodeViewScale = ref<number>(1);
 	const canvasAddButtonPosition = ref<XYPosition>([1, 1]);
 	const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
+	const lastSelectedConnectionComputed = computed<Connection | undefined>(
+		() => lastSelectedConnection.value,
+	);
 
 	watch(readOnlyEnv, (readOnly) => {
 		if (jsPlumbInstanceRef.value) {
@@ -75,6 +79,10 @@ export const useCanvasStore = defineStore('canvas', () => {
 		}
 	});
 
+	const setLastSelectedConnection = (connection: Connection | undefined) => {
+		lastSelectedConnection.value = connection;
+	};
+
 	const setRecenteredCanvasAddButtonPosition = (offset?: XYPosition) => {
 		const position = getMidCanvasPosition(nodeViewScale.value, offset ?? [0, 0]);
 
@@ -314,11 +322,12 @@ export const useCanvasStore = defineStore('canvas', () => {
 		isDemo,
 		nodeViewScale,
 		canvasAddButtonPosition,
-		lastSelectedConnection,
 		newNodeInsertPosition,
 		jsPlumbInstance,
 		isLoading: loadingService.isLoading,
 		aiNodes,
+		lastSelectedConnection: lastSelectedConnectionComputed,
+		setLastSelectedConnection,
 		startLoading: loadingService.startLoading,
 		setLoadingText: loadingService.setLoadingText,
 		stopLoading: loadingService.stopLoading,

packages/editor-ui/src/stores/workflows.store.ts

@@ -30,6 +30,7 @@ import type {
 	NodeMetadataMap,
 	WorkflowMetadata,
 	IExecutionFlattedResponse,
+	IWorkflowTemplateNode,
 } from '@/Interface';
 import { defineStore } from 'pinia';
 import type {
@@ -312,9 +313,31 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		setNodeValue({ name: node.name, key: 'position', value: position });
 	}
 
+	function convertTemplateNodeToNodeUi(node: IWorkflowTemplateNode): INodeUi {
+		const filteredCredentials = Object.keys(node.credentials ?? {}).reduce<INodeCredentials>(
+			(credentials, curr) => {
+				const credential = node?.credentials?.[curr];
+				if (!credential || typeof credential === 'string') {
+					return credentials;
+				}
+
+				credentials[curr] = credential;
+
+				return credentials;
+			},
+			{},
+		);
+
+		return {
+			...node,
+			credentials: filteredCredentials,
+		};
+	}
+
 	function getWorkflow(nodes: INodeUi[], connections: IConnections, copyData?: boolean): Workflow {
 		const nodeTypes = getNodeTypes();
 		let cachedWorkflowId: string | undefined = workflowId.value;
+
 		if (cachedWorkflowId && cachedWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 			cachedWorkflowId = undefined;
 		}
@@ -327,7 +350,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			active: false,
 			nodeTypes,
 			settings: workflowSettings.value,
-			// @ts-ignore
 			pinData: pinnedWorkflowData.value,
 		});
 
@@ -1520,6 +1542,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		getPinDataSize,
 		getNodeTypes,
 		getNodes,
+		convertTemplateNodeToNodeUi,
 		getWorkflow,
 		getCurrentWorkflow,
 		getWorkflowFromUrl,