feat(editor): Add new /templates/search endpoint (#8227)

Updating n8n front-end to use the new search endpoint powered by TypeSense.

Endpoint is deployed on staging API so, in order to test it, use this env var:
```export N8N_TEMPLATES_HOST=https://api-staging.n8n.io/api```

**NOTE**: This PR should not be merged until [backend changes](https://github.com/n8n-io/creators-site/pull/118) are merged and released.

## Related tickets and issues
https://linear.app/n8n/issue/ADO-1555/update-in-app-search-to-work-with-the-new-back-end


## 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))
- [ ] 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.

packages/editor-ui/src/Interface.ts

@@ -830,6 +830,19 @@ export interface ITemplatesWorkflowInfo {
 	};
 }
 
+export type TemplateSearchFacet = {
+	field_name: string;
+	sampled: boolean;
+	stats: {
+		total_values: number;
+	};
+	counts: Array<{
+		count: number;
+		highlighted: string;
+		value: string;
+	}>;
+};
+
 export interface ITemplatesWorkflowResponse extends ITemplatesWorkflow, IWorkflowTemplate {
 	description: string | null;
 	image: ITemplatesImage[];
@@ -845,7 +858,7 @@ export interface ITemplatesWorkflowFull extends ITemplatesWorkflowResponse {
 }
 
 export interface ITemplatesQuery {
-	categories: number[];
+	categories: string[];
 	search: string;
 }
 
@@ -1357,7 +1370,7 @@ export interface INodeTypesState {
 }
 
 export interface ITemplateState {
-	categories: { [id: string]: ITemplatesCategory };
+	categories: ITemplatesCategory[];
 	collections: { [id: string]: ITemplatesCollection };
 	workflows: { [id: string]: ITemplatesWorkflow | ITemplatesWorkflowFull };
 	workflowSearches: {
@@ -1365,6 +1378,7 @@ export interface ITemplateState {
 			workflowIds: string[];
 			totalWorkflows: number;
 			loadingMore?: boolean;
+			categories?: ITemplatesCategory[];
 		};
 	};
 	collectionSearches: {

packages/editor-ui/src/api/templates.ts

@@ -6,6 +6,7 @@ import type {
 	ITemplatesCollectionResponse,
 	ITemplatesWorkflowResponse,
 	IWorkflowTemplate,
+	TemplateSearchFacet,
 } from '@/Interface';
 import type { IDataObject } from 'n8n-workflow';
 import { get } from '@/utils/apiUtils';
@@ -40,14 +41,18 @@ export async function getCollections(
 
 export async function getWorkflows(
 	apiEndpoint: string,
-	query: { skip: number; limit: number; categories: number[]; search: string },
+	query: { page: number; limit: number; categories: number[]; search: string },
 	headers?: IDataObject,
-): Promise<{ totalWorkflows: number; workflows: ITemplatesWorkflow[] }> {
+): Promise<{
+	totalWorkflows: number;
+	workflows: ITemplatesWorkflow[];
+	filters: TemplateSearchFacet[];
+}> {
 	return get(
 		apiEndpoint,
-		'/templates/workflows',
+		'/templates/search',
 		{
-			skip: query.skip,
+			page: query.page,
 			rows: query.limit,
 			category: stringifyArray(query.categories),
 			search: query.search,

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

@@ -1,32 +1,35 @@
 <template>
-	<div :class="$style.filters" class="template-filters">
+	<div :class="$style.filters" class="template-filters" data-test-id="templates-filter-container">
 		<div :class="$style.title" v-text="$locale.baseText('templates.categoriesHeading')" />
 		<div v-if="loading" :class="$style.list">
 			<n8n-loading :loading="loading" :rows="expandLimit" />
 		</div>
 		<ul v-if="!loading" :class="$style.categories">
-			<li :class="$style.item">
-				<el-checkbox
-					:label="$locale.baseText('templates.allCategories')"
-					:model-value="allSelected"
-					@update:modelValue="(value) => resetCategories(value)"
-				/>
+			<li :class="$style.item" data-test-id="template-filter-all-categories">
+				<el-checkbox :model-value="allSelected" @update:model-value="() => resetCategories()">
+					{{ $locale.baseText('templates.allCategories') }}
+				</el-checkbox>
 			</li>
 			<li
-				v-for="category in collapsed ? sortedCategories.slice(0, expandLimit) : sortedCategories"
-				:key="category.id"
+				v-for="(category, index) in collapsed
+					? sortedCategories.slice(0, expandLimit)
+					: sortedCategories"
+				:key="index"
 				:class="$style.item"
+				:data-test-id="`template-filter-${category.name.toLowerCase().replaceAll(' ', '-')}`"
 			>
 				<el-checkbox
-					:label="category.name"
-					:model-value="isSelected(category.id)"
-					@update:modelValue="(value) => handleCheckboxChanged(value, category)"
-				/>
+					:model-value="isSelected(category)"
+					@update:model-value="(value: boolean) => handleCheckboxChanged(value, category)"
+				>
+					{{ category.name }}
+				</el-checkbox>
 			</li>
 		</ul>
 		<div
 			v-if="sortedCategories.length > expandLimit && collapsed && !loading"
 			:class="$style.button"
+			data-test-id="expand-categories-button"
 			@click="collapseAction"
 		>
 			<n8n-text size="small" color="primary">
@@ -39,17 +42,21 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { ITemplatesCategory } from '@/Interface';
+import type { PropType } from 'vue';
+import { useTemplatesStore } from '@/stores/templates.store';
+import { mapStores } from 'pinia';
 
 export default defineComponent({
 	name: 'TemplateFilters',
 	props: {
+		categories: {
+			type: Array as PropType<ITemplatesCategory[]>,
+			default: () => [],
+		},
 		sortOnPopulate: {
 			type: Boolean,
 			default: false,
 		},
-		categories: {
-			type: Array,
-		},
 		expandLimit: {
 			type: Number,
 			default: 12,
@@ -58,9 +65,11 @@ export default defineComponent({
 			type: Boolean,
 		},
 		selected: {
-			type: Array,
+			type: Array as PropType<ITemplatesCategory[]>,
+			default: () => [],
 		},
 	},
+	emits: ['clearAll', 'select', 'clear'],
 	data() {
 		return {
 			collapsed: true,
@@ -68,34 +77,48 @@ export default defineComponent({
 		};
 	},
 	computed: {
+		...mapStores(useTemplatesStore),
 		allSelected(): boolean {
 			return this.selected.length === 0;
 		},
 	},
 	watch: {
+		sortOnPopulate: {
+			handler(value: boolean) {
+				if (value) {
+					this.sortCategories();
+				}
+			},
+			immediate: true,
+		},
 		categories: {
 			handler(categories: ITemplatesCategory[]) {
-				if (!this.sortOnPopulate) {
-					this.sortedCategories = categories;
-				} else {
-					const selected = this.selected || [];
-					const selectedCategories = categories.filter(({ id }) => selected.includes(id));
-					const notSelectedCategories = categories.filter(({ id }) => !selected.includes(id));
-					this.sortedCategories = selectedCategories.concat(notSelectedCategories);
+				if (categories.length > 0) {
+					this.sortCategories();
 				}
 			},
 			immediate: true,
 		},
 	},
 	methods: {
+		sortCategories() {
+			if (!this.sortOnPopulate) {
+				this.sortedCategories = this.categories;
+			} else {
+				const selected = this.selected || [];
+				const selectedCategories = this.categories.filter((cat) => selected.includes(cat));
+				const notSelectedCategories = this.categories.filter((cat) => !selected.includes(cat));
+				this.sortedCategories = selectedCategories.concat(notSelectedCategories);
+			}
+		},
 		collapseAction() {
 			this.collapsed = false;
 		},
 		handleCheckboxChanged(value: boolean, selectedCategory: ITemplatesCategory) {
-			this.$emit(value ? 'select' : 'clear', selectedCategory.id);
+			this.$emit(value ? 'select' : 'clear', selectedCategory);
 		},
-		isSelected(categoryId: string) {
-			return this.selected.includes(categoryId);
+		isSelected(category: ITemplatesCategory) {
+			return this.selected.includes(category);
 		},
 		resetCategories() {
 			this.$emit('clearAll');

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

@@ -3,6 +3,7 @@
 		<div v-if="!simpleView" :class="$style.header">
 			<n8n-heading :bold="true" size="medium" color="text-light">
 				{{ $locale.baseText('templates.workflows') }}
+				<span v-if="totalCount > 0" data-test-id="template-count-label">({{ totalCount }})</span>
 				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
 			</n8n-heading>
 		</div>
@@ -19,7 +20,7 @@
 				@useWorkflow="(e) => onUseWorkflow(e, workflow.id)"
 			/>
 			<div v-if="infiniteScrollEnabled" ref="loader" />
-			<div v-if="loading">
+			<div v-if="loading" data-test-id="templates-loading-container">
 				<TemplateCard
 					v-for="n in 4"
 					:key="'index-' + n"
@@ -55,14 +56,20 @@ export default defineComponent({
 		},
 		workflows: {
 			type: Array,
+			default: () => [],
 		},
 		totalWorkflows: {
 			type: Number,
+			default: 0,
 		},
 		simpleView: {
 			type: Boolean,
 			default: false,
 		},
+		totalCount: {
+			type: Number,
+			default: 0,
+		},
 	},
 	mounted() {
 		if (this.infiniteScrollEnabled) {

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

@@ -22,7 +22,7 @@ import {
 } from '@/api/templates';
 import { getFixedNodesList } from '@/utils/nodeViewUtils';
 
-const TEMPLATES_PAGE_SIZE = 10;
+const TEMPLATES_PAGE_SIZE = 20;
 
 function getSearchKey(query: ITemplatesQuery): string {
 	return JSON.stringify([query.search || '', [...query.categories].sort()]);
@@ -32,7 +32,7 @@ export type TemplatesStore = ReturnType<typeof useTemplatesStore>;
 
 export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 	state: (): ITemplateState => ({
-		categories: {},
+		categories: [],
 		collections: {},
 		workflows: {},
 		collectionSearches: {},
@@ -151,7 +151,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 			collections: ITemplatesCollection[];
 			query: ITemplatesQuery;
 		}): void {
-			const collectionIds = data.collections.map((collection) => collection.id);
+			const collectionIds = data.collections.map((collection) => String(collection.id));
 			const searchKey = getSearchKey(data.query);
 
 			this.collectionSearches = {
@@ -175,6 +175,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 					[searchKey]: {
 						workflowIds: workflowIds as unknown as string[],
 						totalWorkflows: data.totalWorkflows,
+						categories: this.categories,
 					},
 				};
 
@@ -186,6 +187,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 				[searchKey]: {
 					workflowIds: [...cachedResults.workflowIds, ...workflowIds] as string[],
 					totalWorkflows: data.totalWorkflows,
+					categories: this.categories,
 				},
 			};
 		},
@@ -291,6 +293,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		async getWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
 			const cachedResults = this.getSearchedWorkflows(query);
 			if (cachedResults) {
+				this.categories = this.workflowSearches[getSearchKey(query)].categories ?? [];
 				return cachedResults;
 			}
 
@@ -300,7 +303,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 
 			const payload = await getWorkflows(
 				apiEndpoint,
-				{ ...query, skip: 0, limit: TEMPLATES_PAGE_SIZE },
+				{ ...query, page: 1, limit: TEMPLATES_PAGE_SIZE },
 				{ 'n8n-version': versionCli },
 			);
 
@@ -320,7 +323,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 			try {
 				const payload = await getWorkflows(apiEndpoint, {
 					...query,
-					skip: cachedResults.length,
+					page: cachedResults.length / TEMPLATES_PAGE_SIZE + 1,
 					limit: TEMPLATES_PAGE_SIZE,
 				});
 

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

@@ -25,10 +25,10 @@
 					<TemplateFilters
 						:categories="templatesStore.allCategories"
 						:sort-on-populate="areCategoriesPrepopulated"
-						:loading="loadingCategories"
 						:selected="categories"
+						:loading="loadingCategories"
 						@clear="onCategoryUnselected"
-						@clearAll="onCategoriesCleared"
+						@clear-all="onCategoriesCleared"
 						@select="onCategorySelected"
 					/>
 				</div>
@@ -37,7 +37,8 @@
 						:model-value="search"
 						:placeholder="$locale.baseText('templates.searchPlaceholder')"
 						clearable
-						@update:modelValue="onSearchInput"
+						data-test-id="template-search-input"
+						@update:model-value="onSearchInput"
 						@blur="trackSearch"
 					>
 						<template #prefix>
@@ -48,22 +49,26 @@
 						<div :class="$style.header">
 							<n8n-heading :bold="true" size="medium" color="text-light">
 								{{ $locale.baseText('templates.collections') }}
-								<span v-if="!loadingCollections" v-text="`(${collections.length})`" />
+								<span
+									v-if="!loadingCollections"
+									data-test-id="collection-count-label"
+									v-text="`(${collections.length})`"
+								/>
 							</n8n-heading>
 						</div>
 						<TemplatesInfoCarousel
 							:collections="collections"
 							:loading="loadingCollections"
-							@openCollection="onOpenCollection"
+							@open-collection="onOpenCollection"
 						/>
 					</div>
 					<TemplateList
 						:infinite-scroll-enabled="true"
 						:loading="loadingWorkflows"
-						:total-workflows="totalWorkflows"
 						:workflows="workflows"
-						@loadMore="onLoadMore"
-						@openTemplate="onOpenTemplate"
+						:total-count="totalWorkflows"
+						@load-more="onLoadMore"
+						@open-template="onOpenTemplate"
 					/>
 					<div v-if="endOfSearchMessage" :class="$style.endText">
 						<n8n-text size="medium" color="text-base">
@@ -128,7 +133,7 @@ export default defineComponent({
 	data() {
 		return {
 			areCategoriesPrepopulated: false,
-			categories: [] as number[],
+			categories: [] as ITemplatesCategory[],
 			loading: true,
 			loadingCategories: true,
 			loadingCollections: true,
@@ -142,13 +147,13 @@ export default defineComponent({
 	computed: {
 		...mapStores(useSettingsStore, useTemplatesStore, useUIStore, useUsersStore, usePostHog),
 		totalWorkflows(): number {
-			return this.templatesStore.getSearchedWorkflowsTotal(this.query);
+			return this.templatesStore.getSearchedWorkflowsTotal(this.createQueryObject('name'));
 		},
 		workflows(): ITemplatesWorkflow[] {
-			return this.templatesStore.getSearchedWorkflows(this.query) || [];
+			return this.templatesStore.getSearchedWorkflows(this.createQueryObject('name')) ?? [];
 		},
 		collections(): ITemplatesCollection[] {
-			return this.templatesStore.getSearchedCollections(this.query) || [];
+			return this.templatesStore.getSearchedCollections(this.createQueryObject('id')) ?? [];
 		},
 		endOfSearchMessage(): string | null {
 			if (this.loadingWorkflows) {
@@ -167,12 +172,6 @@ export default defineComponent({
 
 			return null;
 		},
-		query(): ITemplatesQuery {
-			return {
-				categories: this.categories,
-				search: this.search,
-			};
-		},
 		nothingFound(): boolean {
 			return (
 				!this.loadingWorkflows &&
@@ -191,10 +190,12 @@ export default defineComponent({
 	},
 	async mounted() {
 		setPageTitle('n8n - Templates');
-		void this.loadCategories();
+		await this.loadCategories();
 		void this.loadWorkflowsAndCollections(true);
 		void this.usersStore.showPersonalizationSurvey();
 
+		this.restoreSearchFromRoute();
+
 		setTimeout(() => {
 			// Check if there is scroll position saved in route and scroll to it
 			if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
@@ -202,19 +203,35 @@ export default defineComponent({
 			}
 		}, 100);
 	},
-	async created() {
-		if (this.$route.query.search && typeof this.$route.query.search === 'string') {
-			this.search = this.$route.query.search;
-		}
-
-		if (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {
-			this.categories = this.$route.query.categories
-				.split(',')
-				.map((categoryId) => parseInt(categoryId, 10));
-			this.areCategoriesPrepopulated = true;
-		}
-	},
 	methods: {
+		createQueryObject(categoryId: 'name' | 'id'): ITemplatesQuery {
+			// We are using category names for template search and ids for collection search
+			return {
+				categories: this.categories.map((category) =>
+					categoryId === 'name' ? category.name : String(category.id),
+				),
+				search: this.search,
+			};
+		},
+		restoreSearchFromRoute() {
+			let updateSearch = false;
+			if (this.$route.query.search && typeof this.$route.query.search === 'string') {
+				this.search = this.$route.query.search;
+				updateSearch = true;
+			}
+			if (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {
+				const categoriesFromURL = this.$route.query.categories.split(',');
+				this.categories = this.templatesStore.allCategories.filter((category) =>
+					categoriesFromURL.includes(category.id.toString()),
+				);
+				updateSearch = true;
+			}
+			if (updateSearch) {
+				this.updateSearch();
+				this.trackCategories();
+				this.areCategoriesPrepopulated = true;
+			}
+		},
 		onOpenCollection({ event, id }: { event: MouseEvent; id: string }) {
 			this.navigateTo(event, VIEWS.COLLECTION, id);
 		},
@@ -231,7 +248,7 @@ export default defineComponent({
 			}
 		},
 		updateSearch() {
-			this.updateQueryParam(this.search, this.categories.join(','));
+			this.updateQueryParam(this.search, this.categories.map((category) => category.id).join(','));
 			void this.loadWorkflowsAndCollections(false);
 		},
 		updateSearchTracking(search: string, categories: number[]) {
@@ -274,13 +291,13 @@ export default defineComponent({
 				this.trackSearch();
 			}
 		},
-		onCategorySelected(selected: number) {
+		onCategorySelected(selected: ITemplatesCategory) {
 			this.categories = this.categories.concat(selected);
 			this.updateSearch();
 			this.trackCategories();
 		},
-		onCategoryUnselected(selected: number) {
-			this.categories = this.categories.filter((id) => id !== selected);
+		onCategoryUnselected(selected: ITemplatesCategory) {
+			this.categories = this.categories.filter((category) => category.id !== selected.id);
 			this.updateSearch();
 			this.trackCategories();
 		},
@@ -292,9 +309,7 @@ export default defineComponent({
 			if (this.categories.length) {
 				this.$telemetry.track('User changed template filters', {
 					search_string: this.search,
-					categories_applied: this.categories.map((categoryId: number) =>
-						this.templatesStore.getCollectionById(categoryId.toString()),
-					),
+					categories_applied: this.categories,
 					wf_template_repo_session_id: this.templatesStore.currentSessionId,
 				});
 			}
@@ -323,7 +338,7 @@ export default defineComponent({
 			try {
 				this.loadingWorkflows = true;
 				await this.templatesStore.getMoreWorkflows({
-					categories: this.categories,
+					categories: this.categories.map((category) => category.name),
 					search: this.search,
 				});
 			} catch (e) {
@@ -346,7 +361,7 @@ export default defineComponent({
 			try {
 				this.loadingCollections = true;
 				await this.templatesStore.getCollections({
-					categories: this.categories,
+					categories: this.categories.map((category) => String(category.id)),
 					search: this.search,
 				});
 			} catch (e) {}
@@ -358,7 +373,7 @@ export default defineComponent({
 				this.loadingWorkflows = true;
 				await this.templatesStore.getWorkflows({
 					search: this.search,
-					categories: this.categories,
+					categories: this.categories.map((category) => category.name),
 				});
 				this.errorLoadingWorkflows = false;
 			} catch (e) {
@@ -372,7 +387,10 @@ export default defineComponent({
 			const categories = [...this.categories];
 			await Promise.all([this.loadWorkflows(), this.loadCollections()]);
 			if (!initialLoad) {
-				this.updateSearchTracking(search, categories);
+				this.updateSearchTracking(
+					search,
+					categories.map((category) => category.id),
+				);
 			}
 		},
 		scrollTo(position: number, behavior: ScrollBehavior = 'smooth') {