feat(editor): Add clear execution button to new canvas (no-changelog) (#10010)

packages/editor-ui/src/components/canvas/elements/buttons/CanvasClearExecutionDataButton.spec.ts

@@ -0,0 +1,12 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import CanvasClearExecutionDataButton from './CanvasClearExecutionDataButton.vue';
+
+const renderComponent = createComponentRenderer(CanvasClearExecutionDataButton);
+
+describe('CanvasClearExecutionDataButton', () => {
+	it('should render correctly', () => {
+		const wrapper = renderComponent();
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

packages/editor-ui/src/components/canvas/elements/buttons/CanvasClearExecutionDataButton.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+
+const i18n = useI18n();
+</script>
+<template>
+	<n8n-icon-button
+		:title="i18n.baseText('nodeView.deletesTheCurrentExecutionData')"
+		icon="trash"
+		size="large"
+		data-test-id="clear-execution-data-button"
+	/>
+</template>

packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasClearExecutionDataButton.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CanvasClearExecutionDataButton > should render correctly 1`] = `
+"<button class="button button primary large withIcon square" aria-live="polite" title="Deletes the current execution data" data-test-id="clear-execution-data-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-trash fa-w-14 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg></span></span>
+  <!--v-if-->
+</button>"
+`;

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

@@ -83,6 +83,7 @@ import { getNodeViewTab } from '@/utils/canvasUtils';
 import { parseCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
 import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue';
 import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue';
+import CanvasClearExecutionDataButton from '@/components/canvas/elements/buttons/CanvasClearExecutionDataButton.vue';
 import { nodeViewEventBus } from '@/event-bus';
 
 const NodeCreation = defineAsyncComponent(
@@ -614,6 +615,16 @@ const isStopExecutionButtonVisible = computed(
 const isStopWaitingForWebhookButtonVisible = computed(
 	() => isWorkflowRunning.value && isExecutionWaitingForWebhook.value,
 );
+const isClearExecutionButtonVisible = computed(
+	() =>
+		!isReadOnlyRoute.value &&
+		!isReadOnlyEnvironment.value &&
+		!isWorkflowRunning.value &&
+		!allTriggerNodesDisabled.value &&
+		workflowExecutionData.value,
+);
+
+const workflowExecutionData = computed(() => workflowsStore.workflowExecutionData);
 
 async function onRunWorkflow() {
 	trackRunWorkflow();
@@ -672,6 +683,11 @@ async function onStopWaitingForWebhook() {
 	await stopWaitingForWebhook();
 }
 
+async function onClearExecutionData() {
+	workflowsStore.workflowExecutionData = null;
+	nodeHelpers.updateNodesExecutionIssues();
+}
+
 function onRunWorkflowButtonMouseEnter() {
 	nodeViewEventBus.emit('runWorkflowButton:mouseenter');
 }
@@ -1083,6 +1099,10 @@ onBeforeUnmount(() => {
 				v-if="isStopWaitingForWebhookButtonVisible"
 				@click="onStopWaitingForWebhook"
 			/>
+			<CanvasClearExecutionDataButton
+				v-if="isClearExecutionButtonVisible"
+				@click="onClearExecutionData"
+			/>
 		</div>
 		<Suspense>
 			<NodeCreation