fix(editor): Fix displaying logic of execution retry button (#9061)

Author: cstuncsik

packages/editor-ui/src/components/ExecutionsList.vue

@@ -894,15 +894,6 @@ export default defineComponent({
 				this.showError(error, this.i18n.baseText('executionsList.showError.stopExecution.title'));
 			}
 		},
-		isExecutionRetriable(execution: ExecutionSummary): boolean {
-			return (
-				execution.stoppedAt !== undefined &&
-				!execution.finished &&
-				execution.retryOf === undefined &&
-				execution.retrySuccessId === undefined &&
-				!execution.waitTill
-			);
-		},
 		async deleteExecution(execution: ExecutionSummary) {
 			this.isDataLoading = true;
 			try {
@@ -1160,6 +1151,7 @@ export default defineComponent({
 			background: var(--execution-card-border-waiting);
 		}
 
+		&.canceled td:first-child::before,
 		&.unknown td:first-child::before {
 			background: var(--execution-card-border-unknown);
 		}

packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue

@@ -59,7 +59,7 @@
 			</div>
 			<div :class="$style.icons">
 				<n8n-action-dropdown
-					v-if="executionUIDetails.name === 'error'"
+					v-if="isRetriable"
 					:class="[$style.icon, $style.retry]"
 					:items="retryExecutionActions"
 					activator-icon="redo"
@@ -83,7 +83,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type { ExecutionSummary } from '@/Interface';
+import type { ExecutionSummary } from 'n8n-workflow';
 import type { IExecutionUIData } from '@/mixins/executionsHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { VIEWS } from '@/constants';
@@ -133,6 +133,9 @@ export default defineComponent({
 		isActive(): boolean {
 			return this.execution.id === this.$route.params.executionId;
 		},
+		isRetriable(): boolean {
+			return this.isExecutionRetriable(this.execution);
+		},
 	},
 	methods: {
 		onRetryMenuItemSelect(action: string): void {

packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue

@@ -96,7 +96,7 @@
 				</n8n-button>
 
 				<ElDropdown
-					v-if="executionUIDetails?.name === 'error'"
+					v-if="isRetriable"
 					ref="retryDropdown"
 					trigger="click"
 					class="mr-xs"
@@ -190,6 +190,9 @@ export default defineComponent({
 						type: 'primary',
 					};
 		},
+		isRetriable(): boolean {
+			return !!this.activeExecution && this.isExecutionRetriable(this.activeExecution);
+		},
 	},
 	methods: {
 		async onDeleteExecution(): Promise<void> {

packages/editor-ui/src/components/ExecutionsView/__tests__/ExecutionCard.test.ts

@@ -0,0 +1,77 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import ExecutionCard from '@/components/ExecutionsView/ExecutionCard.vue';
+import { createPinia, setActivePinia } from 'pinia';
+
+const renderComponent = createComponentRenderer(ExecutionCard, {
+	global: {
+		stubs: {
+			'router-link': {
+				template: '<div><slot /></div>',
+			},
+		},
+		mocks: {
+			$route: {
+				params: {},
+			},
+		},
+	},
+});
+
+describe('ExecutionCard', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+	});
+
+	test.each([
+		[
+			{
+				id: '1',
+				mode: 'manual',
+				status: 'success',
+				retryOf: null,
+				retrySuccessId: null,
+			},
+			false,
+		],
+		[
+			{
+				id: '2',
+				mode: 'manual',
+				status: 'error',
+				retryOf: null,
+				retrySuccessId: null,
+			},
+			true,
+		],
+		[
+			{
+				id: '3',
+				mode: 'manual',
+				status: 'error',
+				retryOf: '2',
+				retrySuccessId: null,
+			},
+			false,
+		],
+		[
+			{
+				id: '4',
+				mode: 'manual',
+				status: 'error',
+				retryOf: null,
+				retrySuccessId: '3',
+			},
+			false,
+		],
+	])('with execution %j retry button visibility is %s', (execution, shouldRenderRetryBtn) => {
+		const { queryByTestId } = renderComponent({
+			props: {
+				execution,
+			},
+		});
+
+		expect(!!queryByTestId('retry-execution-button') && shouldRenderRetryBtn).toBe(
+			shouldRenderRetryBtn,
+		);
+	});
+});

packages/editor-ui/src/mixins/executionsHelpers.ts

@@ -74,5 +74,12 @@ export const executionHelpers = defineComponent({
 			const { date, time } = convertToDisplayDate(fullDate);
 			return locale.baseText('executionsList.started', { interpolate: { time, date } });
 		},
+		isExecutionRetriable(execution: ExecutionSummary): boolean {
+			return (
+				['crashed', 'error'].includes(execution.status ?? '') &&
+				!execution.retryOf &&
+				!execution.retrySuccessId
+			);
+		},
 	},
 });