fix(editor): Add 'Stop execution' button to execution preview (#4632)

* ✨ Adding `Stop execution` button to execution preview
* ✨ Added execution timer for running executions
* 💄 Adjusting spinner size and text color
* 🔥 Removing excessive popup error message when opening failed executions preview
* 🐛 Handling execution stopping when workflow is not saving manual executions

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

@@ -12,7 +12,12 @@
 			@refresh="loadAutoRefresh"
 		/>
 		<div :class="$style.content" v-if="!hidePreview">
-			<router-view name="executionPreview" @deleteCurrentExecution="onDeleteCurrentExecution" @retryExecution="onRetryExecution"/>
+			<router-view
+				name="executionPreview"
+				@deleteCurrentExecution="onDeleteCurrentExecution"
+				@retryExecution="onRetryExecution"
+				@stopExecution="onStopExecution"
+			/>
 		</div>
 		<div v-if="executions.length === 0 && filterApplied" :class="$style.noResultsContainer">
 			<n8n-text color="text-base" size="medium" align="center">
@@ -240,6 +245,29 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				type: 'success',
 			});
 		},
+		async onStopExecution(): Promise<void> {
+			const activeExecutionId = this.$route.params.executionId;
+
+			try {
+				await this.restApi().stopCurrentExecution(activeExecutionId);
+
+				this.$showMessage({
+					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
+					message: this.$locale.baseText(
+						'executionsList.showMessage.stopExecution.message',
+						{ interpolate: { activeExecutionId } },
+					),
+					type: 'success',
+				});
+
+				this.loadAutoRefresh();
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.stopExecution.title'),
+				);
+			}
+		},
 		onFilterUpdated(newFilter: { finished: boolean, status: string }): void {
 			this.filter = newFilter;
 			this.setExecutions();
@@ -304,9 +332,12 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				const activeNotInTheList = existingExecutions.find(ex => ex.id === this.activeExecution.id) === undefined;
 				if (activeNotInTheList && this.executions.length > 0) {
 					this.$router.push({
-					name: VIEWS.EXECUTION_PREVIEW,
-					params: { name: this.currentWorkflow, executionId: this.executions[0].id },
-				}).catch(()=>{});;
+						name: VIEWS.EXECUTION_PREVIEW,
+						params: { name: this.currentWorkflow, executionId: this.executions[0].id },
+					}).catch(()=>{});
+				} else if (this.executions.length === 0) {
+					this.$router.push({ name: VIEWS.EXECUTION_HOME }).catch(()=>{});
+					this.workflowsStore.activeWorkflowExecution = null;
 				}
 			}
 		},