admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 18:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Add variables and context section to schema view (#13875)

Browse Source
This commit is contained in:
Elias Meire
2025-03-19 17:18:54 +01:00
committed by GitHub
parent 3f10a50b21
commit c06ce765f1
12 changed files with 1573 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
packages/frontend/editor-ui/src/components/VirtualSchema.vue
View File

@@ -1,38 +1,53 @@
<script lang="ts" setup>
import { computed, watch, ref } from 'vue';
import type { INodeUi } from '@/Interface';
import VirtualSchemaItem from '@/components/VirtualSchemaItem.vue';
import VirtualSchemaHeader from '@/components/VirtualSchemaHeader.vue';
import { N8nText } from '@n8n/design-system';
import Draggable from '@/components/Draggable.vue';
import { useNDVStore } from '@/stores/ndv.store';
import VirtualSchemaHeader from '@/components/VirtualSchemaHeader.vue';
import VirtualSchemaItem from '@/components/VirtualSchemaItem.vue';
import {
useDataSchema,
useFlattenSchema,
type RenderHeader,
type RenderNotice,
type Renders,
type SchemaNode,
} from '@/composables/useDataSchema';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useI18n } from '@/composables/useI18n';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useTelemetry } from '@/composables/useTelemetry';
import { useNDVStore } from '@/stores/ndv.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { executionDataToJson } from '@/utils/nodeTypesUtils';
import { N8nText } from '@n8n/design-system';
import {
createResultError,
NodeConnectionType,
type IConnectedNode,
type IDataObject,
} from 'n8n-workflow';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useI18n } from '@/composables/useI18n';
import MappingPill from './MappingPill.vue';
import { useDataSchema, useFlattenSchema, type SchemaNode } from '@/composables/useDataSchema';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { executionDataToJson } from '@/utils/nodeTypesUtils';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { computed, ref, watch } from 'vue';
import {
DynamicScroller,
DynamicScrollerItem,
type RecycleScrollerInstance,
} from 'vue-virtual-scroller';
import MappingPill from './MappingPill.vue';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { useSchemaPreviewStore } from '@/stores/schemaPreview.store';
import { asyncComputed } from '@vueuse/core';
import {
EnterpriseEditionFeature,
PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
SCHEMA_PREVIEW_EXPERIMENT,
} from '@/constants';
import useEnvironmentsStore from '@/stores/environments.ee.store';
import { usePostHog } from '@/stores/posthog.store';
import { SCHEMA_PREVIEW_EXPERIMENT } from '@/constants';
import { useSchemaPreviewStore } from '@/stores/schemaPreview.store';
import { useSettingsStore } from '@/stores/settings.store';
import { isEmpty } from '@/utils/typesUtils';
import { asyncComputed } from '@vueuse/core';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { pick } from 'lodash-es';
import { DateTime } from 'luxon';
type Props = {
nodes?: IConnectedNode[];
@@ -66,8 +81,11 @@ const ndvStore = useNDVStore();
const nodeTypesStore = useNodeTypesStore();
const workflowsStore = useWorkflowsStore();
const schemaPreviewStore = useSchemaPreviewStore();
const environmentsStore = useEnvironmentsStore();
const settingsStore = useSettingsStore();
const posthogStore = usePostHog();
const { getSchemaForExecutionData, getSchemaForJsonSchema, filterSchema } = useDataSchema();
const { getSchemaForExecutionData, getSchemaForJsonSchema, getSchema, filterSchema } =
useDataSchema();
const { closedNodes, flattenSchema, flattenMultipleSchemas, toggleLeaf, toggleNode } =
useFlattenSchema();
const { getNodeInputData } = useNodeHelpers();
@@ -83,14 +101,6 @@ const toggleNodeAndScrollTop = (id: string) => {
scroller.value?.scrollToItem(0);
};
watch(
() => props.search,
(newSearch) => {
if (!newSearch) return;
closedNodes.value.clear();
},
);
const getNodeSchema = async (fullNode: INodeUi, connectedNode: IConnectedNode) => {
const pinData = workflowsStore.pinDataByNodeName(connectedNode.name);
const connectedOutputIndexes = connectedNode.indicies.length > 0 ? connectedNode.indicies : [0];
@@ -133,6 +143,74 @@ const isSchemaPreviewEnabled = computed(() =>
posthogStore.isVariantEnabled(SCHEMA_PREVIEW_EXPERIMENT.name, SCHEMA_PREVIEW_EXPERIMENT.variant),
);
const isVariablesEnabled = computed(
() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Variables],
);
const contextSchema = computed(() => {
const $vars = environmentsStore.variablesAsObject;
const schemaSource: Record<string, unknown> = {
$now: DateTime.now().toISO(),
$today: DateTime.now().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toISO(),
$vars,
$execution: {
id: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
mode: 'test',
resumeUrl: i18n.baseText('dataMapping.schemaView.execution.resumeUrl'),
},
$workflow: pick(workflowsStore.workflow, ['id', 'name', 'active']),
};
return getSchema(schemaSource);
});
const contextItems = computed(() => {
const header: RenderHeader = {
id: 'variables',
type: 'header',
title: i18n.baseText('dataMapping.schemaView.variablesContextTitle'),
collapsable: true,
itemCount: null,
};
if (closedNodes.value.has(header.id)) return [header];
const fields: Renders[] = flattenSchema({
schema: contextSchema.value,
depth: 1,
}).flatMap((renderItem) => {
const isVars =
renderItem.type === 'item' && renderItem.depth === 1 && renderItem.title === '$vars';
if (isVars) {
const isVarsOpen = !closedNodes.value.has(renderItem.id);
if (!isVariablesEnabled.value) {
renderItem.collapsable = false;
renderItem.locked = true;
renderItem.lockedTooltip = i18n.baseText('dataMapping.schemaView.variablesUpgrade');
return renderItem;
}
if (isVarsOpen && environmentsStore.variables.length === 0) {
const variablesEmptyNotice: RenderNotice = {
type: 'notice',
id: 'notice-variablesEmpty',
level: renderItem.level ?? 0,
message: i18n.baseText('dataMapping.schemaView.variablesEmpty'),
};
return [renderItem, variablesEmptyNotice];
}
}
return renderItem;
});
return [header as Renders].concat(fields);
});
const nodeSchema = asyncComputed(async () => {
const search = props.search;
if (props.data.length === 0 && isSchemaPreviewEnabled.value) {
@@ -231,13 +309,34 @@ const items = computed(() => {
return flattenNodeSchema.value;
}
return flattenedNodes.value;
return flattenedNodes.value.concat(contextItems.value);
});
const noSearchResults = computed(() => {
return Boolean(props.search.trim()) && !Boolean(items.value.length);
});
watch(
() => props.search,
(newSearch) => {
if (!newSearch) return;
closedNodes.value.clear();
},
);
// Variables & context items should be collapsed by default
watch(
contextItems,
(currentContextItems) => {
currentContextItems
.filter((item) => item.type === 'header')
.forEach((item) => {
closedNodes.value.add(item.id);
});
},
{ once: true, immediate: true },
);
const onDragStart = () => {
ndvStore.resetMappingTelemetry();
};
@@ -332,6 +431,13 @@ const onDragEnd = (el: HTMLElement) => {
<N8nTooltip v-else-if="item.type === 'icon'" :content="item.tooltip" placement="top">
<N8nIcon :size="14" :icon="item.icon" class="icon" />
</N8nTooltip>
<div
v-else-if="item.type === 'notice'"
v-n8n-html="item.message"
class="notice"
:style="{ marginLeft: `calc(var(--spacing-l) + var(--spacing-l) * ${item.level})` }"
/>
</DynamicScrollerItem>
</template>
</DynamicScroller>
@@ -370,4 +476,11 @@ const onDragEnd = (el: HTMLElement) => {
color: var(--color-text-light);
margin-bottom: var(--spacing-s);
}
.notice {
padding-bottom: var(--spacing-xs);
color: var(--color-text-base);
font-size: var(--font-size-2xs);
line-height: var(--font-line-height-loose);
}
</style>