feat(editor): Add AppCues tracking for onboarding event (#7945)

## Summary
We want to trigger a flow, every time the template onboarding event is
triggered. AppCues no longer supports flows triggering through Segment,
except directly.

#### How to test the change:
1. Open on Cloud, where AppCues scripts are available
2. import workflow through /workflows/onboarding/1946
3. Ensure event is sent.. if flow is enabled, flow should show

<img width="1702" alt="Screenshot 2023-12-07 at 14 39 51"
src="https://github.com/n8n-io/n8n/assets/4711238/e58daae8-4364-41a4-bfda-25edeea6cc69">



## Issues fixed
Include links to Github issue or Community forum post or **Linear
ticket**:
> Important in order to close automatically and provide context to
reviewers

https://linear.app/n8n/issue/ADO-1455/bug-appcues-trigger

## 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))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [x] 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.
  >
> *(internal)* You can use Slack commands to trigger [e2e
tests](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#a39f9e5ba64a48b58a71d81c837e8227)
or [deploy test
instance](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#f6a177d32bde4b57ae2da0b8e454bfce)
or [deploy early access version on
Cloud](https://www.notion.so/n8n/Cloudbot-3dbe779836004972b7057bc989526998?pvs=4#fef2d36ab02247e1a0f65a74f6fb534e).

packages/editor-ui/src/Interface.ts

@@ -104,6 +104,9 @@ declare global {
 		};
 		// eslint-disable-next-line @typescript-eslint/naming-convention
 		Cypress: unknown;
+		Appcues?: {
+			track(event: string, properties?: ITelemetryTrackProperties): void;
+		};
 	}
 }
 

packages/editor-ui/src/plugins/__tests__/telemetry.test.ts

@@ -8,6 +8,8 @@ let telemetry: Telemetry;
 
 let settingsStore: ReturnType<typeof useSettingsStore>;
 
+const MOCK_VERSION_CLI = '0.0.0';
+
 describe('telemetry', () => {
 	beforeAll(() => {
 		telemetry = new Telemetry();
@@ -137,4 +139,44 @@ describe('telemetry', () => {
 			expect(resetFunction).toHaveBeenCalledTimes(1);
 		});
 	});
+
+	describe('track function', () => {
+		it('should call Rudderstack track method with correct parameters and', () => {
+			const trackFunction = vi.spyOn(window.rudderanalytics, 'track');
+
+			const event = 'testEvent';
+			const properties = { test: '1' };
+			const options = { withPostHog: false, withAppCues: false };
+
+			telemetry.track(event, properties, options);
+
+			expect(trackFunction).toHaveBeenCalledTimes(1);
+			expect(trackFunction).toHaveBeenCalledWith(event, {
+				...properties,
+				version_cli: MOCK_VERSION_CLI,
+			});
+		});
+
+		it('should call Rudderstack track method with correct parameters and withAppCues option set to true', () => {
+			window.Appcues = { track: () => {} };
+			const trackFunction = vi.spyOn(window.rudderanalytics, 'track');
+			const appCuesTrackFunction = vi.spyOn(window.Appcues, 'track');
+
+			const event = 'testEvent';
+			const properties = { test: '1' };
+			const options = { withPostHog: false, withAppCues: true };
+
+			telemetry.track(event, properties, options);
+
+			expect(trackFunction).toHaveBeenCalledTimes(1);
+			expect(trackFunction).toHaveBeenCalledWith(event, {
+				...properties,
+				version_cli: MOCK_VERSION_CLI,
+			});
+			expect(appCuesTrackFunction).toHaveBeenCalledWith(event, {
+				...properties,
+				version_cli: MOCK_VERSION_CLI,
+			});
+		});
+	});
 });

packages/editor-ui/src/plugins/telemetry/index.ts

@@ -99,7 +99,7 @@ export class Telemetry {
 	track(
 		event: string,
 		properties?: ITelemetryTrackProperties,
-		{ withPostHog } = { withPostHog: false },
+		options: { withPostHog?: boolean; withAppCues?: boolean } = {},
 	) {
 		if (!this.rudderStack) return;
 
@@ -110,9 +110,13 @@ export class Telemetry {
 
 		this.rudderStack.track(event, updatedProperties);
 
-		if (withPostHog) {
+		if (options.withPostHog) {
 			usePostHog().capture(event, updatedProperties);
 		}
+
+		if (options.withAppCues && window.Appcues) {
+			window.Appcues.track(event, updatedProperties);
+		}
 	}
 
 	page(route: Route) {

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

@@ -3218,6 +3218,7 @@ export default defineComponent({
 								},
 								{
 									withPostHog: true,
+									withAppCues: true,
 								},
 							);
 						}