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/ExecutionPreview.vue

@@ -1,11 +1,14 @@
 <template>
 	<div v-if="executionUIDetails && executionUIDetails.name === 'running'" :class="$style.runningInfo">
 		<div :class="$style.spinner">
-			<font-awesome-icon icon="spinner" spin />
+			<n8n-spinner type="ring" />
 		</div>
-		<n8n-text :class="$style.runningMessage">
+		<n8n-text :class="$style.runningMessage" color="text-light">
 			{{ $locale.baseText('executionDetails.runningMessage') }}
 		</n8n-text>
+		<n8n-button class="mt-l" type="tertiary" size="medium" @click="handleStopClick">
+			{{ $locale.baseText('executionsList.stopExecution') }}
+		</n8n-button>
 	</div>
 	<div v-else :class="$style.previewContainer">
 		<div :class="{[$style.executionDetails]: true, [$style.sidebarCollapsed]: sidebarCollapsed }" v-if="activeExecution">
@@ -111,6 +114,9 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		handleRetryClick(command: string): void {
 			this.$emit('retryExecution', { execution: this.activeExecution, command });
 		},
+		handleStopClick(): void {
+			this.$emit('stopExecution');
+		},
 		onRetryButtonBlur(event: FocusEvent): void {
 			// Hide dropdown when clicking outside of current document
 			const retryDropdown = this.$refs.retryDropdown as Vue & { hide: () => void } | undefined;
@@ -146,6 +152,14 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 	}
 }
 
+.spinner {
+	div div {
+		width: 30px;
+		height: 30px;
+		border-width: 2px;
+	}
+}
+
 .running, .spinner { color: var(--color-warning); }
 .waiting { color: var(--color-secondary); }
 .success { color: var(--color-success); }
@@ -158,11 +172,6 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 	margin-top: var(--spacing-4xl);
 }
 
-.spinner {
-	font-size: var(--font-size-2xl);
-	color: var(--color-primary);
-}
-
 .runningMessage {
 	width: 200px;
 	margin-top: var(--spacing-l);