From 328976e5fee518d7d3253d7cd76dcce2583ccff5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Thu, 3 Apr 2025 14:34:48 +0200
Subject: [PATCH] fix(editor): Adjust table styling to match figma
 (no-changelog) (#14385)

---
 .../executions/ExecutionsFilter.vue           | 33 ++++++++--------
 .../global/GlobalExecutionsList.vue           | 10 ++---
 .../global/GlobalExecutionsListItem.test.ts   |  2 +-
 .../global/GlobalExecutionsListItem.vue       | 38 ++++++++++++-------
 .../src/utils/formatters/dateFormatter.ts     |  2 +-
 5 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue b/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue
index a11246ab67..dbf528d66f 100644
--- a/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue
+++ b/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import { computed, reactive, onBeforeMount, ref } from 'vue';
+import AnnotationTagsDropdown from '@/components/AnnotationTagsDropdown.ee.vue';
+import { useDebounce } from '@/composables/useDebounce';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { EnterpriseEditionFeature } from '@/constants';
 import type {
-	ExecutionFilterType,
 	ExecutionFilterMetadata,
-	IWorkflowShortResponse,
+	ExecutionFilterType,
 	IWorkflowDb,
+	IWorkflowShortResponse,
 } from '@/Interface';
 import { i18n as locale } from '@/plugins/i18n';
-import { getObjectKeys, isEmpty } from '@/utils/typesUtils';
-import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTelemetry } from '@/composables/useTelemetry';
+import { getObjectKeys, isEmpty } from '@/utils/typesUtils';
 import type { Placement } from '@floating-ui/core';
