should render correctly as tooltip 1`] = `
"
"
`;
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index a2b4112b02..62ad2a13c3 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,7 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 4bc642e549..7a2c9ea6e6 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -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
diff --git a/packages/design-system/src/types/button.ts b/packages/design-system/src/types/button.ts
new file mode 100644
index 0000000000..930db154bc
--- /dev/null
+++ b/packages/design-system/src/types/button.ts
@@ -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
void>
+};
diff --git a/packages/design-system/src/types/index.ts b/packages/design-system/src/types/index.ts
index 20b5b9aa9f..a9602f5874 100644
--- a/packages/design-system/src/types/index.ts
+++ b/packages/design-system/src/types/index.ts
@@ -1,2 +1,3 @@
export * from './form';
export * from './user';
+export * from './button';
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 9f0f70b9fb..3481d4614a 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",
@@ -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",
diff --git a/packages/editor-ui/public/static/json-mapping-gif.gif b/packages/editor-ui/public/static/json-mapping-gif.gif
new file mode 100644
index 0000000000..80701be92a
Binary files /dev/null and b/packages/editor-ui/public/static/json-mapping-gif.gif differ
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 2521f1cabc..c38766fd29 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -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;
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index 7e1f771f84..a10d82da87 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;
}
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 81094fd8fd..4eba8703ef 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -32,11 +32,10 @@
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 6c910cf313..d760236a06 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -131,37 +131,9 @@
-
-
-
-
-
-
-
- {{ $locale.baseText('runData.copyValue') }}
-
-
- {{ $locale.baseText('runData.copyItemPath') }}
-
-
- {{ $locale.baseText('runData.copyParameterPath') }}
-
-
-
-
-
{{ executingMessage }}
@@ -239,25 +211,34 @@
-
-
-
+
-
-
-
+
{{ $locale.baseText('runData.noBinaryDataFound') }}
@@ -338,8 +319,9 @@
+
+
+
+
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
new file mode 100644
index 0000000000..e160cb25e5
--- /dev/null
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -0,0 +1,215 @@
+
+
+
+
+
+
+
+
+ {{ $locale.baseText('runData.copyValue') }}
+
+
+ {{ $locale.baseText('runData.copyItemPath') }}
+
+
+ {{ $locale.baseText('runData.copyParameterPath') }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 13e3d0ad59..e725e67787 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -1,5 +1,5 @@
-
+
|
@@ -18,14 +18,14 @@
{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
-
{{
- $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,
}"
>
{{ column || ' ' }}
-
-
-
-
- {{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
-
-
-
-
+
+
+
-
+
|
|
- 1
? 'dataMapping.mapAllKeysToField'
- : 'dataMapping.mapSpecificColumnToField',
+ : 'dataMapping.mapKeyToField',
{
interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
},
@@ -148,7 +128,7 @@
|
-
+
@@ -156,24 +136,23 @@