[8.7] [Lens][Embeddable] Reset removable error list on search/context update (#152489)

test/functional/apps/discover/group1/_discover_histogram.ts

@@ -270,5 +270,27 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         expect(canvasExists).to.be(false);
       });
     });
+
+    it('should recover from broken query search when clearing the query bar', async () => {
+      await PageObjects.common.navigateToApp('discover');
+      await PageObjects.discover.waitUntilSearchingHasFinished();
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+      // Make sure the chart is visible
+      await testSubjects.click('unifiedHistogramChartOptionsToggle');
+      await testSubjects.click('unifiedHistogramChartToggle');
+      await PageObjects.discover.waitUntilSearchingHasFinished();
+      // type an invalid search query, hit refresh
+      await queryBar.setQuery('this is > not valid');
+      await queryBar.submitQuery();
+      // check the error state
+      expect(await testSubjects.exists('embeddable-lens-failure')).to.be(true);
+
+      // now remove the query
+      await queryBar.clearQuery();
+      await queryBar.submitQuery();
+      await PageObjects.discover.waitUntilSearchingHasFinished();
+      // check no error state
+      expect(await PageObjects.discover.isChartVisible()).to.be(true);
+    });
   });
 }

x-pack/plugins/lens/public/embeddable/embeddable.tsx

@@ -504,6 +504,9 @@ export class Embeddable
     this.inputReloadSubscriptions.push(
       shouldFetch$<LensEmbeddableInput>(this.getUpdated$(), () => this.getInput()).subscribe(
         (input) => {
+          // reset removable messages
+          // Dashboard search/context changes are detected here
+          this.additionalUserMessages = {};
           this.onContainerStateChanged(input);
         }
       )
@@ -588,11 +591,10 @@ export class Embeddable
       })
     );
 
-    const mergedSearchContext = this.getMergedSearchContext();
-
     if (!this.savedVis) {
       return userMessages;
     }
+    const mergedSearchContext = this.getMergedSearchContext();
 
     const frameDatasourceAPI: FrameDatasourceAPI = {
       dataViews: {
@@ -644,13 +646,9 @@ export class Embeddable
     }
 
     return () => {
-      const withMessagesRemoved = {
-        ...this.additionalUserMessages,
-      };
-
-      messages.map(({ uniqueId }) => uniqueId).forEach((id) => delete withMessagesRemoved[id]);
-
-      this.additionalUserMessages = withMessagesRemoved;
+      messages.forEach(({ uniqueId }) => {
+        delete this.additionalUserMessages[uniqueId];
+      });
     };
   };
 
@@ -1174,7 +1172,11 @@ export class Embeddable
     if (!this.savedVis || !this.isInitialized || this.isDestroyed) {
       return;
     }
-    this.handleContainerStateChanged(this.input);
+    if (this.handleContainerStateChanged(this.input)) {
+      // reset removable messages
+      // Unified histogram search/context changes are detected here
+      this.additionalUserMessages = {};
+    }
     if (this.domNode) {
       this.render(this.domNode);
     }

x-pack/test/functional/apps/lens/group2/dashboard.ts

@@ -28,6 +28,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const security = getService('security');
   const panelActions = getService('dashboardPanelActions');
   const inspector = getService('inspector');
+  const queryBar = getService('queryBar');
 
   async function clickInChart(x: number, y: number) {
     const el = await elasticChart.getCanvas();
@@ -294,5 +295,28 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.lens.removeDimension('lnsXY_xDimensionPanel');
       await PageObjects.lens.expectSaveAndReturnButtonDisabled();
     });
+
+    it('should recover lens panel in an error state when fixing search query', async () => {
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.clickNewDashboard();
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('lnsXYvis');
+      await find.clickByButtonText('lnsXYvis');
+      await dashboardAddPanel.closeAddPanel();
+      await PageObjects.lens.goToTimeRange();
+      // type an invalid search query, hit refresh
+      await queryBar.setQuery('this is > not valid');
+      await queryBar.submitQuery();
+      // check the error state
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      const errors = await testSubjects.findAll('embeddableStackError');
+      expect(errors.length).to.be(1);
+      // now remove the query
+      await queryBar.setQuery('');
+      await queryBar.submitQuery();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      // check the success state
+      await PageObjects.dashboard.verifyNoRenderErrors();
+    });
   });
 }