fix(editor): Fix for executions preview scroll load and wrong execution displayed (#4994)

* 🐛 Only add current workflow executions to to store when loading executions from global list
* 🐛 Fixing infinite scroll on executions list
* 🐛 Fixing global and current executions list sync
* ⚡ Resetting executions list when opening new workflow
* 🐛 Handling opening execution from global list before opening a workflow
* ⚡ Scrolling to active execution card if out of view, keeping selected execution after workflow load

packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue

@@ -71,6 +71,7 @@
 				v-for="execution in executions"
 				:key="execution.id"
 				:execution="execution"
+				:ref="`execution-${execution.id}`"
 				@refresh="onRefresh"
 				@retryExecution="onRetryExecution"
 			/>
@@ -95,6 +96,7 @@ import Vue from 'vue';
 import { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export default Vue.extend({
 	name: 'executions-sidebar',
@@ -127,7 +129,7 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		...mapStores(useUIStore),
+		...mapStores(useUIStore, useWorkflowsStore),
 		statusFilterApplied(): boolean {
 			return this.filter.status !== '';
 		},
@@ -153,6 +155,7 @@ export default Vue.extend({
 		if (this.autoRefresh) {
 			this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000);
 		}
+		this.scrollToActiveCard();
 	},
 	beforeDestroy() {
 		if (this.autoRefreshInterval) {
@@ -206,6 +209,18 @@ export default Vue.extend({
 				status: this.filter.status,
 			};
 		},
+		scrollToActiveCard(): void {
+			const executionsList = this.$refs.executionList as HTMLElement;
+			const currentExecutionCard = this.$refs[`execution-${this.workflowsStore.activeWorkflowExecution?.id}`] as Vue[];
+
+			if (executionsList && currentExecutionCard && this.workflowsStore.activeWorkflowExecution) {
+				const cardElement = currentExecutionCard[0].$el as HTMLElement;
+				const cardRect = cardElement.getBoundingClientRect();
+				if (cardRect.top > executionsList.offsetHeight) {
+					executionsList.scrollTo({ top: cardRect.top });
+				}
+			}
+		},
 	},
 });
 </script>

packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue

@@ -174,7 +174,13 @@ export default mixins(
 		const shouldUpdate = workflowUpdated && !onNewWorkflow;
 		await this.initView(shouldUpdate);
 		if (!shouldUpdate) {
-			await this.setExecutions();
+			if (this.workflowsStore.currentWorkflowExecutions.length > 0) {
+				const workflowExecutions = await this.loadExecutions();
+				this.workflowsStore.addToCurrentExecutions(workflowExecutions);
+				this.setActiveExecution();
+			} else {
+				await this.setExecutions();
+			}
 		}
 		this.loading = false;
 	},
@@ -186,7 +192,9 @@ export default mixins(
 				}
 				await this.openWorkflow(this.$route.params.name);
 				this.uiStore.nodeViewInitialized = false;
-				this.setExecutions();
+				if(this.workflowsStore.currentWorkflowExecutions.length === 0) {
+					this.setExecutions();
+				}
 				if (this.activeExecution) {
 					this.$router
 						.push({