mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
feat(editor-ui): JSON mapping (#4270)
* refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour (#4152) * fix(editor-ui): export interface to solve 'TS4082: Default export of the module has or is using private name' error temporarily * refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour * 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 * feat(editor-ui): add mapping discoverability tooltip to mappable inputs (#4227) * 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): update helper after merge conflict * refactor(editor-ui): cleanup RunaDataTable tooltips * refactor(editor-ui): add temporary static tooltip to input with mapping * fix(editor-ui): input mapping tooltip proper input name * fix(editor-ui): show input mapping tooltip when conditions are met * fix(editor-ui): show different input mapping tooltip for different view types (table, json) * fix(editor-ui): drop lodash isEmpty * fix(editor-ui): using and keeping only getter function * fix(editor-ui): check `INodeExecutionData[]` array emptyness (still needs some improvement) * feat(editor-ui): add telemetry calls to data mapping (#4250) * fix(editor-ui): add types package for jsonpath * fix(editor-ui): JSON view drag'n'drop telemetry call * fix(editor-ui): add data mapping tooltip close telemetry to parameter input * fix(editor-ui): execute previous node tooltip linebreak * fix(editor-ui): input data mapping tooltip show-hide logic * fix(editor-ui): input data mapping tooltip position * fix(editor-ui): using a placeholder gif in mapping discoverability tooltip * refactor(design-system): adding optional configurable buttons to tooltip (#4260) * refactor(design-system): unbreaking wrapper around element ui tooltip * fix(design-system): update test snapshot * refactor(design-system): adding buttons to tooltip * fix(design-system): update test snapshot * fix(design-system): change tooltip props and some cleanup * fix(design-system): update test snapshot * chore: fix package lock file after merge * fix(editor-ui): modifications according to Max's review (#4273) * fix(editor-ui): modifications according to Max's review * fix(editor-ui): JSON prop names should not be written bold * fix(editor-ui): use proper animated gif in JSON data mapping discoverability tooltip
This commit is contained in:
Csaba Tuncsik
GitHub
parent
e63eee28e0
commit
19e333e660
243
package-lock.json
generated
243
package-lock.json
generated
|
|
@ -8515,6 +8515,12 @@
|
|||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/jsonpath": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/jsonpath/-/jsonpath-0.2.0.tgz",
|
||||
"integrity": "sha512-v7qlPA0VpKUlEdhghbDqRoKMxFB3h3Ch688TApBJ6v+XLDdvWCGLJIYiPKGZnS6MAOie+IorCfNYVHOPIHSWwQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/jsonwebtoken": {
|
||||
"version": "8.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-8.5.9.tgz",
|
||||
|
|
@ -27636,6 +27642,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",
|
||||
|
|
@ -36655,6 +36683,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",
|
||||
|
|
@ -39532,6 +39644,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",
|
||||
|
|
@ -41142,15 +41259,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",
|
||||
|
|
@ -45572,6 +45680,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",
|
||||
|
|
@ -45593,7 +45702,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",
|
||||
|
|
@ -45612,6 +45721,7 @@
|
|||
"@types/dateformat": "^3.0.0",
|
||||
"@types/express": "^4.17.6",
|
||||
"@types/file-saver": "^2.0.1",
|
||||
"@types/jsonpath": "^0.2.0",
|
||||
"@types/lodash.camelcase": "^4.3.6",
|
||||
"@types/lodash.get": "^4.4.6",
|
||||
"@types/lodash.set": "^4.3.6",
|
||||
|
|
@ -46067,6 +46177,15 @@
|
|||
"eslint": ">=5.0.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/vue-tsc": {
|
||||
"version": "0.34.17",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
|
||||
|
|
@ -54742,6 +54861,12 @@
|
|||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/jsonpath": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/jsonpath/-/jsonpath-0.2.0.tgz",
|
||||
"integrity": "sha512-v7qlPA0VpKUlEdhghbDqRoKMxFB3h3Ch688TApBJ6v+XLDdvWCGLJIYiPKGZnS6MAOie+IorCfNYVHOPIHSWwQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/jsonwebtoken": {
|
||||
"version": "8.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-8.5.9.tgz",
|
||||
|
|
@ -69795,6 +69920,23 @@
|
|||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
|
|
@ -73647,6 +73789,7 @@
|
|||
"@types/dateformat": "^3.0.0",
|
||||
"@types/express": "^4.17.6",
|
||||
"@types/file-saver": "^2.0.1",
|
||||
"@types/jsonpath": "^0.2.0",
|
||||
"@types/lodash.camelcase": "^4.3.6",
|
||||
"@types/lodash.get": "^4.4.6",
|
||||
"@types/lodash.set": "^4.3.6",
|
||||
|
|
@ -73668,6 +73811,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",
|
||||
|
|
@ -73698,7 +73842,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",
|
||||
|
|
@ -74031,6 +74175,11 @@
|
|||
"semver": "^6.3.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=="
|
||||
},
|
||||
"vue-tsc": {
|
||||
"version": "0.34.17",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
|
||||
|
|
@ -81135,6 +81284,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",
|
||||
|
|
@ -83251,6 +83462,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",
|
||||
|
|
@ -84483,11 +84699,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",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-
|
|||
|
||||
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
|
||||
"<div class=\\"n8n-info-tip _info_3egb8_33 _tooltip_3egb8_23 _base_3egb8_1 _bold_3egb8_12\\">
|
||||
<n8n-tooltip-stub transformorigin=\\"true\\" placement=\\"top\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\" opendelay=\\"0\\" effect=\\"dark\\" transition=\\"el-fade-in-linear\\" enterable=\\"true\\" hideafter=\\"0\\" tabindex=\\"0\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_91pa9_34 _size-medium_91pa9_19 _regular_91pa9_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
|
||||
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_91pa9_34 _size-medium_91pa9_19 _regular_91pa9_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
|
||||
</div>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,50 @@
|
|||
<template>
|
||||
<el-tooltip v-bind="$attrs">
|
||||
<template v-for="(_, slotName) in $slots" #[slotName]>
|
||||
<slot :name="slotName"/>
|
||||
<div :key="slotName" v-if="slotName === 'content' && buttons.length" :class="$style.buttons" :style="{ justifyContent: justifyButtons }">
|
||||
<n8n-button
|
||||
v-for="button in buttons"
|
||||
:key="button.attrs.label"
|
||||
v-bind="button.attrs"
|
||||
v-on="button.listeners"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue, { PropType } from "vue";
|
||||
import ElTooltip from 'element-ui/lib/tooltip';
|
||||
import type { IN8nButton } from "@/types";
|
||||
import N8nButton from '../N8nButton';
|
||||
|
||||
ElTooltip.name = 'n8n-tooltip'; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
|
||||
|
||||
export default ElTooltip;
|
||||
export default Vue.extend({
|
||||
name: 'n8n-tooltip',
|
||||
inheritAttrs: false,
|
||||
components: {
|
||||
ElTooltip, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
||||
N8nButton,
|
||||
},
|
||||
props: {
|
||||
justifyButtons: {
|
||||
type: String,
|
||||
default: 'flex-end',
|
||||
validator: (value: string): boolean => ['flex-start', 'flex-end', 'start', 'end', 'left', 'right', 'center', 'space-between', 'space-around', 'space-evenly'].includes(value),
|
||||
},
|
||||
buttons: {
|
||||
type: Array as PropType<IN8nButton[]>,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@
|
|||
--color-json-brackets: var(--color-text-dark);
|
||||
--color-json-brackets-hover: #1890ff;
|
||||
--color-json-line: #bfcbd9;
|
||||
--color-json-highlight: hsl(226, 13%, 71%);
|
||||
--color-json-highlight: #dcdfea;
|
||||
|
||||
// Generated Color Shades from 50 to 950
|
||||
// Not yet used in design system
|
||||
|
|
|
|||
17
packages/design-system/src/types/button.ts
Normal file
17
packages/design-system/src/types/button.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export type IN8nButton = {
|
||||
attrs: {
|
||||
label: string,
|
||||
type?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger',
|
||||
size?: 'mini' | 'small' | 'medium' | 'large' | 'xlarge',
|
||||
loading?: boolean,
|
||||
disabled?: boolean,
|
||||
outline?: boolean,
|
||||
text?: boolean,
|
||||
icon?: string,
|
||||
block?: boolean,
|
||||
active?: boolean,
|
||||
float?: 'left' | 'right',
|
||||
square?: boolean,
|
||||
},
|
||||
listeners?: Record<string, (event: Event) => void>
|
||||
};
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
export * from './form';
|
||||
export * from './user';
|
||||
export * from './button';
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
@ -76,6 +77,7 @@
|
|||
"@types/dateformat": "^3.0.0",
|
||||
"@types/express": "^4.17.6",
|
||||
"@types/file-saver": "^2.0.1",
|
||||
"@types/jsonpath": "^0.2.0",
|
||||
"@types/lodash.camelcase": "^4.3.6",
|
||||
"@types/lodash.get": "^4.4.6",
|
||||
"@types/lodash.set": "^4.3.6",
|
||||
|
|
|
|||
BIN
packages/editor-ui/public/static/json-mapping-gif.gif
Normal file
BIN
packages/editor-ui/public/static/json-mapping-gif.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 675 KiB |
|
|
@ -18,7 +18,6 @@ import {
|
|||
IWorkflowSettings as IWorkflowSettingsWorkflow,
|
||||
WorkflowExecuteMode,
|
||||
PublicInstalledPackage,
|
||||
IResourceLocatorResult,
|
||||
INodeTypeNameVersion,
|
||||
ILoadOptions,
|
||||
INodeCredentials,
|
||||
|
|
@ -943,9 +942,15 @@ export interface IUiState {
|
|||
sessionId: string;
|
||||
input: {
|
||||
displayMode: IRunDataDisplayMode;
|
||||
data: {
|
||||
isEmpty: boolean;
|
||||
}
|
||||
};
|
||||
output: {
|
||||
displayMode: IRunDataDisplayMode;
|
||||
data: {
|
||||
isEmpty: boolean;
|
||||
}
|
||||
editMode: {
|
||||
enabled: boolean;
|
||||
value: string;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -27,21 +27,30 @@
|
|||
@drop="onDrop"
|
||||
>
|
||||
<template v-slot="{ droppable, activeDrop }">
|
||||
<parameter-input
|
||||
ref="param"
|
||||
:parameter="parameter"
|
||||
:value="value"
|
||||
:displayOptions="displayOptions"
|
||||
:path="path"
|
||||
:isReadOnly="isReadOnly"
|
||||
:droppable="droppable"
|
||||
:activeDrop="activeDrop"
|
||||
:forceShowExpression="forceShowExpression"
|
||||
@valueChanged="valueChanged"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@drop="onDrop"
|
||||
inputSize="small" />
|
||||
<n8n-tooltip
|
||||
placement="left"
|
||||
:manual="true"
|
||||
:value="showMappingTooltip"
|
||||
:buttons="dataMappingTooltipButtons"
|
||||
>
|
||||
<span slot="content" v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })" />
|
||||
<parameter-input
|
||||
ref="param"
|
||||
:parameter="parameter"
|
||||
:value="value"
|
||||
:displayOptions="displayOptions"
|
||||
:path="path"
|
||||
:isReadOnly="isReadOnly"
|
||||
:droppable="droppable"
|
||||
:activeDrop="activeDrop"
|
||||
:forceShowExpression="forceShowExpression"
|
||||
@valueChanged="valueChanged"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@drop="onDrop"
|
||||
inputSize="small"
|
||||
/>
|
||||
</n8n-tooltip>
|
||||
</template>
|
||||
</draggable-target>
|
||||
<input-hint :class="$style.hint" :hint="$locale.nodeText().hint(parameter, path)" />
|
||||
|
|
@ -53,7 +62,9 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
import {
|
||||
IN8nButton,
|
||||
INodeUi,
|
||||
IRunDataDisplayMode,
|
||||
IUpdateInformation,
|
||||
} from '@/Interface';
|
||||
|
||||
|
|
@ -68,6 +79,7 @@ import { hasExpressionMapping } from './helpers';
|
|||
import { hasOnlyListMode } from './ResourceLocator/helpers';
|
||||
import { INodePropertyMode } from 'n8n-workflow';
|
||||
import { isResourceLocatorValue } from '@/typeGuards';
|
||||
import { BaseTextKey } from "@/plugins/i18n";
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
|
|
@ -85,6 +97,7 @@ export default mixins(
|
|||
focused: false,
|
||||
menuExpanded: false,
|
||||
forceShowExpression: false,
|
||||
dataMappingTooltipButtons: [] as IN8nButton[],
|
||||
};
|
||||
},
|
||||
props: [
|
||||
|
|
@ -95,6 +108,19 @@ export default mixins(
|
|||
'value',
|
||||
'hideLabel',
|
||||
],
|
||||
created() {
|
||||
const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
|
||||
this.dataMappingTooltipButtons = [
|
||||
{
|
||||
attrs: {
|
||||
label: this.$locale.baseText('_reusableBaseText.dismiss' as BaseTextKey),
|
||||
},
|
||||
listeners: {
|
||||
click: mappingTooltipDismissHandler,
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
computed: {
|
||||
node (): INodeUi | null {
|
||||
return this.$store.getters.activeNode;
|
||||
|
|
@ -108,6 +134,15 @@ export default mixins(
|
|||
showExpressionSelector (): boolean {
|
||||
return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
|
||||
},
|
||||
isInputDataEmpty (): boolean {
|
||||
return this.$store.getters['ui/getNDVDataIsEmpty']('input');
|
||||
},
|
||||
displayMode(): IRunDataDisplayMode {
|
||||
return this.$store.getters['ui/inputPanelDisplayMode'];
|
||||
},
|
||||
showMappingTooltip (): boolean {
|
||||
return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onFocus() {
|
||||
|
|
@ -208,6 +243,16 @@ export default mixins(
|
|||
this.forceShowExpression = false;
|
||||
}, 200);
|
||||
},
|
||||
onMappingTooltipDismissed() {
|
||||
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showMappingTooltip(newValue: boolean) {
|
||||
if (!newValue) {
|
||||
this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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,25 +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>
|
||||
<run-data-table
|
||||
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)"
|
||||
/>
|
||||
|
||||
<div v-else-if="hasNodeRun && displayMode === 'json'" class="ph-no-capture" :class="$style.jsonDisplay">
|
||||
<vue-json-pretty
|
||||
:data="jsonData"
|
||||
:deep="10"
|
||||
v-model="selectedOutput.path"
|
||||
:showLine="true"
|
||||
:showLength="true"
|
||||
selectableType="single"
|
||||
path=""
|
||||
:highlightSelectedNode="true"
|
||||
:selectOnClickNode="true"
|
||||
@click="dataItemClicked"
|
||||
class="json-data"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -338,8 +319,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
//@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,
|
||||
|
|
@ -377,18 +359,12 @@ 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 deselectedPlaceholder = '_!^&*';
|
||||
import RunDataJson from '@/components/RunDataJson.vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
export type EnterEditModeArgs = {
|
||||
origin: 'editIconButton' | 'insertTestDataLink',
|
||||
|
|
@ -406,14 +382,15 @@ export default mixins(
|
|||
components: {
|
||||
BinaryDataDisplay,
|
||||
NodeErrorView,
|
||||
VueJsonPretty,
|
||||
WarningTooltip,
|
||||
CodeEditor,
|
||||
RunDataTable,
|
||||
RunDataJson,
|
||||
},
|
||||
props: {
|
||||
nodeUi: {
|
||||
}, // INodeUi | null
|
||||
type: Object as PropType<INodeUi>,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
},
|
||||
|
|
@ -458,11 +435,6 @@ export default mixins(
|
|||
return {
|
||||
binaryDataPreviewActive: false,
|
||||
dataSize: 0,
|
||||
deselectedPlaceholder,
|
||||
selectedOutput: {
|
||||
value: '' as object | number | string,
|
||||
path: deselectedPlaceholder,
|
||||
},
|
||||
showData: false,
|
||||
outputIndex: 0,
|
||||
binaryDataDisplayVisible: false,
|
||||
|
|
@ -473,7 +445,6 @@ export default mixins(
|
|||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 25, 50, 100],
|
||||
copyDropdownOpen: false,
|
||||
eventBus: dataPinningEventBus,
|
||||
|
||||
pinDataDiscoveryTooltipVisible: false,
|
||||
|
|
@ -639,7 +610,7 @@ export default mixins(
|
|||
return inputData;
|
||||
},
|
||||
jsonData (): IDataObject[] {
|
||||
return this.convertToJson(this.inputData);
|
||||
return executionDataToJson(this.inputData);
|
||||
},
|
||||
binaryData (): IBinaryKeyData[] {
|
||||
if (!this.node) {
|
||||
|
|
@ -728,8 +699,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 +740,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 +817,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,24 +982,10 @@ 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();
|
||||
},
|
||||
dataItemClicked (path: string, data: object | number | string) {
|
||||
this.selectedOutput.value = data;
|
||||
},
|
||||
isDownloadable (index: number, key: string): boolean {
|
||||
const binaryDataItem: IBinaryData = this.binaryData[index][key];
|
||||
return !!(binaryDataItem.mimeType && binaryDataItem.fileName);
|
||||
|
|
@ -1077,123 +1027,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.selectedOutput.path === deselectedPlaceholder;
|
||||
const selectedPath = isNotSelected ? '[""]' : this.selectedOutput.path;
|
||||
|
||||
let selectedValue = this.selectedOutput.value;
|
||||
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;
|
||||
|
|
@ -1236,6 +1069,15 @@ export default mixins(
|
|||
node() {
|
||||
this.init();
|
||||
},
|
||||
inputData:{
|
||||
handler(data: INodeExecutionData[]) {
|
||||
if(this.paneType && data){
|
||||
this.$store.commit('ui/setNDVPanelDataIsEmpty', { panel: this.paneType, isEmpty: data.every(item => isEmpty(item.json)) });
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
jsonData (value: IDataObject[]) {
|
||||
this.refreshDataSize();
|
||||
|
||||
|
|
@ -1312,36 +1154,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 {
|
||||
|
|
@ -1365,15 +1194,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;
|
||||
|
|
@ -1523,45 +1343,3 @@ export default mixins(
|
|||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.vjs-tree {
|
||||
color: var(--color-json-default);
|
||||
}
|
||||
|
||||
.vjs-tree.is-highlight-selected {
|
||||
background-color: var(--color-json-highlight);
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-value__null {
|
||||
color: var(--color-json-null);
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-value__boolean {
|
||||
color: var(--color-json-boolean);
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-value__number {
|
||||
color: var(--color-json-number);
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-value__string {
|
||||
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>
|
||||
|
|
|
|||
324
packages/editor-ui/src/components/RunDataJson.vue
Normal file
324
packages/editor-ui/src/components/RunDataJson.vue
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
<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 }">
|
||||
<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
|
||||
{{ $locale.baseText('dataMapping.mapKeyToField', { interpolate: { name: getShortKey(el) } }) }}
|
||||
</div>
|
||||
</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"
|
||||
:data-depth="node.level"
|
||||
: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 { PropType } from "vue";
|
||||
import mixins from "vue-typed-mixins";
|
||||
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';
|
||||
import { externalHooks } from "@/components/mixins/externalHooks";
|
||||
|
||||
const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
|
||||
|
||||
export default mixins(externalHooks).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;
|
||||
|
||||
setTimeout(() => {
|
||||
const mappingTelemetry = this.$store.getters['ui/mappingTelemetry'];
|
||||
const telemetryPayload = {
|
||||
src_node_type: this.node.type,
|
||||
src_field_name: el.dataset.name || '',
|
||||
src_nodes_back: this.distanceFromActive,
|
||||
src_run_index: this.runIndex,
|
||||
src_runs_total: this.totalRuns,
|
||||
src_field_nest_level: el.dataset.depth || 0,
|
||||
src_view: 'json',
|
||||
src_element: el,
|
||||
success: false,
|
||||
...mappingTelemetry,
|
||||
};
|
||||
|
||||
this.$externalHooks().run('runDataJson.onDragEnd', telemetryPayload);
|
||||
|
||||
this.$telemetry.track('User dragged data for mapping', telemetryPayload);
|
||||
}, 1000); // ensure dest data gets set if drop
|
||||
},
|
||||
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-key {
|
||||
> span {
|
||||
color: var(--color-text-dark);
|
||||
line-height: 1.7;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: 0 var(--spacing-5xs) 0 var(--spacing-5xs);
|
||||
margin-right: var(--spacing-5xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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>
|
||||
215
packages/editor-ui/src/components/RunDataJsonActions.vue
Normal file
215
packages/editor-ui/src/components/RunDataJsonActions.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -18,14 +18,14 @@
|
|||
<th v-for="(column, i) in tableData.columns || []" :key="column">
|
||||
<n8n-tooltip
|
||||
placement="bottom-start"
|
||||
:disabled="!mappingEnabled || showHintWithDelay"
|
||||
:disabled="!mappingEnabled"
|
||||
:open-delay="1000"
|
||||
>
|
||||
<div slot="content">
|
||||
<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) },
|
||||
})
|
||||
}}
|
||||
|
|
@ -48,43 +48,23 @@
|
|||
:class="{
|
||||
[$style.header]: true,
|
||||
[$style.draggableHeader]: mappingEnabled,
|
||||
[$style.activeHeader]: (i === activeColumn || forceShowGrip) && mappingEnabled,
|
||||
[$style.activeHeader]: i === activeColumn && mappingEnabled,
|
||||
[$style.draggingHeader]: isDragging,
|
||||
}"
|
||||
>
|
||||
<span>{{ column || ' ' }}</span>
|
||||
<n8n-tooltip
|
||||
v-if="mappingEnabled"
|
||||
placement="bottom-start"
|
||||
:manual="true"
|
||||
:value="i === 0 && showHintWithDelay"
|
||||
>
|
||||
<div
|
||||
v-if="focusedMappableInput"
|
||||
slot="content"
|
||||
v-html="
|
||||
$locale.baseText('dataMapping.tableHint', {
|
||||
interpolate: { name: focusedMappableInput },
|
||||
})
|
||||
"
|
||||
></div>
|
||||
<div v-else slot="content">
|
||||
<img src='/static/data-mapping-gif.gif'/>
|
||||
{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
|
||||
</div>
|
||||
<div :class="$style.dragButton">
|
||||
<font-awesome-icon icon="grip-vertical" />
|
||||
</div>
|
||||
</n8n-tooltip>
|
||||
<div :class="$style.dragButton">
|
||||
<font-awesome-icon icon="grip-vertical" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
</draggable>
|
||||
</n8n-tooltip>
|
||||
</th>
|
||||
<th :class="$style.tableRightMargin"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<Draggable
|
||||
<draggable
|
||||
tag="tbody"
|
||||
type="mapping"
|
||||
targetDataKey="mappable"
|
||||
|
|
@ -99,7 +79,7 @@
|
|||
$locale.baseText(
|
||||
tableData.data.length > 1
|
||||
? 'dataMapping.mapAllKeysToField'
|
||||
: 'dataMapping.mapSpecificColumnToField',
|
||||
: 'dataMapping.mapKeyToField',
|
||||
{
|
||||
interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
|
||||
},
|
||||
|
|
@ -148,7 +128,7 @@
|
|||
<td :class="$style.tableRightMargin"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</Draggable>
|
||||
</draggable>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -156,24 +136,23 @@
|
|||
<script lang="ts">
|
||||
/* eslint-disable prefer-spread */
|
||||
|
||||
import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
|
||||
import Vue, { PropType } from 'vue';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
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';
|
||||
|
||||
export default mixins(externalHooks).extend({
|
||||
name: 'RunDataTable',
|
||||
name: 'run-data-table',
|
||||
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,
|
||||
|
|
@ -181,9 +160,6 @@ export default mixins(externalHooks).extend({
|
|||
distanceFromActive: {
|
||||
type: Number,
|
||||
},
|
||||
showMappingHint: {
|
||||
type: Boolean,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
},
|
||||
|
|
@ -194,8 +170,6 @@ export default mixins(externalHooks).extend({
|
|||
data() {
|
||||
return {
|
||||
activeColumn: -1,
|
||||
showHintWithDelay: false,
|
||||
forceShowGrip: false,
|
||||
draggedColumn: false,
|
||||
draggingPath: null as null | string,
|
||||
hoveringPath: null as null | string,
|
||||
|
|
@ -203,21 +177,6 @@ export default mixins(externalHooks).extend({
|
|||
};
|
||||
},
|
||||
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 data mapping tooltip', { type: 'param focus' });
|
||||
}, 500);
|
||||
}
|
||||
|
||||
if (this.tableData && this.tableData.columns && this.$refs.draggable) {
|
||||
const tbody = (this.$refs.draggable as Vue).$refs.wrapper as HTMLElement;
|
||||
if (tbody) {
|
||||
|
|
@ -231,17 +190,6 @@ export default mixins(externalHooks).extend({
|
|||
tableData(): ITableData {
|
||||
return this.convertToTable(this.inputData);
|
||||
},
|
||||
focusedMappableInput(): string {
|
||||
return this.$store.getters['ui/focusedMappableInput'];
|
||||
},
|
||||
showHint(): boolean {
|
||||
return (
|
||||
!this.draggedColumn &&
|
||||
((this.showMappingHint && this.mappingHintVisible) ||
|
||||
(!!this.focusedMappableInput &&
|
||||
window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'))
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
shorten,
|
||||
|
|
@ -459,32 +407,23 @@ export default mixins(externalHooks).extend({
|
|||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
focusedMappableInput(curr: boolean) {
|
||||
setTimeout(
|
||||
() => {
|
||||
this.forceShowGrip = !!this.focusedMappableInput;
|
||||
},
|
||||
curr ? 300 : 150,
|
||||
);
|
||||
},
|
||||
showHint(curr: boolean, prev: boolean) {
|
||||
if (curr) {
|
||||
setTimeout(() => {
|
||||
this.showHintWithDelay = this.showHint;
|
||||
if (this.showHintWithDelay) {
|
||||
this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.showHintWithDelay = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
5
packages/editor-ui/src/declarations/vue-json-pretty.d.ts
vendored
Normal file
5
packages/editor-ui/src/declarations/vue-json-pretty.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
declare module 'vue-json-pretty' {
|
||||
import { Component } from 'vue';
|
||||
const vueJsonPretty: Component;
|
||||
export default vueJsonPretty;
|
||||
}
|
||||
|
|
@ -117,9 +117,15 @@ const module: Module<IUiState, IRootState> = {
|
|||
sessionId: '',
|
||||
input: {
|
||||
displayMode: 'table',
|
||||
data: {
|
||||
isEmpty: true,
|
||||
},
|
||||
},
|
||||
output: {
|
||||
displayMode: 'table',
|
||||
data: {
|
||||
isEmpty: true,
|
||||
},
|
||||
editMode: {
|
||||
enabled: false,
|
||||
value: '',
|
||||
|
|
@ -224,6 +230,7 @@ const module: Module<IUiState, IRootState> = {
|
|||
mappingTelemetry: (state: IUiState) => state.ndv.mappingTelemetry,
|
||||
getCurrentView: (state: IUiState) => state.currentView,
|
||||
isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView),
|
||||
getNDVDataIsEmpty: (state: IUiState) => (panel: 'input' | 'output'): boolean => state.ndv[panel].data.isEmpty,
|
||||
},
|
||||
mutations: {
|
||||
setMainPanelDimensions: (state: IUiState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
|
||||
|
|
@ -330,6 +337,9 @@ const module: Module<IUiState, IRootState> = {
|
|||
resetMappingTelemetry(state: IUiState) {
|
||||
state.ndv.mappingTelemetry = {};
|
||||
},
|
||||
setNDVPanelDataIsEmpty(state: IUiState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
|
||||
Vue.set(state.ndv[payload.panel].data, 'isEmpty', payload.isEmpty);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
"_reusableBaseText.cancel": "Cancel",
|
||||
"_reusableBaseText.name": "Name",
|
||||
"_reusableBaseText.save": "Save",
|
||||
"_reusableBaseText.dismiss": "Dismiss",
|
||||
"_reusableDynamicText.readMore": "Read more",
|
||||
"_reusableDynamicText.learnMore": "Learn more",
|
||||
"_reusableDynamicText.moreInfo": "More info",
|
||||
|
|
@ -212,11 +213,12 @@
|
|||
"dataDisplay.nodeDocumentation": "Node Documentation",
|
||||
"dataDisplay.openDocumentationFor": "Open {nodeTypeDisplayName} documentation",
|
||||
"dataMapping.dragColumnToFieldHint": "Drag onto a field to map column to that field",
|
||||
"dataMapping.dragFromPreviousHint": "Map data from previous nodes to <b>{name}</b><br/> by first clicking this button",
|
||||
"dataMapping.dragFromPreviousHint": "Map data from previous nodes to <b>{name}</b> by first clicking this button",
|
||||
"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.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data",
|
||||
"dataMapping.mapKeyToField": "Map '{name}' to a field",
|
||||
"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
|
||||
"displayWithChange.cancelEdit": "Cancel Edit",
|
||||
"displayWithChange.clickToChange": "Click to Change",
|
||||
|
|
|
|||
|
|
@ -44,3 +44,15 @@ export function sanitizeHtml(dirtyHtml: string) {
|
|||
|
||||
return sanitizedHtml;
|
||||
}
|
||||
|
||||
export const isEmpty = (value?: unknown): boolean => {
|
||||
if (!value && value !== 0) return true;
|
||||
if(Array.isArray(value)){
|
||||
if(!value.length) return true;
|
||||
return value.every(isEmpty);
|
||||
}
|
||||
if (typeof value === 'object') {
|
||||
return Object.values(value).every(isEmpty);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue