fix(editor): Render the current first in CollaborationPane (no-change…

…log) (#10799)

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

@@ -4,7 +4,6 @@ import { useDocumentVisibility } from '@vueuse/core';
 
 import { useUsersStore } from '@/stores/users.store';
 import { useCollaborationStore } from '@/stores/collaboration.store';
-import { isUserGlobalOwner } from '@/utils/userUtils';
 
 const collaborationStore = useCollaborationStore();
 const usersStore = useUsersStore();
@@ -21,13 +20,12 @@ watch(visibility, (visibilityState) => {
 const showUserStack = computed(() => collaborationStore.collaborators.length > 1);
 
 const collaboratorsSorted = computed(() => {
-	const currentWorkflowUsers = collaborationStore.collaborators.map(({ user }) => user);
-	const owner = currentWorkflowUsers.find(isUserGlobalOwner);
-	return {
-		defaultGroup: owner
-			? [owner, ...currentWorkflowUsers.filter((user) => user.id !== owner.id)]
-			: currentWorkflowUsers,
-	};
+	const users = collaborationStore.collaborators.map(({ user }) => user);
+	// Move the current user to the first position, if not already there.
+	const index = users.findIndex((user) => user.id === usersStore.currentUser?.id);
+	if (index < 1) return { defaultGroup: users };
+	const [currentUser] = users.splice(index, 1);
+	return { defaultGroup: [currentUser, ...users] };
 });
 
 const currentUserEmail = computed(() => usersStore.currentUser?.email);

packages/editor-ui/src/components/__tests__/CollaborationPane.test.ts

@@ -1,69 +1,29 @@
-import { merge } from 'lodash-es';
-import { SETTINGS_STORE_DEFAULT_STATE, waitAllPromises } from '@/__tests__/utils';
-import { ROLE, STORES } from '@/constants';
 import { createTestingPinia } from '@pinia/testing';
-import CollaborationPane from '@/components//MainHeader/CollaborationPane.vue';
+import { mock } from 'vitest-mock-extended';
+
+import { STORES } from '@/constants';
+import CollaborationPane from '@/components/MainHeader/CollaborationPane.vue';
+import type { IUser } from '@/Interface';
+
 import type { RenderOptions } from '@/__tests__/render';
 import { createComponentRenderer } from '@/__tests__/render';
+import { waitAllPromises } from '@/__tests__/utils';
 
-const OWNER_USER = {
-	createdAt: '2023-11-22T10:17:12.246Z',
-	id: 'aaaaaa',
-	email: '[email protected]',
-	firstName: 'Owner',
-	lastName: 'User',
-	role: ROLE.Owner,
-	disabled: false,
-	isPending: false,
-	fullName: 'Owner User',
-};
-
-const MEMBER_USER = {
-	createdAt: '2023-11-22T10:17:12.246Z',
-	id: 'aaabbb',
-	email: '[email protected]',
-	firstName: 'Member',
-	lastName: 'User',
-	role: ROLE.Member,
-	disabled: false,
-	isPending: false,
-	fullName: 'Member User',
-};
-
-const MEMBER_USER_2 = {
-	createdAt: '2023-11-22T10:17:12.246Z',
-	id: 'aaaccc',
-	email: '[email protected]',
-	firstName: 'Another Member',
-	lastName: 'User',
-	role: ROLE.Member,
-	disabled: false,
-	isPending: false,
-	fullName: 'Another Member User',
-};
+const OWNER_USER = mock<IUser>({ id: 'owner-id' });
+const MEMBER_USER = mock<IUser>({ id: 'member-id' });
+const MEMBER_USER_2 = mock<IUser>({ id: 'member-id-2' });
 
 const initialState = {
-	[STORES.SETTINGS]: {
-		settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
-	},
-	[STORES.WORKFLOWS]: {
-		workflow: {
-			id: 'w1',
-		},
-	},
 	[STORES.USERS]: {
-		currentUserId: 'aaaaaa',
-		users: {
-			aaaaaa: OWNER_USER,
-			aaabbb: MEMBER_USER,
-			aaaccc: MEMBER_USER_2,
+		currentUserId: OWNER_USER.id,
+		usersById: {
+			[OWNER_USER.id]: OWNER_USER,
+			[MEMBER_USER.id]: MEMBER_USER,
+			[MEMBER_USER_2.id]: MEMBER_USER_2,
 		},
 	},
 	[STORES.COLLABORATION]: {
-		collaborators: [
-			{ lastSeen: '2023-11-22T10:17:12.246Z', user: MEMBER_USER },
-			{ lastSeen: '2023-11-22T10:17:12.246Z', user: OWNER_USER },
-		],
+		collaborators: [{ user: MEMBER_USER }, { user: OWNER_USER }],
 	},
 };
 
@@ -89,9 +49,10 @@ describe('CollaborationPane', () => {
 		expect(queryByTestId(`user-stack-avatar-${MEMBER_USER_2.id}`)).toBeNull();
 	});
 
-	it('should always render owner first in the list', async () => {
+	it('should always render the current user first in the list', async () => {
 		const { getByTestId } = renderComponent();
 		await waitAllPromises();
+
 		const firstAvatar = getByTestId('user-stack-avatars').querySelector('.n8n-avatar');
 		// Owner is second in the store but should be rendered first
 		expect(firstAvatar).toHaveAttribute('data-test-id', `user-stack-avatar-${OWNER_USER.id}`);
@@ -103,7 +64,7 @@ describe('CollaborationPane', () => {
 				initialState: {
 					...initialState,
 					[STORES.COLLABORATION]: {
-						collaborators: [{ lastSeen: '2023-11-22T10:17:12.246Z', user: OWNER_USER }],
+						collaborators: [{ user: OWNER_USER }],
 					},
 				},
 			}),