From cfc7a14e18e1adc078579eff3c2eb3598f7096aa Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Wed, 12 Mar 2025 16:24:50 +0100 Subject: [PATCH] fix(editor): Tweak schema view empty state copy and styling (#13819) --- cypress/e2e/5-ndv.cy.ts | 2 +- .../src/components/VirtualSchema.vue | 25 +++++++++++-------- .../src/plugins/i18n/locales/en.json | 5 ++-- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts index 22d5b9f49e..be784cdc46 100644 --- a/cypress/e2e/5-ndv.cy.ts +++ b/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'); }); diff --git a/packages/frontend/editor-ui/src/components/VirtualSchema.vue b/packages/frontend/editor-ui/src/components/VirtualSchema.vue index ea6641f8f1..7ef4020dcf 100644 --- a/packages/frontend/editor-ui/src/components/VirtualSchema.vue +++ b/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(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(async () => { node, ); - const filteredSchema = filterSchema(schema, props.search); + const filteredSchema = filterSchema(schema, search); if (!filteredSchema) continue; @@ -267,18 +269,14 @@ const onDragEnd = (el: HTMLElement) => {
{{ i18n.baseText('ndv.search.noNodeMatch.title') }} - + - - - {{ i18n.baseText('ndv.search.noMatchSchema.description') }} -
{ .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); } diff --git a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json b/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json index 8fea560cc3..abc0060ed6 100644 --- a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json +++ b/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",