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
2024-01-15 16:19:24 -05:00
committed by GitHub
parent bb2be8d705
commit 4277e92ec0
12 changed files with 2786 additions and 83 deletions

View File

@@ -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,
});