-import { useDebounce } from '@/composables/useDebounce';
-import AnnotationTagsDropdown from '@/components/AnnotationTagsDropdown.ee.vue';
-import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
+import { computed, onBeforeMount, reactive, ref } from 'vue';
 
 export type ExecutionFilterProps = {
 	workflows?: Array<IWorkflowDb | IWorkflowShortResponse>;
@@ -162,17 +162,16 @@ onBeforeMount(() => {
 			<n8n-button
 				icon="filter"
 				type="tertiary"
+				size="medium"
+				square
 				:active="!!countSelectedFilterProps"
 				data-test-id="executions-filter-button"
 			>
-				<n8n-badge
-					v-if="!!countSelectedFilterProps"
-					theme="primary"
-					class="mr-4xs"
-					data-test-id="execution-filter-badge"
-					>{{ countSelectedFilterProps }}</n8n-badge
-				>
-				{{ locale.baseText('executionsList.filters') }}
+				<template v-if="!!countSelectedFilterProps" #default>
+					<n8n-badge theme="primary" class="mr-4xs" data-test-id="execution-filter-badge">{{
+						countSelectedFilterProps
+					}}</n8n-badge>
+				</template>
 			</n8n-button>
 		</template>
 		<div data-test-id="execution-filter-form">
diff --git a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
index 97b78e971a..a5d116f0dc 100644
--- a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
+++ b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
@@ -362,6 +362,7 @@ const goToUpgrade = () => {
 								<N8nCheckbox
 									:model-value="allExistingSelected"
 									data-test-id="select-all-executions-checkbox"
+									class="mb-0"
 									@update:model-value="handleCheckAllExistingChange"
 								/>
 							</th>
@@ -380,6 +381,7 @@ const goToUpgrade = () => {
 									:model-value="allVisibleSelected"
 									:disabled="total < 1"
 									data-test-id="select-visible-executions-checkbox"
+									class="mb-0"
 									@update:model-value="handleCheckAllVisibleChange"
 								/>
 							</th>
@@ -396,9 +398,7 @@ const goToUpgrade = () => {
 
 							<th>{{ i18n.baseText('executionsList.id') }}</th>
 
-							<th>
-								{{ i18n.baseText('executionsList.trigger') }}
-							</th>
+							<th></th>
 							<th style="width: 69px"></th>
 							<th style="width: 50px"></th>
 						</tr>
@@ -533,10 +533,6 @@ const goToUpgrade = () => {
 </style>
 
 <style lang="scss" scoped>
-.execFilter:deep(button) {
-	height: 40px;
-}
-
 :deep(.el-checkbox) {
 	display: inline-flex;
 	align-items: center;
diff --git a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts
index 5161624cc0..f00a604805 100644
--- a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts
+++ b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts
@@ -108,7 +108,7 @@ describe('GlobalExecutionsListItem', () => {
 		});
 
 		expect(
-			getByText(`1 Jan, 2022, ${DateTime.fromJSDate(new Date(testDate)).toFormat('HH')}:00:00`),
+			getByText(`Jan 1, 2022, ${DateTime.fromJSDate(new Date(testDate)).toFormat('HH')}:00:00`),
 		).toBeInTheDocument();
 	});
 
diff --git a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue
index 64b0304a80..76aaf9ee5b 100644
--- a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue
+++ b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue
@@ -176,21 +176,24 @@ async function handleActionItemClick(commandData: Command) {
 				:model-value="selected"
 				data-test-id="select-execution-checkbox"
 				:disabled="!Boolean(execution.id && execution.stoppedAt)"
+				class="mb-0"
+				:style="{ marginTop: '-3px' }"
 				@update:model-value="onSelect"
 			/>
 		</td>
 		<td>
-			<RouterLink
-				:to="{
-					name: VIEWS.EXECUTION_PREVIEW,
-					params: { name: execution.workflowId, executionId: execution.id },
-				}"
-				target="_blank"
-			>
-				<N8nText color="text-dark">
+			<N8nTooltip :content="execution.workflowName || workflowName" placement="top">
+				<RouterLink
+					:to="{
+						name: VIEWS.EXECUTION_PREVIEW,
+						params: { name: execution.workflowId, executionId: execution.id },
+					}"
+					:class="$style.workflowName"
+					target="_blank"
+				>
 					{{ execution.workflowName || workflowName }}
-				</N8nText>
-			</RouterLink>
+				</RouterLink>
+			</N8nTooltip>
 		</td>
 		<td data-test-id="execution-status">
 			<GlobalExecutionsListItemQueuedTooltip
@@ -250,12 +253,13 @@ async function handleActionItemClick(commandData: Command) {
 			</span>
 		</td>
 		<td>
-			<span :class="$style.capitalize">{{ execution.mode }}</span>
+			<FontAwesomeIcon v-if="execution.mode === 'manual'" icon="flask" />
 		</td>
 		<td>
 			<N8nButton
 				v-if="!execution.stoppedAt || execution.waitTill"
 				data-test-id="stop-execution-button"
+				type="secondary"
 				:loading="isStopping"
 				:disabled="isStopping"
 				@click.stop="onStopExecution"
@@ -311,7 +315,15 @@ tr.dangerBg {
 	background-color: rgba(215, 56, 58, 0.1);
 }
 
-.capitalize {
-	text-transform: capitalize;
+.workflowName {
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 1.2;
+	max-width: 100%;
+	color: var(--color-text-dark);
+	font-size: var(--font-size-s);
+	line-height: var(--font-line-height-loose);
+	max-width: 450px;
 }
 </style>
diff --git a/packages/frontend/editor-ui/src/utils/formatters/dateFormatter.ts b/packages/frontend/editor-ui/src/utils/formatters/dateFormatter.ts
index bd49cc9b91..c751c54348 100644
--- a/packages/frontend/editor-ui/src/utils/formatters/dateFormatter.ts
+++ b/packages/frontend/editor-ui/src/utils/formatters/dateFormatter.ts
@@ -15,7 +15,7 @@ export function convertToDisplayDate(fullDate: Date | string | number): {
 	date: string;
 	time: string;
 } {
-	const mask = `d mmm${
+	const mask = `mmm d${
 		new Date(fullDate).getFullYear() === new Date().getFullYear() ? '' : ', yyyy'
 	}#HH:MM:ss`;
 	const formattedDate = dateformat(fullDate, mask);