mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 2786 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
cypress/e2e/29-templates.cy.ts
View file

@ -10,6 +10,13 @@ const workflowPage = new WorkflowPage();
const templateWorkflowPage = new TemplateWorkflowPage(); const templateWorkflowPage = new TemplateWorkflowPage();
describe('Templates', () => { describe('Templates', () => {
beforeEach(() => {
cy.intercept('GET', '**/api/templates/search?page=1&rows=20&category=&search=', { fixture: 'templates_search/all_templates_search_response.json' }).as('searchRequest');
cy.intercept('GET', '**/api/templates/search?page=1&rows=20&category=Sales*', { fixture: 'templates_search/sales_templates_search_response.json' }).as('categorySearchRequest');
cy.intercept('GET', '**/api/templates/workflows/*', { fixture: 'templates_search/test_template_preview.json' }).as('singleTemplateRequest');
cy.intercept('GET', '**/api/workflows/templates/*', { fixture: 'templates_search/test_template_import.json' }).as('singleTemplateRequest');
});
it('can open onboarding flow', () => { it('can open onboarding flow', () => {
templatesPage.actions.openOnboardingFlow(1234, OnboardingWorkflow.name, OnboardingWorkflow); templatesPage.actions.openOnboardingFlow(1234, OnboardingWorkflow.name, OnboardingWorkflow);
cy.url().then(($url) => { cy.url().then(($url) => {
@ -37,10 +44,9 @@ describe('Templates', () => {
it('should save template id with the workflow', () => { it('should save template id with the workflow', () => {
cy.visit(templatesPage.url); cy.visit(templatesPage.url);
cy.intercept('GET', '**/api/templates/**').as('loadApi');
cy.get('.el-skeleton.n8n-loading').should('not.exist'); cy.get('.el-skeleton.n8n-loading').should('not.exist');
templatesPage.getters.firstTemplateCard().should('exist'); templatesPage.getters.firstTemplateCard().should('exist');
cy.wait('@loadApi'); templatesPage.getters.templatesLoadingContainer().should('not.exist');
templatesPage.getters.firstTemplateCard().click(); templatesPage.getters.firstTemplateCard().click();
cy.url().should('include', '/templates/'); cy.url().should('include', '/templates/');
@ -67,4 +73,67 @@ describe('Templates', () => {
templateWorkflowPage.getters.description().find('img').should('have.length', 1); templateWorkflowPage.getters.description().find('img').should('have.length', 1);
}); });
it('renders search elements correctly', () => {
cy.visit(templatesPage.url);
templatesPage.getters.searchInput().should('exist');
templatesPage.getters.allCategoriesFilter().should('exist');
templatesPage.getters.categoryFilters().should('have.length.greaterThan', 1);
templatesPage.getters.templateCards().should('have.length.greaterThan', 0);
});
it('can filter templates by category', () => {
cy.visit(templatesPage.url);
templatesPage.getters.templatesLoadingContainer().should('not.exist');
templatesPage.getters.expandCategoriesButton().click();
templatesPage.getters.categoryFilter('sales').should('exist');
let initialTemplateCount = 0;
let initialCollectionCount = 0;
templatesPage.getters.templateCountLabel().then(($el) => {
initialTemplateCount = parseInt($el.text().replace(/\D/g, ''), 10);
templatesPage.getters.collectionCountLabel().then(($el) => {
initialCollectionCount = parseInt($el.text().replace(/\D/g, ''), 10);
templatesPage.getters.categoryFilter('sales').click();
templatesPage.getters.templatesLoadingContainer().should('not.exist');
// Should have less templates and collections after selecting a category
templatesPage.getters.templateCountLabel().should(($el) => {
expect(parseInt($el.text().replace(/\D/g, ''), 10)).to.be.lessThan(initialTemplateCount);
});
templatesPage.getters.collectionCountLabel().should(($el) => {
expect(parseInt($el.text().replace(/\D/g, ''), 10)).to.be.lessThan(initialCollectionCount);
});
});
});
});
it('should preserve search query in URL', () => {
cy.visit(templatesPage.url);
templatesPage.getters.templatesLoadingContainer().should('not.exist');
templatesPage.getters.expandCategoriesButton().click();
templatesPage.getters.categoryFilter('sales').should('exist');
templatesPage.getters.categoryFilter('sales').click();
templatesPage.getters.searchInput().type('auto');
cy.url().should('include', '?categories=');
cy.url().should('include', '&search=');
cy.reload();
// Should preserve search query in URL
cy.url().should('include', '?categories=');
cy.url().should('include', '&search=');
// Sales category should still be selected
templatesPage.getters.categoryFilter('sales').find('label').should('have.class', 'is-checked');
// Search input should still have the search query
templatesPage.getters.searchInput().should('have.value', 'auto');
// Sales checkbox should be pushed to the top
templatesPage.getters.categoryFilters().eq(1).then(($el) => {
expect($el.text()).to.equal('Sales');
});
});
}); });

1071
cypress/fixtures/templates_search/all_templates_search_response.json Normal file
View file

File diff suppressed because it is too large Load diff

1316
cypress/fixtures/templates_search/sales_templates_search_response.json Normal file
View file

File diff suppressed because one or more lines are too long

19
cypress/fixtures/templates_search/test_template_import.json Normal file
View file

@ -0,0 +1,19 @@
{
"id": 60,
"name": "test1 test1",
"workflow": {
"nodes": [
{
"name": "Start",
"type": "n8n-nodes-base.start",
"position": [
250,
300
],
"parameters": {},
"typeVersion": 1
}
],
"connections": {}
}
}

150
cypress/fixtures/templates_search/test_template_preview.json Normal file
View file

@ -0,0 +1,150 @@
{
"workflow": {
"id": 60,
"name": "test1 test1",
"views": 120000000,
"recentViews": 0,
"totalViews": 120000000,
"createdAt": "2019-08-30T16:39:31.362Z",
"description": "here is a description. here is a description. here is a description. \n\n![Screenshot from 20190806 091433.png](fileId:88)",
"workflow": {
"nodes": [
{
"name": "Start",
"type": "n8n-nodes-base.start",
"position": [
250,
300
],
"parameters": {},
"typeVersion": 1
}
],
"connections": {}
},
"lastUpdatedBy": null,
"workflowInfo": {
"nodeCount": 1,
"nodeTypes": {
"n8n-nodes-base.start": {
"count": 1
}
}
},
"user": {
"username": "admin"
},
"nodes": [
{
"id": 11,
"icon": "file:amqp.png",
"name": "n8n-nodes-base.amqpTrigger",
"defaults": {
"name": "AMQP Trigger"
},
"iconData": {
"type": "file",
"fileBuffer": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAB7UlEQVRoge2W4W3CMBCFj26QjkBHSEdIR4AR6Ah0BBgBRqAjhBFgBBghHaEVlV29PN0lDr+o9D7JEjhn+975bJ8JIYQQQgghhBBCCCGEEA9CY2bf0NaBW2uyu7UN2XSOzTyY60J2BzNbObbsH7eTmS2mhHJHE1wmCD7A93ngEAquHaHc2omCcysSXQW74g32BHfwfTEiuCoQm9vuDsEndPYpELxKjjBj0foCEXX6XdM3by3c7aOZPZvZzMzeaBzbIh9pzIuZXaG/RqNIMAq7Ur8XCHQ2kx3LC56DMQ39X4LI23zbAd88ruRHD09wTVF5p+/eBZI5g7O8w5FgXOvsZAI7PxRwS4HGIPbm8wRjBL/Sgp/QNyQYHWySmOxgJBgFeGnPfZHgDVyufET+YMEVCdo7gziCTBbGmRKlGQpCMXOnj+1L6B0JFsxndO3cjjZyjo6OnZeqGb5gqhTQS3qKeK1SwbesfB3IrF/awqu+g8Dgs5SLE37SciHiPUv8rLVp7k2wdl63tDDqgTs8lqpINWGXbSTKe9rlJgXME7C9I6V7oGAWsEzv2gzeN2TstkbCZyIJWBYKWUwtF4foKGU9TpRGdZDSdVDpDNXSVVBLt5TeucS9K6X/E3USX3rshBBCCCGEEEIIIYQQ4tExsx8PuuPnwhCIbgAAAABJRU5ErkJggg=="
},
"categories": [
{
"id": 5,
"name": "Development"
},
{
"id": 6,
"name": "Communication"
}
],
"displayName": "AMQP Trigger",
"typeVersion": 1
},
{
"id": 18,
"icon": "file:autopilot.svg",
"name": "n8n-nodes-base.autopilot",
"defaults": {
"name": "Autopilot"
},
"iconData": {
"type": "file",
"fileBuffer": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjM4IDI2IDM1IDM1Ij48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSIjMThkNGIyIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9IiMxOGQ0YjIiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDUuNCA0Mi42aDE5LjlsMy40LTQuOEg0MmwzLjQgNC44em0zLjEgOC4zaDEzLjFsMy40LTQuOEg0NS40bDMuMSA0Ljh6bTU0LS43Ii8+PC9zdmc+"
},
"categories": [
{
"id": 1,
"name": "Marketing"
}
],
"displayName": "Autopilot",
"typeVersion": 1
},
{
"id": 20,
"icon": "file:lambda.svg",
"name": "n8n-nodes-base.awsLambda",
"defaults": {
"name": "AWS Lambda"
},
"iconData": {
"type": "file",
"fileBuffer": "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9Ii0zLjAyMyAtMC4yMiA0MjAuOTIzIDQzMy41NCIgd2lkdGg9IjI0NDMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwOC40NSAyMjcuODljLTEuNTkgMi4yNi0yLjkzIDQuMTItNC4yMiA2cS0zMC44NiA0NS40Mi02MS43IDkwLjgzLTI4LjY5IDQyLjI0LTU3LjQ0IDg0LjQzYTMuODggMy44OCAwIDAxLTIuNzMgMS41OXEtNDAuNTktLjM1LTgxLjE2LS44OGMtLjMgMC0uNjEtLjA5LTEuMi0uMThhMTQuNDQgMTQuNDQgMCAwMS43Ni0xLjY1cTI4LjMxLTQzLjg5IDU2LjYyLTg3Ljc2IDI1LjExLTM4Ljg4IDUwLjI1LTc3Ljc0IDI3Ljg2LTQzLjE4IDU1LjY5LTg2LjQyYzIuNzQtNC4yNSA1LjU5LTguNDIgOC4xOS0xMi43NWE1LjI2IDUuMjYgMCAwMC41Ni0zLjgzYy01LTE1Ljk0LTEwLjEtMzEuODQtMTUuMTktNDcuNzQtMi4xOC02LjgxLTQuNDYtMTMuNTgtNi41LTIwLjQzLS42Ni0yLjItMS43NS0yLjg3LTQtMi44Ni0xNyAuMDctMzMuOS4wNS01MC44NS4wNS0zLjIyIDAtMy4yMyAwLTMuMjMtMy4xOCAwLTIwLjg0IDAtNDEuNjgtLjA2LTYyLjUyIDAtMi4zMi43Ni0yLjg0IDIuOTQtMi44NHE1MS4xOS4wOSAxMDIuNCAwYTMuMjkgMy4yOSAwIDAxMy42IDIuNDNxMjcgNjcuOTEgNTQgMTM1Ljc3IDMxLjUgNzkuMTQgNjMgMTU4LjNjNi41MiAxNi4zOCAxMy4wOSAzMi43NSAxOS41NCA0OS4xNy43NyAyIDEuNTcgMi4zOCAzLjU5IDEuNzYgMTcuODktNS41MyAzNS44Mi0xMC45MSA1My43LTE2LjQ1IDIuMjUtLjcgMy4wNy0uMjMgMy43NyAyIDYuMSAxOS4xNyAxMi4zMiAzOC4zIDE4LjUgNTcuNDUuMjEuNjYuMzcgMS4zMy42MiAyLjI1LTEuMjguNDctMi40OCAxLTMuNzEgMS4zNHEtNjEgMTkuMzMtMTIxLjkzIDM4LjY4Yy0xLjk0LjYxLTIuNTItLjA1LTMuMTctMS42OHEtMTguNjEtNDcuMTYtMzcuMzEtOTQuMjgtMTguMjktNDYuMTQtMzYuNi05Mi4yOGMtMS44My00LjYyLTMuNjMtOS4yNi01LjQ2LTEzLjg4LS4yOS0uNzktLjY5LTEuNDgtMS4yNy0yLjd6IiBmaWxsPSIjZmE3ZTE0Ii8+PC9zdmc+"
},
"categories": [
{
"id": 5,
"name": "Development"
}
],
"displayName": "AWS Lambda",
"typeVersion": 1
},
{
"id": 40,
"icon": "file:clearbit.svg",
"name": "n8n-nodes-base.clearbit",
"defaults": {
"name": "Clearbit"
},
"iconData": {
"type": "file",
"fileBuffer": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iNTAlIiB4Mj0iMTAwJSIgeTE9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0RFRjJGRSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0RCRjFGRSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMCUiIHgyPSI1MCUiIHkxPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1N0JDRkQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MUI1RkQiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjM3LjUlIiB4Mj0iNjIuNSUiIHkxPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxQ0E3RkQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNDhDRkMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9InVybCgjYSkiIGQ9Ik03MiAzNnYxNi43N2wtLjAwNC44NjhjLS4wNiA2LjAzNS0uNzUgOC4zNTMtMiAxMC42ODhhMTMuNjMgMTMuNjMgMCAwMS01LjY3IDUuNjdsLS4zMjYuMTcxQzYxLjY1OCA3MS4zNjQgNTkuMTYgNzIgNTIuNzcgNzJIMzZWMzZoMzZ6Ii8+PHBhdGggZmlsbD0idXJsKCNiKSIgZD0iTTY0LjMyNiAyLjAwM2ExMy42MyAxMy42MyAwIDAxNS42NyA1LjY3bC4xNzEuMzI3QzcxLjM2NCAxMC4zNDIgNzIgMTIuODQgNzIgMTkuMjNWMzZIMzZWMGgxNi43N2M2LjY4NyAwIDkuMTEyLjY5NiAxMS41NTYgMi4wMDN6Ii8+PHBhdGggZmlsbD0idXJsKCNjKSIgZD0iTTM2IDB2NzJIMTkuMjNsLS44NjgtLjAwNGMtNi4wMzUtLjA2LTguMzUzLS43NS0xMC42ODgtMmExMy42MyAxMy42MyAwIDAxLTUuNjctNS42N0wxLjgzMiA2NEMuNjM2IDYxLjY1OCAwIDU5LjE2IDAgNTIuNzdWMTkuMjNjMC02LjY4Ny42OTYtOS4xMTIgMi4wMDMtMTEuNTU2YTEzLjYzIDEzLjYzIDAgMDE1LjY3LTUuNjdMOCAxLjgzMkMxMC4zNDIuNjM2IDEyLjg0IDAgMTkuMjMgMEgzNnoiLz48L2c+PC9zdmc+"
},
"categories": [
{
"id": 2,
"name": "Sales"
}
],
"displayName": "Clearbit",
"typeVersion": 1
},
{
"id": 51,
"icon": "file:convertKit.svg",
"name": "n8n-nodes-base.convertKitTrigger",
"defaults": {
"name": "ConvertKit Trigger"
},
"iconData": {
"type": "file",
"fileBuffer": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTcyIiBoZWlnaHQ9IjE2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODIuNzIgMTI2LjMxNmMyOS43NyAwIDUyLjc4LTIyLjYyMiA1Mi43OC01MC41MjYgMC0yNi4xNDMtMjEuNjE3LTQyLjEwNi0zNS45MzUtNDIuMTA2LTE5Ljk0NSAwLTM1LjkzIDE0LjA4NC0zOC4xOTggMzQuOTg4LS40MTggMy44NTYtMy40NzYgNy4wOS03LjM1NSA3LjA2MS02LjQyMy0uMDQ2LTE1Ljc0Ni0uMS0yMS42NTgtLjA4LTIuNTU1LjAwOC00LjY2OS0yLjA2NS00LjU0My00LjYxOC44OS0xOC4xMjMgNi45MTQtMzUuMDcgMTguNDAyLTQ4LjA4N0M1OC45NzYgOC40ODggNzcuNTYxIDAgOTkuNTY1IDBjMzYuOTY5IDAgNzEuODY5IDMzLjc4NiA3MS44NjkgNzUuNzkgMCA0Ni41MDgtMzguMzEyIDg0LjIxLTg3LjkyNyA4NC4yMS0zNS4zODQgMC03MS4wMjEtMjMuMjU4LTgzLjQ2NC01NS43NzVhLjcwMi43MDIgMCAwMS0uMDMtLjM3N2MuMTY1LS45NjIuNDk0LTEuODQxLjgxOC0yLjcwNy40NzEtMS4yNTguOTMxLTIuNDg4Ljg2NC0zLjkwNmwtLjIxNS00LjUyOWE1LjUyMyA1LjUyMyAwIDAxMy4xOC01LjI2M2wxLjc5OC0uODQyYTYuOTgyIDYuOTgyIDAgMDAzLjkxMi01LjA3NSA2Ljk5MyA2Ljk5MyAwIDAxNi44ODctNS43MzZjNS4yODIgMCA5Ljg3NSAzLjUxNSAxMS41OSA4LjUxMiA4LjMwNyAyNC4yMTIgMjEuNTExIDQyLjAxNCA1My44NzMgNDIuMDE0eiIgZmlsbD0iI0ZCNjk3MCIvPjwvc3ZnPg=="
},
"categories": [
{
"id": 1,
"name": "Marketing"
},
{
"id": 2,
"name": "Sales"
}
],
"displayName": "ConvertKit Trigger",
"typeVersion": 1
}
],
"categories": [],
"image": []
}
}

8
cypress/pages/templates.ts
View file

@ -7,6 +7,14 @@ export class TemplatesPage extends BasePage {
useTemplateButton: () => cy.getByTestId('use-template-button'), useTemplateButton: () => cy.getByTestId('use-template-button'),
templateCards: () => cy.getByTestId('template-card'), templateCards: () => cy.getByTestId('template-card'),
firstTemplateCard: () => this.getters.templateCards().first(), firstTemplateCard: () => this.getters.templateCards().first(),
allCategoriesFilter: () => cy.getByTestId('template-filter-all-categories'),
searchInput: () => cy.getByTestId('template-search-input'),
categoryFilters: () => cy.get('[data-test-id^=template-filter]'),
categoryFilter: (category: string) => cy.getByTestId(`template-filter-${category}`),
collectionCountLabel: () => cy.getByTestId('collection-count-label'),
templateCountLabel: () => cy.getByTestId('template-count-label'),
templatesLoadingContainer: () => cy.getByTestId('templates-loading-container'),
expandCategoriesButton: () => cy.getByTestId('expand-categories-button'),
}; };
actions = { actions = {

18
packages/editor-ui/src/Interface.ts
View file

@ -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 { export interface ITemplatesWorkflowResponse extends ITemplatesWorkflow, IWorkflowTemplate {
description: string | null; description: string | null;
image: ITemplatesImage[]; image: ITemplatesImage[];
@ -845,7 +858,7 @@ export interface ITemplatesWorkflowFull extends ITemplatesWorkflowResponse {
} }
export interface ITemplatesQuery { export interface ITemplatesQuery {
categories: number[]; categories: string[];
search: string; search: string;
} }
@ -1357,7 +1370,7 @@ export interface INodeTypesState {
} }
export interface ITemplateState { export interface ITemplateState {
categories: { [id: string]: ITemplatesCategory }; categories: ITemplatesCategory[];
collections: { [id: string]: ITemplatesCollection }; collections: { [id: string]: ITemplatesCollection };
workflows: { [id: string]: ITemplatesWorkflow | ITemplatesWorkflowFull }; workflows: { [id: string]: ITemplatesWorkflow | ITemplatesWorkflowFull };
workflowSearches: { workflowSearches: {
@ -1365,6 +1378,7 @@ export interface ITemplateState {
workflowIds: string[]; workflowIds: string[];
totalWorkflows: number; totalWorkflows: number;
loadingMore?: boolean; loadingMore?: boolean;
categories?: ITemplatesCategory[];
}; };
}; };
collectionSearches: { collectionSearches: {

13
packages/editor-ui/src/api/templates.ts
View file

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

77
packages/editor-ui/src/components/TemplateFilters.vue
View file

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

9
packages/editor-ui/src/components/TemplateList.vue
View file

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

13
packages/editor-ui/src/stores/templates.store.ts
View file

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

90
packages/editor-ui/src/views/TemplatesSearchView.vue
View file

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