admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 01:56:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Add lead enrichment suggestions to workflow list (#8042)

Browse Source 
## Summary
We want to show lead enrichment template suggestions to cloud users that
agreed to this. This PR introduces the front-end part of this feature
- Handoff document
- Figma Hi-fi
- [How to
test](https://linear.app/n8n/issue/ADO-1549/[n8n-fe]-update-workflows-list-page-to-show-fake-door-templates#comment-b6644c99)

Tests are being worked on in a separate PR

## Related tickets and issues
Fixes ADO-1546
Fixes ADO-1549
Fixes ADO-1604

## Review / Merge checklist
- [ ] 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))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] 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.

---------

Co-authored-by: ricardo <ricardoespinoza105@gmail.com>
This commit is contained in:
Milorad FIlipović
2023-12-19 15:10:03 +01:00
committed by GitHub
parent c170dd1da3
commit 36a923cf7b
26 changed files with 1387 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
cypress/e2e/36-suggested-templates.cy.ts Normal file
View File

@@ -0,0 +1,143 @@
import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
type SuggestedTemplatesStub = {
sections: SuggestedTemplatesSectionStub[];
}
type SuggestedTemplatesSectionStub = {
name: string;
title: string;
description: string;
workflows: Array<Object>;
};
const WorkflowsListPage = new WorkflowsPageClass();
const WorkflowPage = new WorkflowPageClass();
let fixtureSections: SuggestedTemplatesStub = { sections: [] };;
describe('Suggested templates - Should render', () => {
before(() => {
cy.fixture('Suggested_Templates.json').then((data) => {
fixtureSections = data;
});
});
beforeEach(() => {
localStorage.removeItem('SHOW_N8N_SUGGESTED_TEMPLATES');
cy.intercept('GET', '/rest/settings', (req) => {
req.on('response', (res) => {
res.send({
data: { ...res.body.data, deployment: { type: 'cloud' } },
});
});
}).as('loadSettings');
cy.intercept('GET', '/rest/cloud/proxy/templates', {
fixture: 'Suggested_Templates.json',
});
cy.visit(WorkflowsListPage.url);
cy.wait('@loadSettings');
});
it('should render suggested templates page in empty workflow list', () => {
WorkflowsListPage.getters.suggestedTemplatesPageContainer().should('exist');
WorkflowsListPage.getters.suggestedTemplatesCards().should('have.length', fixtureSections.sections[0].workflows.length);
WorkflowsListPage.getters.suggestedTemplatesSectionDescription().should('contain', fixtureSections.sections[0].description);
});
it('should render suggested templates when there are workflows in the list', () => {
WorkflowsListPage.getters.suggestedTemplatesNewWorkflowButton().click();
cy.createFixtureWorkflow('Test_workflow_1.json', 'Test Workflow');
cy.visit(WorkflowsListPage.url);
WorkflowsListPage.getters.suggestedTemplatesSectionContainer().should('exist');
cy.contains(`Explore ${fixtureSections.sections[0].name.toLocaleLowerCase()} workflow templates`).should('exist');
WorkflowsListPage.getters.suggestedTemplatesCards().should('have.length', fixtureSections.sections[0].workflows.length);
});
it('should enable users to signup for suggested templates templates', () => {
// Test the whole flow
WorkflowsListPage.getters.suggestedTemplatesCards().first().click();
WorkflowsListPage.getters.suggestedTemplatesPreviewModal().should('exist');
WorkflowsListPage.getters.suggestedTemplatesUseTemplateButton().click();
cy.url().should('include', '/workflow/new');
WorkflowPage.getters.infoToast().should('contain', 'Template coming soon!');
WorkflowPage.getters.infoToast().contains('Notify me when it\'s available').click();
WorkflowPage.getters.successToast().should('contain', 'We will contact you via email once this template is released.');
cy.visit(WorkflowsListPage.url);
// Once users have signed up for a template, suggestions should not be shown again
WorkflowsListPage.getters.suggestedTemplatesSectionContainer().should('not.exist');
});
});
describe('Suggested templates - Should not render', () => {
beforeEach(() => {
localStorage.removeItem('SHOW_N8N_SUGGESTED_TEMPLATES');
cy.visit(WorkflowsListPage.url);
});
it('should not render suggested templates templates if not in cloud deployment', () => {
cy.intercept('GET', '/rest/settings', (req) => {
req.on('response', (res) => {
res.send({
data: { ...res.body.data, deployment: { type: 'notCloud' } },
});
});
});
WorkflowsListPage.getters.suggestedTemplatesPageContainer().should('not.exist');
WorkflowsListPage.getters.suggestedTemplatesSectionContainer().should('not.exist');
});
it('should not render suggested templates templates if endpoint throws error', () => {
cy.intercept('GET', '/rest/settings', (req) => {
req.on('response', (res) => {
res.send({
data: { ...res.body.data, deployment: { type: 'cloud' } },
});
});
});
cy.intercept('GET', '/rest/cloud/proxy/templates', { statusCode: 500 }).as('loadTemplates');
WorkflowsListPage.getters.suggestedTemplatesPageContainer().should('not.exist');
WorkflowsListPage.getters.suggestedTemplatesSectionContainer().should('not.exist');
});
it('should not render suggested templates templates if endpoint returns empty list', () => {
cy.intercept('GET', '/rest/settings', (req) => {
req.on('response', (res) => {
res.send({
data: { ...res.body.data, deployment: { type: 'cloud' } },
});
});
});
cy.intercept('GET', '/rest/cloud/proxy/templates', (req) => {
req.on('response', (res) => {
res.send({
data: { collections: [] },
});
});
});
WorkflowsListPage.getters.suggestedTemplatesPageContainer().should('not.exist');
WorkflowsListPage.getters.suggestedTemplatesSectionContainer().should('not.exist');
});
it('should not render suggested templates templates if endpoint returns invalid response', () => {
cy.intercept('GET', '/rest/settings', (req) => {
req.on('response', (res) => {
res.send({
data: { ...res.body.data, deployment: { type: 'cloud' } },
});
});
});
cy.intercept('GET', '/rest/cloud/proxy/templates', (req) => {
req.on('response', (res) => {
res.send({
data: { somethingElse: [] },
});
});
});
WorkflowsListPage.getters.suggestedTemplatesPageContainer().should('not.exist');
WorkflowsListPage.getters.suggestedTemplatesSectionContainer().should('not.exist');
});
});

