[Search Embeddable] Add highlighting when searching (#93178) (#93373)

* [Search Embeddable] Add highlighting when searching

* Adding a functional test

src/plugins/discover/public/application/embeddable/search_embeddable.ts

@@ -389,6 +389,11 @@ export class SearchEmbeddable
     if (forceFetch || isFetchRequired) {
       this.filtersSearchSource!.setField('filter', this.input.filters);
       this.filtersSearchSource!.setField('query', this.input.query);
+      if (this.input.query?.query || this.input.filters?.length) {
+        this.filtersSearchSource!.setField('highlightAll', true);
+      } else {
+        this.filtersSearchSource!.removeField('highlightAll');
+      }
 
       this.prevFilters = this.input.filters;
       this.prevQuery = this.input.query;

test/functional/apps/dashboard/index.ts

@@ -57,6 +57,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       loadTestFile(require.resolve('./dashboard_back_button'));
       loadTestFile(require.resolve('./dashboard_error_handling'));
       loadTestFile(require.resolve('./legacy_urls'));
+      loadTestFile(require.resolve('./saved_search_embeddable'));
 
       // Note: This one must be last because it unloads some data for one of its tests!
       // No, this isn't ideal, but loading/unloading takes so much time and these are all bunched

test/functional/apps/dashboard/saved_search_embeddable.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const dashboardAddPanel = getService('dashboardAddPanel');
+  const filterBar = getService('filterBar');
+  const find = getService('find');
+  const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
+  const PageObjects = getPageObjects(['common', 'dashboard', 'header', 'timePicker', 'discover']);
+
+  describe('dashboard saved search embeddable', () => {
+    before(async () => {
+      await esArchiver.loadIfNeeded('logstash_functional');
+      await esArchiver.loadIfNeeded('dashboard/current/data');
+      await esArchiver.loadIfNeeded('dashboard/current/kibana');
+      await kibanaServer.uiSettings.replace({
+        defaultIndex: '0bf35f60-3dc9-11e8-8660-4d65aa086b3c',
+      });
+      await PageObjects.common.navigateToApp('dashboard');
+      await filterBar.ensureFieldEditorModalIsClosed();
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+      await PageObjects.dashboard.clickNewDashboard();
+      await PageObjects.timePicker.setAbsoluteRange(
+        'Sep 22, 2015 @ 00:00:00.000',
+        'Sep 23, 2015 @ 00:00:00.000'
+      );
+    });
+
+    it('highlighting on filtering works', async function () {
+      await dashboardAddPanel.addSavedSearch('Rendering-Test:-saved-search');
+      await filterBar.addFilter('agent', 'is', 'Mozilla');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.dashboard.waitForRenderComplete();
+      const dataTable = await find.byCssSelector(`[data-test-subj="embeddedSavedSearchDocTable"]`);
+      const $ = await dataTable.parseDomContent();
+      const marks = $('mark')
+        .toArray()
+        .map((mark) => $(mark).text());
+      expect(marks.length).to.be(50);
+    });
+
+    it('removing a filter removes highlights', async function () {
+      await filterBar.removeAllFilters();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.dashboard.waitForRenderComplete();
+      const dataTable = await find.byCssSelector(`[data-test-subj="embeddedSavedSearchDocTable"]`);
+      const $ = await dataTable.parseDomContent();
+      const marks = $('mark')
+        .toArray()
+        .map((mark) => $(mark).text());
+      expect(marks.length).to.be(0);
+    });
+  });
+}