refactor(editor): Migrate templates.store to composition API (#11641)

packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts

@@ -141,6 +141,10 @@ export function AIView(_nodes: SimplifiedNodeType[]): NodeView {
 	const chainNodes = getAiNodesBySubcategory(nodeTypesStore.allLatestNodeTypes, AI_CATEGORY_CHAINS);
 	const agentNodes = getAiNodesBySubcategory(nodeTypesStore.allLatestNodeTypes, AI_CATEGORY_AGENTS);
 
+	const websiteCategoryURL = templatesStore.websiteTemplateRepositoryParameters;
+
+	websiteCategoryURL.append('utm_user_role', 'AdvancedAI');
+
 	return {
 		value: AI_NODE_CREATOR_VIEW,
 		title: i18n.baseText('nodeCreator.aiPanel.aiNodes'),
@@ -154,7 +158,7 @@ export function AIView(_nodes: SimplifiedNodeType[]): NodeView {
 					icon: 'box-open',
 					description: i18n.baseText('nodeCreator.aiPanel.linkItem.description'),
 					name: 'ai_templates_root',
-					url: templatesStore.getWebsiteCategoryURL(undefined, 'AdvancedAI'),
+					url: websiteCategoryURL.toString(),
 					tag: {
 						type: 'info',
 						text: i18n.baseText('nodeCreator.triggerHelperPanel.manualTriggerTag'),

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

@@ -6,24 +6,17 @@ import type {
 	ITemplatesCollection,
 	ITemplatesCollectionFull,
 	ITemplatesQuery,
-	ITemplateState,
 	ITemplatesWorkflow,
 	ITemplatesWorkflowFull,
 	IWorkflowTemplate,
 } from '@/Interface';
 import { useSettingsStore } from './settings.store';
-import {
+import * as templatesApi from '@/api/templates';
-	getCategories,
-	getCollectionById,
-	getCollections,
-	getTemplateById,
-	getWorkflows,
-	getWorkflowTemplate,
-} from '@/api/templates';
 import { getFixedNodesList } from '@/utils/nodeViewUtils';
 import { useRootStore } from '@/stores/root.store';
 import { useUsersStore } from './users.store';
 import { useWorkflowsStore } from './workflows.store';
+import { computed, ref } from 'vue';
 
 const TEMPLATES_PAGE_SIZE = 20;
 
@@ -33,398 +26,424 @@ function getSearchKey(query: ITemplatesQuery): string {
 
 export type TemplatesStore = ReturnType<typeof useTemplatesStore>;
 
-export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
+export const useTemplatesStore = defineStore(STORES.TEMPLATES, () => {
-	state: (): ITemplateState => ({
+	const categories = ref<ITemplatesCategory[]>([]);
-		categories: [],
+	const collections = ref<Record<string, ITemplatesCollection>>({});
-		collections: {},
+	const workflows = ref<Record<string, ITemplatesWorkflow | ITemplatesWorkflowFull>>({});
-		workflows: {},
+	const workflowSearches = ref<
-		collectionSearches: {},
+		Record<
-		workflowSearches: {},
+			string,
-		currentSessionId: '',
+			{
-		previousSessionId: '',
+				workflowIds: string[];
-		currentN8nPath: `${window.location.protocol}//${window.location.host}${window.BASE_PATH}`,
+				totalWorkflows: number;
-	}),
+				loadingMore?: boolean;
-	getters: {
+				categories?: ITemplatesCategory[];
-		allCategories(): ITemplatesCategory[] {
-			return Object.values(this.categories).sort((a: ITemplatesCategory, b: ITemplatesCategory) =>
-				a.name > b.name ? 1 : -1,
-			);
-		},
-		getTemplateById() {
-			return (id: string): null | ITemplatesWorkflow => this.workflows[id];
-		},
-		getFullTemplateById() {
-			return (id: string): null | ITemplatesWorkflowFull => {
-				const template = this.workflows[id];
-				return template && 'full' in template && template.full ? template : null;
-			};
-		},
-		getCollectionById() {
-			return (id: string): null | ITemplatesCollection => this.collections[id];
-		},
-		getCategoryById() {
-			return (id: string): null | ITemplatesCategory => this.categories[id as unknown as number];
-		},
-		getSearchedCollections() {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = this.collectionSearches[searchKey];
-				if (!search) {
-					return null;
-				}
-
-				return search.collectionIds.map((collectionId: string) => this.collections[collectionId]);
-			};
-		},
-		getSearchedWorkflows() {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = this.workflowSearches[searchKey];
-				if (!search) {
-					return null;
-				}
-
-				return search.workflowIds.map((workflowId: string) => this.workflows[workflowId]);
-			};
-		},
-		getSearchedWorkflowsTotal() {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = this.workflowSearches[searchKey];
-
-				return search ? search.totalWorkflows : 0;
-			};
-		},
-		isSearchLoadingMore() {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = this.workflowSearches[searchKey];
-
-				return Boolean(search && search.loadingMore);
-			};
-		},
-		isSearchFinished() {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = this.workflowSearches[searchKey];
-
-				return Boolean(
-					search && !search.loadingMore && search.totalWorkflows === search.workflowIds.length,
-				);
-			};
-		},
-		hasCustomTemplatesHost(): boolean {
-			const settingsStore = useSettingsStore();
-			return settingsStore.templatesHost !== TEMPLATES_URLS.DEFAULT_API_HOST;
-		},
-		/**
-		 * Constructs URLSearchParams object based on the default parameters for the template repository
-		 * and provided additional parameters
-		 */
-		websiteTemplateRepositoryParameters(_roleOverride?: string) {
-			const rootStore = useRootStore();
-			const userStore = useUsersStore();
-			const workflowsStore = useWorkflowsStore();
-			const defaultParameters: Record<string, string> = {
-				...TEMPLATES_URLS.UTM_QUERY,
-				utm_instance: this.currentN8nPath,
-				utm_n8n_version: rootStore.versionCli,
-				utm_awc: String(workflowsStore.activeWorkflows.length),
-			};
-			const userRole: string | null | undefined =
-				userStore.currentUserCloudInfo?.role ??
-				(userStore.currentUser?.personalizationAnswers &&
-				'role' in userStore.currentUser.personalizationAnswers
-					? userStore.currentUser.personalizationAnswers.role
-					: undefined);
-
-			if (userRole) {
-				defaultParameters.utm_user_role = userRole;
 			}
-			return (additionalParameters: Record<string, string> = {}) => {
+		>
-				return new URLSearchParams({
+	>({});
-					...defaultParameters,
+	const collectionSearches = ref<
-					...additionalParameters,
+		Record<
-				});
+			string,
-			};
+			{
-		},
+				collectionIds: string[];
-		/**
-		 * Construct the URL for the template repository on the website
-		 * @returns {string}
-		 */
-		websiteTemplateRepositoryURL(): string {
-			return `${
-				TEMPLATES_URLS.BASE_WEBSITE_URL
-			}?${this.websiteTemplateRepositoryParameters().toString()}`;
-		},
-		/**
-		 * Construct the URL for the template category page on the website for a given category id
-		 */
-		getWebsiteCategoryURL() {
-			return (id?: string, roleOverride?: string) => {
-				const payload: Record<string, string> = {};
-				if (id) {
-					payload.categories = id;
-				}
-				if (roleOverride) {
-					payload.utm_user_role = roleOverride;
-				}
-				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?${this.websiteTemplateRepositoryParameters(payload).toString()}`;
-			};
-		},
-	},
-	actions: {
-		addCategories(categories: ITemplatesCategory[]): void {
-			categories.forEach((category: ITemplatesCategory) => {
-				this.categories = {
-					...this.categories,
-					[category.id]: category,
-				};
-			});
-		},
-		addCollections(collections: Array<ITemplatesCollection | ITemplatesCollectionFull>): void {
-			collections.forEach((collection) => {
-				const workflows = (collection.workflows || []).map((workflow) => ({ id: workflow.id }));
-				const cachedCollection = this.collections[collection.id] || {};
-
-				this.collections = {
-					...this.collections,
-					[collection.id]: {
-						...cachedCollection,
-						...collection,
-						workflows,
-					},
-				};
-			});
-		},
-		addWorkflows(workflows: Array<ITemplatesWorkflow | ITemplatesWorkflowFull>): void {
-			workflows.forEach((workflow: ITemplatesWorkflow) => {
-				const cachedWorkflow = this.workflows[workflow.id] || {};
-
-				this.workflows = {
-					...this.workflows,
-					[workflow.id]: {
-						...cachedWorkflow,
-						...workflow,
-					},
-				};
-			});
-		},
-		addCollectionSearch(data: {
-			collections: ITemplatesCollection[];
-			query: ITemplatesQuery;
-		}): void {
-			const collectionIds = data.collections.map((collection) => String(collection.id));
-			const searchKey = getSearchKey(data.query);
-
-			this.collectionSearches = {
-				...this.collectionSearches,
-				[searchKey]: {
-					collectionIds,
-				},
-			};
-		},
-		addWorkflowsSearch(data: {
-			totalWorkflows: number;
-			workflows: ITemplatesWorkflow[];
-			query: ITemplatesQuery;
-		}): void {
-			const workflowIds = data.workflows.map((workflow) => workflow.id);
-			const searchKey = getSearchKey(data.query);
-			const cachedResults = this.workflowSearches[searchKey];
-			if (!cachedResults) {
-				this.workflowSearches = {
-					...this.workflowSearches,
-					[searchKey]: {
-						workflowIds: workflowIds as unknown as string[],
-						totalWorkflows: data.totalWorkflows,
-						categories: this.categories,
-					},
-				};
-
-				return;
 			}
+		>
+	>({});
+	const currentSessionId = ref<string>('');
+	const previousSessionId = ref<string>('');
+	const currentN8nPath = ref<string>(
+		`${window.location.protocol}//${window.location.host}${window.BASE_PATH}`,
+	);
 
-			this.workflowSearches = {
+	const settingsStore = useSettingsStore();
-				...this.workflowSearches,
+	const rootStore = useRootStore();
-				[searchKey]: {
+	const userStore = useUsersStore();
-					workflowIds: [...cachedResults.workflowIds, ...workflowIds] as string[],
+	const workflowsStore = useWorkflowsStore();
-					totalWorkflows: data.totalWorkflows,
+
-					categories: this.categories,
+	const allCategories = computed(() => {
-				},
+		return categories.value.sort((a: ITemplatesCategory, b: ITemplatesCategory) =>
-			};
+			a.name > b.name ? 1 : -1,
-		},
+		);
-		setWorkflowSearchLoading(query: ITemplatesQuery): void {
+	});
+
+	const getTemplatesById = computed(() => {
+		return (id: string): null | ITemplatesWorkflow => workflows.value[id];
+	});
+
+	const getFullTemplateById = computed(() => {
+		return (id: string): null | ITemplatesWorkflowFull => {
+			const template = workflows.value[id];
+			return template && 'full' in template && template.full ? template : null;
+		};
+	});
+
+	const getCollectionById = computed(() => collections.value);
+
+	const getCategoryById = computed(() => {
+		return (id: string): null | ITemplatesCategory => categories.value[id as unknown as number];
+	});
+
+	const getSearchedCollections = computed(() => {
+		return (query: ITemplatesQuery) => {
 			const searchKey = getSearchKey(query);
-			const cachedResults = this.workflowSearches[searchKey];
+			const search = collectionSearches.value[searchKey];
-			if (!cachedResults) {
+			if (!search) {
-				return;
+				return null;
 			}
 
-			this.workflowSearches[searchKey] = {
+			return search.collectionIds.map((collectionId: string) => collections.value[collectionId]);
-				...this.workflowSearches[searchKey],
+		};
-				loadingMore: true,
+	});
-			};
+
-		},
+	const getSearchedWorkflows = computed(() => {
-		setWorkflowSearchLoaded(query: ITemplatesQuery): void {
+		return (query: ITemplatesQuery) => {
 			const searchKey = getSearchKey(query);
-			const cachedResults = this.workflowSearches[searchKey];
+			const search = workflowSearches.value[searchKey];
-			if (!cachedResults) {
+			if (!search) {
-				return;
+				return null;
 			}
 
-			this.workflowSearches[searchKey] = {
+			return search.workflowIds.map((workflowId: string) => workflows.value[workflowId]);
-				...this.workflowSearches[searchKey],
+		};
-				loadingMore: false,
+	});
+
+	const getSearchedWorkflowsTotal = computed(() => {
+		return (query: ITemplatesQuery) => {
+			const searchKey = getSearchKey(query);
+			const search = workflowSearches.value[searchKey];
+
+			return search ? search.totalWorkflows : 0;
+		};
+	});
+
+	const isSearchLoadingMore = computed(() => {
+		return (query: ITemplatesQuery) => {
+			const searchKey = getSearchKey(query);
+			const search = workflowSearches.value[searchKey];
+
+			return Boolean(search && search.loadingMore);
+		};
+	});
+
+	const isSearchFinished = computed(() => {
+		return (query: ITemplatesQuery) => {
+			const searchKey = getSearchKey(query);
+			const search = workflowSearches.value[searchKey];
+
+			return Boolean(
+				search && !search.loadingMore && search.totalWorkflows === search.workflowIds.length,
+			);
+		};
+	});
+
+	const hasCustomTemplatesHost = computed(() => {
+		return settingsStore.templatesHost !== TEMPLATES_URLS.DEFAULT_API_HOST;
+	});
+
+	const websiteTemplateRepositoryParameters = computed(() => {
+		const defaultParameters: Record<string, string> = {
+			...TEMPLATES_URLS.UTM_QUERY,
+			utm_instance: currentN8nPath.value,
+			utm_n8n_version: rootStore.versionCli,
+			utm_awc: String(workflowsStore.activeWorkflows.length),
+		};
+		const userRole: string | null | undefined =
+			userStore.currentUserCloudInfo?.role ??
+			(userStore.currentUser?.personalizationAnswers &&
+			'role' in userStore.currentUser.personalizationAnswers
+				? userStore.currentUser.personalizationAnswers.role
+				: undefined);
+
+		if (userRole) {
+			defaultParameters.utm_user_role = userRole;
+		}
+		return new URLSearchParams({
+			...defaultParameters,
+		});
+	});
+
+	const websiteTemplateRepositoryURL = computed(
+		() =>
+			`${TEMPLATES_URLS.BASE_WEBSITE_URL}?${websiteTemplateRepositoryParameters.value.toString()}`,
+	);
+
+	const addCategories = (_categories: ITemplatesCategory[]): void => {
+		categories.value = _categories;
+	};
+
+	const addCollections = (
+		_collections: Array<ITemplatesCollection | ITemplatesCollectionFull>,
+	): void => {
+		_collections.forEach((collection) => {
+			const workflows = (collection.workflows || []).map((workflow) => ({ id: workflow.id }));
+			const cachedCollection = collections.value[collection.id] || {};
+
+			collections.value[collection.id] = {
+				...cachedCollection,
+				...collection,
+				workflows,
 			};
-		},
+		});
-		resetSessionId(): void {
+	};
-			this.previousSessionId = this.currentSessionId;
+
-			this.currentSessionId = '';
+	const addWorkflows = (_workflows: Array<ITemplatesWorkflow | ITemplatesWorkflowFull>): void => {
-		},
+		_workflows.forEach((workflow) => {
-		setSessionId(): void {
+			const cachedWorkflow = workflows.value[workflow.id] || {};
-			if (!this.currentSessionId) {
+			workflows.value[workflow.id.toString()] = { ...cachedWorkflow, ...workflow };
-				this.currentSessionId = `templates-${Date.now()}`;
+		});
-			}
+	};
-		},
+
-		async fetchTemplateById(templateId: string): Promise<ITemplatesWorkflowFull> {
+	const addCollectionsSearch = (data: {
-			const settingsStore = useSettingsStore();
+		_collections: ITemplatesCollection[];
-			const rootStore = useRootStore();
+		query: ITemplatesQuery;
-			const apiEndpoint: string = settingsStore.templatesHost;
+	}) => {
-			const versionCli: string = rootStore.versionCli;
+		const collectionIds = data._collections.map((collection) => String(collection.id));
-			const response = await getTemplateById(apiEndpoint, templateId, {
+		const searchKey = getSearchKey(data.query);
-				'n8n-version': versionCli,
+
+		collectionSearches.value[searchKey] = {
+			collectionIds,
+		};
+	};
+
+	const addWorkflowsSearch = (data: {
+		totalWorkflows: number;
+		workflows: ITemplatesWorkflow[];
+		query: ITemplatesQuery;
+	}) => {
+		const workflowIds = data.workflows.map((workflow) => workflow.id);
+		const searchKey = getSearchKey(data.query);
+		const cachedResults = workflowSearches.value[searchKey];
+		if (!cachedResults) {
+			workflowSearches.value[searchKey] = {
+				workflowIds: workflowIds as unknown as string[],
+				totalWorkflows: data.totalWorkflows,
+				categories: categories.value,
+			};
+			return;
+		}
+
+		workflowSearches.value[searchKey] = {
+			workflowIds: [...cachedResults.workflowIds, ...workflowIds] as string[],
+			totalWorkflows: data.totalWorkflows,
+			categories: categories.value,
+		};
+	};
+
+	const setWorkflowSearchLoading = (query: ITemplatesQuery): void => {
+		const searchKey = getSearchKey(query);
+		const cachedResults = workflowSearches.value[searchKey];
+		if (!cachedResults) {
+			return;
+		}
+
+		workflowSearches.value[searchKey] = {
+			...workflowSearches.value[searchKey],
+			loadingMore: true,
+		};
+	};
+
+	const setWorkflowSearchLoaded = (query: ITemplatesQuery): void => {
+		const searchKey = getSearchKey(query);
+		const cachedResults = workflowSearches.value[searchKey];
+		if (!cachedResults) {
+			return;
+		}
+
+		workflowSearches.value[searchKey] = {
+			...workflowSearches.value[searchKey],
+			loadingMore: false,
+		};
+	};
+
+	const resetSessionId = (): void => {
+		previousSessionId.value = currentSessionId.value;
+		currentSessionId.value = '';
+	};
+
+	const setSessionId = (): void => {
+		if (!currentSessionId.value) {
+			currentSessionId.value = `templates-${Date.now()}`;
+		}
+	};
+
+	const fetchTemplateById = async (templateId: string): Promise<ITemplatesWorkflowFull> => {
+		const apiEndpoint: string = settingsStore.templatesHost;
+		const versionCli: string = rootStore.versionCli;
+		const response = await templatesApi.getTemplateById(apiEndpoint, templateId, {
+			'n8n-version': versionCli,
+		});
+
+		const template: ITemplatesWorkflowFull = {
+			...response.workflow,
+			full: true,
+		};
+		addWorkflows([template]);
+
+		return template;
+	};
+
+	const fetchCollectionById = async (
+		collectionId: string,
+	): Promise<ITemplatesCollection | null> => {
+		const apiEndpoint: string = settingsStore.templatesHost;
+		const versionCli: string = rootStore.versionCli;
+		const response = await templatesApi.getCollectionById(apiEndpoint, collectionId, {
+			'n8n-version': versionCli,
+		});
+		const collection: ITemplatesCollectionFull = {
+			...response.collection,
+			full: true,
+		};
+
+		addCollections([collection]);
+		addWorkflows(response.collection.workflows);
+		return getCollectionById.value[collectionId];
+	};
+
+	const getCategories = async (): Promise<ITemplatesCategory[]> => {
+		const cachedCategories = allCategories.value;
+		if (cachedCategories.length) {
+			return cachedCategories;
+		}
+		const apiEndpoint: string = settingsStore.templatesHost;
+		const versionCli: string = rootStore.versionCli;
+		const response = await templatesApi.getCategories(apiEndpoint, {
+			'n8n-version': versionCli,
+		});
+		const categories = response.categories;
+
+		addCategories(categories);
+		return categories;
+	};
+
+	const getCollections = async (query: ITemplatesQuery): Promise<ITemplatesCollection[]> => {
+		const cachedResults = getSearchedCollections.value(query);
+		if (cachedResults) {
+			return cachedResults;
+		}
+
+		const apiEndpoint: string = settingsStore.templatesHost;
+		const versionCli: string = rootStore.versionCli;
+		const response = await templatesApi.getCollections(apiEndpoint, query, {
+			'n8n-version': versionCli,
+		});
+		const collections = response.collections;
+
+		addCollections(collections);
+		addCollectionsSearch({ query, _collections: collections });
+		collections.forEach((collection) => addWorkflows(collection.workflows as ITemplatesWorkflow[]));
+
+		return collections;
+	};
+
+	const getWorkflows = async (query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> => {
+		const cachedResults = getSearchedWorkflows.value(query);
+		if (cachedResults) {
+			categories.value = workflowSearches.value[getSearchKey(query)].categories ?? [];
+			return cachedResults;
+		}
+
+		const apiEndpoint: string = settingsStore.templatesHost;
+		const versionCli: string = rootStore.versionCli;
+		const payload = await templatesApi.getWorkflows(
+			apiEndpoint,
+			{ ...query, page: 1, limit: TEMPLATES_PAGE_SIZE },
+			{ 'n8n-version': versionCli },
+		);
+
+		addWorkflows(payload.workflows);
+		addWorkflowsSearch({ ...payload, query });
+		return getSearchedWorkflows.value(query) || [];
+	};
+
+	const getMoreWorkflows = async (query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> => {
+		if (isSearchLoadingMore.value(query) && !isSearchFinished.value(query)) {
+			return [];
+		}
+		const cachedResults = getSearchedWorkflows.value(query) || [];
+		const apiEndpoint: string = settingsStore.templatesHost;
+
+		setWorkflowSearchLoading(query);
+		try {
+			const payload = await templatesApi.getWorkflows(apiEndpoint, {
+				...query,
+				page: cachedResults.length / TEMPLATES_PAGE_SIZE + 1,
+				limit: TEMPLATES_PAGE_SIZE,
 			});
 
-			const template: ITemplatesWorkflowFull = {
+			setWorkflowSearchLoaded(query);
-				...response.workflow,
+			addWorkflows(payload.workflows);
-				full: true,
+			addWorkflowsSearch({ ...payload, query });
-			};
-			this.addWorkflows([template]);
 
-			return template;
+			return getSearchedWorkflows.value(query) || [];
-		},
+		} catch (e) {
-		async fetchCollectionById(collectionId: string): Promise<ITemplatesCollection | null> {
+			setWorkflowSearchLoaded(query);
-			const settingsStore = useSettingsStore();
+			throw e;
-			const rootStore = useRootStore();
+		}
-			const apiEndpoint: string = settingsStore.templatesHost;
+	};
-			const versionCli: string = rootStore.versionCli;
+
-			const response = await getCollectionById(apiEndpoint, collectionId, {
+	const getWorkflowTemplate = async (templateId: string): Promise<IWorkflowTemplate> => {
-				'n8n-version': versionCli,
+		const apiEndpoint: string = settingsStore.templatesHost;
+		const versionCli: string = rootStore.versionCli;
+		return await templatesApi.getWorkflowTemplate(apiEndpoint, templateId, {
+			'n8n-version': versionCli,
+		});
+	};
+
+	const getFixedWorkflowTemplate = async (
+		templateId: string,
+	): Promise<IWorkflowTemplate | undefined> => {
+		const template = await getWorkflowTemplate(templateId);
+		if (template?.workflow?.nodes) {
+			template.workflow.nodes = getFixedNodesList(template.workflow.nodes) as INodeUi[];
+			template.workflow.nodes?.forEach((node) => {
+				if (node.credentials) {
+					delete node.credentials;
+				}
 			});
-			const collection: ITemplatesCollectionFull = {
+		}
-				...response.collection,
-				full: true,
-			};
 
-			this.addCollections([collection]);
+		return template;
-			this.addWorkflows(response.collection.workflows);
+	};
-			return this.getCollectionById(collectionId);
-		},
-		async getCategories(): Promise<ITemplatesCategory[]> {
-			const cachedCategories = this.allCategories;
-			if (cachedCategories.length) {
-				return cachedCategories;
-			}
-			const settingsStore = useSettingsStore();
-			const rootStore = useRootStore();
-			const apiEndpoint: string = settingsStore.templatesHost;
-			const versionCli: string = rootStore.versionCli;
-			const response = await getCategories(apiEndpoint, { 'n8n-version': versionCli });
-			const categories = response.categories;
 
-			this.addCategories(categories);
+	return {
-			return categories;
+		categories,
-		},
+		collections,
-		async getCollections(query: ITemplatesQuery): Promise<ITemplatesCollection[]> {
+		workflows,
-			const cachedResults = this.getSearchedCollections(query);
+		workflowSearches,
-			if (cachedResults) {
+		collectionSearches,
-				return cachedResults;
+		currentSessionId,
-			}
+		previousSessionId,
-
+		currentN8nPath,
-			const settingsStore = useSettingsStore();
+		allCategories,
-			const rootStore = useRootStore();
+		getTemplatesById,
-			const apiEndpoint: string = settingsStore.templatesHost;
+		getFullTemplateById,
-			const versionCli: string = rootStore.versionCli;
+		getCollectionById,
-			const response = await getCollections(apiEndpoint, query, { 'n8n-version': versionCli });
+		getCategoryById,
-			const collections = response.collections;
+		getSearchedCollections,
-
+		getSearchedWorkflows,
-			this.addCollections(collections);
+		getSearchedWorkflowsTotal,
-			this.addCollectionSearch({ query, collections });
+		isSearchLoadingMore,
-			collections.forEach((collection) =>
+		isSearchFinished,
-				this.addWorkflows(collection.workflows as ITemplatesWorkflowFull[]),
+		hasCustomTemplatesHost,
-			);
+		websiteTemplateRepositoryURL,
-
+		websiteTemplateRepositoryParameters,
-			return collections;
+		addCategories,
-		},
+		addCollections,
-		async getWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
+		addWorkflows,
-			const cachedResults = this.getSearchedWorkflows(query);
+		addCollectionsSearch,
-			if (cachedResults) {
+		addWorkflowsSearch,
-				this.categories = this.workflowSearches[getSearchKey(query)].categories ?? [];
+		setWorkflowSearchLoading,
-				return cachedResults;
+		setWorkflowSearchLoaded,
-			}
+		resetSessionId,
-
+		setSessionId,
-			const settingsStore = useSettingsStore();
+		fetchTemplateById,
-			const rootStore = useRootStore();
+		fetchCollectionById,
-			const apiEndpoint: string = settingsStore.templatesHost;
+		getCategories,
-			const versionCli: string = rootStore.versionCli;
+		getCollections,
-
+		getWorkflows,
-			const payload = await getWorkflows(
+		getMoreWorkflows,
-				apiEndpoint,
+		getWorkflowTemplate,
-				{ ...query, page: 1, limit: TEMPLATES_PAGE_SIZE },
+		getFixedWorkflowTemplate,
-				{ 'n8n-version': versionCli },
+	};
-			);
-
-			this.addWorkflows(payload.workflows);
-			this.addWorkflowsSearch({ ...payload, query });
-			return this.getSearchedWorkflows(query) || [];
-		},
-		async getMoreWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
-			if (this.isSearchLoadingMore(query) && !this.isSearchFinished(query)) {
-				return [];
-			}
-			const cachedResults = this.getSearchedWorkflows(query) || [];
-			const settingsStore = useSettingsStore();
-			const apiEndpoint: string = settingsStore.templatesHost;
-
-			this.setWorkflowSearchLoading(query);
-			try {
-				const payload = await getWorkflows(apiEndpoint, {
-					...query,
-					page: cachedResults.length / TEMPLATES_PAGE_SIZE + 1,
-					limit: TEMPLATES_PAGE_SIZE,
-				});
-
-				this.setWorkflowSearchLoaded(query);
-				this.addWorkflows(payload.workflows);
-				this.addWorkflowsSearch({ ...payload, query });
-
-				return this.getSearchedWorkflows(query) || [];
-			} catch (e) {
-				this.setWorkflowSearchLoaded(query);
-				throw e;
-			}
-		},
-		async getWorkflowTemplate(templateId: string): Promise<IWorkflowTemplate> {
-			const settingsStore = useSettingsStore();
-			const rootStore = useRootStore();
-			const apiEndpoint: string = settingsStore.templatesHost;
-			const versionCli: string = rootStore.versionCli;
-			return await getWorkflowTemplate(apiEndpoint, templateId, { 'n8n-version': versionCli });
-		},
-
-		async getFixedWorkflowTemplate(templateId: string): Promise<IWorkflowTemplate | undefined> {
-			const template = await this.getWorkflowTemplate(templateId);
-			if (template?.workflow?.nodes) {
-				template.workflow.nodes = getFixedNodesList(template.workflow.nodes) as INodeUi[];
-				template.workflow.nodes?.forEach((node) => {
-					if (node.credentials) {
-						delete node.credentials;
-					}
-				});
-			}
-
-			return template;
-		},
-	},
 });

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

@@ -35,14 +35,14 @@ const collectionId = computed(() => {
 	return Array.isArray(id) ? id[0] : id;
 });
 
-const collection = computed(() => templatesStore.getCollectionById(collectionId.value));
+const collection = computed(() => templatesStore.getCollectionById[collectionId.value]);
 
 const collectionWorkflows = computed(() => {
 	if (!collection.value || loading.value) {
 		return [];
 	}
 	return collection.value.workflows
-		.map(({ id }) => templatesStore.getTemplateById(id.toString()))
+		.map(({ id }) => templatesStore.getTemplatesById(id.toString()))
 		.filter((workflow): workflow is ITemplatesWorkflow => !!workflow);
 });