[8.7] [Discover] Fix issue where editing a data view causes the UI to become out of sync (#150830) (#151391)

# Backport This will backport the following commits from `main` to `8.7`: - [[Discover] Fix issue where editing a data view causes the UI to become out of sync (#150830)](https://github.com/elastic/kibana/pull/150830)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
2025-04-23 09:19:04 -04:00 · 2023-02-15 20:01:38 -05:00 · 2023-02-15 20:01:38 -05:00 · 38c25b3612
commit 38c25b3612
parent 477834a881
3 changed files with 76 additions and 12 deletions
--- a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx
+++ b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx
@ -186,10 +186,13 @@ export const DiscoverTopNav = ({
  );

  const onEditDataView = async (editedDataView: DataView) => {
-    if (!editedDataView.isPersisted()) {
-      await updateAdHocDataViewId(editedDataView);
+    if (editedDataView.isPersisted()) {
+      // Clear the current data view from the cache and create a new instance
+      // of it, ensuring we have a new object reference to trigger a re-render
+      dataViews.clearInstanceCache(editedDataView.id);
+      stateContainer.actions.setDataView(await dataViews.create(editedDataView.toSpec(), true));
    } else {
-      stateContainer.actions.setDataView(editedDataView);
+      await updateAdHocDataViewId(editedDataView);
    }
    stateContainer.actions.loadDataViewList();
    stateContainer.dataState.fetch();
--- a/test/functional/apps/discover/group2/_data_view_edit.ts
+++ b/test/functional/apps/discover/group2/_data_view_edit.ts
@ -45,9 +45,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
        path: '/my-index-000002',
        method: 'DELETE',
      });
+      await es.transport.request({
+        path: '/my-index-000003',
+        method: 'DELETE',
+      });
    });

-    it('create data view', async function () {
+    it('create ad hoc data view', async function () {
      const initialPattern = 'my-index-';
      await es.transport.request({
        path: '/my-index-000001/_doc',
@ -78,10 +82,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      expect((await PageObjects.discover.getAllFieldNames()).length).to.be(3);
    });

-    it('update data view', async function () {
+    it('create saved data view', async function () {
      const updatedPattern = 'my-index-000001';
      await PageObjects.discover.clickIndexPatternActions();
-      await PageObjects.unifiedSearch.editDataView(updatedPattern);
+      await PageObjects.unifiedSearch.createNewDataView(updatedPattern, false, true);

      await retry.try(async () => {
        expect(await PageObjects.discover.getHitCountInt()).to.be(1);
@ -90,5 +94,53 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      await PageObjects.discover.waitUntilSidebarHasLoaded();
      expect((await PageObjects.discover.getAllFieldNames()).length).to.be(2);
    });
+
+    it('update data view with a different time field', async function () {
+      const updatedPattern = 'my-index-000003';
+      await es.transport.request({
+        path: '/my-index-000003/_doc',
+        method: 'POST',
+        body: {
+          timestamp: new Date('1970-01-01').toISOString(),
+          c: 'GET /search HTTP/1.1 200 1070000',
+          d: 'GET /search HTTP/1.1 200 1070000',
+        },
+      });
+      for (let i = 0; i < 3; i++) {
+        await es.transport.request({
+          path: '/my-index-000003/_doc',
+          method: 'POST',
+          body: {
+            timestamp: new Date().toISOString(),
+            c: 'GET /search HTTP/1.1 200 1070000',
+            d: 'GET /search HTTP/1.1 200 1070000',
+          },
+        });
+      }
+      await PageObjects.discover.clickIndexPatternActions();
+      await PageObjects.unifiedSearch.editDataView(updatedPattern, 'timestamp');
+      await retry.try(async () => {
+        expect(await PageObjects.discover.getHitCountInt()).to.be(3);
+      });
+      await PageObjects.discover.waitUntilSidebarHasLoaded();
+      expect((await PageObjects.discover.getAllFieldNames()).length).to.be(3);
+      expect(await PageObjects.discover.isChartVisible()).to.be(true);
+      expect(await PageObjects.timePicker.timePickerExists()).to.be(true);
+    });
+
+    it('update data view with no time field', async function () {
+      await PageObjects.discover.clickIndexPatternActions();
+      await PageObjects.unifiedSearch.editDataView(
+        undefined,
+        "--- I don't want to use the time filter ---"
+      );
+      await retry.try(async () => {
+        expect(await PageObjects.discover.getHitCountInt()).to.be(4);
+      });
+      await PageObjects.discover.waitUntilSidebarHasLoaded();
+      expect((await PageObjects.discover.getAllFieldNames()).length).to.be(3);
+      expect(await PageObjects.discover.isChartVisible()).to.be(false);
+      expect(await PageObjects.timePicker.timePickerExists()).to.be(false);
+    });
  });
 }
--- a/test/functional/page_objects/unified_search_page.ts
+++ b/test/functional/page_objects/unified_search_page.ts
@ -12,6 +12,7 @@ export class UnifiedSearchPageObject extends FtrService {
  private readonly retry = this.ctx.getService('retry');
  private readonly testSubjects = this.ctx.getService('testSubjects');
  private readonly find = this.ctx.getService('find');
+  private readonly comboBox = this.ctx.getService('comboBox');

  public async switchDataView(
    switchButtonSelector: string,
@ -90,13 +91,21 @@ export class UnifiedSearchPageObject extends FtrService {
    await this.testSubjects.click(adHoc ? 'exploreIndexPatternButton' : 'saveIndexPatternButton');
  }

-  public async editDataView(newPattern: string) {
-    await this.clickCreateNewDataView();
-    await this.testSubjects.setValue('createIndexPatternTitleInput', newPattern, {
-      clearWithKeyboard: true,
-      typeCharByChar: true,
-    });
+  public async editDataView(newPattern?: string, newTimeField?: string) {
+    await this.clickEditDataView();
+    if (newPattern) {
+      await this.testSubjects.setValue('createIndexPatternTitleInput', newPattern, {
+        clearWithKeyboard: true,
+        typeCharByChar: true,
+      });
+    }
+    if (newTimeField) {
+      await this.comboBox.set('timestampField', newTimeField);
+    }
    await this.testSubjects.click('saveIndexPatternButton');
+    if (await this.testSubjects.exists('confirmModalConfirmButton')) {
+      await this.testSubjects.click('confirmModalConfirmButton');
+    }
  }

  public async isAdHocDataView() {