diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.test.ts new file mode 100644 index 00000000000..265ef95413a --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.test.ts @@ -0,0 +1,23 @@ +import N8nUserInfo from '.'; +import { createComponentRenderer } from '../../__tests__/render'; + +const renderComponent = createComponentRenderer(N8nUserInfo); + +describe('UserInfo.vue', () => { + it('renders correctly for a pending user', () => { + const { getByText, queryByText, queryByTestId } = renderComponent({ + props: { + isPendingUser: true, + email: 'email@example.com', + firstName: 'John', + lastName: 'Doe', + }, + }); + + expect(queryByText('John Doe')).not.toBeInTheDocument(); + expect(queryByTestId('user-email')).not.toBeInTheDocument(); // Regular email element is not shown + + expect(getByText('email@example.com')).toBeInTheDocument(); + expect(getByText('Pending')).toBeInTheDocument(); + }); +}); diff --git a/packages/frontend/editor-ui/src/views/ProjectSettings.vue b/packages/frontend/editor-ui/src/views/ProjectSettings.vue index efd60d066d9..47140519931 100644 --- a/packages/frontend/editor-ui/src/views/ProjectSettings.vue +++ b/packages/frontend/editor-ui/src/views/ProjectSettings.vue @@ -275,6 +275,19 @@ watch( { immediate: true }, ); +// Add users property to the relation objects, +// So that N8nUsersList has access to the full user data +const relationUsers = computed(() => + formData.value.relations.map((relation: ProjectRelation) => { + const user = usersStore.usersById[relation.id]; + if (!user) return relation as ProjectRelation & IUser; + return { + ...user, + ...relation, + }; + }), +); + onBeforeMount(async () => { await usersStore.fetchUsers(); }); @@ -333,7 +346,7 @@ onMounted(() => {