mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

wip commit

Browse source
This commit is contained in:
Charlie Kolb 2024-11-14 12:54:03 +01:00
parent 66b6ca4cc0
commit b54a31d8ef
No known key found for this signature in database
1 changed files with 102 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -17,6 +17,11 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useElementSize } from '@vueuse/core';
import { N8nIconButton } from 'n8n-design-system';
import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
import { useI18n } from '@/composables/useI18n';
import _ from 'lodash-es';
const i18n = useI18n();
const { openRelatedExecution } = useExecutionHelpers();
@ -24,6 +29,8 @@ const LazyRunDataJsonActions = defineAsyncComponent(
async () => await import('@/components/RunDataJsonActions.vue'),
);
const SUBWORKLOW_BUTTON_MARKER = 'o12u312o03u123u138u1239812u31983u12938u12893u1_BUTTON_MARKER';
const props = withDefaults(
defineProps<{
editMode: { enabled?: boolean; value?: string };
@ -55,7 +62,17 @@ const jsonDataContainer = ref(null);
const { height } = useElementSize(jsonDataContainer);
const jsonData = computed(() => {
return executionDataToJson(props.inputData);
const x = executionDataToJson(props.inputData).map((x, i) =>
_.isEmpty(x)
? props.inputData[i].metadata
? {
[SUBWORKLOW_BUTTON_MARKER]: '',
}
: {}
: x,
);
console.log(x);
return x;
});
const firstKey = computed(() => {
@ -122,6 +139,14 @@ const getContent = (value: unknown) => {
const getListItemName = (path: string) => {
return path.replace(/^(\["?\d"?]\.?)/g, '');
};
function isMarkerNode(node: any, inputData: any) {
return (
node.key === SUBWORKLOW_BUTTON_MARKER &&
!isNaN(node.path[1]) &&
inputData[Number(node.path[1])].metadata
);
}
</script>
<template>
@ -161,55 +186,72 @@ const getListItemName = (path: string) => {
@update:selected-value="selectedJsonPath = $event"
>
<template #renderNodeKey="{ node, defaultKey }">
<div v-if="firstKey === defaultKey" :class="[$style.parentHoverShow, $style.goToButton]">
<!--
node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
-->
<div v-if="isMarkerNode(node, inputData)" :class="$style.emptyElement">
<N8nIconButton
v-if="!isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata"
type="secondary"
icon="external-link-alt"
data-test-id="debug-sub-execution"
size="mini"
@click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
/>
<!-- ^--- may want to stop event propagation so the row in the json component doesn't end up selected-->
</div>
<TextWithHighlights
:content="getContent(node.key)"
:search="search"
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,
}"
/>
<div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
<div v-if="firstKey === defaultKey" :class="$style.goToButton">
<!--
node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
-->
<N8nIconButton
v-if="!isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata"
type="secondary"
icon="external-link-alt"
data-test-id="debug-sub-execution"
size="mini"
@click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
/>
<!-- ^--- may want to stop event propagation so the row in the json component doesn't end up selected-->
</div>
<TextWithHighlights
:content="getContent(node.key)"
:search="search"
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,
[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
}"
/>
</div>
</template>
<template #renderNodeValue="{ node }">
<TextWithHighlights
v-if="isNaN(node.index)"
:content="getContent(node.content)"
:search="search"
/>
<TextWithHighlights
v-else
:content="getContent(node.content)"
:search="search"
data-target="mappable"
:data-value="getJsonParameterPath(node.path)"
:data-name="getListItemName(node.path)"
:data-path="node.path"
:data-depth="node.level"
:class="{
[$style.mappable]: mappingEnabled,
[$style.dragged]: draggingPath === node.path,
}"
class="ph-no-capture"
/>
<div v-if="node.key === SUBWORKLOW_BUTTON_MARKER" :class="$style.emptyElement">
<N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
</div>
<div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
<TextWithHighlights
v-if="isNaN(node.index)"
:content="getContent(node.content)"
:search="search"
/>
<TextWithHighlights
:content="getContent(node.content)"
:search="search"
data-target="mappable"
:data-value="getJsonParameterPath(node.path)"
:data-name="getListItemName(node.path)"
:data-path="node.path"
:data-depth="node.level"
:class="{
[$style.mappable]: mappingEnabled,
[$style.dragged]: draggingPath === node.path,
[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
}"
class="ph-no-capture"
/>
</div>
</template>
</VueJsonPretty>
</Draggable>
@ -255,8 +297,22 @@ const getListItemName = (path: string) => {
.goToButton {
position: absolute;
top: -25px;
left: 35px;
// above
// top: -22px;
// left: 30px;
// left
left: 20px;
top: 3px;
// right
// right: 18px; // probably small button rather than mini?
}
.offset {
// left
margin-left: 18px;
}
// trouble here is that the Tree holds all rows as direct children, so we either show hover on first
@ -265,6 +321,10 @@ const getListItemName = (path: string) => {
*:not(:hover) > * > .parentHoverShow {
// display: none;
}
.emptyElement {
display: inline-flex;
}
</style>
<style lang="scss">