feat(editor): Display schema preview for unexecuted nodes

packages/editor-ui/src/Interface.ts

@@ -740,6 +740,8 @@ export interface CreateElementBase {
 export interface NodeCreateElement extends CreateElementBase {
 	type: 'node';
 	subcategory: string;
+	resource?: string;
+	operation?: string;
 	properties: SimplifiedNodeType;
 }
 

packages/editor-ui/src/api/schemaPreview.ts

@@ -0,0 +1,28 @@
+import { request } from '@/utils/apiUtils';
+import type { Schema } from '@/Interface';
+
+export type GetSchemaPreviewOptions = {
+	nodeName: string;
+	version: number;
+	resource?: string;
+	operation?: string;
+};
+
+const padVersion = (version: number) => {
+	return version.toString().split('.').concat(['0', '0']).slice(0, 3).join('.');
+};
+
+export const getSchemaPreview = async (
+	baseUrl: string,
+	options: GetSchemaPreviewOptions,
+): Promise<Schema> => {
+	const { nodeName, version, resource, operation } = options;
+	const versionString = padVersion(version);
+	const path = ['schemas', nodeName, versionString, resource, operation].filter(Boolean).join('/');
+	return await request({
+		method: 'GET',
+		baseURL: baseUrl,
+		endpoint: `${path}.json`,
+		withCredentials: false,
+	});
+};

packages/editor-ui/src/components/RunData.vue

@@ -27,6 +27,7 @@ import type {
 } from '@/Interface';
 
 import {
+	CORE_NODES_CATEGORY,
 	DATA_EDITING_DOCS_URL,
 	DATA_PINNING_DOCS_URL,
 	HTML_NODE_TYPE,
@@ -35,6 +36,7 @@ import {
 	MAX_DISPLAY_DATA_SIZE,
 	MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW,
 	NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND,
+	SCHEMA_PREVIEW_EXPERIMENT,
 	TEST_PIN_DATA,
 } from '@/constants';
 
@@ -81,6 +83,9 @@ import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
 import { useUIStore } from '@/stores/ui.store';
+import { useSchemaPreviewStore } from '@/stores/schemaPreview.store';
+import { asyncComputed } from '@vueuse/core';
+import { usePostHog } from '@/stores/posthog.store';
 
 const LazyRunDataTable = defineAsyncComponent(
 	async () => await import('@/components/RunDataTable.vue'),
@@ -181,6 +186,8 @@ const workflowsStore = useWorkflowsStore();
 const sourceControlStore = useSourceControlStore();
 const rootStore = useRootStore();
 const uiStore = useUIStore();
+const schemaPreviewStore = useSchemaPreviewStore();
+const posthogStore = usePostHog();
 
 const toast = useToast();
 const route = useRoute();
@@ -544,6 +551,31 @@ const hasInputOverwrite = computed((): boolean => {
 	return Boolean(taskData?.inputOverride);
 });
 
+const isSchemaPreviewEnabled = computed(
+	() =>
+		props.paneType === 'input' &&
+		!(nodeType.value?.codex?.categories ?? []).some(
+			(category) => category === CORE_NODES_CATEGORY,
+		) &&
+		posthogStore.isFeatureEnabled(SCHEMA_PREVIEW_EXPERIMENT),
+);
+
+const hasPreviewSchema = asyncComputed(async () => {
+	if (!node.value || !isSchemaPreviewEnabled.value) return false;
+	const {
+		type,
+		typeVersion,
+		parameters: { resource, operation },
+	} = node.value;
+	const preview = await schemaPreviewStore.getSchemaPreview({
+		nodeName: type,
+		version: typeVersion,
+		resource: resource as string,
+		operation: operation as string,
+	});
+	return preview.ok;
+}, false);
+
 watch(node, (newNode, prevNode) => {
 	if (newNode?.id === prevNode?.id) return;
 	init();
@@ -1346,7 +1378,8 @@ defineExpose({ enterEditMode });
 
 				<N8nRadioButtons
 					v-show="
-						hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled
+						hasPreviewSchema ||
+						(hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled)
 					"
 					:model-value="displayMode"
 					:options="displayModes"
@@ -1589,7 +1622,7 @@ defineExpose({ enterEditMode });
 			</div>
 
 			<div
-				v-else-if="!hasNodeRun && !(displaysMultipleNodes && node?.disabled)"
+				v-else-if="!hasNodeRun && !(displaysMultipleNodes && node?.disabled) && !hasPreviewSchema"
 				:class="$style.center"
 			>
 				<slot name="node-not-run"></slot>
@@ -1780,7 +1813,7 @@ defineExpose({ enterEditMode });
 				<LazyRunDataHtml :input-html="inputHtml" />
 			</Suspense>
 
-			<Suspense v-else-if="hasNodeRun && isSchemaView">
+			<Suspense v-else-if="(hasNodeRun || hasPreviewSchema) && isSchemaView">
 				<LazyRunDataSchema
 					:nodes="nodes"
 					:mapping-enabled="mappingEnabled"