From c4fd8ce28bbdb98fc360117545a9edb9e19f5888 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 13 Sep 2022 09:54:23 +0200
Subject: [PATCH] refactor(editor-ui): leverage the editor url in frontend
 (#4085)

* refactor(editor-ui): remove unused interfaces

* refactor(editor-ui): add urlBaseEditor setting to application state

* fix(editor-ui): webhook urls for test and production

* fix(editor-ui): jsPlumb Anchor interface
---
 packages/editor-ui/src/Interface.ts        | 10 +++-------
 packages/editor-ui/src/modules/settings.ts |  1 +
 packages/editor-ui/src/store.ts            | 10 ++++++++--
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 1d88fe5cf4..a752171ed8 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -6,14 +6,10 @@ import {
 	ICredentialsEncrypted,
 	ICredentialType,
 	IDataObject,
-	ILoadOptions,
 	INode,
-	INodeCredentials,
 	INodeIssues,
 	INodeParameters,
-	INodePropertyOptions,
 	INodeTypeDescription,
-	INodeTypeNameVersion,
 	IPinData,
 	IRunExecutionData,
 	IRun,
@@ -37,6 +33,7 @@ declare module 'jsplumb' {
 		outlineWidth?: number;
 	}
 
+	// Extend jsPlumb Anchor interface
 	interface Anchor {
 		lastReturnValue: number[];
 	}
@@ -140,7 +137,6 @@ export interface INodeUpdatePropertiesInformation {
 
 export type XYPosition = [number, number];
 
-export type MessageType = 'success' | 'warning' | 'info' | 'error';
 export interface INodeUi extends INode {
 	position: XYPosition;
 	color?: string;
@@ -413,8 +409,6 @@ export interface IExecutionDeleteFilter {
 	ids?: string[];
 }
 
-export type IPushDataType = IPushData['type'];
-
 export type IPushData =
 	| PushDataExecutionFinished
 	| PushDataExecutionStarted
@@ -700,6 +694,7 @@ export interface IN8nUISettings {
 		oauth1: string;
 		oauth2: string;
 	};
+	urlBaseEditor: string;
 	urlBaseWebhook: string;
 	versionCli: string;
 	n8nMetadata?: {
@@ -878,6 +873,7 @@ export interface IRootState {
 	nodeViewMoveInProgress: boolean;
 	selectedNodes: INodeUi[];
 	sessionId: string;
+	urlBaseEditor: string;
 	urlBaseWebhook: string;
 	workflow: IWorkflowDb;
 	sidebarMenuItems: IMenuItem[];
diff --git a/packages/editor-ui/src/modules/settings.ts b/packages/editor-ui/src/modules/settings.ts
index a6df53caea..33768b0607 100644
--- a/packages/editor-ui/src/modules/settings.ts
+++ b/packages/editor-ui/src/modules/settings.ts
@@ -128,6 +128,7 @@ const module: Module<ISettingsState, IRootState> = {
 
 			// todo refactor to this store
 			context.commit('setUrlBaseWebhook', settings.urlBaseWebhook, {root: true});
+			context.commit('setUrlBaseEditor', settings.urlBaseEditor, {root: true});
 			context.commit('setEndpointWebhook', settings.endpointWebhook, {root: true});
 			context.commit('setEndpointWebhookTest', settings.endpointWebhookTest, {root: true});
 			context.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution, {root: true});
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 4ce086cedc..9c7c6fe0a4 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -85,6 +85,7 @@ const state: IRootState = {
 	nodeViewMoveInProgress: false,
 	selectedNodes: [],
 	sessionId: Math.random().toString(36).substring(2, 15),
+	urlBaseEditor: 'http://localhost:5678',
 	urlBaseWebhook: 'http://localhost:5678/',
 	isNpmAvailable: false,
 	workflow: {
@@ -567,7 +568,12 @@ export const store = new Vuex.Store({
 
 		// Webhooks
 		setUrlBaseWebhook(state, urlBaseWebhook: string) {
-			Vue.set(state, 'urlBaseWebhook', urlBaseWebhook);
+			const url = urlBaseWebhook.endsWith('/') ? urlBaseWebhook : `${urlBaseWebhook}/`;
+			Vue.set(state, 'urlBaseWebhook', url);
+		},
+		setUrlBaseEditor(state, urlBaseEditor: string) {
+			const url = urlBaseEditor.endsWith('/') ? urlBaseEditor : `${urlBaseEditor}/`;
+			Vue.set(state, 'urlBaseEditor', url);
 		},
 		setEndpointWebhook(state, endpointWebhook: string) {
 			Vue.set(state, 'endpointWebhook', endpointWebhook);
@@ -759,7 +765,7 @@ export const store = new Vuex.Store({
 			return `${state.urlBaseWebhook}${state.endpointWebhook}`;
 		},
 		getWebhookTestUrl: (state): string => {
-			return `${state.urlBaseWebhook}${state.endpointWebhookTest}`;
+			return `${state.urlBaseEditor}${state.endpointWebhookTest}`;
 		},
 
 		getStateIsDirty: (state): boolean => {