fix(editor): Send protocol and n8n version in templates destination parameter, stop redirecting template preview page to website (#8691)

cypress/e2e/29-templates.cy.ts

@@ -25,6 +25,13 @@ describe('Workflow templates', () => {
 		mainSidebar.getters.menuItem('Templates').should('be.visible');
 		// Templates should be a link to the website
 		mainSidebar.getters.templates().parent('a').should('have.attr', 'href').and('include', 'https://n8n.io/workflows');
+		// Link should contain instance address and n8n version
+		mainSidebar.getters.templates().parent('a').then(($a) => {
+			const href = $a.attr('href');
+			// Link should have current instance address and n8n version
+			expect(href).to.include(`utm_instance=${window.location.origin}`);
+			expect(href).to.match(/utm_n8n_version=[0-9]+\.[0-9]+\.[0-9]+/);
+		});
 		mainSidebar.getters.templates().parent('a').should('have.attr', 'target', '_blank');
 	});
 
@@ -34,11 +41,4 @@ describe('Workflow templates', () => {
 			cy.url().should('include', 'https://n8n.io/workflows');
 		})
 	});
-
-	it('Redirects to website when visiting template by id page directly', () => {
-		cy.visit(`${templatesPage.url}/1`);
-		cy.origin('https://n8n.io', () => {
-			cy.url().should('include', 'https://n8n.io/workflows/1');
-		})
-	});
 });

packages/editor-ui/src/Interface.ts

@@ -1379,6 +1379,7 @@ export interface ITemplateState {
 	};
 	currentSessionId: string;
 	previousSessionId: string;
+	currentN8nPath: string;
 }
 
 export interface IVersionsState {

packages/editor-ui/src/router.ts

@@ -107,6 +107,9 @@ export const routes = [
 			middleware: ['authenticated'],
 		},
 	},
+	// Following two routes are kept in-app:
+	// Single workflow view, used when a custom template host is set
+	// Also, reachable directly from this URL
 	{
 		path: '/templates/:id',
 		name: VIEWS.TEMPLATE,
@@ -130,16 +133,8 @@ export const routes = [
 			},
 			middleware: ['authenticated'],
 		},
-		beforeEnter: (to, _from, next) => {
-			const templatesStore = useTemplatesStore();
-			if (!templatesStore.hasCustomTemplatesHost) {
-				const id = Array.isArray(to.params.id) ? to.params.id[0] : to.params.id;
-				window.location.href = templatesStore.getWebsiteTemplatePageURL(id);
-			} else {
-				next();
-			}
-		},
 	},
+	// Template setup view, this is the landing view for website users
 	{
 		path: '/templates/:id/setup',
 		name: VIEWS.TEMPLATE_SETUP,

packages/editor-ui/src/stores/templates.store.ts

@@ -21,6 +21,7 @@ import {
 	getWorkflowTemplate,
 } from '@/api/templates';
 import { getFixedNodesList } from '@/utils/nodeViewUtils';
+import { useRootStore } from '@/stores/n8nRoot.store';
 
 const TEMPLATES_PAGE_SIZE = 20;
 
@@ -39,6 +40,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		workflowSearches: {},
 		currentSessionId: '',
 		previousSessionId: '',
+		currentN8nPath: `${window.location.protocol}//${window.location.host}${window.BASE_PATH}`,
 	}),
 	getters: {
 		allCategories(): ITemplatesCategory[] {
@@ -118,7 +120,9 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		 * @returns {string}
 		 */
 		getWebsiteTemplateRepositoryURL(): string {
-			return `${TEMPLATES_URLS.BASE_WEBSITE_URL}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${this.getCurrentN8nPath}`;
+			return `${TEMPLATES_URLS.BASE_WEBSITE_URL}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${
+				this.currentN8nPath
+			}&utm_n8n_version=${useRootStore().versionCli}`;
 		},
 		/**
 		 * Construct the URL for the template page on the website for a given template id
@@ -126,7 +130,9 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		 */
 		getWebsiteTemplatePageURL() {
 			return (id: string) => {
-				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/${id}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${this.getCurrentN8nPath}`;
+				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/${id}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${
+					this.currentN8nPath
+				}&utm_n8n_version=${useRootStore().versionCli}`;
 			};
 		},
 		/**
@@ -135,12 +141,11 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		 */
 		getWebsiteCategoryURL() {
 			return (id: string) => {
-				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?categories=${id}&${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${this.getCurrentN8nPath}`;
+				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?categories=${id}&${
+					TEMPLATES_URLS.UTM_QUERY
+				}&utm_instance=${this.currentN8nPath}&utm_n8n_version=${useRootStore().versionCli}`;
 			};
 		},
-		getCurrentN8nPath(): string {
-			return `${window.location.host}${window.BASE_PATH}`;
-		},
 	},
 	actions: {
 		addCategories(categories: ITemplatesCategory[]): void {