feat(editor): Schema view (#4615)

* feat(editor): Generate custom schema from data (#4562)

* feat(core): adding a type package to n8n

* feat(editor): adding custom schema generator

* fix: add new types package to lock file

* fix: remove n8n_io/types package

* fix: adding path to generated schema

* fix: handling nested lists in schema generation

* fix: add date support to schema generation

* fix: define dates in ISO format

* fix: using test instead of it in repeated tests

* fix(editor): JSON schema treat nested lists as object to allow mapping each level

* fix(editor): rename JSON schema type

* fix(editor): make JSON schema path required

* fix(editor): using JSON schema bracket notation for object props to handle exceptional keys

* fix(editor): reorder JSON schema generator function args

* feat(editor): Add date recognizer util function (#4620)

* ✨ Implemented date recogniser fuction
* ✅ Added unit tests for date recogniser
* ✔️ Fixing linting errors
* 👌 Updating test cases

* feat(editor): Implement JSON Schema view UI functionalities (#4601)

* feat(core): adding a type package to n8n

* feat(editor): adding custom schema generator

* fix: add new types package to lock file

* fix: remove n8n_io/types package

* fix: adding path to generated schema

* fix: handling nested lists in schema generation

* fix: add date support to schema generation

* fix: define dates in ISO format

* fix: using test instead of it in repeated tests

* fix(editor): JSON schema treat nested lists as object to allow mapping each level

* fix(editor): rename JSON schema type

* fix(editor): make JSON schema path required

* fix(editor): using JSON schema bracket notation for object props to handle exceptional keys

* fix(editor): reorder JSON schema generator function args

* fix(editor): WIP json schema view

* fix(editor): formatting fix

* fix(editor): WIP json schema viewer

* fix(editor): fix schema generator and add deep merge

* fix(editor): WIP update json schema view components

* fix(editor): extend valid date checking

* fix(editor): WIP improving JSON schema view

* chore(editor): code formatting

* feat(editor): WIP Json schema view mapping + animations

* feat(editor): WIP update mergeDeep

* feat(editor): adding first item of json data to the end once more to get sample data from the first item

* feat(editor): adding first item of json data to the end once more to get sample data from the first item

* fix(editor): improving draggable design

* fix(editor): move util functions to their correct place after merge conflict

* fix(editor): move some type guards

* fix(editor): move some type guards

* fix(editor): change import path in unit test

* fix(editor): import missing interface

* fix(editor): remove unused functions and parts from json schema generation

* feat(editor): Add telemetry calls to JSON schema mapping (#4695)

* feat(editor): WIP JSON schema telemetry call

* feat(editor): make telemetry usable outside of Vue component context

* chore(editor): remove unused variable

* Merge branch 'feature/json-schema-view' of github.com:n8n-io/n8n into n8n-5410-add-telemetry-calls

# Conflicts:
#	packages/editor-ui/src/components/RunDataJsonSchema.vue

* fix(editor): VUE typing for telemetry

* fix(editor): enable PostHog feature flag

* fix(editor): Schema design review (#4740)

* refactor(editor): rename JsonSchema to Schema

* fix(editor): schema component name

* fix(editor): schema pill style

* fix(editor): schema type date as string

* fix(editor): schema styles (support long text + firefox)

* fix(editor): schema truncate text if it's too long

* fix(editor): schema types

* fix(editor): droppable styles

* fix(editor): schema component props

* fix(editor): fix draggable pill styles

* fix(editor): schema view styles

* fix(editor): schema mapping tooltip

* fix(editor): schema mapping styles

* fix(editor): mapping styles

* fix(editor): empty schema case

* fix(editor): delay mapping tooltip

* test(editor): add schema view snapshot test

* fix(editor): schema empty string

* fix(editor): schema string without space

* fix(editor): update schema test snapshot

* fix(editor): applying review comments

* fix(editor): make n8nExternalHooks optional

* fix(editor): remove TODO comment

Co-authored-by: Milorad FIlipović <milorad@n8n.io>

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

@@ -121,7 +121,7 @@
 			<slot name="run-info"></slot>
 		</div>
 
-		<div v-if="maxOutputIndex > 0 && branches.length > 1" :class="{[$style.tabs]: displayMode === 'table'}">
+		<div v-if="maxOutputIndex > 0 && branches.length > 1" :class="$style.tabs">
 			<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
 		</div>
 
@@ -249,6 +249,16 @@
 				:totalRuns="maxRunIndex"
 			/>
 
+			<run-data-schema
+				v-else-if="hasNodeRun && displayMode === 'schema' && jsonData?.length > 0"
+				:data="jsonData"
+				:mappingEnabled="mappingEnabled"
+				:distanceFromActive="distanceFromActive"
+				:node="node"
+				: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>
 			</div>
@@ -351,6 +361,7 @@ import {
 	INodeUpdatePropertiesInformation,
 	IRunDataDisplayMode,
 	ITab,
+	NodePanelType,
 } from '@/Interface';
 
 import {
@@ -382,6 +393,7 @@ import { useNodeTypesStore } from "@/stores/nodeTypes";
 
 const RunDataTable = () => import('@/components/RunDataTable.vue');
 const RunDataJson = () => import('@/components/RunDataJson.vue');
+const RunDataSchema = () => import('@/components/RunDataSchema.vue');
 
 export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink',
@@ -402,6 +414,7 @@ export default mixins(
 			CodeEditor,
 			RunDataTable,
 			RunDataJson,
+			RunDataSchema,
 		},
 		props: {
 			nodeUi: {
@@ -432,7 +445,7 @@ export default mixins(
 				type: String,
 			},
 			paneType: {
-				type: String,
+				type: String as PropType<NodePanelType>,
 			},
 			overrideOutputs: {
 				type: Array as PropType<number[]>,
@@ -513,7 +526,7 @@ export default mixins(
 				return DATA_EDITING_DOCS_URL;
 			},
 			displayMode(): IRunDataDisplayMode {
-				return this.ndvStore.getPanelDisplayMode(this.paneType as "input" | "output");
+				return this.ndvStore.getPanelDisplayMode(this.paneType);
 			},
 			node(): INodeUi | null {
 				return (this.nodeUi as INodeUi | null) || null;
@@ -537,10 +550,13 @@ export default mixins(
 					{ label: this.$locale.baseText('runData.table'), value: 'table'},
 					{ label: this.$locale.baseText('runData.json'), value: 'json'},
 				];
+
 				if (this.binaryData.length) {
-					return [ ...defaults,
-						{ label: this.$locale.baseText('runData.binary'), value: 'binary'},
-					];
+					defaults.push({ label: this.$locale.baseText('runData.binary'), value: 'binary'});
+				}
+
+				if (this.isPaneTypeInput && window.posthog?.isFeatureEnabled?.('schema-view')) {
+					defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema'});
 				}
 
 				return defaults;
@@ -957,7 +973,7 @@ export default mixins(
 			},
 			onDisplayModeChange(displayMode: IRunDataDisplayMode) {
 				const previous = this.displayMode;
-				this.ndvStore.setPanelDisplayMode({pane: this.paneType as "input" | "output", mode: displayMode});
+				this.ndvStore.setPanelDisplayMode({pane: this.paneType, mode: displayMode});
 
 				const dataContainer = this.$refs.dataContainer;
 				if (dataContainer) {