refactor(editor): User journey link to n8n.io (#10331)

cypress/e2e/46-n8n.io-iframe.cy.ts

@@ -0,0 +1,35 @@
+import { WorkflowsPage } from '../pages';
+
+const workflowsPage = new WorkflowsPage();
+
+describe('n8n.io iframe', () => {
+	describe('when telemetry is disabled', () => {
+		it('should not load the iframe when visiting /home/workflows', () => {
+			cy.overrideSettings({ telemetry: { enabled: false } });
+
+			cy.visit(workflowsPage.url);
+
+			cy.get('iframe').should('not.exist');
+		});
+	});
+
+	describe('when telemetry is enabled', () => {
+		it('should load the iframe when visiting /home/workflows', () => {
+			const testInstanceId = 'test-instance-id';
+
+			cy.overrideSettings({ telemetry: { enabled: true }, instanceId: testInstanceId });
+
+			const testUserId = Cypress.env('currentUserId');
+
+			const iframeUrl = `https://n8n.io/self-install?instanceId=${testInstanceId}&userId=${testUserId}`;
+
+			cy.intercept(iframeUrl, (req) => req.reply(200)).as('iframeRequest');
+
+			cy.visit(workflowsPage.url);
+
+			cy.get('iframe').should('exist').and('have.attr', 'src', iframeUrl);
+
+			cy.wait('@iframeRequest').its('response.statusCode').should('eq', 200);
+		});
+	});
+});

cypress/support/commands.ts

@@ -59,14 +59,18 @@ Cypress.Commands.add('waitForLoad', (waitForIntercepts = true) => {
 
 Cypress.Commands.add('signin', ({ email, password }) => {
 	void Cypress.session.clearAllSavedSessions();
-	cy.session([email, password], () =>
+	cy.session([email, password], () => {
-		cy.request({
+		return cy
+			.request({
 				method: 'POST',
 				url: `${BACKEND_BASE_URL}/rest/login`,
 				body: { email, password },
 				failOnStatusCode: false,
-		}),
+			})
-	);
+			.then((response) => {
+				Cypress.env('currentUserId', response.body.data.id);
+			});
+	});
 });
 
 Cypress.Commands.add('signinAsOwner', () => cy.signin(INSTANCE_OWNER));

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

@@ -34,6 +34,10 @@ const isTelemetryEnabled = computed((): boolean => {
 	return !!telemetry.value?.enabled;
 });
 
+const selfInstallSrc = computed((): string => {
+	return `https://n8n.io/self-install?instanceId=${rootStore.instanceId}&userId=${currentUserId.value}`;
+});
+
 watch(telemetry, () => {
 	init();
 });
@@ -70,5 +74,6 @@ function init() {
 </script>
 
 <template>
-	<span v-show="false" />
+	<iframe v-if="isTelemetryEnabled && currentUserId" v-show="false" :src="selfInstallSrc" />
+	<span v-else v-show="false" />
 </template>