655
cypress/fixtures/Suggested_Templates.json Normal file
View File

@@ -0,0 +1,655 @@
{
"sections": [
{
"name": "Lead enrichment",
"description": "Explore curated lead enrichment workflows or start fresh with a blank canvas",
"workflows": [
{
"title": "Score new leads with AI from Facebook Lead Ads with AI and get notifications for high scores on Slack",
"description": "This workflow will help you save tons of time and will notify you fully automatically about the most important incoming leads from Facebook Lead Ads. The workflow will automatically fire for every submission. It will then take the name, company, and email information, enrich the submitter via AI, and score it based on metrics that you can easily set.",
"preview": {
"nodes": [
{
"parameters": {
"operation": "create",
"base": {
"__rl": true,
"mode": "list",
"value": ""
},
"table": {
"__rl": true,
"mode": "list",
"value": ""
},
"columns": {
"mappingMode": "defineBelow",
"value": {},
"matchingColumns": [],
"schema": []
},
"options": {}
},
"id": "b09d4f4d-19fa-43de-8148-2d430a04956f",
"name": "Airtable",
"type": "n8n-nodes-base.airtable",
"typeVersion": 2,
"position": [
1800,
740
]
},
{
"parameters": {},
"id": "551313bb-1e01-4133-9956-e6f09968f2ce",
"name": "When clicking \"Execute Workflow\"",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
920,
740
]
},
{
"parameters": {
"options": {}
},
"id": "b4c089ee-2adb-435e-8d48-47012c981a11",
"name": "Get image",
"type": "n8n-nodes-base.httpRequest",
"typeVersion": 4.1,
"position": [
1140,
740
]
},
{
"parameters": {
"operation": "extractHtmlContent",
"options": {}
},
"id": "04ca2f61-b930-4fbc-b467-3470c0d93d64",
"name": "Extract Information",
"type": "n8n-nodes-base.html",
"typeVersion": 1,
"position": [
1360,
740
]
},
{
"parameters": {
"options": {}
},
"id": "d1a77493-c579-4ac4-b6a7-708eea2bf8ce",
"name": "Set Information",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [
1580,
740
]
}
],
"connections": {
"When clicking \"Execute Workflow\"": {
"main": [
[
{
"node": "Get image",
"type": "main",
"index": 0
}
]
]
},
"Get image": {
"main": [
[
{
"node": "Extract Information",
"type": "main",
"index": 0
}
]
]
},
"Extract Information": {
"main": [
[
{
"node": "Set Information",
"type": "main",
"index": 0
}
]
]
},
"Set Information": {
"main": [
[
{
"node": "Airtable",
"type": "main",
"index": 0
}
]
]
}
}
},
"nodes": [
{
"id": 24,
"icon": "fa:code-branch",
"defaults": {
"color": "#00bbcc"
},
"iconData": {
"icon": "code-branch",
"type": "icon"
},
"displayName": "Merge"
}
]
},
{
"title": "Verify the email address every time a contact is created in HubSpot",
"description": "This workflow will help you save tons of time and will notify you fully automatically about the most important incoming leads from Facebook Lead Ads. The workflow will automatically fire for every submission. It will then take the name, company, and email information, enrich the submitter via AI, and score it based on metrics that you can easily set.",
"preview": {
"nodes": [
{
"parameters": {
"operation": "create",
"base": {
"__rl": true,
"mode": "list",
"value": ""
},
"table": {
"__rl": true,
"mode": "list",
"value": ""
},
"columns": {
"mappingMode": "defineBelow",
"value": {},
"matchingColumns": [],
"schema": []
},
"options": {}
},
"id": "b09d4f4d-19fa-43de-8148-2d430a04956f",
"name": "Airtable",
"type": "n8n-nodes-base.airtable",
"typeVersion": 2,
"position": [
1800,
740
]
},
{
"parameters": {},
"id": "551313bb-1e01-4133-9956-e6f09968f2ce",
"name": "When clicking \"Execute Workflow\"",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
920,
740
]
},
{
"parameters": {
"options": {}
},
"id": "b4c089ee-2adb-435e-8d48-47012c981a11",
"name": "Get image",
"type": "n8n-nodes-base.httpRequest",
"typeVersion": 4.1,
"position": [
1140,
740
]
},
{
"parameters": {
"operation": "extractHtmlContent",
"options": {}
},
"id": "04ca2f61-b930-4fbc-b467-3470c0d93d64",
"name": "Extract Information",
"type": "n8n-nodes-base.html",
"typeVersion": 1,
"position": [
1360,
740
]
},
{
"parameters": {
"options": {}
},
"id": "d1a77493-c579-4ac4-b6a7-708eea2bf8ce",
"name": "Set Information",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [
1580,
740
]
}
],
"connections": {
"When clicking \"Execute Workflow\"": {
"main": [
[
{
"node": "Get image",
"type": "main",
"index": 0
}
]
]
},
"Get image": {
"main": [
[
{
"node": "Extract Information",
"type": "main",
"index": 0
}
]
]
},
"Extract Information": {
"main": [
[
{
"node": "Set Information",
"type": "main",
"index": 0
}
]
]
},
"Set Information": {
"main": [
[
{
"node": "Airtable",
"type": "main",
"index": 0
}
]
]
}
}
},
"nodes": [
{
"id": 14,
"icon": "fa:code",
"name": "n8n-nodes-base.function",
"defaults": {
"name": "Function",
"color": "#FF9922"
},
"iconData": {
"icon": "code",
"type": "icon"
},
"categories": [
{
"id": 5,
"name": "Development"
},
{
"id": 9,
"name": "Core Nodes"
}
],
"displayName": "Function",
"typeVersion": 1
},
{
"id": 24,
"icon": "fa:code-branch",
"name": "n8n-nodes-base.merge",
"defaults": {
"name": "Merge",
"color": "#00bbcc"
},
"iconData": {
"icon": "code-branch",
"type": "icon"
},
"categories": [
{
"id": 9,
"name": "Core Nodes"
}
],
"displayName": "Merge",
"typeVersion": 2
}
]
},
{
"title": "Enrich leads from HubSpot with company information via OpenAi",
"description": "This workflow will help you save tons of time and will notify you fully automatically about the most important incoming leads from Facebook Lead Ads. The workflow will automatically fire for every submission. It will then take the name, company, and email information, enrich the submitter via AI, and score it based on metrics that you can easily set.",
"preview": {
"nodes": [
{
"parameters": {
"operation": "create",
"base": {
"__rl": true,
"mode": "list",
"value": ""
},
"table": {
"__rl": true,
"mode": "list",
"value": ""
},
"columns": {
"mappingMode": "defineBelow",
"value": {},
"matchingColumns": [],
"schema": []
},
"options": {}
},
"id": "b09d4f4d-19fa-43de-8148-2d430a04956f",
"name": "Airtable",
"type": "n8n-nodes-base.airtable",
"typeVersion": 2,
"position": [
1800,
740
]
},
{
"parameters": {},
"id": "551313bb-1e01-4133-9956-e6f09968f2ce",
"name": "When clicking \"Execute Workflow\"",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
920,
740
]
},
{
"parameters": {
"options": {}
},
"id": "b4c089ee-2adb-435e-8d48-47012c981a11",
"name": "Get image",
"type": "n8n-nodes-base.httpRequest",
"typeVersion": 4.1,
"position": [
1140,
740
]
},
{
"parameters": {
"operation": "extractHtmlContent",
"options": {}
},
"id": "04ca2f61-b930-4fbc-b467-3470c0d93d64",
"name": "Extract Information",
"type": "n8n-nodes-base.html",
"typeVersion": 1,
"position": [
1360,
740
]
},
{
"parameters": {
"options": {}
},
"id": "d1a77493-c579-4ac4-b6a7-708eea2bf8ce",
"name": "Set Information",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [
1580,
740
]
}
],
"connections": {
"When clicking \"Execute Workflow\"": {
"main": [
[
{
"node": "Get image",
"type": "main",
"index": 0
}
]
]
},
"Get image": {
"main": [
[
{
"node": "Extract Information",
"type": "main",
"index": 0
}
]
]
},
"Extract Information": {
"main": [
[
{
"node": "Set Information",
"type": "main",
"index": 0
}
]
]
},
"Set Information": {
"main": [
[
{
"node": "Airtable",
"type": "main",
"index": 0
}
]
]
}
}
},
"nodes": [
{
"id": 14,
"icon": "fa:code",
"defaults": {
"name": "Function",
"color": "#FF9922"
},
"iconData": {
"icon": "code",
"type": "icon"
},
"displayName": "Function"
}
]
},
{
"title": "Score new lead submissions from Facebook Lead Ads with AI and notify me on Slack when it is a high score lead",
"description": "This workflow will help you save tons of time and will notify you fully automatically about the most important incoming leads from Facebook Lead Ads. The workflow will automatically fire for every submission. It will then take the name, company, and email information, enrich the submitter via AI, and score it based on metrics that you can easily set.",
"preview": {
"nodes": [
{
"parameters": {
"operation": "create",
"base": {
"__rl": true,
"mode": "list",
"value": ""
},
"table": {
"__rl": true,
"mode": "list",
"value": ""
},
"columns": {
"mappingMode": "defineBelow",
"value": {},
"matchingColumns": [],
"schema": []
},
"options": {}
},
"id": "b09d4f4d-19fa-43de-8148-2d430a04956f",
"name": "Airtable",
"type": "n8n-nodes-base.airtable",
"typeVersion": 2,
"position": [
1800,
740
]
},
{
"parameters": {},
"id": "551313bb-1e01-4133-9956-e6f09968f2ce",
"name": "When clicking \"Execute Workflow\"",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
920,
740
]
},
{
"parameters": {
"options": {}
},
"id": "b4c089ee-2adb-435e-8d48-47012c981a11",
"name": "Get image",
"type": "n8n-nodes-base.httpRequest",
"typeVersion": 4.1,
"position": [
1140,
740
]
},
{
"parameters": {
"operation": "extractHtmlContent",
"options": {}
},
"id": "04ca2f61-b930-4fbc-b467-3470c0d93d64",
"name": "Extract Information",
"type": "n8n-nodes-base.html",
"typeVersion": 1,
"position": [
1360,
740
]
},
{
"parameters": {
"options": {}
},
"id": "d1a77493-c579-4ac4-b6a7-708eea2bf8ce",
"name": "Set Information",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [
1580,
740
]
}
],
"connections": {
"When clicking \"Execute Workflow\"": {
"main": [
[
{
"node": "Get image",
"type": "main",
"index": 0
}
]
]
},
"Get image": {
"main": [
[
{
"node": "Extract Information",
"type": "main",
"index": 0
}
]
]
},
"Extract Information": {
"main": [
[
{
"node": "Set Information",
"type": "main",
"index": 0
}
]
]
},
"Set Information": {
"main": [
[
{
"node": "Airtable",
"type": "main",
"index": 0
}
]
]
}
}
},
"nodes": [
{
"id": 14,
"icon": "fa:code",
"defaults": {
"name": "Function",
"color": "#FF9922"
},
"iconData": {
"icon": "code",
"type": "icon"
},
"displayName": "Function"
},
{
"id": 24,
"icon": "fa:code-branch",
"defaults": {
"name": "Merge",
"color": "#00bbcc"
},
"iconData": {
"icon": "code-branch",
"type": "icon"
},
"displayName": "Merge"
}
]
}
]
}
]
}

