From 4906fafd980669cd91fc77d7f58d2e428155d70c Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 29 Sep 2022 09:36:27 +0200
Subject: [PATCH] refactor(editor-ui): move json data view into its own
 component (#4158)

* refactor(editor-ui): move json data view into its own component

* fix(editor-ui): make JSON data component work again

* fix(editor-ui): JSON data component type issues

* fix(editor-ui): JSON data component prop 'inputData'

* refactor(editor-ui): rename helper function

* fix(editor-ui): add declaration to `vue-json-pretty` component

* refactor(editor-ui): JSON mapping move more logic to new component

* refactor(editor-ui): some cleanup in JSON mapping component

* refactor(editor-ui): changing key mapping translation

* refactor(editor-ui): add basic drag'n'drop functionality to JSON view

* refactor(editor-ui): moving JSON view actions into separate components

* fix(editor-ui): JSON view action copy default selected path

* fix(editor-ui): refactor draggable to play nicer with other (3rd party) components

* fix(editor-ui): improve draggable performance

* fix(editor-ui): add disable user selection class to body

* fix(editor-ui): reduce click handler cognitive load in JSON view copy actions

* fix(editor-ui): JSON view mapped path

* fix(editor-ui): remove unnecessary wrapper around RunDataTable.vue

* fix(editor-ui): respect input node distance when json parameter path is copied

* fix(editor-ui): JSON mapping property highlight

* fix(editor-ui): block event only on mousemove for draggable to not select content

* refactor(editor-ui): fixing prop types and organising imports

* fix(editor-ui): JSON view use double quotes where appropriate

* fix(editor-ui): fix new package additions after merge conflict

* fix(editor-ui): fix package update after merge conflict

* fix(editor-ui): JSON view prop names text break

* fix(editor-ui): use kebab-case name for component

* fix(editor-ui): calling convertPath on draggable node path
---
 package-lock.json                             | 229 +++++++++++-
 packages/editor-ui/package.json               |   3 +-
 .../editor-ui/src/components/Draggable.vue    |  87 ++---
 .../src/components/PanelDragButton.vue        |   5 +-
 packages/editor-ui/src/components/RunData.vue | 331 +++---------------
 .../editor-ui/src/components/RunDataJson.vue  | 291 +++++++++++++++
 .../src/components/RunDataJsonActions.vue     | 215 ++++++++++++
 .../editor-ui/src/components/RunDataTable.vue |  35 +-
 packages/editor-ui/src/components/helpers.ts  |  58 ++-
 .../src/declarations/vue-json-pretty.d.ts     |   5 +
 .../src/plugins/i18n/locales/en.json          |   2 +-
 11 files changed, 902 insertions(+), 359 deletions(-)
 create mode 100644 packages/editor-ui/src/components/RunDataJson.vue
 create mode 100644 packages/editor-ui/src/components/RunDataJsonActions.vue
 create mode 100644 packages/editor-ui/src/declarations/vue-json-pretty.d.ts

diff --git a/package-lock.json b/package-lock.json
index 58157fcdba06e..f23d324e267bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26940,6 +26940,28 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonpath": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
+      "integrity": "sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==",
+      "dependencies": {
+        "esprima": "1.2.2",
+        "static-eval": "2.0.2",
+        "underscore": "1.12.1"
+      }
+    },
+    "node_modules/jsonpath/node_modules/esprima": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
+      "integrity": "sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/jsonschema": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.1.tgz",
@@ -37423,6 +37445,90 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/static-eval": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
+      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
+      "dependencies": {
+        "escodegen": "^1.8.1"
+      }
+    },
+    "node_modules/static-eval/node_modules/escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/static-eval/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/static-eval/node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/static-eval/node_modules/optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "dependencies": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/static-eval/node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/static-eval/node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -40527,6 +40633,11 @@
       "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
       "dev": true
     },
+    "node_modules/underscore": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
+      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
+    },
     "node_modules/undertaker": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.3.0.tgz",
@@ -42157,15 +42268,6 @@
         "vue": ">=2"
       }
     },
-    "node_modules/vue-json-pretty": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-1.7.1.tgz",
-      "integrity": "sha512-D7aHQ5XPooSAEndTkb/RvXXJdmuCjaj14IMRdJwO4q+yJMpzPv87FT2gz4Dt2mCr1EzFyat7z7Qv9R+l/1as+w==",
-      "engines": {
-        "node": ">= 10.0.0",
-        "npm": ">= 5.0.0"
-      }
-    },
     "node_modules/vue-loader": {
       "version": "15.10.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz",
@@ -46784,6 +46886,7 @@
         "file-saver": "^2.0.2",
         "flatted": "^3.2.4",
         "jquery": "^3.4.1",
+        "jsonpath": "^1.1.1",
         "jsplumb": "2.15.4",
         "lodash.camelcase": "^4.3.0",
         "lodash.debounce": "^4.0.8",
@@ -46805,7 +46908,7 @@
         "vue-agile": "^2.0.0",
         "vue-fragment": "1.5.1",
         "vue-i18n": "^8.26.7",
-        "vue-json-pretty": "1.7.1",
+        "vue-json-pretty": "1.9.2",
         "vue-prism-editor": "^0.3.0",
         "vue-router": "^3.0.6",
         "vue-template-compiler": "~2.6.11",
@@ -47036,6 +47139,15 @@
         "node": ">=10.12.0"
       }
     },
+    "packages/editor-ui/node_modules/vue-json-pretty": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-1.9.2.tgz",
+      "integrity": "sha512-FHAYmZAazhVC6Wi+Zi9DVYha+oZb9uylJPGkl/yTYLxlqLMxmnaVC2R8ZwaYzt6TBGvkLe3Y2D2vgyJCDBJy1w==",
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 5.0.0"
+      }
+    },
     "packages/editor-ui/node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -69304,6 +69416,23 @@
         "universalify": "^2.0.0"
       }
     },
+    "jsonpath": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
+      "integrity": "sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==",
+      "requires": {
+        "esprima": "1.2.2",
+        "static-eval": "2.0.2",
+        "underscore": "1.12.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
+          "integrity": "sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A=="
+        }
+      }
+    },
     "jsonschema": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.1.tgz",
@@ -71887,6 +72016,7 @@
         "flatted": "^3.2.4",
         "jquery": "^3.4.1",
         "jshint": "^2.9.7",
+        "jsonpath": "^1.1.1",
         "jsplumb": "2.15.4",
         "lodash.camelcase": "^4.3.0",
         "lodash.debounce": "^4.0.8",
