mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-11 12:57:29 -08:00
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
parent
bb2be8d705
commit
4277e92ec0
|
|
@ -10,6 +10,13 @@ const workflowPage = new WorkflowPage();
|
|||
const templateWorkflowPage = new TemplateWorkflowPage();
|
||||
|
||||
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', () => {
|
||||
templatesPage.actions.openOnboardingFlow(1234, OnboardingWorkflow.name, OnboardingWorkflow);
|
||||
cy.url().then(($url) => {
|
||||
|
|
@ -37,10 +44,9 @@ describe('Templates', () => {
|
|||
|
||||
it('should save template id with the workflow', () => {
|
||||
cy.visit(templatesPage.url);
|
||||
cy.intercept('GET', '**/api/templates/**').as('loadApi');
|
||||
cy.get('.el-skeleton.n8n-loading').should('not.exist');
|
||||
templatesPage.getters.firstTemplateCard().should('exist');
|
||||
cy.wait('@loadApi');
|
||||
templatesPage.getters.templatesLoadingContainer().should('not.exist');
|
||||
templatesPage.getters.firstTemplateCard().click();
|
||||
cy.url().should('include', '/templates/');
|
||||
|
||||
|
|
@ -67,4 +73,67 @@ describe('Templates', () => {
|
|||
|
||||
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
1071
cypress/fixtures/templates_search/all_templates_search_response.json
Normal file
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
19
cypress/fixtures/templates_search/test_template_import.json
Normal file
19
cypress/fixtures/templates_search/test_template_import.json
Normal 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
150
cypress/fixtures/templates_search/test_template_preview.json
Normal 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",
|
||||
"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": []
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,14 @@ export class TemplatesPage extends BasePage {
|
|||
useTemplateButton: () => cy.getByTestId('use-template-button'),
|
||||
templateCards: () => cy.getByTestId('template-card'),
|
||||
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 = {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
|
|
|
|||
Loading…
Reference in a new issue