Improve workflow evaluation UI and add localization for test list

- Update MainHeader tab logic
- Enhance EmptyState component styling
- Add localization for test list texts
- Adjust TestsList component
- Update locale file

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

@@ -77,7 +77,7 @@ onMounted(async () => {
 });
 
 function syncTabsWithRoute(to: RouteLocation, from?: RouteLocation): void {
-	if (to.name === VIEWS.WORKFLOW_EVALUATION) {
+	if (to.matched.some((record) => record.name === VIEWS.WORKFLOW_EVALUATION)) {
 		activeHeaderTab.value = MAIN_HEADER_TABS.EVALUATION;
 	}
 	if (

packages/editor-ui/src/components/WorkflowEvaluation/ListEvaluation/EmptyState.vue

@@ -1,29 +1,33 @@
 <script setup lang="ts">
-defineEmits(['create-test']);
+defineEmits<{ 'create-test': [] }>();
 </script>
 
 <template>
-	<div>
+	<div :class="$style.container">
 		<div :class="$style.header">
-			<h1>Tests</h1>
-			<n8n-button type="primary" label="Create new test" @click="$emit('create-test')" />
+			<h1>{{ $locale.baseText('workflowEvaluation.list.tests') }}</h1>
 		</div>
 		<n8n-action-box
-			heading="Get confidence your workflow is working as expected"
-			description="Tests run your workflow and compare the results to expected ones. Create your first test from a past execution. More info"
-			button-text="Choose Execution(s)"
+			:description="$locale.baseText('workflowEvaluation.list.actionDescription')"
+			:button-text="$locale.baseText('workflowEvaluation.list.actionButton')"
 			@click:button="$emit('create-test')"
 		/>
 	</div>
 </template>
 
 <style module lang="scss">
+.container {
+	max-width: 44rem;
+	margin: var(--spacing-4xl) auto 0;
+	gap: var(--spacing-l);
+}
 .header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	color: var(--color-text-dark);
+	font-size: var(--font-size-l);
 	margin-bottom: var(--spacing-xl);
-
 	h1 {
 		margin: 0;
 	}

packages/editor-ui/src/components/WorkflowEvaluation/ListEvaluation/TestsList.vue

@@ -5,6 +5,7 @@ import type { TestListItem } from '@/components/WorkflowEvaluation/types';
 export interface TestListProps {
 	tests: TestListItem[];
 }
+defineEmits<{ 'create-test': [] }>();
 defineProps<TestListProps>();
 </script>
 

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

@@ -2715,6 +2715,10 @@
 	"workflowEvaluation.edit.testSaved": "Test saved",
 	"workflowEvaluation.edit.testSaveFailed": "Failed to save test",
 	"workflowEvaluation.list.testDeleted": "Test deleted",
+	"workflowEvaluation.list.tests": "Tests",
+	"workflowEvaluation.list.createNew": "Create new test",
+	"workflowEvaluation.list.actionDescription": "Replay past executions to check whether performance has changed",
+	"workflowEvaluation.list.actionButton": "Create Test",
 	"workflowEvaluation.runTest": "Run Test",
 	"workflowEvaluation.notImplemented": "This feature is not implemented yet!",
 	"workflowEvaluation.viewDetails": "View Details",