@@ -71917,7 +72047,7 @@
         "vue-agile": "^2.0.0",
         "vue-fragment": "1.5.1",
         "vue-i18n": "^8.26.7",
-        "vue-json-pretty": "1.7.1",
+        "vue-json-pretty": "1.9.2",
         "vue-prism-editor": "^0.3.0",
         "vue-router": "^3.0.6",
         "vue-template-compiler": "~2.6.11",
@@ -72064,6 +72194,11 @@
             "convert-source-map": "^1.6.0"
           }
         },
+        "vue-json-pretty": {
+          "version": "1.9.2",
+          "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-1.9.2.tgz",
+          "integrity": "sha512-FHAYmZAazhVC6Wi+Zi9DVYha+oZb9uylJPGkl/yTYLxlqLMxmnaVC2R8ZwaYzt6TBGvkLe3Y2D2vgyJCDBJy1w=="
+        },
         "y18n": {
           "version": "5.0.8",
           "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -78553,6 +78688,68 @@
       "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
       "dev": true
     },
+    "static-eval": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
+      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
+      "requires": {
+        "escodegen": "^1.8.1"
+      },
+      "dependencies": {
+        "escodegen": {
+          "version": "1.14.3",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+          "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+          "requires": {
+            "esprima": "^4.0.1",
+            "estraverse": "^4.2.0",
+            "esutils": "^2.0.2",
+            "optionator": "^0.8.1",
+            "source-map": "~0.6.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        },
+        "levn": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+          "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+          "requires": {
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2"
+          }
+        },
+        "optionator": {
+          "version": "0.8.3",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+          "requires": {
+            "deep-is": "~0.1.3",
+            "fast-levenshtein": "~2.0.6",
+            "levn": "~0.3.0",
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2",
+            "word-wrap": "~1.2.3"
+          }
+        },
+        "prelude-ls": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+          "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w=="
+        },
+        "type-check": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+          "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+          "requires": {
+            "prelude-ls": "~1.1.2"
+          }
+        }
+      }
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -80834,6 +81031,11 @@
       "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
       "dev": true
     },
+    "underscore": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
+      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
+    },
     "undertaker": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.3.0.tgz",
@@ -82077,11 +82279,6 @@
       "integrity": "sha512-hQN3mzLmWM33Ua2Oua5OgF8/BJjP6+T1Wzea5xHDRYCwVvJo2pxSJLhVqluaeBe3PB5vquMddceaKC4mhLe25A==",
       "dev": true
     },
