refactor(core): Separate execution startedAt from createdAt (#10810)

packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue

@@ -62,7 +62,9 @@ const classes = computed(() => {
 });
 
 const formattedStartedAtDate = computed(() => {
-	return props.execution.startedAt ? formatDate(props.execution.startedAt) : '';
+	return props.execution.startedAt
+		? formatDate(props.execution.startedAt)
+		: i18n.baseText('executionsList.startingSoon');
 });
 
 const formattedWaitTillDate = computed(() => {

packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.test.ts

@@ -150,4 +150,25 @@ describe('WorkflowExecutionsCard', () => {
 			}
 		},
 	);
+
+	test('displays correct text for new execution', () => {
+		const createdAt = new Date('2024-09-27T12:00:00Z');
+		const props = {
+			execution: {
+				id: '1',
+				mode: 'manual',
+				status: 'new',
+				createdAt: createdAt.toISOString(),
+			},
+			workflowPermissions: {
+				execute: true,
+			},
+		};
+
+		const { getByTestId } = renderComponent({ props });
+
+		const executionTimeElement = getByTestId('execution-time');
+		expect(executionTimeElement).toBeVisible();
+		expect(executionTimeElement.textContent).toBe('27 Sep - Starting soon');
+	});
 });

packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.vue

@@ -11,6 +11,7 @@ import { useI18n } from '@/composables/useI18n';
 import type { PermissionsRecord } from '@/permissions';
 import { usePostHog } from '@/stores/posthog.store';
 import { useSettingsStore } from '@/stores/settings.store';
+import { toDayMonth, toTime } from '@/utils/formatters/dateFormatter';
 
 const props = defineProps<{
 	execution: ExecutionSummary;
@@ -87,7 +88,17 @@ function onRetryMenuItemSelect(action: string): void {
 			:data-test-execution-status="executionUIDetails.name"
 		>
 			<div :class="$style.description">
-				<N8nText color="text-dark" :bold="true" size="medium" data-test-id="execution-time">
+				<N8nText
+					v-if="executionUIDetails.name === 'new'"
+					color="text-dark"
+					:bold="true"
+					size="medium"
+					data-test-id="execution-time"
+				>
+					{{ toDayMonth(executionUIDetails.createdAt) }} -
+					{{ locale.baseText('executionDetails.startingSoon') }}
+				</N8nText>
+				<N8nText v-else color="text-dark" :bold="true" size="medium" data-test-id="execution-time">
 					{{ executionUIDetails.startTime }}
 				</N8nText>
 				<div :class="$style.executionStatus">
@@ -106,6 +117,15 @@ function onRetryMenuItemSelect(action: string): void {
 						{{ locale.baseText('executionDetails.runningTimeRunning') }}
 						<ExecutionsTime :start-time="execution.startedAt" />
 					</N8nText>
+					<N8nText
+						v-if="executionUIDetails.name === 'new' && execution.createdAt"
+						:color="isActive ? 'text-dark' : 'text-base'"
+						size="small"
+					>
+						<span
+							>{{ locale.baseText('executionDetails.at') }} {{ toTime(execution.createdAt) }}</span
+						>
+					</N8nText>
 					<N8nText
 						v-else-if="executionUIDetails.runningTime !== ''"
 						:color="isActive ? 'text-dark' : 'text-base'"
@@ -216,10 +236,10 @@ function onRetryMenuItemSelect(action: string): void {
 	&.new {
 		&,
 		& .executionLink {
-			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-new);
+			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-waiting);
 		}
 		.statusLabel {
-			color: var(--color-text-dark);
+			color: var(--execution-card-text-waiting);
 		}
 	}
 

packages/editor-ui/src/composables/useExecutionHelpers.ts

@@ -5,6 +5,7 @@ import { useI18n } from '@/composables/useI18n';
 export interface IExecutionUIData {
 	name: string;
 	label: string;
+	createdAt: string;
 	startTime: string;
 	runningTime: string;
 	showTimestamp: boolean;
@@ -17,6 +18,7 @@ export function useExecutionHelpers() {
 	function getUIDetails(execution: ExecutionSummary): IExecutionUIData {
 		const status = {
 			name: 'unknown',
+			createdAt: execution.createdAt?.toString() ?? '',
 			startTime: formatDate(execution.startedAt),
 			label: 'Status unknown',
 			runningTime: '',

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -658,6 +658,7 @@
 	"executionDetails.executionWaiting": "Execution waiting",
 	"executionDetails.executionWasSuccessful": "Execution was successful",
 	"executionDetails.of": "of",
+	"executionDetails.at": "at",
 	"executionDetails.newMessage": "Execution waiting in the queue.",
 	"executionDetails.openWorkflow": "Open Workflow",
 	"executionDetails.readOnly.readOnly": "Read only",
@@ -666,6 +667,7 @@
 	"executionDetails.runningTimeFinished": "in {time}",
 	"executionDetails.runningTimeRunning": "for",
 	"executionDetails.runningMessage": "Execution is running. It will show here once finished.",
+	"executionDetails.startingSoon": "Starting soon",
 	"executionDetails.workflow": "workflow",
 	"executionsLandingPage.emptyState.noTrigger.heading": "Set up the first step. Then execute your workflow",
 	"executionsLandingPage.emptyState.noTrigger.buttonText": "Add first step...",
@@ -730,6 +732,7 @@
 	"executionsList.showMessage.stopExecution.message": "Execution ID {activeExecutionId}",
 	"executionsList.showMessage.stopExecution.title": "Execution stopped",
 	"executionsList.startedAt": "Started At",
+	"executionsList.startingSoon": "Starting soon",
 	"executionsList.started": "{date} at {time}",
 	"executionsList.id": "Execution ID",
 	"executionsList.status": "Status",

packages/editor-ui/src/utils/formatters/dateFormatter.ts

@@ -22,3 +22,7 @@ export function convertToDisplayDate(fullDate: Date | string | number): {
 	const [date, time] = formattedDate.split('#');
 	return { date, time };
 }
+
+export const toDayMonth = (fullDate: Date | string) => dateformat(fullDate, 'd mmm');
+
+export const toTime = (fullDate: Date | string) => dateformat(fullDate, 'HH:MM:ss');