fix: NDV search bugs (#11613)

Co-authored-by: Shireen Missi <94372015+ShireenMissi@users.noreply.github.com>
Co-authored-by: Elias Meire <elias@meire.dev>

cypress/e2e/5-ndv.cy.ts

@@ -795,4 +795,46 @@ describe('NDV', () => {
 			.find('[data-test-id=run-data-schema-item]')
 			.should('contain.text', 'onlyOnItem3');
 	});
+
+	it('should keep search expanded after Test step node run', () => {
+		cy.createFixtureWorkflow('Test_ndv_search.json');
+		workflowPage.actions.zoomToFit();
+		workflowPage.actions.executeWorkflow();
+		workflowPage.actions.openNode('Edit Fields');
+		ndv.getters.outputPanel().should('be.visible');
+		ndv.getters.outputPanel().findChildByTestId('ndv-search').click().type('US');
+		ndv.getters.outputTableRow(1).find('mark').should('have.text', 'US');
+
+		ndv.actions.execute();
+		ndv.getters
+			.outputPanel()
+			.findChildByTestId('ndv-search')
+			.should('be.visible')
+			.should('have.value', 'US');
+	});
+
+	it('should not show items count when seaching in schema view', () => {
+		cy.createFixtureWorkflow('Test_ndv_search.json');
+		workflowPage.actions.zoomToFit();
+		workflowPage.actions.openNode('Edit Fields');
+		ndv.getters.outputPanel().should('be.visible');
+		ndv.actions.execute();
+		ndv.actions.switchOutputMode('Schema');
+		ndv.getters.outputPanel().find('[data-test-id=ndv-search]').click().type('US');
+		ndv.getters.outputPanel().find('[data-test-id=ndv-items-count]').should('not.exist');
+	});
+
+	it('should show additional tooltip when seaching in schema view if no matches', () => {
+		cy.createFixtureWorkflow('Test_ndv_search.json');
+		workflowPage.actions.zoomToFit();
+		workflowPage.actions.openNode('Edit Fields');
+		ndv.getters.outputPanel().should('be.visible');
+		ndv.actions.execute();
+		ndv.actions.switchOutputMode('Schema');
+		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')
+			.should('exist');
+	});
 });

cypress/fixtures/Test_ndv_search.json

@@ -0,0 +1,135 @@
+{
+  "name": "NDV search bugs (introduced by schema view?)",
+  "nodes": [
+    {
+      "parameters": {},
+      "id": "55635c7b-92ee-4d2d-a0c0-baff9ab071da",
+      "name": "When clicking ‘Test workflow’",
+      "type": "n8n-nodes-base.manualTrigger",
+      "position": [
+        800,
+        380
+      ],
+      "typeVersion": 1
+    },
+    {
+      "parameters": {
+        "operation": "getAllPeople"
+      },
+      "id": "4737af43-e49b-4c92-b76f-32605c047114",
+      "name": "Customer Datastore (n8n training)",
+      "type": "n8n-nodes-base.n8nTrainingCustomerDatastore",
+      "typeVersion": 1,
+      "position": [
+        1020,
+        380
+      ]
+    },
+    {
+      "parameters": {
+        "assignments": {
+          "assignments": []
+        },
+        "includeOtherFields": true,
+        "options": {}
+      },
+      "id": "8cc9b374-1856-4f3f-9315-08e6e27840d8",
+      "name": "Edit Fields",
+      "type": "n8n-nodes-base.set",
+      "typeVersion": 3.4,
+      "position": [
+        1240,
+        380
+      ]
+    }
+  ],
+  "pinData": {
+    "Customer Datastore (n8n training)": [
+      {
+        "json": {
+          "id": "23423532",
+          "name": "Jay Gatsby",
+          "email": "gatsby@west-egg.com",
+          "notes": "Keeps asking about a green light??",
+          "country": "US",
+          "created": "1925-04-10"
+        }
+      },
+      {
+        "json": {
+          "id": "23423533",
+          "name": "José Arcadio Buendía",
+          "email": "jab@macondo.co",
+          "notes": "Lots of people named after him. Very confusing",
+          "country": "CO",
+          "created": "1967-05-05"
+        }
+      },
+      {
+        "json": {
+          "id": "23423534",
+          "name": "Max Sendak",
+          "email": "info@in-and-out-of-weeks.org",
+          "notes": "Keeps rolling his terrible eyes",
+          "country": "US",
+          "created": "1963-04-09"
+        }
+      },
+      {
+        "json": {
+          "id": "23423535",
+          "name": "Zaphod Beeblebrox",
+          "email": "captain@heartofgold.com",
+          "notes": "Felt like I was talking to more than one person",
+          "country": null,
+          "created": "1979-10-12"
+        }
+      },
+      {
+        "json": {
+          "id": "23423536",
+          "name": "Edmund Pevensie",
+          "email": "edmund@narnia.gov",
+          "notes": "Passionate sailor",
+          "country": "UK",
+          "created": "1950-10-16"
+        }
+      }
+    ]
+  },
+  "connections": {
+    "When clicking ‘Test workflow’": {
+      "main": [
+        [
+          {
+            "node": "Customer Datastore (n8n training)",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Customer Datastore (n8n training)": {
+      "main": [
+        [
+          {
+            "node": "Edit Fields",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": false,
+  "settings": {
+    "executionOrder": "v1"
+  },
+  "versionId": "20178044-fb64-4443-88dd-e941517520d0",
+  "meta": {
+    "templateCredsSetupCompleted": true,
+    "instanceId": "be251a83c052a9862eeac953816fbb1464f89dfbf79d7ac490a8e336a8cc8bfd"
+  },
+  "id": "aBVnTRON9Y2cSmse",
+  "tags": []
+}

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

@@ -251,6 +251,9 @@ export default defineComponent({
 		isSchemaView(): boolean {
 			return this.displayMode === 'schema';
 		},
+		isSearchInSchemaView(): boolean {
+			return this.displayMode === 'schema' && this.search.length > 0;
+		},
 		displaysMultipleNodes(): boolean {
 			return this.isSchemaView && this.paneType === 'input' && this.nodes.length > 0;
 		},
@@ -1403,6 +1406,7 @@ export default defineComponent({
 			v-else-if="
 				!hasRunError &&
 				hasNodeRun &&
+				!isSearchInSchemaView &&
 				((dataCount > 0 && maxRunIndex === 0) || search) &&
 				!isArtificialRecoveredEventItem &&
 				!displaysMultipleNodes

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

@@ -409,6 +409,7 @@ watch(
 					</template>
 				</i18n-t>
 			</n8n-text>
+			<n8n-text>{{ $locale.baseText('ndv.search.noMatchSchema.description') }}</n8n-text>
 		</div>
 
 		<div v-else :class="$style.schema" data-test-id="run-data-schema-node-schema">

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

@@ -31,7 +31,7 @@ const { debounce } = useDebounce();
 
 const inputRef = ref<HTMLInputElement | null>(null);
 const search = ref(props.modelValue ?? '');
-const opened = ref(false);
+const opened = ref(!!search.value);
 const placeholder = computed(() => {
 	if (props.paneType === 'output') {
 		return locale.baseText('ndv.search.placeholder.output');

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

@@ -2071,6 +2071,7 @@
 	"ndv.search.noMatch.title": "No matching items",
 	"ndv.search.noNodeMatch.title": "No matching nodes",
 	"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.items": "{matched} of {total} item | {matched} of {total} items",
 	"updatesPanel.andIs": "and is",