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.
This commit is contained in:
Ricardo Espinoza
GitHub
@@ -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') {
|
||||
|
||||
Reference in New Issue
Block a user