1
cypress/pages/workflow.ts
View File

@@ -49,6 +49,7 @@ export class WorkflowPage extends BasePage {
successToast: () => cy.get('.el-notification:has(.el-notification--success)'),
warningToast: () => cy.get('.el-notification:has(.el-notification--warning)'),
errorToast: () => cy.get('.el-notification:has(.el-notification--error)'),
infoToast: () => cy.get('.el-notification:has(.el-notification--info)'),
activatorSwitch: () => cy.getByTestId('workflow-activate-switch'),
workflowMenu: () => cy.getByTestId('workflow-menu'),
firstStepButton: () => cy.getByTestId('canvas-add-button'),

7
cypress/pages/workflows.ts
View File

@@ -34,6 +34,13 @@ export class WorkflowsPage extends BasePage {
// Not yet implemented
// myWorkflows: () => cy.getByTestId('my-workflows'),
// allWorkflows: () => cy.getByTestId('all-workflows'),
suggestedTemplatesPageContainer: () => cy.getByTestId('suggested-templates-page-container'),
suggestedTemplatesCards: () => cy.getByTestId('templates-info-card').filter(':visible'),
suggestedTemplatesNewWorkflowButton: () => cy.getByTestId('suggested-templates-new-workflow-button'),
suggestedTemplatesSectionContainer: () => cy.getByTestId('suggested-templates-section-container'),
suggestedTemplatesPreviewModal: () => cy.getByTestId('suggested-templates-preview-modal'),
suggestedTemplatesUseTemplateButton: () => cy.getByTestId('use-template-button'),
suggestedTemplatesSectionDescription: () => cy.getByTestId('suggested-template-section-description'),
};
actions = {