From 617ae2b6b133f25ca61e15db2525ca64e4db3f18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 30 Nov 2023 12:12:26 +0100
Subject: [PATCH] fix(editor): Fix deletion of last execution at execution
 preview (#7883)

https://linear.app/n8n/issue/PAY-1062
---
 cypress/e2e/19-execution.cy.ts                   | 16 +++++++++++++++-
 cypress/pages/workflow-executions-tab.ts         |  5 +++++
 .../components/ExecutionsView/ExecutionsList.vue |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/19-execution.cy.ts b/cypress/e2e/19-execution.cy.ts
index e8e4990e431e0..71ed553c58c52 100644
--- a/cypress/e2e/19-execution.cy.ts
+++ b/cypress/e2e/19-execution.cy.ts
@@ -1,7 +1,8 @@
 import { v4 as uuid } from 'uuid';
-import { NDV, WorkflowPage as WorkflowPageClass, WorkflowsPage } from '../pages';
+import { NDV, WorkflowExecutionsTab, WorkflowPage as WorkflowPageClass } from '../pages';
 
 const workflowPage = new WorkflowPageClass();
+const executionsTab = new WorkflowExecutionsTab();
 const ndv = new NDV();
 
 describe('Execution', () => {
@@ -274,4 +275,17 @@ describe('Execution', () => {
 		// Check success toast (works because Cypress waits enough for the element to show after the http request node has finished)
 		workflowPage.getters.successToast().should('be.visible');
 	});
+
+	describe('execution preview', () => {
+		it('when deleting the last execution, it should show empty state', () => {
+			workflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
+			workflowPage.actions.executeWorkflow();
+			executionsTab.actions.switchToExecutionsTab();
+
+			executionsTab.actions.deleteExecutionInPreview();
+
+			executionsTab.getters.successfulExecutionListItems().should('have.length', 0);
+			workflowPage.getters.successToast().contains('Execution deleted');
+		});
+	});
 });
diff --git a/cypress/pages/workflow-executions-tab.ts b/cypress/pages/workflow-executions-tab.ts
index eff3fedd3095b..70774fa135534 100644
--- a/cypress/pages/workflow-executions-tab.ts
+++ b/cypress/pages/workflow-executions-tab.ts
@@ -14,6 +14,7 @@ export class WorkflowExecutionsTab extends BasePage {
 		failedExecutionListItems: () => cy.get('[data-test-execution-status="error"]'),
 		executionCard: (executionId: string) => cy.getByTestId(`execution-details-${executionId}`),
 		executionPreviewDetails: () => cy.get('[data-test-id^="execution-preview-details-"]'),
+		executionPreviewDeleteButton: () => cy.get('[data-test-id="execution-preview-delete-button"]'),
 		executionPreviewDetailsById: (executionId: string) =>
 			cy.getByTestId(`execution-preview-details-${executionId}`),
 		executionPreviewTime: () =>
@@ -42,5 +43,9 @@ export class WorkflowExecutionsTab extends BasePage {
 		switchToEditorTab: () => {
 			workflowPage.getters.editorTabButton().click();
 		},
+		deleteExecutionInPreview: () => {
+			this.getters.executionPreviewDeleteButton().click();
+			cy.get('button.btn--confirm').click();
+		},
 	};
 }
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
index c4b66f343da71..479e5f4201ada 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
@@ -282,6 +282,7 @@ export default defineComponent({
 					this.executions[0];
 
 				await this.workflowsStore.deleteExecutions({ ids: [this.$route.params.executionId] });
+				this.workflowsStore.deleteExecution(this.executions[executionIndex]);
 				if (this.temporaryExecution?.id === this.$route.params.executionId) {
 					this.temporaryExecution = null;
 				}
@@ -293,6 +294,7 @@ export default defineComponent({
 						})
 						.catch(() => {});
 					this.workflowsStore.activeWorkflowExecution = nextExecution;
+					await this.setExecutions();
 				} else {
 					// If there are no executions left, show empty state and clear active execution from the store
 					this.workflowsStore.activeWorkflowExecution = null;
@@ -301,7 +303,6 @@ export default defineComponent({
 						params: { name: this.currentWorkflow },
 					});
 				}
-				await this.setExecutions();
 			} catch (error) {
 				this.loading = false;
 				this.showError(