[8.7] [Discover] [Embeddable] Fix aborted request handling in saved search embeddable (#153822) (#154052)

# Backport This will backport the following commits from `main` to `8.7`: - [[Discover] [Embeddable] Fix aborted request handling in saved search embeddable (#153822)](https://github.com/elastic/kibana/pull/153822)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
2025-04-24 01:38:56 -04:00 · 2023-03-30 13:52:22 -04:00 · 2023-03-30 13:52:22 -04:00 · c8754b87d5
commit c8754b87d5
parent 9cc3f37862
3 changed files with 77 additions and 11 deletions
--- a/src/plugins/discover/public/embeddable/saved_search_embeddable.test.ts
+++ b/src/plugins/discover/public/embeddable/saved_search_embeddable.test.ts
@ -16,7 +16,7 @@ import { discoverServiceMock } from '../__mocks__/services';
 import { SavedSearchEmbeddable, SearchEmbeddableConfig } from './saved_search_embeddable';
 import { render } from 'react-dom';
 import { createSearchSourceMock } from '@kbn/data-plugin/public/mocks';
-import { of, throwError } from 'rxjs';
+import { Observable, of, throwError } from 'rxjs';
 import { ReactWrapper } from 'enzyme';
 import { SHOW_FIELD_STATISTICS } from '../../common';
 import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
@ -57,11 +57,12 @@ describe('saved search embeddable', () => {
  let viewModeMockValue: VIEW_MODE = VIEW_MODE.DOCUMENT_LEVEL;

  const createEmbeddable = (searchMock?: jest.Mock, customTitle?: string) => {
+    const searchSource = createSearchSourceMock({ index: dataViewMock }, undefined, searchMock);
    const savedSearchMock = {
      id: 'mock-id',
      title: 'saved search',
      sort: [['message', 'asc']] as Array<[string, string]>,
-      searchSource: createSearchSourceMock({ index: dataViewMock }, undefined, searchMock),
+      searchSource,
      viewMode: viewModeMockValue,
    };

@ -102,7 +103,7 @@ describe('saved search embeddable', () => {
      (input) => (input.lastReloadRequestTime = Date.now())
    );

-    return { embeddable, searchInput };
+    return { embeddable, searchInput, searchSource };
  };

  beforeEach(() => {
@ -304,6 +305,7 @@ describe('saved search embeddable', () => {
    expect(embeddable.reload).toHaveBeenCalledTimes(1);
    expect(search).toHaveBeenCalledTimes(1);
  });
+
  it('should not reload and fetch when a input title matches the saved search title', async () => {
    const search = jest.fn().mockReturnValue(getSearchResponse(1));
    const { embeddable } = createEmbeddable(search);
@ -316,4 +318,30 @@ describe('saved search embeddable', () => {
    expect(embeddable.reload).toHaveBeenCalledTimes(0);
    expect(search).toHaveBeenCalledTimes(1);
  });
+
+  it('should correctly handle aborted requests', async () => {
+    const { embeddable, searchSource } = createEmbeddable();
+    await waitOneTick();
+    const updateOutput = jest.spyOn(embeddable, 'updateOutput');
+    const abortSignals: AbortSignal[] = [];
+    jest.spyOn(searchSource, 'fetch$').mockImplementation(
+      (options) =>
+        new Observable(() => {
+          if (options?.abortSignal) {
+            abortSignals.push(options.abortSignal);
+          }
+          throw new Error('Search failed');
+        })
+    );
+    embeddable.reload();
+    embeddable.reload();
+    await waitOneTick();
+    expect(updateOutput).toHaveBeenCalledTimes(3);
+    expect(abortSignals[0].aborted).toBe(true);
+    expect(abortSignals[1].aborted).toBe(false);
+    embeddable.reload();
+    await waitOneTick();
+    expect(updateOutput).toHaveBeenCalledTimes(5);
+    expect(abortSignals[2].aborted).toBe(false);
+  });
 });
--- a/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx
+++ b/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx
@ -176,10 +176,11 @@ export class SavedSearchEmbeddable

    const { searchSource } = this.savedSearch;

-    const prevAbortController = this.abortController;
    // Abort any in-progress requests
    if (this.abortController) this.abortController.abort();
-    this.abortController = new AbortController();
+
+    const currentAbortController = new AbortController();
+    this.abortController = currentAbortController;

    updateSearchSource(
      searchSource,
@ -253,7 +254,7 @@ export class SavedSearchEmbeddable
      // Request document data
      const { rawResponse: resp } = await lastValueFrom(
        searchSource.fetch$({
-          abortSignal: this.abortController.signal,
+          abortSignal: currentAbortController.signal,
          sessionId: searchSessionId,
          inspector: {
            adapter: this.inspectorAdapters.requests,
@ -280,7 +281,7 @@ export class SavedSearchEmbeddable
      this.searchProps!.totalHitCount = resp.hits.total as number;
      this.searchProps!.isLoading = false;
    } catch (error) {
-      const cancelled = !!prevAbortController?.signal.aborted;
+      const cancelled = !!currentAbortController?.signal.aborted;
      if (!this.destroyed && !cancelled) {
        this.updateOutput({
          ...this.getOutput(),
--- a/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts
+++ b/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts
@ -12,9 +12,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
  const browser = getService('browser');
  const dataGrid = getService('dataGrid');
  const dashboardAddPanel = getService('dashboardAddPanel');
+  const dashboardPanelActions = getService('dashboardPanelActions');
+  const dashboardReplacePanel = getService('dashboardReplacePanel');
  const filterBar = getService('filterBar');
+  const queryBar = getService('queryBar');
  const esArchiver = getService('esArchiver');
  const kibanaServer = getService('kibanaServer');
+  const testSubjects = getService('testSubjects');
  const PageObjects = getPageObjects(['common', 'dashboard', 'header', 'timePicker', 'discover']);

  describe('discover saved search embeddable', () => {
@ -28,6 +32,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      await kibanaServer.uiSettings.replace({
        defaultIndex: '0bf35f60-3dc9-11e8-8660-4d65aa086b3c',
      });
+    });
+
+    after(async () => {
+      await kibanaServer.savedObjects.cleanStandardList();
+    });
+
+    beforeEach(async () => {
      await PageObjects.common.navigateToApp('dashboard');
      await filterBar.ensureFieldEditorModalIsClosed();
      await PageObjects.dashboard.gotoDashboardLandingPage();
@ -38,10 +49,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      );
    });

-    after(async () => {
-      await kibanaServer.savedObjects.cleanStandardList();
-    });
-
    const addSearchEmbeddableToDashboard = async () => {
      await dashboardAddPanel.addSavedSearch('Rendering-Test:-saved-search');
      await PageObjects.header.waitUntilLoadingHasFinished();
@ -79,6 +86,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
    });

    it('should control columns correctly', async () => {
+      await addSearchEmbeddableToDashboard();
      await PageObjects.dashboard.switchToEditMode();

      const cell = await dataGrid.getCellElement(0, 2);
@ -95,6 +103,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
    });

    it('should render duplicate saved search embeddables', async () => {
+      await addSearchEmbeddableToDashboard();
      await addSearchEmbeddableToDashboard();
      const [firstGridCell, secondGridCell] = await dataGrid.getAllCellElements();
      const firstGridCellContent = await firstGridCell.getVisibleText();
@ -102,5 +111,33 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      expect(firstGridCellContent).to.be.equal(secondGridCellContent);
    });
+
+    it('should display an error', async () => {
+      await addSearchEmbeddableToDashboard();
+      await queryBar.setQuery('bytes > 5000');
+      await queryBar.submitQuery();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      expect(await PageObjects.discover.getSavedSearchDocumentCount()).to.be('2572 documents');
+      await queryBar.setQuery('this < is not : a valid > query');
+      await queryBar.submitQuery();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      const embeddableError = await testSubjects.find('embeddableError');
+      const errorMessage = await embeddableError.findByTestSubject('errorMessageMarkdown');
+      expect(await errorMessage.getVisibleText()).to.equal(
+        'Expected AND, OR, end of input, whitespace but "n" found. this < is not : a valid > query ----------^'
+      );
+    });
+
+    it('should replace a panel with a saved search', async () => {
+      await dashboardAddPanel.addVisualization('Rendering Test: datatable');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardPanelActions.replacePanelByTitle('Rendering Test: datatable');
+      await dashboardReplacePanel.replaceEmbeddable('Rendering-Test:-saved-search');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.dashboard.waitForRenderComplete();
+      await testSubjects.missingOrFail('embeddableError');
+      expect(await PageObjects.discover.getSavedSearchDocumentCount()).to.be('4633 documents');
+    });
  });
 }