refactor(editor): Update users list on user settings page (#16244)

Co-authored-by: Andreas Fitzek <andreas.fitzek@n8n.io>

packages/frontend/editor-ui/src/components/DeleteUserModal.test.ts

@@ -1,15 +1,15 @@
 import { createComponentRenderer } from '@/__tests__/render';
+import { type MockedStore, mockedStore } from '@/__tests__/utils';
 import DeleteUserModal from './DeleteUserModal.vue';
 import { createTestingPinia } from '@pinia/testing';
 import { getDropdownItems } from '@/__tests__/utils';
 import { createProjectListItem } from '@/__tests__/data/projects';
-import { createUser } from '@/__tests__/data/users';
-
 import { DELETE_USER_MODAL_KEY } from '@/constants';
 import { STORES } from '@n8n/stores';
 import { ProjectTypes } from '@/types/projects.types';
 import userEvent from '@testing-library/user-event';
 import { useUsersStore } from '@/stores/users.store';
+import { ROLE, type UsersList, type User } from '@n8n/api-types';
 
 const ModalStub = {
 	template: `
@@ -22,9 +22,42 @@ const ModalStub = {
 	`,
 };
 
-const loggedInUser = createUser();
-const invitedUser = createUser({ firstName: undefined });
-const user = createUser();
+const loggedInUser: User = {
+	id: '1',
+	email: 'admin@example.com',
+	firstName: 'Admin',
+	lastName: 'User',
+	role: ROLE.Admin,
+	isOwner: true,
+	isPending: false,
+	settings: {},
+};
+const invitedUser: User = {
+	id: '3',
+	email: 'pending@example.com',
+	firstName: '',
+	lastName: '',
+	role: ROLE.Member,
+	isOwner: false,
+	isPending: true,
+	settings: {},
+	inviteAcceptUrl: 'https://example.com/invite/123',
+};
+const user: User = {
+	id: '2',
+	email: 'member@example.com',
+	firstName: 'Member',
+	lastName: 'User',
+	role: ROLE.Member,
+	isOwner: false,
+	isPending: false,
+	settings: {},
+};
+
+const mockUsersList: UsersList = {
+	items: [loggedInUser, user, invitedUser],
+	count: 3,
+};
 
 const initialState = {
 	[STORES.UI]: {
@@ -43,13 +76,6 @@ const initialState = {
 			ProjectTypes.Team,
 		].map(createProjectListItem),
 	},
-	[STORES.USERS]: {
-		usersById: {
-			[loggedInUser.id]: loggedInUser,
-			[user.id]: user,
-			[invitedUser.id]: invitedUser,
-		},
-	},
 };
 
 const global = {
@@ -60,32 +86,47 @@ const global = {
 
 const renderModal = createComponentRenderer(DeleteUserModal);
 let pinia: ReturnType<typeof createTestingPinia>;
+let usersStore: MockedStore<typeof useUsersStore>;
 
 describe('DeleteUserModal', () => {
 	beforeEach(() => {
 		pinia = createTestingPinia({ initialState });
+		usersStore = mockedStore(useUsersStore);
+
+		usersStore.usersList = {
+			state: mockUsersList,
+			isLoading: false,
+			execute: vi.fn(),
+			isReady: true,
+			error: null,
+			then: vi.fn(),
+		};
 	});
 
 	it('should delete invited users', async () => {
 		const { getByTestId } = renderModal({
 			props: {
-				activeId: invitedUser.id,
+				modalName: DELETE_USER_MODAL_KEY,
+				data: {
+					userId: invitedUser.id,
+				},
 			},
 			global,
 			pinia,
 		});
 
-		const userStore = useUsersStore();
-
 		await userEvent.click(getByTestId('confirm-delete-user-button'));
 
-		expect(userStore.deleteUser).toHaveBeenCalledWith({ id: invitedUser.id });
+		expect(usersStore.deleteUser).toHaveBeenCalledWith({ id: invitedUser.id });
 	});
 
 	it('should delete user and transfer workflows and credentials', async () => {
 		const { getByTestId, getAllByRole } = renderModal({
 			props: {
-				activeId: user.id,
+				modalName: DELETE_USER_MODAL_KEY,
+				data: {
+					userId: user.id,
+				},
 			},
 			global,
 			pinia,
@@ -102,12 +143,10 @@ describe('DeleteUserModal', () => {
 		const projectSelectDropdownItems = await getDropdownItems(projectSelect);
 		await userEvent.click(projectSelectDropdownItems[0]);
 
-		const userStore = useUsersStore();
-
 		expect(confirmButton).toBeEnabled();
 		await userEvent.click(confirmButton);
 
-		expect(userStore.deleteUser).toHaveBeenCalledWith({
+		expect(usersStore.deleteUser).toHaveBeenCalledWith({
 			id: user.id,
 			transferId: expect.any(String),
 		});
@@ -116,14 +155,15 @@ describe('DeleteUserModal', () => {
 	it('should delete user without transfer', async () => {
 		const { getByTestId, getAllByRole, getByRole } = renderModal({
 			props: {
-				activeId: user.id,
+				modalName: DELETE_USER_MODAL_KEY,
+				data: {
+					userId: user.id,
+				},
 			},
 			global,
 			pinia,
 		});
 
-		const userStore = useUsersStore();
-
 		const confirmButton = getByTestId('confirm-delete-user-button');
 		expect(confirmButton).toBeDisabled();
 
@@ -138,7 +178,7 @@ describe('DeleteUserModal', () => {
 		expect(confirmButton).toBeEnabled();
 
 		await userEvent.click(confirmButton);
-		expect(userStore.deleteUser).toHaveBeenCalledWith({
+		expect(usersStore.deleteUser).toHaveBeenCalledWith({
 			id: user.id,
 		});
 	});