-    "vue-json-pretty": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-1.7.1.tgz",
-      "integrity": "sha512-D7aHQ5XPooSAEndTkb/RvXXJdmuCjaj14IMRdJwO4q+yJMpzPv87FT2gz4Dt2mCr1EzFyat7z7Qv9R+l/1as+w=="
-    },
     "vue-loader": {
       "version": "15.10.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz",
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index c87a24d279b91..a7caf40dbf1af 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -36,6 +36,7 @@
     "file-saver": "^2.0.2",
     "flatted": "^3.2.4",
     "jquery": "^3.4.1",
+    "jsonpath": "^1.1.1",
     "jsplumb": "2.15.4",
     "lodash.camelcase": "^4.3.0",
     "lodash.debounce": "^4.0.8",
@@ -57,7 +58,7 @@
     "vue-agile": "^2.0.0",
     "vue-fragment": "1.5.1",
     "vue-i18n": "^8.26.7",
-    "vue-json-pretty": "1.7.1",
+    "vue-json-pretty": "1.9.2",
     "vue-prism-editor": "^0.3.0",
     "vue-router": "^3.0.6",
     "vue-template-compiler": "~2.6.11",
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index 7e1f771f848ee..a10d82da87307 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -27,6 +27,7 @@ import Vue from 'vue';
 import Teleport from 'vue2-teleport';
 
 export default Vue.extend({
+	name: 'draggable',
 	components: {
 		Teleport,
 	},
@@ -49,22 +50,22 @@ export default Vue.extend({
 		},
 	},
 	data() {
+		const draggablePosition = {
+			x: -100,
+			y: -100,
+		};
+
 		return {
 			isDragging: false,
-			draggablePosition: {
-				x: -100,
-				y: -100,
-			},
+			draggablePosition,
 			draggingEl: null as null | HTMLElement,
+			draggableStyle: {
+				transform: `translate(${draggablePosition.x}px, ${draggablePosition.y}px)`,
+			},
+			animationFrameId: 0,
 		};
 	},
 	computed: {
-		draggableStyle(): { top: string; left: string; } {
-			return {
-				top: `${this.draggablePosition.y}px`,
-				left: `${this.draggablePosition.x}px`,
-			};
-		},
 		canDrop(): boolean {
 			return this.$store.getters['ui/canDraggableDrop'];
 		},
@@ -73,61 +74,65 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		onDragStart(e: DragEvent) {
+		setDraggableStyle() {
+			this.draggableStyle = {
+				transform: `translate(${this.draggablePosition.x}px, ${this.draggablePosition.y}px)`,
+			};
+		},
+		onDragStart(e: MouseEvent) {
 			if (this.disabled) {
 				return;
 			}
 
-			const target = e.target as HTMLElement;
-			if (this.targetDataKey && target && target.dataset.target !== this.targetDataKey) {
+			this.draggingEl = e.target as HTMLElement;
+			if (this.targetDataKey && this.draggingEl && this.draggingEl.dataset.target !== this.targetDataKey) {
 				return;
 			}
 
-			this.draggingEl = target;
-
-			e.preventDefault();
-			e.stopPropagation();
-			this.isDragging = true;
-
-			const data = this.targetDataKey ? target.dataset.value : (this.data || '');
-			this.$store.commit('ui/draggableStartDragging', {type: this.type, data });
-
-			this.$emit('dragstart', this.draggingEl);
-			document.body.style.cursor = 'grabbing';
+			this.isDragging = false;
+			this.draggablePosition = { x: e.pageX, y: e.pageY };
+			this.setDraggableStyle();
 
 			window.addEventListener('mousemove', this.onDrag);
 			window.addEventListener('mouseup', this.onDragEnd);
-
-			this.draggablePosition = { x: e.pageX, y: e.pageY };
 		},
 		onDrag(e: MouseEvent) {
+			e.preventDefault();
+			e.stopPropagation();
+
 			if (this.disabled) {
 				return;
 			}
 
-			e.preventDefault();
-			e.stopPropagation();
+			if(!this.isDragging) {
+				this.isDragging = true;
 
-			if (this.canDrop && this.stickyPosition) {
-				this.draggablePosition = { x: this.stickyPosition[0], y: this.stickyPosition[1]};
-			}
-			else {
-				this.draggablePosition = { x: e.pageX, y: e.pageY };
+				const data = this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : (this.data || '');
+				this.$store.commit('ui/draggableStartDragging', {type: this.type, data });
+
+				this.$emit('dragstart', this.draggingEl);
+				document.body.style.cursor = 'grabbing';
 			}
 
-			this.$emit('drag', this.draggablePosition);
+			this.animationFrameId = window.requestAnimationFrame(() => {
+				if (this.canDrop && this.stickyPosition) {
+					this.draggablePosition = { x: this.stickyPosition[0], y: this.stickyPosition[1]};
+				} else {
+					this.draggablePosition = { x: e.pageX, y: e.pageY };
+				}
+				this.setDraggableStyle();
+				this.$emit('drag', this.draggablePosition);
+			});
 		},
-		onDragEnd(e: MouseEvent) {
+		onDragEnd() {
 			if (this.disabled) {
 				return;
 			}
 
-			e.preventDefault();
-			e.stopPropagation();
-
 			document.body.style.cursor = 'unset';
 			window.removeEventListener('mousemove', this.onDrag);
 			window.removeEventListener('mouseup', this.onDragEnd);
+			window.cancelAnimationFrame(this.animationFrameId);
 
 			setTimeout(() => {
 				this.$emit('dragend', this.draggingEl);
@@ -149,10 +154,12 @@ export default Vue.extend({
 .draggable {
 	position: fixed;
 	z-index: 9999999;
+	top: 0;
+	left: 0;
 }
 
 .draggable-data-transfer {
-	width: 0px;
-	height: 0px;
+	width: 0;
+	height: 0;
 }
 </style>
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 81094fd8fd6ad..4eba8703ef3b9 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -32,11 +32,10 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import Vue from "vue";
 import Draggable from './Draggable.vue';
-import dragging from './Draggable.vue';
 
-export default mixins(dragging).extend({
+export default Vue.extend({
 	components: {
 		Draggable,
 	},
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 12da9824ccdad..b4812390d6587 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -131,37 +131,9 @@
 		</div>
 
 		<div
-			:class="[$style['data-container'], copyDropdownOpen ? $style['copy-dropdown-open'] : '']"
+			:class="$style['data-container']"
 			ref="dataContainer"
 		>
-			<div v-if="hasNodeRun && !hasRunError && displayMode === 'json'" v-show="!editMode.enabled" :class="$style['actions-group']">
-				<el-dropdown
-					trigger="click"
-					@command="handleCopyClick"
-					@visible-change="copyDropdownOpen = $event"
-				>
-					<span class="el-dropdown-link">
-						<n8n-icon-button
-							:title="$locale.baseText('runData.copyToClipboard')"
-							icon="copy"
-							type="tertiary"
-							:circle="false"
-						/>
-					</span>
-					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item :command="{command: 'value'}">
-							{{ $locale.baseText('runData.copyValue') }}
-						</el-dropdown-item>
-						<el-dropdown-item :command="{command: 'itemPath'}" divided>
-							{{ $locale.baseText('runData.copyItemPath') }}
-						</el-dropdown-item>
-						<el-dropdown-item :command="{command: 'parameterPath'}">
-							{{ $locale.baseText('runData.copyParameterPath') }}
-						</el-dropdown-item>
-					</el-dropdown-menu>
-				</el-dropdown>
-			</div>
-
 			<div v-if="isExecuting" :class="$style.center">
 				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
 				<n8n-text>{{ executingMessage }}</n8n-text>
@@ -239,28 +211,34 @@
 				</n8n-text>
 			</div>
 
-			<div v-else-if="hasNodeRun && displayMode === 'table'" class="ph-no-capture" :class="$style.dataDisplay">
-				<RunDataTable :node="node" :inputData="inputData" :mappingEnabled="mappingEnabled" :distanceFromActive="distanceFromActive" :showMappingHint="showMappingHint" :runIndex="runIndex" :totalRuns="maxRunIndex" @mounted="$emit('tableMounted', $event)" />
-			</div>
-
-			<div v-else-if="hasNodeRun && displayMode === 'json'" class="ph-no-capture" :class="$style.jsonDisplay">
-				<vue-json-pretty
-					:data="jsonData"
-					:deep="10"
-					:showLength="true"
-					:selected-value.sync="selectedJsonPath"
-					rootPath=""
-					selectableType="single"
-					class="json-data"
-				>
-					<template #nodeKey="{ node }">
-						<span>{{node.key}}</span>
-					</template>
-					<template #nodeValue="{ node }">
-						<span>{{node.content}}</span>
-					</template>
-				</vue-json-pretty>
-			</div>
+			<RunDataTable
+				v-else-if="hasNodeRun && displayMode === 'table'"
+				class="ph-no-capture"
+				:node="node"
+				:inputData="inputData"
+				:mappingEnabled="mappingEnabled"
+				:distanceFromActive="distanceFromActive"
+				:showMappingHint="showMappingHint"
+				:runIndex="runIndex"
+				:totalRuns="maxRunIndex"
+				@mounted="$emit('tableMounted', $event)"
+			/>
+
+			<run-data-json
+				v-else-if="hasNodeRun && displayMode === 'json'"
+				class="ph-no-capture"
+				:paneType="paneType"
+				:editMode="editMode"
+				:currentOutputIndex="currentOutputIndex"
+				:sessioId="sessionId"
+				:node="node"
+				:inputData="inputData"
+				:mappingEnabled="mappingEnabled"
+				:distanceFromActive="distanceFromActive"
+				:showMappingHint="showMappingHint"
+				:runIndex="runIndex"
+				:totalRuns="maxRunIndex"
+			/>
 
 			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
 				<n8n-text align="center" tag="div">{{ $locale.baseText('runData.noBinaryDataFound') }}</n8n-text>
@@ -341,9 +319,9 @@
 </template>
 
 <script lang="ts">
-import jp from 'jsonpath';
-//@ts-ignore
-import VueJsonPretty from 'vue-json-pretty';
+import { PropType } from "vue";
+import mixins from 'vue-typed-mixins';
+import { saveAs } from 'file-saver';
 import {
 	IBinaryData,
 	IBinaryKeyData,
@@ -381,18 +359,11 @@ import { externalHooks } from "@/components/mixins/externalHooks";
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { pinData } from '@/components/mixins/pinData';
-
-import mixins from 'vue-typed-mixins';
-
-import { saveAs } from 'file-saver';
 import { CodeEditor } from "@/components/forms";
 import { dataPinningEventBus } from '../event-bus/data-pinning-event-bus';
-import { stringSizeInBytes } from './helpers';
+import { clearJsonKey, executionDataToJson, stringSizeInBytes } from './helpers';
 import RunDataTable from './RunDataTable.vue';
-import { isJsonKeyObject } from '@/utils';
-
-// A path that does not exist so that nothing is selected by default
-const nonExistingJsonPath = '_!^&*';
+import RunDataJson from '@/components/RunDataJson.vue';
 
 export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink',
@@ -410,14 +381,15 @@ export default mixins(
 		components: {
 			BinaryDataDisplay,
 			NodeErrorView,
-			VueJsonPretty,
 			WarningTooltip,
 			CodeEditor,
 			RunDataTable,
+			RunDataJson,
 		},
 		props: {
 			nodeUi: {
-			}, // INodeUi | null
+				type: Object as PropType<INodeUi>,
+			},
 			runIndex: {
 				type: Number,
 			},
@@ -462,7 +434,6 @@ export default mixins(
 			return {
 				binaryDataPreviewActive: false,
 				dataSize: 0,
-				selectedJsonPath: nonExistingJsonPath,
 				showData: false,
 				outputIndex: 0,
 				binaryDataDisplayVisible: false,
@@ -473,7 +444,6 @@ export default mixins(
 				currentPage: 1,
 				pageSize: 10,
 				pageSizes: [10, 25, 50, 100],
-				copyDropdownOpen: false,
 				eventBus: dataPinningEventBus,
 
 				pinDataDiscoveryTooltipVisible: false,
@@ -639,7 +609,7 @@ export default mixins(
 				return inputData;
 			},
 			jsonData (): IDataObject[] {
-				return this.convertToJson(this.inputData);
+				return executionDataToJson(this.inputData);
 			},
 			binaryData (): IBinaryKeyData[] {
 				if (!this.node) {
@@ -728,8 +698,8 @@ export default mixins(
 			},
 			enterEditMode({ origin }: EnterEditModeArgs) {
 				const inputData = this.pinData
-					? this.clearJsonKey(this.pinData)
-					: this.convertToJson(this.rawInputData);
+					? clearJsonKey(this.pinData)
+					: executionDataToJson(this.rawInputData);
 
 				const data = inputData.length > 0
 					? inputData
@@ -769,19 +739,12 @@ export default mixins(
 				}
 
 				this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
-				this.$store.commit('pinData', { node: this.node, data: this.clearJsonKey(value) });
+				this.$store.commit('pinData', { node: this.node, data: clearJsonKey(value) });
 
 				this.onDataPinningSuccess({ source: 'save-edit' });
 
 				this.onExitEditMode({ type: 'save' });
 			},
-			clearJsonKey(userInput: string | object) {
-				const parsedUserInput = typeof userInput === 'string' ? JSON.parse(userInput) : userInput;
-
-				if (!Array.isArray(parsedUserInput)) return parsedUserInput;
-
-				return parsedUserInput.map(item => isJsonKeyObject(item) ? item.json : item);
-			},
 			onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
 				this.$telemetry.track('User closed ndv edit state', {
 					node_type: this.activeNode.type,
@@ -853,7 +816,7 @@ export default mixins(
 					return;
 				}
 
-				const data = this.convertToJson(this.rawInputData);
+				const data = executionDataToJson(this.rawInputData);
 
 				if (!this.isValidPinDataSize(data)) {
 					this.onDataPinningError({ errorType: 'data-too-large', source: 'pin-icon-click' });
@@ -1018,17 +981,6 @@ export default mixins(
 				this.binaryDataDisplayVisible = false;
 				this.binaryDataDisplayData = null;
 			},
-			convertToJson (inputData: INodeExecutionData[]): IDataObject[] {
-				const returnData: IDataObject[] = [];
-				inputData.forEach((data) => {
-					if (!data.hasOwnProperty('json')) {
-						return;
-					}
-					returnData.push(data.json);
-				});
-
-				return returnData;
-			},
 			clearExecutionData () {
 				this.$store.commit('setWorkflowExecutionData', null);
 				this.updateNodesExecutionIssues();
@@ -1074,123 +1026,6 @@ export default mixins(
 
 				return nodeType.outputNames[outputIndex];
 			},
-			convertPath (path: string): string {
-				// TODO: That can for sure be done fancier but for now it works
-				const placeholder = '*___~#^#~___*';
-				let inBrackets = path.match(/\[(.*?)\]/g);
-
-				if (inBrackets === null) {
-					inBrackets = [];
-				} else {
-					inBrackets = inBrackets.map(item => item.slice(1, -1)).map(item => {
-						if (item.startsWith('"') && item.endsWith('"')) {
-							return item.slice(1, -1);
-						}
-						return item;
-					});
-				}
-				const withoutBrackets = path.replace(/\[(.*?)\]/g, placeholder);
-				const pathParts = withoutBrackets.split('.');
-				const allParts = [] as string[];
-				pathParts.forEach(part => {
-					let index = part.indexOf(placeholder);
-					while(index !== -1) {
-						if (index === 0) {
-							allParts.push(inBrackets!.shift() as string);
-							part = part.substr(placeholder.length);
-						} else {
-							allParts.push(part.substr(0, index));
-							part = part.substr(index);
-						}
-						index = part.indexOf(placeholder);
-					}
-					if (part !== '') {
-						allParts.push(part);
-					}
-				});
-
-				return '["' + allParts.join('"]["') + '"]';
-			},
-			handleCopyClick (commandData: { command: string }) {
-				const isNotSelected = this.selectedJsonPath === nonExistingJsonPath;
-				const selectedPath = isNotSelected ? '[""]' : this.selectedJsonPath;
-
-				let selectedValue = jp.query(this.jsonData, `$${selectedPath}`)[0];
-				if (isNotSelected) {
-					if (this.hasPinData) {
-						selectedValue = this.clearJsonKey(this.pinData as object);
-					} else {
-						selectedValue = this.convertToJson(this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex));
-					}
-				}
-
-				const newPath = this.convertPath(selectedPath);
-
-				let value: string;
-				if (commandData.command === 'value') {
-					if (typeof selectedValue === 'object') {
-						value = JSON.stringify(selectedValue, null, 2);
-					} else {
-						value = selectedValue.toString();
-					}
-
-					this.$showToast({
-						title: this.$locale.baseText('runData.copyValue.toast'),
-						message: '',
-						type: 'success',
-						duration: 2000,
-					});
-				} else {
-					let startPath = '';
-					let path = '';
-					if (commandData.command === 'itemPath') {
-						const pathParts = newPath.split(']');
-						const index = pathParts[0].slice(1);
-						path = pathParts.slice(1).join(']');
-						startPath = `$item(${index}).$node["${this.node!.name}"].json`;
-
-						this.$showToast({
-							title: this.$locale.baseText('runData.copyItemPath.toast'),
-							message: '',
-							type: 'success',
-							duration: 2000,
-						});
-					} else if (commandData.command === 'parameterPath') {
-						path = newPath.split(']').slice(1).join(']');
-						startPath = `$node["${this.node!.name}"].json`;
-
-						this.$showToast({
-							title: this.$locale.baseText('runData.copyParameterPath.toast'),
-							message: '',
-							type: 'success',
-							duration: 2000,
-						});
-					}
-					if (!path.startsWith('[') && !path.startsWith('.') && path) {
-						path += '.';
-					}
-					value = `{{ ${startPath + path} }}`;
-				}
-
-				const copyType = {
-					value: 'selection',
-					itemPath: 'item_path',
-					parameterPath: 'parameter_path',
-				}[commandData.command];
-
-				this.$telemetry.track('User copied ndv data', {
-					node_type: this.activeNode.type,
-					session_id: this.sessionId,
-					run_index: this.runIndex,
-					view: this.displayMode,
-					copy_type: copyType,
-					workflow_id: this.$store.getters.workflowId,
-					pane: 'output',
-					in_execution_log: this.isReadOnly,
-				});
-
-				this.copyToClipboard(value);
-			},
 			refreshDataSize () {
 				// Hide by default the data from being displayed
 				this.showData = false;
@@ -1309,36 +1144,23 @@ export default mixins(
 	position: relative;
 	height: 100%;
 
-	&:hover,
-	&.copy-dropdown-open {
+	&:hover{
 		.actions-group {
 			opacity: 1;
 		}
 	}
 }
 
-.dataDisplay {
+.errorDisplay {
 	position: absolute;
 	top: 0;
 	left: 0;
-	padding-left: var(--spacing-s);
+	padding: 0 var(--spacing-s) var(--spacing-3xl) var(--spacing-s);
 	right: 0;
 	overflow-y: auto;
 	line-height: 1.5;
 	word-break: normal;
 	height: 100%;
-	padding-bottom: var(--spacing-3xl);
-}
-
-.errorDisplay {
-	composes: dataDisplay;
-	padding-right: var(--spacing-s);
-}
-
-.jsonDisplay {
-	composes: dataDisplay;
-	background-color: var(--color-background-base);
-	padding-top: var(--spacing-s);
 }
 
 .tabs {
@@ -1362,15 +1184,6 @@ export default mixins(
 	}
 }
 
-.actions-group {
-	position: absolute;
-	z-index: 10;
-	top: 12px;
-	right: var(--spacing-l);
-	opacity: 0;
-	transition: opacity 0.3s ease;
-}
-
 .pagination {
 	width: 100%;
 	display: flex;
@@ -1520,57 +1333,3 @@ export default mixins(
 }
 
 </style>
-
-<style lang="scss">
-.vjs-tree {
-	color: var(--color-json-default);
-}
-
-.vjs-tree-node {
-	&:hover,
-	&.is-highlight{
-		background-color: var(--color-json-highlight);
-	}
-}
-
-
-.vjs-tree .vjs-value-null {
-	&, span {
-		color: var(--color-json-null);
-	}
-}
-
-.vjs-tree .vjs-value-boolean {
-	&, span {
-		color: var(--color-json-boolean);
-	}
-}
-
-.vjs-tree .vjs-value-number {
-	&, span {
-		color: var(--color-json-number);
-	}
-}
-
-.vjs-tree .vjs-value-string {
-	&, span {
-		color: var(--color-json-string);
-	}
-}
-
-.vjs-tree .vjs-key {
-	color: var(--color-json-key);
-}
-
-.vjs-tree .vjs-tree__brackets {
-	color: var(--color-json-brackets);
-}
-
-.vjs-tree .vjs-tree__brackets:hover {
-	color: var(--color-json-brackets-hover);
-}
-
-.vjs-tree .vjs-tree__content.has-line {
-	border-left: 1px dotted var(--color-json-line);
-}
-</style>
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
new file mode 100644
index 0000000000000..da8ff94e7a32c
--- /dev/null
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -0,0 +1,291 @@
+<template>
+	<div :class="$style.jsonDisplay">
+		<run-data-json-actions
+			v-if="!editMode.enabled"
+			:node="node"
+			:sessioId="sessionId"
+			:displayMode="displayMode"
+			:distanceFromActive="distanceFromActive"
+			:selectedJsonPath="selectedJsonPath"
+			:jsonData="jsonData"
+			:paneType="paneType"
+		/>
+		<draggable
+			type="mapping"
+			targetDataKey="mappable"
+			:disabled="!mappingEnabled"
+			@dragstart="onDragStart"
+			@dragend="onDragEnd"
+			ref="draggable"
+		>
+			<template #preview="{ canDrop, el }">
+				<span :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
+					{{ $locale.baseText('dataMapping.mapKeyToField', { interpolate: { name: getShortKey(el) } }) }}
+				</span>
+			</template>
+			<template>
+				<vue-json-pretty
+					:data="jsonData"
+					:deep="10"
+					:showLength="true"
+					:selected-value.sync="selectedJsonPath"
+					rootPath=""
+					selectableType="single"
+					class="json-data"
+				>
+					<template #nodeKey="{ node }">
+					<span
+						data-target="mappable"
+						:data-value="getJsonParameterPath(node.path)"
+						:data-name="node.key"
+						:data-path="node.path"
+						:class="{
+							[$style.mappable]: mappingEnabled,
+							[$style.dragged]: draggingPath === node.path,
+						}"
+					>"{{ node.key }}"</span>
+					</template>
+					<template #nodeValue="{ node }">
+						<span>{{ getContent(node.content) }}</span>
+					</template>
+				</vue-json-pretty>
+			</template>
+		</draggable>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from "vue";
+import VueJsonPretty from 'vue-json-pretty';
+import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
+import { IDataObject, INodeExecutionData } from "n8n-workflow";
+import Draggable from '@/components/Draggable.vue';
+import { convertPath, executionDataToJson, isString, isStringNumber } from "@/components/helpers";
+import { INodeUi } from "@/Interface";
+import { shorten } from './helpers';
+
+const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
+
+export default Vue.extend({
+	name: 'run-data-json',
+	components: {
+		VueJsonPretty,
+		Draggable,
+		runDataJsonActions,
+	},
+	props: {
+		editMode: {
+			type: Object as () => { enabled?: boolean; value?: string; },
+		},
+		currentOutputIndex: {
+			type: Number,
+		},
+		sessionId: {
+			type: String,
+		},
+		paneType: {
+			type: String,
+		},
+		node: {
+			type: Object as PropType<INodeUi>,
+		},
+		inputData: {
+			type: Array as PropType<INodeExecutionData[]>,
+		},
+		mappingEnabled: {
+			type: Boolean,
+		},
+		distanceFromActive: {
+			type: Number,
+		},
+		showMappingHint: {
+			type: Boolean,
+		},
+		runIndex: {
+			type: Number,
+		},
+		totalRuns: {
+			type: Number,
+		},
+	},
+	data() {
+		return {
+			selectedJsonPath: null as null | string,
+			mappingHintVisible: false,
+			showHintWithDelay: false,
+			draggingPath: null as null | string,
+			displayMode: 'json',
+		};
+	},
+	mounted() {
+		if (this.showMappingHint) {
+			this.mappingHintVisible = true;
+
+			setTimeout(() => {
+				this.mappingHintVisible = false;
+			}, 6000);
+		}
+
+		if (this.showMappingHint && this.showHint) {
+			setTimeout(() => {
+				this.showHintWithDelay = this.showHint;
+				this.$telemetry.track('User viewed JSON mapping tooltip', { type: 'param focus' });
+			}, 500);
+		}
+	},
+	computed: {
+		jsonData(): IDataObject[] {
+			return executionDataToJson(this.inputData as INodeExecutionData[]);
+		},
+		showHint(): boolean {
+			return (
+				!this.draggingPath &&
+				((this.showMappingHint && this.mappingHintVisible) ||
+					window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true')
+			);
+		},
+	},
+	methods: {
+		getShortKey(el: HTMLElement): string {
+			if (!el) {
+				return '';
+			}
+
+			return shorten(el.dataset.name || '', 16, 2);
+		},
+		getJsonParameterPath(path: string): string {
+			const convertedPath = convertPath(path);
+			return `{{ ${ convertedPath.replace(/^(\["?\d"?])/, this.distanceFromActive === 1 ? '$json' : `$node["${ this.node!.name }"].json`) } }}`;
+		},
+		onDragStart(el: HTMLElement) {
+			if (el && el.dataset.path) {
+				this.draggingPath = el.dataset.path;
+			}
+
+			this.$store.commit('ui/resetMappingTelemetry');
+		},
+		onDragEnd(el: HTMLElement) {
+			this.draggingPath = null;
+		},
+		getContent(value: string): string {
+			return isString(value) && !isStringNumber(value) ? `"${ value }"` : value;
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.jsonDisplay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding-left: var(--spacing-s);
+	right: 0;
+	overflow-y: auto;
+	line-height: 1.5;
+	word-break: normal;
+	height: 100%;
+	padding-bottom: var(--spacing-3xl);
+	background-color: var(--color-background-base);
+	padding-top: var(--spacing-s);
+
+	&:hover {
+		/* Shows .actionsGroup element from <run-data-json-actions /> child component */
+		> div:first-child {
+			opacity: 1;
+		}
+	}
+}
+
+.mappable {
+	cursor: grab;
+
+	&:hover {
+		background-color: var(--color-json-highlight);
+	}
+}
+
+.dragged {
+	&,
+	&:hover {
+		background-color: var(--color-primary-tint-2);
+	}
+}
+
+.dragPill {
+	padding: var(--spacing-4xs) var(--spacing-4xs) var(--spacing-3xs) var(--spacing-4xs);
+	color: var(--color-text-xlight);
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-2xs);
+	border-radius: var(--border-radius-base);
+	white-space: nowrap;
+}
+
+.droppablePill {
+	background-color: var(--color-success);
+}
+
+.defaultPill {
+	background-color: var(--color-primary);
+	transform: translate(-50%, -100%);
+	box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
+}
+
+</style>
+
+<style lang="scss">
+.vjs-tree {
+	color: var(--color-json-default);
+}
+
+.vjs-tree-node {
+	&:hover {
+		background-color: transparent;
+	}
+
+	&.is-highlight {
+		background-color: var(--color-json-highlight);
+	}
+}
+
+
+.vjs-tree .vjs-value-null {
+	&, span {
+		color: var(--color-json-null);
+	}
+}
+
+.vjs-tree .vjs-value-boolean {
+	&, span {
+		color: var(--color-json-boolean);
+	}
+}
+
+.vjs-tree .vjs-value-number {
+	&, span {
+		color: var(--color-json-number);
+	}
+}
+
+.vjs-tree .vjs-value-string {
+	&, span {
+		color: var(--color-json-string);
+	}
+}
+
+.vjs-tree .vjs-key {
+	color: var(--color-json-key);
+}
+
+.vjs-tree .vjs-tree__brackets {
+	color: var(--color-json-brackets);
+}
+
+.vjs-tree .vjs-tree__brackets:hover {
+	color: var(--color-json-brackets-hover);
+}
+
+.vjs-tree .vjs-tree__content.has-line {
+	border-left: 1px dotted var(--color-json-line);
+}
+</style>
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
new file mode 100644
index 0000000000000..e160cb25e554e
--- /dev/null
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -0,0 +1,215 @@
+<template>
+	<div :class="$style.actionsGroup">
+		<el-dropdown trigger="click" @command="handleCopyClick">
+			<span class="el-dropdown-link">
+				<n8n-icon-button
+					:title="$locale.baseText('runData.copyToClipboard')"
+					icon="copy"
+					type="tertiary"
+					:circle="false"
+				/>
+			</span>
+			<el-dropdown-menu slot="dropdown">
+				<el-dropdown-item :command="{command: 'value'}">
+					{{ $locale.baseText('runData.copyValue') }}
+				</el-dropdown-item>
+				<el-dropdown-item :command="{command: 'itemPath'}" divided>
+					{{ $locale.baseText('runData.copyItemPath') }}
+				</el-dropdown-item>
+				<el-dropdown-item :command="{command: 'parameterPath'}">
+					{{ $locale.baseText('runData.copyParameterPath') }}
+				</el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>
+	</div>
+</template>
+
+<script lang="ts">
+import { PropType } from "vue";
+import mixins from "vue-typed-mixins";
+import jp from "jsonpath";
+import { INodeUi } from "@/Interface";
+import { IDataObject } from "n8n-workflow";
+import { copyPaste } from "@/components/mixins/copyPaste";
+import { pinData } from "@/components/mixins/pinData";
+import { nodeHelpers } from "@/components/mixins/nodeHelpers";
+import { genericHelpers } from "@/components/mixins/genericHelpers";
+import { clearJsonKey, convertPath, executionDataToJson } from "@/components/helpers";
+
+type JsonPathData = {
+	path: string;
+	startPath: string;
+};
+
+// A path that does not exist so that nothing is selected by default
+const nonExistingJsonPath = '_!^&*';
+
+export default mixins(
+	genericHelpers,
+	nodeHelpers,
+	pinData,
+	copyPaste,
+).extend({
+	name: 'run-data-json-actions',
+	props: {
+		node: {
+			type: Object as PropType<INodeUi>,
+		},
+		paneType: {
+			type: String,
+		},
+		sessionId: {
+			type: String,
+		},
+		currentOutputIndex: {
+			type: Number,
+		},
+		runIndex: {
+			type: Number,
+		},
+		displayMode: {
+			type: String,
+		},
+		distanceFromActive: {
+			type: Number,
+		},
+		selectedJsonPath: {
+			type: String,
+			default: nonExistingJsonPath,
+		},
+		jsonData: {
+			type: Array as PropType<IDataObject[]>,
+			required: true,
+		},
+	},
+	computed: {
+		activeNode(): INodeUi {
+			return this.$store.getters.activeNode;
+		},
+		normalisedJsonPath(): string {
+			const isNotSelected = this.selectedJsonPath === nonExistingJsonPath;
+			return isNotSelected ? '[""]' : this.selectedJsonPath;
+		},
+	},
+	methods: {
+		getJsonValue(): string {
+			let selectedValue = jp.query(this.jsonData, `$${ this.normalisedJsonPath }`)[0];
+			if (this.selectedJsonPath === nonExistingJsonPath) {
+				if (this.hasPinData) {
+					selectedValue = clearJsonKey(this.pinData as object);
+				} else {
+					selectedValue = executionDataToJson(this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex));
+				}
+			}
+
+			let value = '';
+			if (typeof selectedValue === 'object') {
+				value = JSON.stringify(selectedValue, null, 2);
+			} else {
+				value = selectedValue.toString();
+			}
+
+			return value;
+		},
+		getJsonItemPath(): JsonPathData {
+			const newPath = convertPath(this.normalisedJsonPath);
+			let startPath = '';
+			let path = '';
+
+			const pathParts = newPath.split(']');
+			const index = pathParts[0].slice(1);
+			path = pathParts.slice(1).join(']');
+			startPath = `$item(${ index }).$node["${ this.node!.name }"].json`;
+
+			return { path, startPath };
+		},
+		getJsonParameterPath(): JsonPathData {
+			const newPath = convertPath(this.normalisedJsonPath);
+			const path = newPath.split(']').slice(1).join(']');
+			let startPath = `$node["${ this.node!.name }"].json`;
+
+			if (this.distanceFromActive === 1) {
+				startPath = `$json`;
+			}
+
+			return { path, startPath };
+		},
+		handleCopyClick(commandData: { command: string }) {
+			let value: string;
+			if (commandData.command === 'value') {
+				value = this.getJsonValue();
+
+				this.$showToast({
+					title: this.$locale.baseText('runData.copyValue.toast'),
+					message: '',
+					type: 'success',
+					duration: 2000,
+				});
+			} else {
+				let startPath = '';
+				let path = '';
+				if (commandData.command === 'itemPath') {
+					const jsonItemPath = this.getJsonItemPath();
+					startPath = jsonItemPath.startPath;
+					path = jsonItemPath.path;
+
+					this.$showToast({
+						title: this.$locale.baseText('runData.copyItemPath.toast'),
+						message: '',
+						type: 'success',
+						duration: 2000,
+					});
+				} else if (commandData.command === 'parameterPath') {
+					const jsonParameterPath = this.getJsonParameterPath();
+					startPath = jsonParameterPath.startPath;
+					path = jsonParameterPath.path;
+
+					this.$showToast({
+						title: this.$locale.baseText('runData.copyParameterPath.toast'),
+						message: '',
+						type: 'success',
+						duration: 2000,
+					});
+				}
+				if (!path.startsWith('[') && !path.startsWith('.') && path) {
+					path += '.';
+				}
+				value = `{{ ${ startPath + path } }}`;
+			}
+
+			const copyType = {
+				value: 'selection',
+				itemPath: 'item_path',
+				parameterPath: 'parameter_path',
+			}[commandData.command];
+
+			this.$telemetry.track('User copied ndv data', {
+				node_type: this.activeNode.type,
+				session_id: this.sessionId,
+				run_index: this.runIndex,
+				view: 'json',
+				copy_type: copyType,
+				workflow_id: this.$store.getters.workflowId,
+				pane: this.paneType,
+				in_execution_log: this.isReadOnly,
+			});
+
+			this.copyToClipboard(value);
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.actionsGroup {
+	position: sticky;
+	height: 0;
+	overflow: visible;
+	z-index: 10;
+	top: 0;
+	padding-right: var(--spacing-s);
+	opacity: 0;
+	transition: opacity 0.3s ease;
+	text-align: right;
+}
+</style>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 13e3d0ad59315..1aecf1bd9db66 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :class="$style.dataDisplay">
 		<table :class="$style.table" v-if="tableData.columns && tableData.columns.length === 0">
 			<tr>
 				<th :class="$style.emptyCell"></th>
@@ -25,7 +25,7 @@
 								<img src='/static/data-mapping-gif.gif'/>
 								{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
 							</div>
-							<Draggable
+							<draggable
 								type="mapping"
 								:data="getExpression(column)"
 								:disabled="!mappingEnabled"
@@ -37,7 +37,7 @@
 										:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
 									>
 										{{
-											$locale.baseText('dataMapping.mapSpecificColumnToField', {
+											$locale.baseText('dataMapping.mapKeyToField', {
 												interpolate: { name: shorten(column, 16, 2) },
 											})
 										}}
@@ -78,13 +78,13 @@
 										</n8n-tooltip>
 									</div>
 								</template>
-							</Draggable>
+							</draggable>
 						</n8n-tooltip>
 					</th>
 					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
-			<Draggable
+			<draggable
 				tag="tbody"
 				type="mapping"
 				targetDataKey="mappable"
@@ -99,7 +99,7 @@
 							$locale.baseText(
 								tableData.data.length > 1
 									? 'dataMapping.mapAllKeysToField'
-									: 'dataMapping.mapSpecificColumnToField',
+									: 'dataMapping.mapKeyToField',
 								{
 									interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
 								},
@@ -148,7 +148,7 @@
 						<td :class="$style.tableRightMargin"></td>
 					</tr>
 				</template>
-			</Draggable>
+			</draggable>
 		</table>
 	</div>
 </template>
@@ -156,11 +156,11 @@
 <script lang="ts">
 /* eslint-disable prefer-spread */
 
+import Vue, { PropType } from 'vue';
+import mixins from 'vue-typed-mixins';
 import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
 import { INodeUi, ITableData } from '@/Interface';
 import { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
-import Vue from 'vue';
-import mixins from 'vue-typed-mixins';
 import Draggable from './Draggable.vue';
 import { shorten } from './helpers';
 import { externalHooks } from './mixins/externalHooks';
@@ -170,10 +170,10 @@ export default mixins(externalHooks).extend({
 	components: { Draggable },
 	props: {
 		node: {
-			type: Object as () => INodeUi,
+			type: Object as PropType<INodeUi>,
 		},
 		inputData: {
-			type: Array as () => INodeExecutionData[],
+			type: Array as PropType<INodeExecutionData[]>,
 		},
 		mappingEnabled: {
 			type: Boolean,
@@ -485,6 +485,19 @@ export default mixins(externalHooks).extend({
 </script>
 
 <style lang="scss" module>
+.dataDisplay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding-left: var(--spacing-s);
+	right: 0;
+	overflow-y: auto;
+	line-height: 1.5;
+	word-break: normal;
+	height: 100%;
+	padding-bottom: var(--spacing-3xl);
+}
+
 .table {
 	border-collapse: separate;
 	text-align: left;
diff --git a/packages/editor-ui/src/components/helpers.ts b/packages/editor-ui/src/components/helpers.ts
index 759e91fdb1235..bf40a0b2d13f3 100644
--- a/packages/editor-ui/src/components/helpers.ts
+++ b/packages/editor-ui/src/components/helpers.ts
@@ -2,7 +2,8 @@ import { CORE_NODES_CATEGORY, ERROR_TRIGGER_NODE_TYPE, MAPPING_PARAMS, TEMPLATES
 import { INodeUi, ITemplatesNode } from '@/Interface';
 import { isResourceLocatorValue } from '@/typeGuards';
 import dateformat from 'dateformat';
-import {IDataObject, INodeProperties, INodeTypeDescription, NodeParameterValueType} from 'n8n-workflow';
+import {IDataObject, INodeProperties, INodeTypeDescription, NodeParameterValueType,INodeExecutionData} from 'n8n-workflow';
+import { isJsonKeyObject } from "@/utils";
 
 const CRED_KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
 const NODE_KEYWORDS_TO_FILTER = ['Trigger'];
@@ -73,6 +74,10 @@ export function isString(value: unknown): value is string {
 	return typeof value === 'string';
 }
 
+export function isStringNumber(value: unknown): value is string {
+	return !isNaN(Number(value));
+}
+
 export function isNumber(value: unknown): value is number {
 	return typeof value === 'number';
 }
@@ -122,3 +127,54 @@ export function isValueExpression (parameter: INodeProperties, paramValue: NodeP
 export function convertRemToPixels(rem: string) {
 	return parseInt(rem, 10) * parseFloat(getComputedStyle(document.documentElement).fontSize);
 }
+
+export const executionDataToJson = (inputData: INodeExecutionData[]): IDataObject[] => inputData.reduce<IDataObject[]>(
+	(acc, item) => isJsonKeyObject(item) ? acc.concat(item.json) : acc,
+	[],
+);
+
+export const convertPath = (path: string): string => {
+	// TODO: That can for sure be done fancier but for now it works
+	const placeholder = '*___~#^#~___*';
+	let inBrackets = path.match(/\[(.*?)]/g);
+
+	if (inBrackets === null) {
+		inBrackets = [];
+	} else {
+		inBrackets = inBrackets.map(item => item.slice(1, -1)).map(item => {
+			if (item.startsWith('"') && item.endsWith('"')) {
+				return item.slice(1, -1);
+			}
+			return item;
+		});
+	}
+	const withoutBrackets = path.replace(/\[(.*?)]/g, placeholder);
+	const pathParts = withoutBrackets.split('.');
+	const allParts = [] as string[];
+	pathParts.forEach(part => {
+		let index = part.indexOf(placeholder);
+		while(index !== -1) {
+			if (index === 0) {
+				allParts.push(inBrackets!.shift() as string);
+				part = part.substr(placeholder.length);
+			} else {
+				allParts.push(part.substr(0, index));
+				part = part.substr(index);
+			}
+			index = part.indexOf(placeholder);
+		}
+		if (part !== '') {
+			allParts.push(part);
+		}
+	});
+
+	return '["' + allParts.join('"]["') + '"]';
+};
+
+export const clearJsonKey = (userInput: string | object) => {
+	const parsedUserInput = typeof userInput === 'string' ? JSON.parse(userInput) : userInput;
+
+	if (!Array.isArray(parsedUserInput)) return parsedUserInput;
+
+	return parsedUserInput.map(item => isJsonKeyObject(item) ? item.json : item);
+};
diff --git a/packages/editor-ui/src/declarations/vue-json-pretty.d.ts b/packages/editor-ui/src/declarations/vue-json-pretty.d.ts
new file mode 100644
index 0000000000000..083e70eba349e
--- /dev/null
+++ b/packages/editor-ui/src/declarations/vue-json-pretty.d.ts
@@ -0,0 +1,5 @@
+declare module 'vue-json-pretty' {
+	import { Component } from 'vue';
+	const vueJsonPretty: Component;
+	export default vueJsonPretty;
+}
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 418ebf63d0fd4..652c94907e4bb 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -216,7 +216,7 @@
 	"dataMapping.success.title": "You just mapped some data!",
 	"dataMapping.success.moreInfo": "Check out our <a href=\"https://docs.n8n.io/data/data-mapping\" target=\"_blank\">docs</a> for more details on mapping data in n8n",
 	"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
-	"dataMapping.mapSpecificColumnToField": "Map '{name}' to a field",
+	"dataMapping.mapKeyToField": "Map '{name}' to a field",
 	"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
 	"displayWithChange.cancelEdit": "Cancel Edit",
 	"displayWithChange.clickToChange": "Click to Change",