feat(editor): Show new executions as Queued in the UI, until they actually start (#10204)

packages/design-system/src/css/_tokens.scss

@@ -225,6 +225,7 @@
 	--color-notification-background: var(--color-background-xlight);
 
 	// Execution
+	--execution-card-border-new: var(--prim-gray-200);
 	--execution-card-border-success: var(--prim-color-alt-a-tint-300);
 	--execution-card-border-error: var(--prim-color-alt-c-tint-250);
 	--execution-card-border-waiting: var(--prim-color-secondary-tint-300);

packages/editor-ui/src/components/executions/ExecutionsFilter.vue

@@ -84,6 +84,7 @@ const statuses = computed(() => [
 	{ id: 'all', name: locale.baseText('executionsList.anyStatus') },
 	{ id: 'error', name: locale.baseText('executionsList.error') },
 	{ id: 'canceled', name: locale.baseText('executionsList.canceled') },
+	{ id: 'new', name: locale.baseText('executionsList.new') },
 	{ id: 'running', name: locale.baseText('executionsList.running') },
 	{ id: 'success', name: locale.baseText('executionsList.success') },
 	{ id: 'waiting', name: locale.baseText('executionsList.waiting') },

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

@@ -92,7 +92,7 @@ const statusText = computed(() => {
 		case 'crashed':
 			return i18n.baseText('executionsList.error');
 		case 'new':
-			return i18n.baseText('executionsList.running');
+			return i18n.baseText('executionsList.new');
 		case 'running':
 			return i18n.baseText('executionsList.running');
 		case 'success':
@@ -119,7 +119,7 @@ const statusTextTranslationPath = computed(() => {
 				return 'executionsList.statusText';
 			}
 		case 'new':
-			return 'executionsList.statusRunning';
+			return 'executionsList.statusTextWithoutTime';
 		case 'running':
 			return 'executionsList.statusRunning';
 		default:
@@ -192,7 +192,10 @@ async function handleActionItemClick(commandData: Command) {
 						<span v-else-if="!!execution.stoppedAt">
 							{{ formattedStoppedAtDate }}
 						</span>
-						<ExecutionsTime v-else :start-time="execution.startedAt" />
+						<ExecutionsTime
+							v-else-if="execution.status !== 'new'"
+							:start-time="execution.startedAt"
+						/>
 					</template>
 				</i18n-t>
 				<N8nTooltip v-else placement="top">
@@ -334,7 +337,10 @@ async function handleActionItemClick(commandData: Command) {
 		background: var(--execution-card-border-success);
 	}
 
-	&.new td:first-child::before,
+	&.new td:first-child::before {
+		background: var(--execution-card-border-new);
+	}
+
 	&.running td:first-child::before {
 		background: var(--execution-card-border-running);
 	}
@@ -382,7 +388,10 @@ async function handleActionItemClick(commandData: Command) {
 		font-weight: var(--font-weight-normal);
 	}
 
-	.new &,
+	.new {
+		color: var(--color-text-dark);
+	}
+
 	.running & {
 		color: var(--color-warning);
 	}

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

@@ -208,6 +208,16 @@ export default defineComponent({
 		}
 	}
 
+	&.new {
+		&,
+		& .executionLink {
+			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-new);
+		}
+		.statusLabel {
+			color: var(--color-text-dark);
+		}
+	}
+
 	&.waiting {
 		&,
 		& .executionLink {

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

@@ -1,5 +1,13 @@
 <template>
-	<div v-if="executionUIDetails?.name === 'running'" :class="$style.runningInfo">
+	<div v-if="executionUIDetails?.name === 'new'" :class="$style.newInfo">
+		<n8n-text :class="$style.newMessage" color="text-light">
+			{{ $locale.baseText('executionDetails.newMessage') }}
+		</n8n-text>
+		<n8n-button class="mt-l" type="tertiary" @click="handleStopClick">
+			{{ $locale.baseText('executionsList.stopExecution') }}
+		</n8n-button>
+	</div>
+	<div v-else-if="executionUIDetails?.name === 'running'" :class="$style.runningInfo">
 		<div :class="$style.spinner">
 			<n8n-spinner type="ring" />
 		</div>
@@ -34,7 +42,14 @@
 					{{ executionUIDetails.label }}
 				</n8n-text>
 				{{ ' ' }}
-				<n8n-text v-if="executionUIDetails.name === 'running'" color="text-base" size="medium">
+				<n8n-text
+					v-if="executionUIDetails?.showTimestamp === false"
+					color="text-base"
+					size="medium"
+				>
+					| ID#{{ execution.id }}
+				</n8n-text>
+				<n8n-text v-else-if="executionUIDetails.name === 'running'" color="text-base" size="medium">
 					{{
 						$locale.baseText('executionDetails.runningTimeRunning', {
 							interpolate: { time: executionUIDetails?.runningTime },
@@ -55,13 +70,6 @@
 					}}
 					| ID#{{ execution.id }}
 				</n8n-text>
-				<n8n-text
-					v-else-if="executionUIDetails?.name === 'waiting'"
-					color="text-base"
-					size="medium"
-				>
-					| ID#{{ execution.id }}
-				</n8n-text>
 				<br /><n8n-text v-if="execution.mode === 'retry'" color="text-base" size="medium">
 					{{ $locale.baseText('executionDetails.retry') }}
 					<router-link
@@ -296,6 +304,7 @@ export default defineComponent({
 	color: var(--color-danger);
 }
 
+.newInfo,
 .runningInfo {
 	display: flex;
 	flex-direction: column;
@@ -303,8 +312,9 @@ export default defineComponent({
 	margin-top: var(--spacing-4xl);
 }
 
+.newMessage,
 .runningMessage {
-	width: 200px;
+	width: 240px;
 	margin-top: var(--spacing-l);
 	text-align: center;
 }

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

@@ -9,7 +9,7 @@ describe('useExecutionHelpers()', () => {
 			['waiting', 'waiting', i18n.baseText('executionsList.waiting')],
 			['canceled', 'unknown', i18n.baseText('executionsList.canceled')],
 			['running', 'running', i18n.baseText('executionsList.running')],
-			['new', 'running', i18n.baseText('executionsList.running')],
+			['new', 'new', i18n.baseText('executionsList.new')],
 			['success', 'success', i18n.baseText('executionsList.succeeded')],
 			['error', 'error', i18n.baseText('executionsList.error')],
 			['crashed', 'error', i18n.baseText('executionsList.error')],

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

@@ -7,6 +7,7 @@ export interface IExecutionUIData {
 	label: string;
 	startTime: string;
 	runningTime: string;
+	showTimestamp: boolean;
 }
 
 export function useExecutionHelpers() {
@@ -18,14 +19,20 @@ export function useExecutionHelpers() {
 			startTime: formatDate(execution.startedAt),
 			label: 'Status unknown',
 			runningTime: '',
+			showTimestamp: true,
 		};
 
-		if (execution.status === 'waiting') {
+		if (execution.status === 'new') {
+			status.name = 'new';
+			status.label = i18n.baseText('executionsList.new');
+			status.showTimestamp = false;
+		} else if (execution.status === 'waiting') {
 			status.name = 'waiting';
 			status.label = i18n.baseText('executionsList.waiting');
+			status.showTimestamp = false;
 		} else if (execution.status === 'canceled') {
 			status.label = i18n.baseText('executionsList.canceled');
-		} else if (execution.status === 'running' || execution.status === 'new') {
+		} else if (execution.status === 'running') {
 			status.name = 'running';
 			status.label = i18n.baseText('executionsList.running');
 		} else if (execution.status === 'success') {

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

@@ -636,6 +636,7 @@
 	"executionDetails.executionWaiting": "Execution waiting",
 	"executionDetails.executionWasSuccessful": "Execution was successful",
 	"executionDetails.of": "of",
+	"executionDetails.newMessage": "Execution waiting in the queue.",
 	"executionDetails.openWorkflow": "Open Workflow",
 	"executionDetails.readOnly.readOnly": "Read only",
 	"executionDetails.readOnly.youreViewingTheLogOf": "You're viewing the log of a previous execution. You cannot<br />\n\t\tmake changes since this execution already occurred. Make changes<br />\n\t\tto this workflow by clicking on its name on the left.",
@@ -680,6 +681,7 @@
 	"executionsList.modes.trigger": "trigger",
 	"executionsList.modes.webhook": "webhook",
 	"executionsList.name": "@:_reusableBaseText.name",
+	"executionsList.new": "Queued",
 	"executionsList.openPastExecution": "Open Past Execution",
 	"executionsList.retryExecution": "Retry execution",
 	"executionsList.retryOf": "Retry of",