feat: Add e2e user invite test suite (no-changelog) (#5412)

cypress/e2e/17-sharing.cy.ts

@@ -0,0 +1,53 @@
+import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from '../constants';
+
+/**
+ * User A - Instance owner
+ * User B - User, owns C1, W1, W2
+ * User C - User, owns C2
+ *
+ * W1 - Workflow owned by User B, shared with User C
+ * W2 - Workflow owned by User B
+ *
+ * C1 - Credential owned by User B
+ * C2 - Credential owned by User C, shared with User A and User B
+ */
+
+const instanceOwner = {
+	email: `${DEFAULT_USER_EMAIL}A`,
+	password: DEFAULT_USER_PASSWORD,
+	firstName: 'User',
+	lastName: 'A',
+};
+
+const users = [
+	{
+		email: `${DEFAULT_USER_EMAIL}B`,
+		password: DEFAULT_USER_PASSWORD,
+		firstName: 'User',
+		lastName: 'B',
+	},
+	{
+		email: `${DEFAULT_USER_EMAIL}C`,
+		password: DEFAULT_USER_PASSWORD,
+		firstName: 'User',
+		lastName: 'C',
+	},
+];
+
+describe('Sharing', () => {
+	before(() => {
+		cy.resetAll();
+		cy.setupOwner(instanceOwner);
+	});
+
+	beforeEach(() => {
+		cy.on('uncaught:exception', (err, runnable) => {
+			expect(err.message).to.include('Not logged in');
+			return false;
+		});
+	});
+
+	it(`should invite User A and UserB to instance`, () => {
+		cy.inviteUsers({ instanceOwner, users });
+	});
+});

cypress/pages/index.ts

@@ -7,5 +7,6 @@ export * from './workflow';
 export * from './modals';
 export * from './settings-users';
 export * from './settings-log-streaming';
+export * from './sidebar';
 export * from './ndv';
 export * from './canvas-node';

cypress/pages/settings-users.ts

@@ -4,6 +4,9 @@ export class SettingsUsersPage extends BasePage {
 	url = '/settings/users';
 	getters = {
 		setUpOwnerButton: () => cy.getByTestId('action-box').find('button').first(),
+		inviteButton: () => cy.getByTestId('settings-users-invite-button').last(),
+		inviteUsersModal: () => cy.getByTestId('inviteUser-modal').last(),
+		inviteUsersModalEmailsInput: () => cy.getByTestId('emails').find('input').first(),
 	};
 	actions = {
 		goToOwnerSetup: () => this.getters.setUpOwnerButton().click(),

cypress/pages/sidebar/main-sidebar.ts

@@ -9,6 +9,7 @@ export class MainSidebar extends BasePage {
 		workflows: () => this.getters.menuItem('Workflows'),
 		credentials: () => this.getters.menuItem('Credentials'),
 		executions: () => this.getters.menuItem('Executions'),
+		userMenu: () => cy.getByTestId('main-sidebar-user-menu'),
 	};
 	actions = {
 		goToSettings: () => {
@@ -22,5 +23,12 @@ export class MainSidebar extends BasePage {
 			cy.get('[data-old-overflow]').should('not.exist');
 			this.getters.credentials().click();
 		},
+		openUserMenu: () => {
+			this.getters.userMenu().find('[role="button"]').last().click();
+		},
+		signout: () => {
+			this.actions.openUserMenu();
+			cy.getByTestId('workflow-menu-item-logout').click();
+		},
 	};
 }

cypress/pages/workflow.ts

@@ -78,6 +78,8 @@ export class WorkflowPage extends BasePage {
 		workflowSettingsSaveButton: () =>
 			cy.getByTestId('workflow-settings-save-button').find('button'),
 
+		shareButton: () => cy.getByTestId('workflow-share-button').find('button'),
+
 		duplicateWorkflowModal: () => cy.getByTestId('duplicate-modal'),
 		nodeViewBackground: () => cy.getByTestId('node-view-background'),
 		nodeView: () => cy.getByTestId('node-view'),
@@ -109,7 +111,11 @@ export class WorkflowPage extends BasePage {
 			if (keepNdvOpen) return;
 			cy.get('body').type('{esc}');
 		},
-		addNodeToCanvas: (nodeDisplayName: string, plusButtonClick = true, preventNdvClose?: boolean) => {
+		addNodeToCanvas: (
+			nodeDisplayName: string,
+			plusButtonClick = true,
+			preventNdvClose?: boolean,
+		) => {
 			if (plusButtonClick) {
 				this.getters.nodeCreatorPlusButton().click();
 			}
@@ -133,6 +139,9 @@ export class WorkflowPage extends BasePage {
 		openWorkflowMenu: () => {
 			this.getters.workflowMenu().click();
 		},
+		openShareModal: () => {
+			this.getters.shareButton().click();
+		},
 		saveWorkflowOnButtonClick: () => {
 			this.getters.saveButton().should('contain', 'Save');
 			this.getters.saveButton().click();

cypress/support/commands.ts

@@ -23,8 +23,8 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-import "cypress-real-events";
+import 'cypress-real-events';
-import { WorkflowsPage, SigninPage, SignupPage } from '../pages';
+import { WorkflowsPage, SigninPage, SignupPage, SettingsUsersPage } from '../pages';
 import { N8N_AUTH_COOKIE } from '../constants';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
 import { MessageBox } from '../pages/modals/message-box';
@@ -87,6 +87,28 @@ Cypress.Commands.add('signin', ({ email, password }) => {
 	);
 });
 
+Cypress.Commands.add('signout', () => {
+	cy.visit('/signout');
+	cy.waitForLoad();
+	cy.url().should('include', '/signin');
+	cy.getCookie(N8N_AUTH_COOKIE).should('not.exist');
+});
+
+Cypress.Commands.add('signup', ({ firstName, lastName, password, url }) => {
+	const signupPage = new SignupPage();
+
+	cy.visit(url);
+
+	signupPage.getters.form().within(() => {
+		cy.url().then((url) => {
+			signupPage.getters.firstName().type(firstName);
+			signupPage.getters.lastName().type(lastName);
+			signupPage.getters.password().type(password);
+			signupPage.getters.submit().click();
+		});
+	});
+});
+
 Cypress.Commands.add('setup', ({ email, firstName, lastName, password }) => {
 	const signupPage = new SignupPage();
 
@@ -94,7 +116,7 @@ Cypress.Commands.add('setup', ({ email, firstName, lastName, password }) => {
 
 	signupPage.getters.form().within(() => {
 		cy.url().then((url) => {
-			if (url.endsWith(signupPage.url)) {
+			if (url.includes(signupPage.url)) {
 				signupPage.getters.email().type(email);
 				signupPage.getters.firstName().type(firstName);
 				signupPage.getters.lastName().type(lastName);
@@ -107,6 +129,36 @@ Cypress.Commands.add('setup', ({ email, firstName, lastName, password }) => {
 	});
 });
 
+Cypress.Commands.add('interceptREST', (method, url) => {
+	cy.intercept(method, `http://localhost:5678/rest${url}`);
+});
+
+Cypress.Commands.add('inviteUsers', ({ instanceOwner, users }) => {
+	const settingsUsersPage = new SettingsUsersPage();
+
+	cy.signin(instanceOwner);
+
+	users.forEach((user) => {
+		cy.signin(instanceOwner);
+		cy.visit(settingsUsersPage.url);
+
+		cy.interceptREST('POST', '/users').as('inviteUser');
+
+		settingsUsersPage.getters.inviteButton().click();
+		settingsUsersPage.getters.inviteUsersModal().within((modal) => {
+			settingsUsersPage.getters.inviteUsersModalEmailsInput().type(user.email).type('{enter}');
+		});
+
+		cy.wait('@inviteUser').then((interception) => {
+			const inviteLink = interception.response!.body.data[0].user.inviteAcceptUrl;
+			cy.log(JSON.stringify(interception.response!.body.data[0].user));
+			cy.log(inviteLink);
+			cy.signout();
+			cy.signup({ ...user, url: inviteLink });
+		});
+	});
+});
+
 Cypress.Commands.add('skipSetup', () => {
 	const signupPage = new SignupPage();
 	const workflowsPage = new WorkflowsPage();
@@ -194,20 +246,20 @@ Cypress.Commands.add('draganddrop', (draggableSelector, droppableSelector) => {
 	cy.get(draggableSelector).should('exist');
 	cy.get(droppableSelector).should('exist');
 
-	cy.get(droppableSelector).first().then(([$el]) => {
+	cy.get(droppableSelector)
-		const coords = $el.getBoundingClientRect();
+		.first()
+		.then(([$el]) => {
+			const coords = $el.getBoundingClientRect();
 
-		const pageX = coords.left + coords.width / 2;
+			const pageX = coords.left + coords.width / 2;
-		const pageY = coords.top + coords.height / 2;
+			const pageY = coords.top + coords.height / 2;
 
-		// We can't use realMouseDown here because it hangs headless run
+			// We can't use realMouseDown here because it hangs headless run
-		cy.get(draggableSelector).trigger('mousedown');
+			cy.get(draggableSelector).trigger('mousedown');
-		// We don't chain these commands to make sure cy.get is re-trying correctly
+			// We don't chain these commands to make sure cy.get is re-trying correctly
-		cy.get(droppableSelector).realMouseMove(pageX, pageY)
+			cy.get(droppableSelector).realMouseMove(pageX, pageY);
-		cy.get(droppableSelector).realHover()
+			cy.get(droppableSelector).realHover();
-		cy.get(droppableSelector).realMouseUp();
+			cy.get(droppableSelector).realMouseUp();
-		cy.get(draggableSelector).realMouseUp();
+			cy.get(draggableSelector).realMouseUp();
-	})
+		});
 });
-
-

cypress/support/index.ts

@@ -1,6 +1,8 @@
 // Load type definitions that come with Cypress module
 /// <reference types="cypress" />
 
+import { Interception } from 'cypress/types/net-stubbing';
+
 interface SigninPayload {
 	email: string;
 	password: string;
@@ -13,6 +15,15 @@ interface SetupPayload {
 	lastName: string;
 }
 
+interface SignupPayload extends SetupPayload {
+	url: string;
+}
+
+interface InviteUsersPayload {
+	instanceOwner: SigninPayload;
+	users: SetupPayload[];
+}
+
 declare global {
 	namespace Cypress {
 		interface Chainable {
@@ -23,8 +34,12 @@ declare global {
 			findChildByTestId(childTestId: string): Chainable<JQuery<HTMLElement>>;
 			createFixtureWorkflow(fixtureKey: string, workflowName: string): void;
 			signin(payload: SigninPayload): void;
+			signout(): void;
+			signup(payload: SignupPayload): void;
 			setup(payload: SetupPayload): void;
 			setupOwner(payload: SetupPayload): void;
+			inviteUsers(payload: InviteUsersPayload): void;
+			interceptREST(method: string, url: string): Chainable<Interception>;
 			skipSetup(): void;
 			resetAll(): void;
 			enableFeature(feature: string): void;

packages/editor-ui/src/components/InviteUsersModal.vue

@@ -22,6 +22,8 @@
 							<n8n-icon-button
 								icon="link"
 								type="tertiary"
+								data-test-id="copy-invite-link-button"
+								:data-invite-link="user.inviteAcceptUrl"
 								@click="onCopyInviteLink(user)"
 							></n8n-icon-button>
 						</n8n-tooltip>

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

@@ -62,7 +62,12 @@
 					<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" />
 				</span>
 				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
-					<n8n-button type="secondary" class="mr-2xs" @click="onShareButtonClick">
+					<n8n-button
+						type="secondary"
+						class="mr-2xs"
+						@click="onShareButtonClick"
+						data-test-id="workflow-share-button"
+					>
 						{{ $locale.baseText('workflowDetails.share') }}
 					</n8n-button>
 					<template #fallback>

packages/editor-ui/src/components/MainSidebar.vue

@@ -43,7 +43,7 @@
 			</template>
 			<template #footer v-if="showUserArea">
 				<div :class="$style.userArea">
-					<div class="ml-3xs">
+					<div class="ml-3xs" data-test-id="main-sidebar-user-menu">
 						<!-- This dropdown is only enabled when sidebar is collapsed -->
 						<el-dropdown
 							:disabled="!isCollapsed"
@@ -60,12 +60,12 @@
 							</div>
 							<template #dropdown>
 								<el-dropdown-menu>
-									<el-dropdown-item command="settings">{{
+									<el-dropdown-item command="settings">
-										$locale.baseText('settings')
+										{{ $locale.baseText('settings') }}
-									}}</el-dropdown-item>
+									</el-dropdown-item>
-									<el-dropdown-item command="logout">{{
+									<el-dropdown-item command="logout">
-										$locale.baseText('auth.signout')
+										{{ $locale.baseText('auth.signout') }}
-									}}</el-dropdown-item>
+									</el-dropdown-item>
 								</el-dropdown-menu>
 							</template>
 						</el-dropdown>
@@ -337,14 +337,8 @@ export default mixins(
 					break;
 			}
 		},
-		async onLogout() {
+		onLogout() {
-			try {
+			this.$router.push({ name: VIEWS.SIGNOUT });
-				await this.usersStore.logout();
-				const route = this.$router.resolve({ name: VIEWS.SIGNIN });
-				window.open(route.href, '_self');
-			} catch (e) {
-				this.$showError(e, this.$locale.baseText('auth.signout.error'));
-			}
 		},
 		toggleCollapse() {
 			this.uiStore.toggleSidebarMenuCollapse();

packages/editor-ui/src/constants.ts

@@ -311,6 +311,7 @@ export enum VIEWS {
 	TEMPLATE_IMPORT = 'WorkflowTemplate',
 	SIGNIN = 'SigninView',
 	SIGNUP = 'SignupView',
+	SIGNOUT = 'SignoutView',
 	SETUP = 'SetupView',
 	FORGOT_PASSWORD = 'ForgotMyPasswordView',
 	CHANGE_PASSWORD = 'ChangePasswordView',

packages/editor-ui/src/router.ts

@@ -35,7 +35,7 @@ import { EnterpriseEditionFeature, VIEWS } from './constants';
 import { useSettingsStore } from './stores/settings';
 import { useTemplatesStore } from './stores/templates';
 import SettingsUsageAndPlanVue from './views/SettingsUsageAndPlan.vue';
-import { useUsersStore } from '@/stores/users';
+import SignoutView from '@/views/SignoutView.vue';
 
 Vue.use(Router);
 
@@ -368,6 +368,23 @@ const router = new Router({
 				},
 			},
 		},
+		{
+			path: '/signout',
+			name: VIEWS.SIGNOUT,
+			components: {
+				default: SignoutView,
+			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+				permissions: {
+					allow: {
+						loginStatus: [LOGIN_STATUS.LoggedIn],
+					},
+				},
+			},
+		},
 		{
 			path: '/setup',
 			name: VIEWS.SETUP,

packages/editor-ui/src/views/SettingsUsersView.vue

@@ -7,6 +7,7 @@
 					:label="$locale.baseText('settings.users.invite')"
 					@click="onInvite"
 					size="large"
+					data-test-id="settings-users-invite-button"
 				/>
 			</div>
 		</div>

packages/editor-ui/src/views/SignoutView.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { VIEWS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
+import mixins from 'vue-typed-mixins';
+import { showMessage } from '@/mixins/showMessage';
+
+export default mixins(showMessage).extend({
+	name: 'SignoutView',
+	computed: {
+		...mapStores(useUsersStore),
+	},
+	methods: {
+		async logout() {
+			try {
+				await this.usersStore.logout();
+				this.$router.replace({ name: VIEWS.SIGNIN });
+			} catch (e) {
+				this.$showError(e, this.$locale.baseText('auth.signout.error'));
+			}
+		},
+	},
+	mounted() {
+		this.logout();
+	},
+});
+</script>
+
+<template>
+	<div />
+</template>