feat(editor): Add template Id to workflow metadata (#8088)

## Summary
Adding a link between the workflow and the template it originated from
by saving `templateId` in the workflow metadata

## Related tickets and issues
ADO-1537

## Review / Merge checklist
- [x] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [x] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.

cypress/e2e/29-templates.cy.ts

@@ -35,6 +35,29 @@ describe('Templates', () => {
 		workflowPage.actions.shouldHaveWorkflowName(OnboardingWorkflow.name);
 	});
 
+	it('should save template id with the workflow', () => {
+		cy.visit(templatesPage.url);
+		templatesPage.getters.firstTemplateCard().click();
+		cy.url().should('include', '/templates/');
+
+		cy.url().then(($url) => {
+			const templateId = $url.split('/').pop();
+
+			templatesPage.getters.useTemplateButton().click();
+			cy.url().should('include', '/workflow/new');
+			workflowPage.actions.saveWorkflowOnButtonClick();
+
+			workflowPage.actions.selectAll();
+			workflowPage.actions.hitCopy();
+
+			cy.grantBrowserPermissions('clipboardReadWrite', 'clipboardSanitizedWrite');
+			// Check workflow JSON by copying it to clipboard
+			cy.readClipboard().then((workflowJSON) => {
+				expect(workflowJSON).to.contain(`"templateId": "${templateId}"`);
+			});
+		});
+	});
+
 	it('can open template with images and hides workflow screenshots', () => {
 		templateWorkflowPage.actions.openTemplate(WorkflowTemplate);
 

cypress/pages/templates.ts

@@ -4,7 +4,9 @@ export class TemplatesPage extends BasePage {
 	url = '/templates';
 
 	getters = {
-		useTemplateButton: () => cy.get('[data-testid="use-template-button"]'),
+		useTemplateButton: () => cy.getByTestId('use-template-button'),
+		templateCards: () => cy.getByTestId('template-card'),
+		firstTemplateCard: () => this.getters.templateCards().first(),
 	};
 
 	actions = {

packages/editor-ui/src/Interface.ts

@@ -227,6 +227,7 @@ export interface IWorkflowData {
 	tags?: string[];
 	pinData?: IPinData;
 	versionId?: string;
+	meta?: WorkflowMetadata;
 }
 
 export interface IWorkflowDataUpdate {
@@ -243,9 +244,7 @@ export interface IWorkflowDataUpdate {
 }
 
 export interface IWorkflowToShare extends IWorkflowDataUpdate {
-	meta?: {
+	meta?: WorkflowMetadata;
-		instanceId: string;
-	};
 }
 
 export interface IWorkflowTemplateNode
@@ -273,6 +272,8 @@ export interface INewWorkflowData {
 
 export interface WorkflowMetadata {
 	onboardingId?: string;
+	templateId?: string;
+	instanceId?: string;
 }
 
 // Almost identical to cli.Interfaces.ts

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

@@ -537,6 +537,7 @@ export default defineComponent({
 					const exportData: IWorkflowToShare = {
 						...data,
 						meta: {
+							...(this.workflowsStore.workflow.meta || {}),
 							instanceId: this.rootStore.instanceId,
 						},
 						tags: (tags || []).map((tagId) => {

packages/editor-ui/src/mixins/workflowHelpers.ts

@@ -656,6 +656,7 @@ export const workflowHelpers = defineComponent({
 				settings: this.workflowsStore.workflow.settings,
 				tags: this.workflowsStore.workflowTags,
 				versionId: this.workflowsStore.workflow.versionId,
+				meta: this.workflowsStore.workflow.meta,
 			};
 
 			const workflowId = this.workflowsStore.workflowId;

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

@@ -32,6 +32,7 @@ import type {
 	IWorkflowsMap,
 	WorkflowsState,
 	NodeMetadataMap,
+	WorkflowMetadata,
 } from '@/Interface';
 import { defineStore } from 'pinia';
 import type {
@@ -656,6 +657,17 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			};
 		},
 
+		setWorkflowMetadata(metadata: WorkflowMetadata | undefined): void {
+			this.workflow.meta = metadata;
+		},
+
+		addToWorkflowMetadata(data: Partial<WorkflowMetadata>): void {
+			this.workflow.meta = {
+				...this.workflow.meta,
+				...data,
+			};
+		},
+
 		setWorkflow(workflow: IWorkflowDb): void {
 			this.workflow = workflow;
 			this.workflow = {

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

@@ -1064,6 +1064,7 @@ export default defineComponent({
 
 			await this.addNodes(data.workflow.nodes, data.workflow.connections);
 			this.workflowData = (await this.workflowsStore.getNewWorkflowData(data.name)) || {};
+			this.workflowsStore.addToWorkflowMetadata({ templateId });
 			await this.$nextTick();
 			this.canvasStore.zoomToFit();
 			this.uiStore.stateIsDirty = true;
@@ -1089,6 +1090,7 @@ export default defineComponent({
 			this.workflowsStore.setWorkflowSettings(workflow.settings || {});
 			this.workflowsStore.setWorkflowPinData(workflow.pinData || {});
 			this.workflowsStore.setWorkflowVersionId(workflow.versionId);
+			this.workflowsStore.setWorkflowMetadata(workflow.meta);
 
 			if (workflow.ownedBy) {
 				this.workflowsEEStore.setWorkflowOwnedBy({
@@ -1585,6 +1587,7 @@ export default defineComponent({
 			void this.getNodesToSave(nodes).then((data) => {
 				const workflowToCopy: IWorkflowToShare = {
 					meta: {
+						...(this.workflowsStore.workflow.meta ?? {}),
 						instanceId: this.rootStore.instanceId,
 					},
 					...data,