Fix issue with saved search changes not being preserved on a dashboard (#14678)

* add tests to catch the issue

* use Object.assign instead of the spread operator

since we want it to modify the original object

src/core_plugins/kibana/public/dashboard/dashboard_state_manager.js

@@ -354,13 +354,10 @@ export class DashboardStateManager {
   }
 
   updatePanel(panelIndex, panelAttributes) {
-    const originalPanel = this.getPanels().find((panel) => panel.panelIndex === panelIndex);
-    const updatedPanel = {
-      ...originalPanel,
-      ...panelAttributes,
-    };
+    const panel = this.getPanels().find((panel) => panel.panelIndex === panelIndex);
+    Object.assign(panel, panelAttributes);
     this.saveState();
-    return updatedPanel;
+    return panel;
   }
 
   /**

src/ui/public/doc_table/components/table_header.html

@@ -22,7 +22,10 @@
     data-test-subj="docTableHeaderField"
     scope="col"
   >
-    <span class="table-header-name">
+    <span
+      class="table-header-name"
+      data-test-subj="docTableHeader-{{name}}"
+    >
       {{name | shortDots}}
       <button
         data-test-subj="docTableHeaderFieldSort_{{name}}"
@@ -43,6 +46,7 @@
       tooltip-append-to-body="1"
       tooltip="Remove column"
       aria-label="Remove {{name}} column"
+      data-test-subj="docTableRemoveHeader-{{name}}"
     ></button>
     <button
       class="fa fa-angle-double-left table-header-move"

test/functional/apps/dashboard/_dashboard_state.js

@@ -6,7 +6,7 @@ import {
 } from '../../../../src/core_plugins/kibana/public/dashboard/dashboard_constants';
 
 export default function ({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['dashboard', 'visualize', 'header']);
+  const PageObjects = getPageObjects(['dashboard', 'visualize', 'header', 'discover']);
   const testSubjects = getService('testSubjects');
   const remote = getService('remote');
   const retry = getService('retry');
@@ -65,11 +65,45 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
+    it('Saved search with column changes will not update when the saved object changes', async () => {
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+
+      await PageObjects.dashboard.clickNewDashboard();
+      await PageObjects.dashboard.setTimepickerInDataRange();
+
+      await PageObjects.header.clickDiscover();
+      await PageObjects.discover.clickFieldListItemAdd('bytes');
+      await PageObjects.discover.clickFieldListItemAdd('agent');
+      await PageObjects.discover.saveSearch('my search');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.header.clickToastOK();
+
+      await PageObjects.header.clickDashboard();
+      await PageObjects.dashboard.addSavedSearch('my search');
+      await PageObjects.discover.removeHeaderColumn('bytes');
+      await PageObjects.dashboard.saveDashboard('Has local edits');
+      await PageObjects.header.clickToastOK();
+
+      await PageObjects.header.clickDiscover();
+      await PageObjects.discover.clickFieldListItemAdd('clientip');
+      await PageObjects.discover.saveSearch('my search');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.header.clickToastOK();
+
+      await PageObjects.header.clickDashboard();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+
+      const headers = await PageObjects.discover.getColumnHeaders();
+      expect(headers.length).to.be(2);
+      expect(headers[1]).to.be('agent');
+    });
+
     it('Tile map with no changes will update with visualization changes', async () => {
       await PageObjects.dashboard.gotoDashboardLandingPage();
 
       await PageObjects.dashboard.clickNewDashboard();
       await PageObjects.dashboard.setTimepickerInDataRange();
+
       await PageObjects.dashboard.addVisualizations(['Visualization TileMap']);
       await PageObjects.dashboard.saveDashboard('No local edits');
       await PageObjects.header.clickToastOK();
@@ -96,6 +130,5 @@ export default function ({ getService, getPageObjects }) {
 
       expect(changedTileMapData.length).to.not.equal(tileMapData.length);
     });
-
   });
 }

test/functional/page_objects/discover_page.js

@@ -45,6 +45,11 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       });
     }
 
+    async getColumnHeaders() {
+      const headerElements = await testSubjects.findAll('docTableHeaderField');
+      return await Promise.all(headerElements.map(el => el.getVisibleText()));
+    }
+
     async loadSavedSearch(searchName) {
       await this.clickLoadSavedSearchButton();
       const searchLink = await find.byPartialLinkText(searchName);
@@ -280,6 +285,11 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.common.waitUntilUrlIncludes('filters:!()');
     }
+
+    async removeHeaderColumn(name) {
+      await testSubjects.moveMouseTo(`docTableHeader-${name}`);
+      await testSubjects.click(`docTableRemoveHeader-${name}`);
+    }
   }
 
   return new DiscoverPage();