fix(editor): Fix deletion of last execution at execution preview (#7883)

https://linear.app/n8n/issue/PAY-1062

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');
+		});
+	});
 });

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();
+		},
 	};
 }

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(