fix(editor): Don't try to load credentials on the demo route (#9926)

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');
 	});
 });

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();

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 };