From db163b71b90d073cc963f63d5455b3a84f236917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Wed, 9 Nov 2022 16:46:13 +0100
Subject: [PATCH] fix(editor): Use base path in workflow preview component URL
 (#4560)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 Fix for workflow preview component URL
---
 packages/editor-ui/src/components/WorkflowPreview.vue | 7 ++++++-
 packages/editor-ui/src/stores/n8nRootStore.ts         | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index a2cf4d916d..791a7b699f 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -14,7 +14,7 @@
 				[$style.show]: this.showPreview,
 			}"
 			ref="preview_iframe"
-			src="/workflows/demo"
+			:src="`${rootStore.baseUrl}workflows/demo`"
 			@mouseenter="onMouseEnter"
 			@mouseleave="onMouseLeave"
 		></iframe>
@@ -25,6 +25,8 @@
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/components/mixins/showMessage';
 import { IWorkflowDb } from '../Interface';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(showMessage).extend({
 	name: 'WorkflowPreview',
@@ -64,6 +66,9 @@ export default mixins(showMessage).extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+		),
 		showPreview(): boolean {
 			return !this.loading &&
 				(
diff --git a/packages/editor-ui/src/stores/n8nRootStore.ts b/packages/editor-ui/src/stores/n8nRootStore.ts
index 37cac9c669..77710ff739 100644
--- a/packages/editor-ui/src/stores/n8nRootStore.ts
+++ b/packages/editor-ui/src/stores/n8nRootStore.ts
@@ -1,5 +1,5 @@
 import { STORES } from '@/constants';
-import { INodeUi, IRestApiContext, RootState } from '@/Interface';
+import { IRestApiContext, RootState } from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
 import { defineStore } from 'pinia';
 import Vue from 'vue';