From 5ad950f60371546414ff17eb31171f2259e70f57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Mon, 24 Feb 2025 16:24:49 +0100
Subject: [PATCH] fix(editor): Ai 675 minor tweaks to tests list (#13467)

---
 .../TestDefinition/ListDefinition/TestItem.vue  | 17 ++++++++---------
 .../TestDefinition/TestDefinitionListView.vue   |  8 +-------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestItem.vue b/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestItem.vue
index 401650974d..c072836e79 100644
--- a/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestItem.vue
+++ b/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestItem.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
 
 const locale = useI18n();
 
-type IconDefinition = { icon: string; color: IconColor };
+type IconDefinition = { icon: string; color: IconColor; spin?: boolean };
 
 const statusesColorDictionary: Record<TestRunRecord['status'], IconDefinition> = {
 	new: {
@@ -25,6 +25,7 @@ const statusesColorDictionary: Record<TestRunRecord['status'], IconDefinition> =
 	running: {
 		icon: 'spinner',
 		color: 'secondary',
+		spin: true,
 	},
 	completed: {
 		icon: 'exclamation-circle',
@@ -36,7 +37,7 @@ const statusesColorDictionary: Record<TestRunRecord['status'], IconDefinition> =
 	},
 	cancelled: {
 		icon: 'minus-circle',
-		color: 'success',
+		color: 'foreground-xdark',
 	},
 	warning: {
 		icon: 'exclamation-circle',
@@ -76,7 +77,7 @@ const statusRender = computed<IconDefinition & { label: string }>(() => {
 	<div :class="$style.testCard">
 		<div :class="$style.testCardContent">
 			<div>
-				<N8nText bold tag="div">{{ name }}</N8nText>
+				<N8nText bold tag="div" :class="$style.name">{{ name }}</N8nText>
 				<N8nText tag="div" color="text-base" size="small">
 					{{
 						locale.baseText('testDefinition.list.item.tests', {
@@ -87,12 +88,10 @@ const statusRender = computed<IconDefinition & { label: string }>(() => {
 			</div>
 			<div>
 				<div :class="$style.status">
-					<N8nIcon :icon="statusRender.icon" size="small" :color="statusRender.color"></N8nIcon>
-					<div>
-						<N8nText size="small" color="text-base">
-							{{ statusRender.label }}
-						</N8nText>
-					</div>
+					<N8nIcon v-bind="statusRender" size="small" />
+					<N8nText size="small" color="text-base">
+						{{ statusRender.label }}
+					</N8nText>
 				</div>
 
 				<N8nText v-if="errors?.length" tag="div" color="text-base" size="small" class="ml-m">
diff --git a/packages/editor-ui/src/views/TestDefinition/TestDefinitionListView.vue b/packages/editor-ui/src/views/TestDefinition/TestDefinitionListView.vue
index ef557d7f4c..bf1e25b0ee 100644
--- a/packages/editor-ui/src/views/TestDefinition/TestDefinitionListView.vue
+++ b/packages/editor-ui/src/views/TestDefinition/TestDefinitionListView.vue
@@ -56,17 +56,11 @@ const listItems = computed(() =>
 
 const commands = {
 	delete: onDeleteTest,
-	edit: onEditTest,
 } as const;
 
 type Action = { label: string; value: keyof typeof commands; disabled: boolean };
 
 const actions = computed<Action[]>(() => [
-	{
-		label: 'Edit test',
-		value: 'edit',
-		disabled: false,
-	},
 	{
 		label: 'Delete',
 		value: 'delete',
@@ -252,7 +246,7 @@ async function onDeleteTest(testId: string) {
 .container {
 	height: 100%;
 	width: 100%;
-	max-width: var(--content-container-width);
+	max-width: 1184px;
 	margin: auto;
 	padding: var(--spacing-xl) var(--spacing-l);
 }