wip commit

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

View file

@ -17,6 +17,11 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useElementSize } from '@vueuse/core'; import { useElementSize } from '@vueuse/core';
import { N8nIconButton } from 'n8n-design-system'; import { N8nIconButton } from 'n8n-design-system';
import { useExecutionHelpers } from '@/composables/useExecutionHelpers'; import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
import { useI18n } from '@/composables/useI18n';
import _ from 'lodash-es';
const i18n = useI18n();
const { openRelatedExecution } = useExecutionHelpers(); const { openRelatedExecution } = useExecutionHelpers();
@ -24,6 +29,8 @@ const LazyRunDataJsonActions = defineAsyncComponent(
async () => await import('@/components/RunDataJsonActions.vue'), async () => await import('@/components/RunDataJsonActions.vue'),
); );
const SUBWORKLOW_BUTTON_MARKER = 'o12u312o03u123u138u1239812u31983u12938u12893u1_BUTTON_MARKER';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
editMode: { enabled?: boolean; value?: string }; editMode: { enabled?: boolean; value?: string };
@ -55,7 +62,17 @@ const jsonDataContainer = ref(null);
const { height } = useElementSize(jsonDataContainer); const { height } = useElementSize(jsonDataContainer);
const jsonData = computed(() => { 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(() => { const firstKey = computed(() => {
@ -122,6 +139,14 @@ const getContent = (value: unknown) => {
const getListItemName = (path: string) => { const getListItemName = (path: string) => {
return path.replace(/^(\["?\d"?]\.?)/g, ''); 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> </script>
<template> <template>
@ -161,7 +186,17 @@ const getListItemName = (path: string) => {
@update:selected-value="selectedJsonPath = $event" @update:selected-value="selectedJsonPath = $event"
> >
<template #renderNodeKey="{ node, defaultKey }"> <template #renderNodeKey="{ node, defaultKey }">
<div v-if="firstKey === defaultKey" :class="[$style.parentHoverShow, $style.goToButton]"> <div v-if="isMarkerNode(node, inputData)" :class="$style.emptyElement">
<N8nIconButton
type="secondary"
icon="external-link-alt"
data-test-id="debug-sub-execution"
size="mini"
@click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
/>
</div>
<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} node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
--> -->
@ -186,17 +221,22 @@ const getListItemName = (path: string) => {
:class="{ :class="{
[$style.mappable]: mappingEnabled, [$style.mappable]: mappingEnabled,
[$style.dragged]: draggingPath === node.path, [$style.dragged]: draggingPath === node.path,
[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
}" }"
/> />
</div>
</template> </template>
<template #renderNodeValue="{ node }"> <template #renderNodeValue="{ node }">
<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 <TextWithHighlights
v-if="isNaN(node.index)" v-if="isNaN(node.index)"
:content="getContent(node.content)" :content="getContent(node.content)"
:search="search" :search="search"
/> />
<TextWithHighlights <TextWithHighlights
v-else
:content="getContent(node.content)" :content="getContent(node.content)"
:search="search" :search="search"
data-target="mappable" data-target="mappable"
@ -207,9 +247,11 @@ const getListItemName = (path: string) => {
:class="{ :class="{
[$style.mappable]: mappingEnabled, [$style.mappable]: mappingEnabled,
[$style.dragged]: draggingPath === node.path, [$style.dragged]: draggingPath === node.path,
[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
}" }"
class="ph-no-capture" class="ph-no-capture"
/> />
</div>
</template> </template>
</VueJsonPretty> </VueJsonPretty>
</Draggable> </Draggable>
@ -255,8 +297,22 @@ const getListItemName = (path: string) => {
.goToButton { .goToButton {
position: absolute; 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 // 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 { *:not(:hover) > * > .parentHoverShow {
// display: none; // display: none;
} }
.emptyElement {
display: inline-flex;
}
</style> </style>
<style lang="scss"> <style lang="scss">