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

packages/editor-ui/src/Interface.ts

@@ -830,6 +830,24 @@ export interface ITemplatesWorkflowInfo {
 	};
 }
 
+export type TemplateCategoryFilter = {
+	name: string;
+	result_count: number;
+};
+
+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[];
@@ -1357,14 +1375,15 @@ export interface INodeTypesState {
 }
 
 export interface ITemplateState {
-	categories: { [id: string]: ITemplatesCategory };
+	categories: TemplateCategoryFilter[];
 	collections: { [id: string]: ITemplatesCollection };
 	workflows: { [id: string]: ITemplatesWorkflow | ITemplatesWorkflowFull };
 	workflowSearches: {
 		[search: string]: {
 			workflowIds: string[];
 			totalWorkflows: number;
 			loadingMore?: boolean;
+			categories?: TemplateCategoryFilter[];
 		};
 	};
 	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';
@@ -42,10 +43,15 @@ export async function getWorkflows(
 	apiEndpoint: string,
 	query: { skip: number; limit: number; categories: number[]; search: string },
 	headers?: IDataObject,
-): Promise<{ totalWorkflows: number; workflows: ITemplatesWorkflow[] }> {
+): Promise<{
+	totalWorkflows: number;
+	workflows: ITemplatesWorkflow[];
+	filters: TemplateSearchFacet[];
+	out_of: number;
+}> {
 	return get(
 		apiEndpoint,
-		'/templates/workflows',
+		'/templates/search',
 		{
 			skip: query.skip,
 			rows: query.limit,

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

@@ -7,21 +7,25 @@
 		<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)"
-				/>
+				>
+					{{ $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"
 			>
 				<el-checkbox
-					:label="category.name"
-					:model-value="isSelected(category.id)"
+					:model-value="isSelected(category.name)"
 					@update:modelValue="(value) => handleCheckboxChanged(value, category)"
-				/>
+				>
+					{{ category.name }} <n8n-tag :text="String(category.result_count)" />
+				</el-checkbox>
 			</li>
 		</ul>
 		<div
@@ -38,7 +42,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type { ITemplatesCategory } from '@/Interface';
+import type { TemplateCategoryFilter } from '@/Interface';
+import type { PropType } from 'vue';
+import { useTemplatesStore } from '@/stores/templates.store';
+import { mapStores } from 'pinia';
 
 export default defineComponent({
 	name: 'TemplateFilters',
@@ -48,7 +55,8 @@ export default defineComponent({
 			default: false,
 		},
 		categories: {
-			type: Array,
+			type: Array as PropType<TemplateCategoryFilter[]>,
+			default: () => [],
 		},
 		expandLimit: {
 			type: Number,
@@ -59,28 +67,30 @@ export default defineComponent({
 		},
 		selected: {
 			type: Array,
+			default: () => [],
 		},
 	},
 	data() {
 		return {
 			collapsed: true,
-			sortedCategories: [] as ITemplatesCategory[],
+			sortedCategories: [] as TemplateCategoryFilter[],
 		};
 	},
 	computed: {
+		...mapStores(useTemplatesStore),
 		allSelected(): boolean {
 			return this.selected.length === 0;
 		},
 	},
 	watch: {
 		categories: {
-			handler(categories: ITemplatesCategory[]) {
+			handler(categories: TemplateCategoryFilter[]) {
 				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));
+					const selectedCategories = categories.filter(({ name }) => selected.includes(name));
+					const notSelectedCategories = categories.filter(({ name }) => !selected.includes(name));
 					this.sortedCategories = selectedCategories.concat(notSelectedCategories);
 				}
 			},
@@ -91,8 +101,8 @@ export default defineComponent({
 		collapseAction() {
 			this.collapsed = false;
 		},
-		handleCheckboxChanged(value: boolean, selectedCategory: ITemplatesCategory) {
-			this.$emit(value ? 'select' : 'clear', selectedCategory.id);
+		handleCheckboxChanged(value: boolean, selectedCategory: TemplateCategoryFilter) {
+			this.$emit(value ? 'select' : 'clear', selectedCategory.name);
 		},
 		isSelected(categoryId: string) {
 			return this.selected.includes(categoryId);

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

@@ -2,7 +2,7 @@
 	<div v-if="loading || workflows.length" :class="$style.list">
 		<div v-if="!simpleView" :class="$style.header">
 			<n8n-heading :bold="true" size="medium" color="text-light">
-				{{ $locale.baseText('templates.workflows') }}
+				{{ $locale.baseText('templates.workflows') }} ({{ totalCount }})
 				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
 			</n8n-heading>
 		</div>
@@ -63,6 +63,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		totalCount: {
+			type: Number,
+			default: 0,
+		},
 	},
 	mounted() {
 		if (this.infiniteScrollEnabled) {

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

@@ -10,10 +10,11 @@ import type {
 	ITemplatesWorkflow,
 	ITemplatesWorkflowFull,
 	IWorkflowTemplate,
+	TemplateCategoryFilter,
+	TemplateSearchFacet,
 } from '@/Interface';
 import { useSettingsStore } from './settings.store';
 import {
-	getCategories,
 	getCollectionById,
 	getCollections,
 	getTemplateById,
@@ -32,7 +33,7 @@ export type TemplatesStore = ReturnType<typeof useTemplatesStore>;
 
 export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 	state: (): ITemplateState => ({
-		categories: {},
+		categories: [],
 		collections: {},
 		workflows: {},
 		collectionSearches: {},
@@ -41,10 +42,8 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		previousSessionId: '',
 	}),
 	getters: {
-		allCategories(): ITemplatesCategory[] {
-			return Object.values(this.categories).sort((a: ITemplatesCategory, b: ITemplatesCategory) =>
-				a.name > b.name ? 1 : -1,
-			);
+		allCategories(): TemplateCategoryFilter[] {
+			return this.categories;
 		},
 		getTemplateById() {
 			return (id: string): null | ITemplatesWorkflow => this.workflows[id];
@@ -111,14 +110,6 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		},
 	},
 	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 }));
@@ -175,6 +166,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 					[searchKey]: {
 						workflowIds: workflowIds as unknown as string[],
 						totalWorkflows: data.totalWorkflows,
+						categories: this.categories,
 					},
 				};
 
@@ -186,6 +178,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 				[searchKey]: {
 					workflowIds: [...cachedResults.workflowIds, ...workflowIds] as string[],
 					totalWorkflows: data.totalWorkflows,
+					categories: this.categories,
 				},
 			};
 		},
@@ -254,20 +247,6 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 			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 apiEndpoint: string = settingsStore.templatesHost;
-			const versionCli: string = settingsStore.versionCli;
-			const response = await getCategories(apiEndpoint, { 'n8n-version': versionCli });
-			const categories = response.categories;
-
-			this.addCategories(categories);
-			return categories;
-		},
 		async getCollections(query: ITemplatesQuery): Promise<ITemplatesCollection[]> {
 			const cachedResults = this.getSearchedCollections(query);
 			if (cachedResults) {
@@ -291,6 +270,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,14 +280,25 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 
 			const payload = await getWorkflows(
 				apiEndpoint,
-				{ ...query, skip: 0, limit: TEMPLATES_PAGE_SIZE },
+				{ ...query, skip: 1, limit: TEMPLATES_PAGE_SIZE },
 				{ 'n8n-version': versionCli },
 			);
 
 			this.addWorkflows(payload.workflows);
+			this.setCategories(payload.filters);
 			this.addWorkflowsSearch({ ...payload, query });
 			return this.getSearchedWorkflows(query) || [];
 		},
+		setCategories(facets: TemplateSearchFacet[]): void {
+			const categories = facets.find((facet) => facet.field_name === 'categories');
+			if (!categories) {
+				return;
+			}
+			this.categories = categories.counts.map((category) => ({
+				name: category.value,
+				result_count: category.count,
+			}));
+		},
 		async getMoreWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
 			if (this.isSearchLoadingMore(query) && !this.isSearchFinished(query)) {
 				return [];
@@ -320,12 +311,13 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 			try {
 				const payload = await getWorkflows(apiEndpoint, {
 					...query,
-					skip: cachedResults.length,
+					skip: cachedResults.length / TEMPLATES_PAGE_SIZE + 1,
 					limit: TEMPLATES_PAGE_SIZE,
 				});
 
 				this.setWorkflowSearchLoaded(query);
 				this.addWorkflows(payload.workflows);
+				this.setCategories(payload.filters);
 				this.addWorkflowsSearch({ ...payload, query });
 
 				return this.getSearchedWorkflows(query) || [];

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

@@ -24,8 +24,7 @@
 				<div :class="$style.filters">
 					<TemplateFilters
 						:categories="templatesStore.allCategories"
-						:sort-on-populate="areCategoriesPrepopulated"
-						:loading="loadingCategories"
+						:loading="loadingWorkflows"
 						:selected="categories"
 						@clear="onCategoryUnselected"
 						@clearAll="onCategoriesCleared"
@@ -60,8 +59,8 @@
 					<TemplateList
 						:infinite-scroll-enabled="true"
 						:loading="loadingWorkflows"
-						:total-workflows="totalWorkflows"
 						:workflows="workflows"
+						:total-count="totalWorkflows"
 						@loadMore="onLoadMore"
 						@openTemplate="onOpenTemplate"
 					/>
@@ -127,10 +126,8 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			areCategoriesPrepopulated: false,
-			categories: [] as number[],
+			categories: [] as string[],
 			loading: true,
-			loadingCategories: true,
 			loadingCollections: true,
 			loadingWorkflows: true,
 			search: '',
@@ -191,7 +188,6 @@ export default defineComponent({
 	},
 	async mounted() {
 		setPageTitle('n8n - Templates');
-		void this.loadCategories();
 		void this.loadWorkflowsAndCollections(true);
 		void this.usersStore.showPersonalizationSurvey();
 
@@ -208,10 +204,7 @@ export default defineComponent({
 		}
 
 		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;
+			this.categories = this.$route.query.categories.split(',');
 		}
 	},
 	methods: {
@@ -336,12 +329,6 @@ export default defineComponent({
 				this.loadingWorkflows = false;
 			}
 		},
-		async loadCategories() {
-			try {
-				await this.templatesStore.getCategories();
-			} catch (e) {}
-			this.loadingCategories = false;
-		},
 		async loadCollections() {
 			try {
 				this.loadingCollections = true;