From 9572a3b900ecd634db5fb708479b6e346483b7d8 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 6 Apr 2022 07:58:34 +0200
Subject: [PATCH] add back to canvas button

---
 .../src/components/N8nIcon/Icon.vue           |  3 +++
 .../editor-ui/src/components/DataDisplay.vue  | 26 +++++++++++++++++++
 packages/editor-ui/src/plugins/components.ts  |  2 +-
 .../src/plugins/i18n/locales/en.json          |  1 +
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
index 8ffe65edec..b89b43a57e 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/DataDisplay.vue b/packages/editor-ui/src/components/DataDisplay.vue
index 2577a6a6f1..9e19dba252 100644
--- a/packages/editor-ui/src/components/DataDisplay.vue
+++ b/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>
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 90668f76b8..e902e1580c 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/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);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index dee2fe1e3f..df140f516b 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/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",