fix(editor): Tweak schema view empty state copy and styling (#13819)

cypress/e2e/5-ndv.cy.ts

@@ -911,7 +911,7 @@ describe('NDV', () => {
 		ndv.getters.outputPanel().find('[data-test-id=ndv-search]').click().type('foo');
 		ndv.getters
 			.outputPanel()
-			.contains('To search field contents rather than just names, use Table or JSON view')
+			.contains('To search field values, switch to table or JSON view.')
 			.should('exist');
 	});
 

packages/frontend/editor-ui/src/components/VirtualSchema.vue

@@ -133,15 +133,16 @@ const isSchemaPreviewEnabled = computed(() =>
 );
 
 const nodeSchema = asyncComputed(async () => {
+	const search = props.search;
 	if (props.data.length === 0 && isSchemaPreviewEnabled.value) {
 		const previewSchema = await getSchemaPreview(props.node);
 		if (previewSchema.ok) {
-			return filterSchema(getSchemaForJsonSchema(previewSchema.result), props.search);
+			return filterSchema(getSchemaForJsonSchema(previewSchema.result), search);
 		}
 	}
 
-	return filterSchema(getSchemaForExecutionData(props.data), props.search);
+	return filterSchema(getSchemaForExecutionData(props.data), search);
-});
+}, null);
 
 async function getSchemaPreview(node: INodeUi | null) {
 	if (!node) return createResultError(new Error());
@@ -161,6 +162,7 @@ async function getSchemaPreview(node: INodeUi | null) {
 
 const nodesSchemas = asyncComputed<SchemaNode[]>(async () => {
 	const result: SchemaNode[] = [];
+	const search = props.search;
 
 	for (const node of props.nodes) {
 		const fullNode = workflowsStore.getNodeByName(node.name);
@@ -174,7 +176,7 @@ const nodesSchemas = asyncComputed<SchemaNode[]>(async () => {
 			node,
 		);
 
-		const filteredSchema = filterSchema(schema, props.search);
+		const filteredSchema = filterSchema(schema, search);
 
 		if (!filteredSchema) continue;
 
@@ -267,18 +269,14 @@ const onDragEnd = (el: HTMLElement) => {
 		<div v-if="noSearchResults" class="no-results">
 			<N8nText tag="h3" size="large">{{ i18n.baseText('ndv.search.noNodeMatch.title') }}</N8nText>
 			<N8nText>
-				<i18n-t keypath="ndv.search.noMatch.description" tag="span">
+				<i18n-t keypath="ndv.search.noMatchSchema.description" tag="span">
 					<template #link>
 						<a href="#" @click="emit('clear:search')">
-							{{ i18n.baseText('ndv.search.noMatch.description.link') }}
+							{{ i18n.baseText('ndv.search.noMatchSchema.description.link') }}
 						</a>
 					</template>
 				</i18n-t>
 			</N8nText>
-
-			<N8nText v-if="paneType === 'output'">
-				{{ i18n.baseText('ndv.search.noMatchSchema.description') }}
-			</N8nText>
 		</div>
 
 		<Draggable
@@ -338,6 +336,7 @@ const onDragEnd = (el: HTMLElement) => {
 .full-height {
 	height: 100%;
 }
+
 .run-data-schema {
 	padding: 0;
 }
@@ -348,7 +347,13 @@ const onDragEnd = (el: HTMLElement) => {
 }
 
 .no-results {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	text-align: center;
+	height: 100%;
+	gap: var(--spacing-2xs);
 	padding: var(--spacing-s) var(--spacing-s) var(--spacing-xl) var(--spacing-s);
 }
 

packages/frontend/editor-ui/src/plugins/i18n/locales/en.json

@@ -2209,10 +2209,11 @@
 	"ndv.search.placeholder.input": "Search selected node",
 	"ndv.search.placeholder.input.schema": "Search previous nodes' fields",
 	"ndv.search.noMatch.title": "No matching items",
-	"ndv.search.noNodeMatch.title": "No matching nodes",
+	"ndv.search.noNodeMatch.title": "No matching fields",
 	"ndv.search.noMatch.description": "Try changing or {link} the filter to see more",
-	"ndv.search.noMatchSchema.description": "To search field contents rather than just names, use Table or JSON view",
 	"ndv.search.noMatch.description.link": "clearing",
+	"ndv.search.noMatchSchema.description": "To search field values, switch to table or JSON view. {link}",
+	"ndv.search.noMatchSchema.description.link": "Clear filter",
 	"ndv.search.items": "{matched} of {total} item | {matched} of {total} items",
 	"updatesPanel.andIs": "and is",
 	"updatesPanel.behindTheLatest": "behind the latest and greatest n8n",