fix(editor): Hide pin data in production executions (#4595)

* ✨ Passing an execution mode to the preview iframe so UI can be adjusted based on it
* ✨ Handling production execution mode to hide the pin data in node details view

packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue

@@ -55,7 +55,7 @@
 				<n8n-icon-button :title="$locale.baseText('executionDetails.deleteExecution')" icon="trash" size="large" type="tertiary" @click="onDeleteExecution" />
 			</div>
 		</div>
-		<workflow-preview mode="execution" loaderType="spinner" :executionId="executionId"/>
+		<workflow-preview mode="execution" loaderType="spinner" :executionId="executionId" :executionMode="executionMode"/>
 	</div>
 </template>
 
@@ -90,6 +90,9 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		sidebarCollapsed(): boolean {
 			return this.uiStore.sidebarMenuCollapsed;
 		},
+		executionMode(): string {
+			return this.activeExecution?.mode || '';
+		},
 	},
 	methods: {
 		async onDeleteExecution(): Promise<void> {

packages/editor-ui/src/components/InputPanel.vue

@@ -13,6 +13,7 @@
 		:mappingEnabled="!readOnly"
 		:showMappingHint="draggableHintShown"
 		:distanceFromActive="currentNodeDepth"
+		:isProductionExecutionPreview="isProductionExecutionPreview"
 		paneType="input"
 		@itemHover="$emit('itemHover', $event)"
 		@linkRun="onLinkRun"
@@ -107,6 +108,10 @@ export default mixins(
 		readOnly: {
 			type: Boolean,
 		},
+		isProductionExecutionPreview: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

packages/editor-ui/src/components/Node.vue

@@ -16,7 +16,7 @@
 							<font-awesome-icon icon="clock" />
 						</n8n-tooltip>
 					</div>
-					<span v-else-if="hasPinData" class="node-pin-data-icon">
+					<span v-else-if="showPinnedDataInfo" class="node-pin-data-icon">
 						<font-awesome-icon icon="thumbtack" />
 						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
 					</span>
@@ -132,6 +132,12 @@ export default mixins(
 		TitledList,
 		NodeIcon,
 	},
+	props: {
+		isProductionExecutionPreview: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	computed: {
 		...mapStores(
 			useNodeTypesStore,
@@ -139,6 +145,9 @@ export default mixins(
 			useUIStore,
 			useWorkflowsStore,
 		),
+		showPinnedDataInfo(): boolean {
+			return this.hasPinData && !this.isProductionExecutionPreview;
+		},
 		isDuplicatable(): boolean {
 			if(!this.nodeType) return true;
 			return this.nodeType.maxNodes === undefined || this.sameTypeNodes.length < this.nodeType.maxNodes;
@@ -307,7 +316,7 @@ export default mixins(
 			else if (!this.isExecuting) {
 				if (this.hasIssues) {
 					borderColor = getStyleTokenValue('--color-danger');
-				} else if (this.waiting || this.hasPinData) {
+				} else if (this.waiting || this.showPinnedDataInfo) {
 					borderColor = getStyleTokenValue('--color-secondary');
 				} else if (this.workflowDataItems) {
 					borderColor = getStyleTokenValue('--color-success');

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -55,6 +55,7 @@
 						:currentNodeName="inputNodeName"
 						:sessionId="sessionId"
 						:readOnly="readOnly || hasForeignCredential"
+						:isProductionExecutionPreview="isProductionExecutionPreview"
 						@linkRun="onLinkRunToInput"
 						@unlinkRun="() => onUnlinkRun('input')"
 						@runChange="onRunInputIndexChange"
@@ -73,6 +74,7 @@
 						:sessionId="sessionId"
 						:isReadOnly="readOnly || hasForeignCredential"
 						:blockUI="blockUi && isTriggerNode"
+						:isProductionExecutionPreview="isProductionExecutionPreview"
 						@linkRun="onLinkRunToOutput"
 						@unlinkRun="() => onUnlinkRun('output')"
 						@runChange="onRunOutputIndexChange"
@@ -168,6 +170,10 @@ export default mixins(
 		renaming: {
 			type: Boolean,
 		},
+		isProductionExecutionPreview: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

packages/editor-ui/src/components/OutputPanel.vue

@@ -11,6 +11,7 @@
 		:sessionId="sessionId"
 		:isReadOnly="isReadOnly"
 		:blockUI="blockUI"
+		:isProductionExecutionPreview="isProductionExecutionPreview"
 		paneType="output"
 		@runChange="onRunIndexChange"
 		@linkRun="onLinkRun"
@@ -119,6 +120,10 @@ export default mixins(
 			type: Boolean,
 			default: false,
 		},
+		isProductionExecutionPreview: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		...mapStores(

packages/editor-ui/src/components/RunData.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.container">
 		<n8n-callout
-			v-if="canPinData && hasPinData && !editMode.enabled"
+			v-if="canPinData && hasPinData && !editMode.enabled && !isProductionExecutionPreview"
 			theme="secondary"
 			icon="thumbtack"
 			:class="$style['pinned-data-callout']"
@@ -448,6 +448,10 @@ export default mixins(
 				type: Boolean,
 				default: false,
 			},
+			isProductionExecutionPreview: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		data () {
 			return {
@@ -630,7 +634,7 @@ export default mixins(
 			inputData (): INodeExecutionData[] {
 				let inputData = this.rawInputData;
 
-				if (this.node && this.pinData) {
+				if (this.node && this.pinData && !this.isProductionExecutionPreview) {
 					inputData = Array.isArray(this.pinData)
 						? this.pinData.map((value) => ({
 							json: value,

packages/editor-ui/src/components/WorkflowPreview.vue

@@ -39,7 +39,7 @@ export default mixins(showMessage).extend({
 			type: String,
 			default: 'workflow',
 			validator: (value: string): boolean =>
-				['workflow', 'execution', 'medium'].includes(value),
+				['workflow', 'execution'].includes(value),
 		},
 		workflow: {
 			type: Object as () => IWorkflowDb,
@@ -49,6 +49,10 @@ export default mixins(showMessage).extend({
 			type: String,
 			required: false,
 		},
+		executionMode: {
+			type: String,
+			required: false,
+		},
 		loaderType: {
 			type: String,
 			default: 'image',
@@ -125,6 +129,7 @@ export default mixins(showMessage).extend({
 						JSON.stringify({
 							command: 'openExecution',
 							executionId: this.executionId,
+							executionMode: this.executionMode || '',
 						}),
 						'*',
 					);

packages/editor-ui/src/views/NodeView.vue

@@ -49,6 +49,7 @@
 						:instance="instance"
 						:isActive="!!activeNode && activeNode.name === nodeData.name"
 						:hideActions="pullConnActive"
+						:isProductionExecutionPreview="isProductionExecutionPreview"
 					>
 						<span
 							slot="custom-tooltip"
@@ -76,6 +77,7 @@
 		<node-details-view
 			:readOnly="isReadOnly"
 			:renaming="renamingActive"
+			:isProductionExecutionPreview="isProductionExecutionPreview"
 			@valueChanged="valueChanged"
 			@stopExecution="stopExecution"
 		/>
@@ -530,6 +532,7 @@ export default mixins(
 				isExecutionPreview: false,
 				showTriggerMissingTooltip: false,
 				workflowData: null as INewWorkflowData | null,
+				isProductionExecutionPreview: false,
 			};
 		},
 		beforeDestroy() {
@@ -3135,6 +3138,10 @@ export default mixins(
 						}
 					} else if (json && json.command === 'openExecution') {
 						try {
+							// If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
+							// so everything it needs has to be sent using post messages and passed down to child components
+							this.isProductionExecutionPreview = json.executionMode !== 'manual';
+
 							await this.openExecution(json.executionId);
 							this.isExecutionPreview = true;
 						} catch (e) {