From b80df2a47ebe4450862e200c9cf47f6e94012c91 Mon Sep 17 00:00:00 2001
From: Danny Martini <danny@n8n.io>
Date: Wed, 3 Jul 2024 15:14:26 +0200
Subject: [PATCH] fix(editor): Don't try to load credentials on the demo route
 (#9926)

---
 cypress/e2e/31-demo.cy.ts                 | 17 +++++++++++++----
 cypress/pages/demo.ts                     |  2 +-
 packages/editor-ui/src/views/NodeView.vue |  7 +++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/31-demo.cy.ts b/cypress/e2e/31-demo.cy.ts
index d9397ace4e..eed3198c83 100644
--- a/cypress/e2e/31-demo.cy.ts
+++ b/cypress/e2e/31-demo.cy.ts
@@ -1,23 +1,32 @@
 import workflow from '../fixtures/Manual_wait_set.json';
-import { importWorkflow, vistDemoPage } from '../pages/demo';
+import { importWorkflow, visitDemoPage } from '../pages/demo';
 import { WorkflowPage } from '../pages/workflow';
+import { errorToast } from '../pages/notifications';
 
 const workflowPage = new WorkflowPage();
 
 describe('Demo', () => {
+	beforeEach(() => {
+		cy.overrideSettings({ previewMode: true });
+		cy.signout();
+	});
+
 	it('can import template', () => {
-		vistDemoPage();
+		visitDemoPage();
+		errorToast().should('not.exist');
 		importWorkflow(workflow);
 		workflowPage.getters.canvasNodes().should('have.length', 3);
 	});
 
 	it('can override theme to dark', () => {
-		vistDemoPage('dark');
+		visitDemoPage('dark');
 		cy.get('body').should('have.attr', 'data-theme', 'dark');
+		errorToast().should('not.exist');
 	});
 
 	it('can override theme to light', () => {
-		vistDemoPage('light');
+		visitDemoPage('light');
 		cy.get('body').should('have.attr', 'data-theme', 'light');
+		errorToast().should('not.exist');
 	});
 });
diff --git a/cypress/pages/demo.ts b/cypress/pages/demo.ts
index 691066ce05..7e67b79254 100644
--- a/cypress/pages/demo.ts
+++ b/cypress/pages/demo.ts
@@ -2,7 +2,7 @@
  * Actions
  */
 
-export function vistDemoPage(theme?: 'dark' | 'light') {
+export function visitDemoPage(theme?: 'dark' | 'light') {
 	const query = theme ? `?theme=${theme}` : '';
 	cy.visit('/workflows/demo' + query);
 	cy.waitForLoad();
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index ddc4a9b9ca..9e08d8dfbf 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -4470,6 +4470,13 @@ export default defineComponent({
 			await this.credentialsStore.fetchCredentialTypes(true);
 		},
 		async loadCredentialsForWorkflow(): Promise<void> {
+			// In preview mode, we don't have to load the credentials. We actually
+			// can't load them because they depend on the project the workflow is in,
+			// but in preview mode there is no project.
+			if (this.settingsStore.isPreviewMode) {
+				return;
+			}
+
 			const workflow = this.workflowsStore.getWorkflowById(this.currentWorkflow);
 			const workflowId = workflow?.id ?? this.$route.params.name;
 			let options: { workflowId: string } | { projectId: string };