fix: Show Pinned data in demo mode (#11490)

cypress/composables/ndv.ts

@@ -40,6 +40,14 @@ export function getOutputPanelDataContainer() {
 	return getOutputPanel().getByTestId('ndv-data-container');
 }
 
+export function getOutputTableRows() {
+	return getOutputPanelDataContainer().find('table tr');
+}
+
+export function getOutputTableRow(row: number) {
+	return getOutputTableRows().eq(row);
+}
+
 export function getOutputPanelTable() {
 	return getOutputPanelDataContainer().get('table');
 }

cypress/composables/workflow.ts

@@ -69,6 +69,13 @@ export function getNodeCreatorPlusButton() {
 	return cy.getByTestId('node-creator-plus-button');
 }
 
+export function getCanvasNodes() {
+	return cy.ifCanvasVersion(
+		() => cy.getByTestId('canvas-node'),
+		() => cy.getByTestId('canvas-node').not('[data-node-type="n8n-nodes-internal.addNodes"]'),
+	);
+}
+
 /**
  * Actions
  */

cypress/e2e/31-demo.cy.ts

@@ -1,21 +1,29 @@
-import workflow from '../fixtures/Manual_wait_set.json';
+import { getOutputTableRow } from '../composables/ndv';
+import { getCanvasNodes, openNode } from '../composables/workflow';
+import SIMPLE_WORKFLOW from '../fixtures/Manual_wait_set.json';
+import WORKFLOW_WITH_PINNED from '../fixtures/Webhook_set_pinned.json';
 import { importWorkflow, visitDemoPage } from '../pages/demo';
 import { errorToast } from '../pages/notifications';
-import { WorkflowPage } from '../pages/workflow';
-
-const workflowPage = new WorkflowPage();
 
 describe('Demo', () => {
 	beforeEach(() => {
 		cy.overrideSettings({ previewMode: true });
-		cy.signout();
 	});
 
 	it('can import template', () => {
 		visitDemoPage();
 		errorToast().should('not.exist');
-		importWorkflow(workflow);
+		importWorkflow(SIMPLE_WORKFLOW);
-		workflowPage.getters.canvasNodes().should('have.length', 3);
+		getCanvasNodes().should('have.length', 3);
+	});
+
+	it('can import workflow with pin data', () => {
+		visitDemoPage();
+		importWorkflow(WORKFLOW_WITH_PINNED);
+		getCanvasNodes().should('have.length', 2);
+		openNode('Webhook');
+		getOutputTableRow(0).should('include.text', 'headers');
+		getOutputTableRow(1).should('include.text', 'dragons');
 	});
 
 	it('can override theme to dark', () => {

packages/editor-ui/src/stores/workflows.store.spec.ts

@@ -17,12 +17,8 @@ import type {
 } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
-import {
+import { SEND_AND_WAIT_OPERATION } from 'n8n-workflow';
-	SEND_AND_WAIT_OPERATION,
+import type { IPinData, ExecutionSummary, IConnection, INodeExecutionData } from 'n8n-workflow';
-	type ExecutionSummary,
-	type IConnection,
-	type INodeExecutionData,
-} from 'n8n-workflow';
 import { stringSizeInBytes } from '@/utils/typesUtils';
 import { dataPinningEventBus } from '@/event-bus';
 import { useUIStore } from '@/stores/ui.store';
@@ -599,6 +595,29 @@ describe('useWorkflowsStore', () => {
 				},
 			);
 		});
+
+		it('sets workflow pin data', () => {
+			workflowsStore.workflow.pinData = undefined;
+			const data: IPinData = {
+				TestNode: [{ json: { test: true } }],
+				TestNode1: [{ json: { test: false } }],
+			};
+			workflowsStore.setWorkflowPinData(data);
+			expect(workflowsStore.workflow.pinData).toEqual(data);
+		});
+
+		it('sets workflow pin data, adding json keys', () => {
+			workflowsStore.workflow.pinData = undefined;
+			const data = {
+				TestNode: [{ test: true }],
+				TestNode1: [{ test: false }],
+			};
+			workflowsStore.setWorkflowPinData(data as unknown as IPinData);
+			expect(workflowsStore.workflow.pinData).toEqual({
+				TestNode: [{ json: { test: true } }],
+				TestNode1: [{ json: { test: false } }],
+			});
+		});
 	});
 
 	describe('finishActiveExecution', () => {

packages/editor-ui/src/stores/workflows.store.ts

@@ -735,14 +735,23 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		};
 	}
 
-	function setWorkflowPinData(pinData?: IPinData) {
+	function setWorkflowPinData(data: IPinData = {}) {
-		workflow.value = {
+		const validPinData = Object.keys(data).reduce((accu, nodeName) => {
-			...workflow.value,
+			accu[nodeName] = data[nodeName].map((item) => {
-			pinData: pinData ?? {},
+				if (!isJsonKeyObject(item)) {
-		};
+					return { json: item };
+				}
+
+				return item;
+			});
+
+			return accu;
+		}, {} as IPinData);
+
+		workflow.value.pinData = validPinData;
 		updateCachedWorkflow();
 
-		dataPinningEventBus.emit('pin-data', pinData ?? {});
+		dataPinningEventBus.emit('pin-data', validPinData);
 	}
 
 	function setWorkflowTagIds(tags: string[]) {