feat(editor): Add stop current execution button in new canvas (no-changelog) (#9968)

packages/editor-ui/src/views/NodeView.v2.vue

@@ -73,8 +73,10 @@ import { useUsersStore } from '@/stores/users.store';
 import { sourceControlEventBus } from '@/event-bus/source-control';
 import { useTagsStore } from '@/stores/tags.store';
 import { usePushConnectionStore } from '@/stores/pushConnection.store';
-import { getNodeViewTab } from '@/utils/canvasUtils';
 import { useNDVStore } from '@/stores/ndv.store';
+import { getNodeViewTab } from '@/utils/canvasUtils';
+import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue';
+import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue';
 
 const NodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
@@ -120,7 +122,7 @@ const ndvStore = useNDVStore();
 
 const lastClickPosition = ref<XYPosition>([450, 450]);
 
-const { runWorkflow } = useRunWorkflow({ router });
+const { runWorkflow, stopCurrentExecution, stopWaitingForWebhook } = useRunWorkflow({ router });
 const {
 	updateNodePosition,
 	renameNode,
@@ -147,7 +149,6 @@ const readOnlyNotification = ref<null | { visible: boolean }>(null);
 
 const isProductionExecutionPreview = ref(false);
 const isExecutionPreview = ref(false);
-const isExecutionWaitingForWebhook = ref(false);
 
 const canOpenNDV = ref(true);
 const hideNodeIssues = ref(false);
@@ -348,7 +349,9 @@ async function openWorkflow(data: IWorkflowDb) {
 
 	resetWorkspace();
 
-	await workflowHelpers.initState(data, true);
+	await workflowHelpers.initState(data);
+	await addNodes(data.nodes);
+	workflowsStore.setConnections(data.connections);
 
 	if (data.sharedWithProjects) {
 		workflowsEEStore.setWorkflowSharedWith({
@@ -536,6 +539,18 @@ function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
  * Executions
  */
 
+const isStoppingExecution = ref(false);
+
+const isWorkflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
+const isExecutionWaitingForWebhook = computed(() => workflowsStore.executionWaitingForWebhook);
+
+const isStopExecutionButtonVisible = computed(
+	() => isWorkflowRunning.value && !isExecutionWaitingForWebhook.value,
+);
+const isStopWaitingForWebhookButtonVisible = computed(
+	() => isWorkflowRunning.value && isExecutionWaitingForWebhook.value,
+);
+
 async function onRunWorkflow() {
 	trackRunWorkflow();
 
@@ -583,8 +598,18 @@ async function openExecution(_executionId: string) {
 	// @TODO
 }
 
+async function onStopExecution() {
+	isStoppingExecution.value = true;
+	await stopCurrentExecution();
+	isStoppingExecution.value = false;
+}
+
+async function onStopWaitingForWebhook() {
+	await stopWaitingForWebhook();
+}
+
 /**
- * Keboard
+ * Keyboard
  */
 
 function addKeyboardEventBindings() {
@@ -938,7 +963,20 @@ onBeforeUnmount(() => {
 		@click:pane="onClickPane"
 	>
 		<div :class="$style.executionButtons">
-			<CanvasExecuteWorkflowButton @click="onRunWorkflow" />
+			<CanvasExecuteWorkflowButton
+				:waiting-for-webhook="isExecutionWaitingForWebhook"
+				:executing="isWorkflowRunning"
+				@click="onRunWorkflow"
+			/>
+			<CanvasStopCurrentExecutionButton
+				v-if="isStopExecutionButtonVisible"
+				:stopping="isStoppingExecution"
+				@click="onStopExecution"
+			/>
+			<CanvasStopWaitingForWebhookButton
+				v-if="isStopWaitingForWebhookButtonVisible"
+				@click="onStopWaitingForWebhook"
+			/>
 		</div>
 		<Suspense>
 			<NodeCreation
@@ -956,12 +994,12 @@ onBeforeUnmount(() => {
 				:is-production-execution-preview="isProductionExecutionPreview"
 				:renaming="false"
 				@value-changed="onRenameNode"
+				@stop-execution="onStopExecution"
 				@switch-selected-node="onSwitchActiveNode"
 				@open-connection-node-creator="onOpenConnectionNodeCreator"
 			/>
 			<!--
 				:renaming="renamingActive"
-				@stop-execution="stopExecution"
 				@save-keyboard-shortcut="onSaveKeyboardShortcut"
 			-->
 		</Suspense>