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
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user