From 7b67af2838c4b3c551ac462dba0a232156015133 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba.tuncsik@gmail.com>
Date: Mon, 5 Aug 2024 16:20:56 +0200
Subject: [PATCH 1/3] fix(editor): Show initials as uppercased in Avatar design
 system component

---
 packages/design-system/src/components/N8nAvatar/Avatar.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index f7993a84a0038..f0ff3556c303e 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -72,7 +72,8 @@ const getSize = (size: string): number => sizes[size];
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
 	color: var(--color-avatar-font);
-	text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3);
+	text-shadow: 0 1px 6px rgba(25, 11, 9, 0.3);
+	text-transform: uppercase;
 }
 
 .small {

From a196786a46243975a825ce28ff3d45825887086e Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba.tuncsik@gmail.com>
Date: Mon, 5 Aug 2024 16:24:08 +0200
Subject: [PATCH 2/3] fix(editor): Update project tabs test

---
 .../src/components/N8nTabs/Tabs.vue           |  8 +--
 .../components/Projects/ProjectTabs.test.ts   | 56 +++++++------------
 2 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 1cd2792c9957f..967f08a430701 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -13,7 +13,7 @@
 				:key="option.value"
 				:class="{ [$style.alignRight]: option.align === 'right' }"
 			>
-				<n8n-tooltip :disabled="!option.tooltip" placement="bottom">
+				<N8nTooltip :disabled="!option.tooltip" placement="bottom">
 					<template #content>
 						<div @click="handleTooltipClick(option.value, $event)" v-html="option.tooltip" />
 					</template>
@@ -31,14 +31,14 @@
 							</span>
 						</div>
 					</a>
-					<RouterLink
+					<router-link
 						v-else-if="option.to"
 						:to="option.to"
 						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
 					>
 						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
 						<span v-if="option.label">{{ option.label }}</span>
-					</RouterLink>
+					</router-link>
 					<div
 						v-else
 						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
@@ -48,7 +48,7 @@
 						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
 						<span v-if="option.label">{{ option.label }}</span>
 					</div>
-				</n8n-tooltip>
+				</N8nTooltip>
 			</div>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts
index 91c197a794ace..e31e7caeefbfc 100644
--- a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts
+++ b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts
@@ -1,7 +1,8 @@
-import { createComponentRenderer } from '@/__tests__/render';
-import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
+import { createPinia, setActivePinia } from 'pinia';
 import { useRoute } from 'vue-router';
+import { createComponentRenderer } from '@/__tests__/render';
 import { createTestProject } from '@/__tests__/data/projects';
+import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
 import { useProjectsStore } from '@/stores/projects.store';
 
 vi.mock('vue-router', () => {
@@ -17,28 +18,25 @@ vi.mock('vue-router', () => {
 		RouterLink: vi.fn(),
 	};
 });
-
-vi.mock('@/stores/users.store', () => ({
-	useUsersStore: vi.fn().mockImplementation(() => ({
-		currentUser: {},
-	})),
-}));
-
-vi.mock('@/stores/projects.store', () => ({
-	useProjectsStore: vi.fn().mockReturnValue({}),
-}));
-
-vi.mock('@/utils/rbac/permissions', () => ({
-	hasPermission: vi.fn().mockReturnValue(false),
-}));
-
-const renderComponent = createComponentRenderer(ProjectTabs);
+const renderComponent = createComponentRenderer(ProjectTabs, {
+	global: {
+		stubs: {
+			'router-link': {
+				template: '<div><slot /></div>',
+			},
+		},
+	},
+});
 
 let route: ReturnType<typeof useRoute>;
+let projectsStore: ReturnType<typeof useProjectsStore>;
 
 describe('ProjectTabs', () => {
 	beforeEach(() => {
+		const pinia = createPinia();
+		setActivePinia(pinia);
 		route = useRoute();
+		projectsStore = useProjectsStore();
 	});
 
 	it('should render home tabs', async () => {
@@ -49,16 +47,9 @@ describe('ProjectTabs', () => {
 		expect(queryByText('Project settings')).not.toBeInTheDocument();
 	});
 
-	it('should render project tabs if use has permissions', () => {
+	it('should render project tab Settings if user has permissions', () => {
 		route.params.projectId = '123';
-		vi.mocked(useProjectsStore).mockImplementationOnce(
-			() =>
-				({
-					currentProject: createTestProject({
-						scopes: ['project:update'],
-					}),
-				}) as ReturnType<typeof useProjectsStore>,
-		);
+		projectsStore.setCurrentProject(createTestProject({ scopes: ['project:update'] }));
 		const { getByText } = renderComponent();
 
 		expect(getByText('Workflows')).toBeInTheDocument();
@@ -66,16 +57,9 @@ describe('ProjectTabs', () => {
 		expect(getByText('Project settings')).toBeInTheDocument();
 	});
 
-	it('should render project tabs', () => {
+	it('should render project tabs without Settings if no permission', () => {
 		route.params.projectId = '123';
-		vi.mocked(useProjectsStore).mockImplementationOnce(
-			() =>
-				({
-					currentProject: createTestProject({
-						scopes: ['project:read'],
-					}),
-				}) as ReturnType<typeof useProjectsStore>,
-		);
+		projectsStore.setCurrentProject(createTestProject({ scopes: ['project:read'] }));
 		const { queryByText, getByText } = renderComponent();
 
 		expect(getByText('Workflows')).toBeInTheDocument();

From 385b6b6be01a43d12b113f30865d03d4b5e500ca Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba.tuncsik@gmail.com>
Date: Tue, 6 Aug 2024 11:18:48 +0200
Subject: [PATCH 3/3] fix(editor): Rollback avatar component changes

---
 packages/design-system/src/components/N8nAvatar/Avatar.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index f0ff3556c303e..f7993a84a0038 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -72,8 +72,7 @@ const getSize = (size: string): number => sizes[size];
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
 	color: var(--color-avatar-font);
-	text-shadow: 0 1px 6px rgba(25, 11, 9, 0.3);
-	text-transform: uppercase;
+	text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3);
 }
 
 .small {