fix(editor): Allow overriding theme from query params (#7591)

Allow overriding theme through query params.. to be able to override it
from preview iframe in webcomponent

Github issue / Community forum post (link here to close automatically):

cypress/e2e/31-demo.cy.ts

@@ -0,0 +1,23 @@
+import workflow from '../fixtures/Manual_wait_set.json';
+import { importWorkflow, vistDemoPage } from '../pages/demo';
+import { WorkflowPage } from '../pages/workflow';
+
+const workflowPage = new WorkflowPage();
+
+describe('Demo', () => {
+	it('can import template', () => {
+		vistDemoPage();
+		importWorkflow(workflow);
+		workflowPage.getters.canvasNodes().should('have.length', 3);
+	});
+
+	it('can override theme to dark', () => {
+		vistDemoPage('dark');
+		cy.get('body').should('have.attr', 'data-theme', 'dark');
+	});
+
+	it('can override theme to light', () => {
+		vistDemoPage('light');
+		cy.get('body').should('have.attr', 'data-theme', 'light');
+	});
+});

cypress/pages/demo.ts

@@ -0,0 +1,21 @@
+/**
+ * Actions
+ */
+
+export function vistDemoPage(theme?: 'dark' | 'light') {
+	const query = theme ? `?theme=${theme}` : '';
+	cy.visit('/workflows/demo' + query);
+	cy.waitForLoad();
+	cy.window().then((win) => {
+		// @ts-ignore
+		win.preventNodeViewBeforeUnload = true;
+	});
+}
+
+export function importWorkflow(workflow: object) {
+	const OPEN_WORKFLOW = {command: 'openWorkflow', workflow};
+	cy.window().then($window => {
+		const message = JSON.stringify(OPEN_WORKFLOW);
+		$window.postMessage(message, '*')
+	});
+}

cypress/pages/templates.ts

@@ -1,7 +1,5 @@
 import { BasePage } from './base';
-import { WorkflowPage } from './workflow';
 
-const workflowPage = new WorkflowPage();
 export class TemplatesPage extends BasePage {
 	url = '/templates';