[Discover][Embeddable] Remove redundant react component rendering when a custom title is set (#148970)

src/plugins/discover/public/embeddable/saved_search_embeddable.test.ts

@@ -36,6 +36,16 @@ jest.mock('react-dom', () => {
 });
 
 const waitOneTick = () => new Promise((resolve) => setTimeout(resolve, 0));
+function getSearchResponse(nrOfHits: number) {
+  const hits = new Array(nrOfHits).map((idx) => ({ id: idx }));
+  return of({
+    rawResponse: {
+      hits: { hits, total: nrOfHits },
+    },
+    isPartial: false,
+    isRunning: false,
+  });
+}
 
 describe('saved search embeddable', () => {
   let mountpoint: HTMLDivElement;
@@ -46,9 +56,10 @@ describe('saved search embeddable', () => {
   let showFieldStatisticsMockValue: boolean = false;
   let viewModeMockValue: VIEW_MODE = VIEW_MODE.DOCUMENT_LEVEL;
 
-  const createEmbeddable = (searchMock?: jest.Mock) => {
+  const createEmbeddable = (searchMock?: jest.Mock, customTitle?: string) => {
     const savedSearchMock = {
       id: 'mock-id',
+      title: 'saved search',
       sort: [['message', 'asc']] as Array<[string, string]>,
       searchSource: createSearchSourceMock({ index: dataViewMock }, undefined, searchMock),
       viewMode: viewModeMockValue,
@@ -73,6 +84,9 @@ describe('saved search embeddable', () => {
       rowHeight: 30,
       rowsPerPage: 50,
     };
+    if (customTitle) {
+      searchInput.title = customTitle;
+    }
 
     executeTriggerActions = jest.fn();
 
@@ -154,13 +168,7 @@ describe('saved search embeddable', () => {
 
   it('should render saved search embeddable when successfully loading data', async () => {
     // mock return data
-    const search = jest.fn().mockReturnValue(
-      of({
-        rawResponse: { hits: { hits: [{ id: 1 }], total: 1 } },
-        isPartial: false,
-        isRunning: false,
-      })
-    );
+    const search = jest.fn().mockReturnValue(getSearchResponse(1));
     const { embeddable } = createEmbeddable(search);
     jest.spyOn(embeddable, 'updateOutput');
 
@@ -186,13 +194,7 @@ describe('saved search embeddable', () => {
 
   it('should render saved search embeddable when empty data is returned', async () => {
     // mock return data
-    const search = jest.fn().mockReturnValue(
-      of({
-        rawResponse: { hits: { hits: [], total: 0 } },
-        isPartial: false,
-        isRunning: false,
-      })
-    );
+    const search = jest.fn().mockReturnValue(getSearchResponse(0));
     const { embeddable } = createEmbeddable(search);
     jest.spyOn(embeddable, 'updateOutput');
 
@@ -262,14 +264,8 @@ describe('saved search embeddable', () => {
     expect(loadedOutput.error).not.toBe(undefined);
   });
 
-  it('a custom title should not start another search which would cause an Abort error', async () => {
-    const search = jest.fn().mockReturnValue(
-      of({
-        rawResponse: { hits: { hits: [], total: 0 } },
-        isPartial: false,
-        isRunning: false,
-      })
-    );
+  it('should not fetch data if only a new input title is set', async () => {
+    const search = jest.fn().mockReturnValue(getSearchResponse(1));
     const { embeddable, searchInput } = createEmbeddable(search);
 
     embeddable.render(mountpoint);
@@ -281,4 +277,43 @@ describe('saved search embeddable', () => {
     await waitOneTick();
     expect(search).toHaveBeenCalledTimes(1);
   });
+  it('should not reload when the input title doesnt change', async () => {
+    const search = jest.fn().mockReturnValue(getSearchResponse(1));
+    const { embeddable } = createEmbeddable(search, 'custom title');
+    embeddable.reload = jest.fn();
+    embeddable.render(mountpoint);
+    // wait for data fetching
+    await waitOneTick();
+    embeddable.updateOutput({ title: 'custom title' });
+    await waitOneTick();
+
+    expect(embeddable.reload).toHaveBeenCalledTimes(0);
+    expect(search).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reload when a different input title is set', async () => {
+    const search = jest.fn().mockReturnValue(getSearchResponse(1));
+    const { embeddable } = createEmbeddable(search, 'custom title');
+    embeddable.reload = jest.fn();
+    embeddable.render(mountpoint);
+
+    await waitOneTick();
+    embeddable.updateOutput({ title: 'custom title changed' });
+    await waitOneTick();
+
+    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);
+    embeddable.reload = jest.fn();
+    embeddable.render(mountpoint);
+    await waitOneTick();
+    embeddable.updateOutput({ title: 'saved search' });
+    await waitOneTick();
+
+    expect(embeddable.reload).toHaveBeenCalledTimes(0);
+    expect(search).toHaveBeenCalledTimes(1);
+  });
 });

src/plugins/discover/public/embeddable/saved_search_embeddable.tsx

@@ -145,7 +145,7 @@ export class SavedSearchEmbeddable
     this.inspectorAdapters = {
       requests: new RequestAdapter(),
     };
-    this.panelTitle = savedSearch.title ?? '';
+    this.panelTitle = this.input.title ? this.input.title : savedSearch.title ?? '';
     this.initializeSearchEmbeddableProps();
 
     this.subscription = this.getUpdated$().subscribe(() => {
@@ -423,7 +423,6 @@ export class SavedSearchEmbeddable
     if (!searchProps || !searchProps.dataView) {
       return false;
     }
-
     return (
       !onlyDisabledFiltersChanged(this.input.filters, this.prevFilters) ||
       !isEqual(this.prevQuery, this.input.query) ||