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>