add back to canvas button

packages/design-system/src/components/N8nIcon/Icon.vue

@@ -2,6 +2,7 @@
 	<component
 		:is="$options.components.N8nText"
 		:size="props.size"
+		:color="props.color"
 		:compact="true"
 	>
 		<component
@@ -36,6 +37,8 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		color: {
+		},
 	},
 };
 </script>

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

@@ -8,6 +8,11 @@
 		append-to-body
 		@opened="showDocumentHelp = true"
 	>
+		<div :class="$style.backToCanvas">
+			<n8n-icon icon="arrow-left" color="text-xlight" size="small" />
+			<n8n-text color="text-xlight" size="small">{{ $locale.baseText('node.backToCanvas') }}</n8n-text>
+		</div>
+
 		<div class="data-display" v-if="node" >
 			<NodeSettings :eventBus="settingsEventBus" @valueChanged="valueChanged" />
 			<RunData @openSettings="openSettings" />
@@ -92,6 +97,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 <style lang="scss">
 .data-display-wrapper {
 	height: 85%;
+	margin-top: 32px !important;
 
 	.el-dialog__header {
 		padding: 0 !important;
@@ -122,3 +128,23 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 	opacity: 0;
 }
 </style>
+
+<style lang="scss" module>
+.backToCanvas {
+	position: absolute;
+	top: -24px;
+	pointer-events: none;
+
+	> * {
+		margin-right: var(--spacing-3xs);
+	}
+}
+
+@media (min-width: $--breakpoint-lg) {
+	.backToCanvas {
+		position: fixed;
+		top: 10px;
+		left: 10px;
+	}
+}
+</style>

packages/editor-ui/src/plugins/components.ts

@@ -85,7 +85,7 @@ Vue.use(N8nAvatar);
 Vue.use(N8nButton);
 Vue.component('n8n-form-box', N8nFormBox);
 Vue.component('n8n-form-inputs', N8nFormInputs);
-Vue.use('n8n-icon', N8nIcon);
+Vue.component('n8n-icon', N8nIcon);
 Vue.use(N8nIconButton);
 Vue.use(N8nInfoTip);
 Vue.use(N8nInput);

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1160,6 +1160,7 @@
 	"node.output.emptyOutput": "This output item is empty.",
 	"node.output.emptyInput": "This input item is empty. {name} will still execute when it recieves an empty item.",
 	"node.output.staleDataWarning": "Node parameters have changed. <br /> Execute node again to refresh output.",
+	"node.backToCanvas": "Back to canvas",
 	"openWorkflow.workflowImportError": "Could not import workflow",
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"settings": "Settings",