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

MiloradFilipovic · 2023-12-15T12:54:57Z

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

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)
Docs updated 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.

…ad enrichment page

* master: fix(editor): Turn off executions list auto-refresh after leaving the page (#8005) fix(editor): Show credential share info only to appropriate users (#8020) 🚀 Release 1.21.0 (#8019) fix(ActiveCampaign Node): Fix pagination issue when loading tags (#8017) feat(n8n Form Trigger Node): Improvements (#7571) fix(editor): Fix bug with node names with certain characters (#8013) feat(editor): Filter component + implement in If node (#7490) fix(Postgres Trigger Node): Increase manual trigger timeout from 30 to 60 seconds (#8015) fix(core): Prevent workflow history saving error from happening (#7812) fix(editor): Fix Webhook URL expansion icon (#8011) docs: Add aliases to compare datasets node (#8010) refactor(core): Add telemetry for RBAC roles (#7969) docs(editor): Change to Summarize icon and Advanced section description (no-changelog) (#8008) refactor(core): Introduce import service (no-changelog) (#8001) fix(Webhook Node): Do not create binary data when there is no data in the request (#8000) 🚀 Release 1.20.0 (#7940)

* master: refactor(core): Warn on sqlite DB detected during init on queue mode (#8034) docs: Two small UI copy fixes in sub-nodes (#8032) fix(core): Restore workflow ID during execution creation (#8031) fix(core): Initialize queue once in queue mode (#8025) fix(editor): Add back credential `use` permission (#8023) fix(editor): Disable auto scroll and list size check when clicking on executions (#7983) fix(editor): Fix dialogVisibleChanged hooks event when meta.value is undefined (no-changelog) (#7986) perf(editor): Improve canvas rendering performance (#8022)

…odal size

…e users sign up

…review is loaded, refactoring

packages/editor-ui/src/views/NodeView.vue

packages/editor-ui/src/views/SetupView.vue

packages/editor-ui/src/stores/cloudPlan.store.ts

packages/editor-ui/src/components/PersonalizationModal.vue

cypress · 2023-12-15T17:02:44Z

3 flaky tests on run #3408 ↗︎

0	312	5	0	3

Details:

🌳 🖥️ browsers:node18.12.0-chrome107 🤖 MiloradFilipovic 🗃️ e2e/*
Project: n8n	Commit: `4866d8b8a5`
Status: Passed	Duration: 06:37 💡
Started: Dec 19, 2023 1:37 PM	Ended: Dec 19, 2023 1:44 PM

17-sharing.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
Sharing > should work for admin role on credentials created by others (also can share it with themselves)		`Screenshots` `Video`

24-ndv-paired-item.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
NDV > resolves expression with default item when input node is not parent, while still pairing items		`Screenshots` `Video`

27-two-factor-authentication.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
Two-factor authentication > Should be able to login with MFA token		`Screenshots` `Video`

Review all test suite changes for PR #8042 ↗︎

* master: fix(editor): Cleanup Executions page component (#8053) feat: Add config option to prefer GET request over LIST when using Hashicorp Vault (#8049) fix(HTTP Request Node): Do not create circular references in HTTP request node output (#8030) fix(core): Handle multiple termination signals correctly (#8046) fix(core): Close db connection gracefully when exiting (#8045) fix(core): Public API support node's deprecated continueOnFail to upload old workflows (no-changelog) (#8044) fix(core): Remove circular references before serializing executions in public API (#8043) refactor(core): Make workflow services injectable (no-changelog) (#8033) refactor(core): Remove ID-less workflow reporting (no-changelog) (#8038) feat(Filter Node): Overhaul UI by adding the new filter component (#8016)

…opted in

mutdmour · 2023-12-18T11:40:04Z

cypress/e2e/36-lead-enrichment.cy.ts

+			});
+		}).as('loadSettings');
+		cy.intercept('GET', '/rest/cloud/proxy/templates', {
+			fixture: 'Lead_Enrichment_Templates.json',


that's cool.. did not know can just do this..

mutdmour · 2023-12-18T11:41:16Z

packages/editor-ui/src/components/LeadEnrichment/LeadEnrichmentSection.vue

+		const plainName = node.displayName.replace(' Trigger', '');
+		if (uniqueNames.has(plainName)) {


would not be better to check best on the node id n8n-node-base.facebook vs n8n-node-base.facebookTrigger?

Talked with @RicardoE105, this logic will be moved to back-end

mutdmour · 2023-12-18T11:48:12Z

packages/editor-ui/src/stores/cloudPlan.store.ts

@@ -163,6 +168,17 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
 		window.location.href = `https://${adminPanelHost}/login?code=${code}`;
 	};

+	const fetchLeadEnrichmentTemplates = async () => {
+		try {
+			const leadEnrichmentTemplates = await getLeadEnrichmentTemplates(rootStore.getRestApiContext);


we designed this feature to be generic.. ideally it would not be just for lead enrichment.. we want to be able to test other customizations..
seems like a lot of this code expects lead enrichment only.. please double check with @RicardoE105 .. the api should be returning the interest

Ah, missed that. Updated so all UI info is pulled from fetched data and renamed a lot of stuff not to suggest category name

packages/editor-ui/src/stores/cloudPlan.store.ts

mutdmour · 2023-12-18T11:49:22Z

cypress/fixtures/Lead_Enrichment_Templates.json

+{
+	"sections": [
+			{
+					"name": "Lead enrichment",


we should be using to dynamically show lead enrichment..

github-actions · 2023-12-18T16:51:33Z

✅ All Cypress E2E specs passed

github-actions · 2023-12-19T13:44:29Z

✅ All Cypress E2E specs passed

* master: (22 commits) fix(editor): Make keyboard shortcuts more strict; don't accept extra Ctrl/Alt/Shift keys (#8024) fix(core): Downgrade Rudderstack SDK (no-changelog) (#8107) fix(editor): Move versions check to init function and refactor store (no-changelog) (#8067) refactor(editor): Add telemetry for SSO/SAML (no-changelog) (#8102) fix(editor): Ensure execution data overrides pinned data when copying in executions view (#8009) fix(editor): Fix copy/paste issue when switch node is in workflow (#8103) feat(editor): Upgrade frontend tooling to address a few vulnerabilities (#8100) feat(editor): De-duplicate frontend devDependencies (no-changelog) (#8094) refactor(core): Improve test-webhooks (no-changelog) (#8069) refactor: Add telemetry for RBAC (no-changelog) (#8056) feat(core): Upgrade Rudderstack SDK (no-changelog) (#8090) fix: Upgrade axios to address CVE-2023-45857 (#7713) fix(core): Do not display error when stopping jobless execution in queue mode (#8007) feat(editor): Gracefully ignore invalid payloads in postMessage handler (#8096) feat(editor): Add lead enrichment suggestions to workflow list (#8042) refactor(Discord Node): Stop reporting to Sentry inaccessible guild error (no-changelog) (#8095) feat: Add opt-in enterprise license trial checkbox (no-changelog) (#7826) ci: Remove unnecessary async/await, enable await-thenable linting rule (no-changelog) (#8076) refactor(editor): Add telemetry for log streaming (no-changelog) (#8075) fix(core): Use relative imports for dynamic imports in SecurityAuditService (#8086) ...

# [1.22.0](https://github.com/n8n-io/n8n/compare/n8n@1.21.0...n8n@1.22.0) (2023-12-21) ### Bug Fixes * **core:** Close db connection gracefully when exiting ([#8045](#8045)) ([e69707e](e69707e)) * **core:** Consider timeout in shutdown an error ([#8050](#8050)) ([4cae976](4cae976)) * **core:** Do not display error when stopping jobless execution in queue mode ([#8007](#8007)) ([8e6b951](8e6b951)) * **core:** Fix shutdown if terminating before hooks are initialized ([#8047](#8047)) ([6ae2f5e](6ae2f5e)) * **core:** Handle multiple termination signals correctly ([#8046](#8046)) ([67bd8ad](67bd8ad)) * **core:** Initialize queue once in queue mode ([#8025](#8025)) ([53c0b49](53c0b49)) * **core:** Prevent axios from force setting a form-urlencoded content-type ([#8117](#8117)) ([bba9576](bba9576)) * **core:** Remove circular references before serializing executions in public API ([#8043](#8043)) ([989888d](989888d)) * **core:** Restore workflow ID during execution creation ([#8031](#8031)) ([c5e6ba8](c5e6ba8)) * **core:** Use relative imports for dynamic imports in SecurityAuditService ([#8086](#8086)) ([785bf99](785bf99)) * **core:** Stop binary data restoration from preventing execution from finishing ([#8082](#8082)) ([5ffff1b](5ffff1b)) * **editor:** Add back credential `use` permission ([#8023](#8023)) ([329e5bf](329e5bf)) * **editor:** Cleanup Executions page component ([#8053](#8053)) ([2689c37](2689c37)) * **editor:** Disable auto scroll and list size check when clicking on executions ([#7983](#7983)) ([fcb8b91](fcb8b91)) * **editor:** Ensure execution data overrides pinned data when copying in executions view ([#8009](#8009)) ([1d1cb0d](1d1cb0d)) * **editor:** Fix copy/paste issue when switch node is in workflow ([#8103](#8103)) ([4b86926](4b86926)) * **editor:** Make keyboard shortcuts more strict; don't accept extra Ctrl/Alt/Shift keys ([#8024](#8024)) ([8df49e1](8df49e1)) * **editor:** Show credential share info only to appropriate users ([#8020](#8020)) ([b29b4d4](b29b4d4)) * **editor:** Turn off executions list auto-refresh after leaving the page ([#8005](#8005)) ([e3c363d](e3c363d)) * **editor:** Update image sizes in template description not to be full width always ([#8037](#8037)) ([63a6e7e](63a6e7e)) * **ActiveCampaign Node:** Fix pagination issue when loading tags ([#8017](#8017)) ([1943857](1943857)) * **HTTP Request Node:** Do not create circular references in HTTP request node output ([#8030](#8030)) ([5b7ea16](5b7ea16)) * Upgrade axios to address CVE-2023-45857 ([#7713](#7713)) ([64eb9bb](64eb9bb)) ### Features * Add option to `returnIntermediateSteps` for AI agents ([#8113](#8113)) ([7806a65](7806a65)) * **core:** Add config option to prefer GET request over LIST when using Hashicorp Vault ([#8049](#8049)) ([439a22d](439a22d)) * **core:** Add N8N_GRACEFUL_SHUTDOWN_TIMEOUT env var ([#8068](#8068)) ([614f488](614f488)) * **editor:** Add lead enrichment suggestions to workflow list ([#8042](#8042)) ([36a923c](36a923c)) * **editor:** Finalize workers view ([#8052](#8052)) ([edfa784](edfa784)) * **editor:** Gracefully ignore invalid payloads in postMessage handler ([#8096](#8096)) ([9d22c7a](9d22c7a)) * **editor:** Upgrade frontend tooling to address a few vulnerabilities ([#8100](#8100)) ([19b7f1f](19b7f1f)) * **Filter Node:** Overhaul UI by adding the new filter component ([#8016](#8016)) ([3d53052](3d53052)) * **Respond to Webhook Node:** Overhaul with improvements like returning all items ([#8093](#8093)) ([32d397e](32d397e)) ### Performance Improvements * **editor:** Improve canvas rendering performance ([#8022](#8022)) ([b780436](b780436)) Co-authored-by: ivov <ivov@users.noreply.github.com>

janober · 2023-12-21T13:25:32Z

Got released with n8n@1.22.0

MiloradFilipovic added 13 commits December 12, 2023 19:27

feat(editor): Add lead enrichment templates section

29fbee6

✨ Added Lead Enrichment section to workflows list, refactored main le…

c4a423f

…ad enrichment page

✨ Implemented Lead Enrichment preview modal and notification toasts

d3a15b0

⚡ Added configurable position for carousel navigation buttons

34793f0

📈 Added telemetry events

6622631

⚡ Added configurable card width and navigation toggle prop

17b5170

⚡ Adding an option to hide node issues in preview. Updating preview m…

09f6663

…odal size

⚡ Redirecting to workflows list in case there are LE templates to show

d54c9b2

⚡ Handling errors when fetching lead enrichment templates

b7c0e0a

⚡ Using localStorage flag to hide the feature and stop showing it onc…

374cc4e

…e users sign up

⚡ Removing mocked response and calling an actual endpoint

8ec3641

MiloradFilipovic self-assigned this Dec 15, 2023

MiloradFilipovic marked this pull request as draft December 15, 2023 12:55

n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Dec 15, 2023

⚡ Removing red border from node preview, delaying zoom to fit until p…

ae8743d

…review is loaded, refactoring

MiloradFilipovic marked this pull request as ready for review December 15, 2023 14:01

MiloradFilipovic added 3 commits December 15, 2023 15:13

✔️ Updating recycler snapshots

9a286a0

✔️ Updating WorkflowPreview tests to use new parameter

15c40c4

👕 Formatting imports

0309268

mutdmour reviewed Dec 15, 2023

View reviewed changes

✅ Added tests

e9caaf5

MiloradFilipovic added 5 commits December 15, 2023 21:52

✔️ Refactoring tests

ca8cfea

⚡ Updating zoom to fit fix

21cc55e

🔥 Removing lead enrichment related redirects from setup

fbfe9da

🔥 Removing auth features init from setup view

d62456b

MiloradFilipovic added 5 commits December 18, 2023 09:26

🔥 Removing setTimeout from workflow preview rendering

1058b96

🔨 Moving view notification logic to composable and making it generic

15518c8

⚡ Using localStorage flag only to disable lead enrichment once users …

fa71467

…opted in

⚡ Updated tests, added workflow title to telemetry

c24a4c5

⚡ Removing trigger nodes from the list

4d26cc3

MiloradFilipovic requested a review from mutdmour December 18, 2023 11:11

mutdmour reviewed Dec 18, 2023

View reviewed changes

MiloradFilipovic added 9 commits December 18, 2023 14:44

⚡ Using fetched data to show LE section, removing deduplication logic

80c7d76

⚡ Renaming Lead Enrichment -> Suggested Templates

ff1d7ee

🔨 Renaming api functions and constants

ea617b7

🔨 Renaming rest of the component and interface references

4bf72af

🔨 Renaming i18n entries and making sections component more generic

72a5fac

✔️ Updating tests

d8be304

🔨 Renaming test suites and fixtures

0449958

📈 Updating telemetry events

097e077

✔️ Updating fixtures

1b1f2ba

mutdmour previously approved these changes Dec 18, 2023

View reviewed changes

upper case user name

4866d8b

RicardoE105 dismissed mutdmour’s stale review via 4866d8b December 18, 2023 23:19

mutdmour approved these changes Dec 19, 2023

View reviewed changes

RicardoE105 merged commit 36a923c into master Dec 19, 2023
19 checks passed

RicardoE105 deleted the ADO-1546-lead-enrichment-components branch December 19, 2023 14:10

github-actions bot mentioned this pull request Dec 21, 2023

🚀 Release 1.22.0 #8115

Merged

janober added the Released label Dec 21, 2023

tomi mentioned this pull request May 31, 2024

feat(editor): Clean up lead enrichment experiment (no-changelog) #9572

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MiloradFilipovic commented Dec 15, 2023 •

edited

cypress bot commented Dec 15, 2023 •

edited

mutdmour Dec 18, 2023

mutdmour Dec 18, 2023

MiloradFilipovic Dec 18, 2023

mutdmour Dec 18, 2023

MiloradFilipovic Dec 18, 2023

mutdmour Dec 18, 2023

github-actions bot commented Dec 18, 2023

github-actions bot commented Dec 19, 2023

janober commented Dec 21, 2023

		const plainName = node.displayName.replace(' Trigger', '');
		if (uniqueNames.has(plainName)) {

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

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

Conversation

MiloradFilipovic commented Dec 15, 2023 • edited

Summary

Related tickets and issues

Review / Merge checklist

cypress bot commented Dec 15, 2023 • edited

3 flaky tests on run #3408 ↗︎

Review all test suite changes for PR #8042 ↗︎

mutdmour Dec 18, 2023

Choose a reason for hiding this comment

mutdmour Dec 18, 2023

Choose a reason for hiding this comment

MiloradFilipovic Dec 18, 2023

Choose a reason for hiding this comment

mutdmour Dec 18, 2023

Choose a reason for hiding this comment

MiloradFilipovic Dec 18, 2023

Choose a reason for hiding this comment

mutdmour Dec 18, 2023

Choose a reason for hiding this comment

github-actions bot commented Dec 18, 2023

github-actions bot commented Dec 19, 2023

janober commented Dec 21, 2023

MiloradFilipovic commented Dec 15, 2023 •

edited

cypress bot commented Dec 15, 2023 •

edited