remove mergePanelData from dashboard redux reducers (#21607)

* remove mergePanelData from dashboard redux reducers

* add jest test to verify state can be updated with array with removed items

src/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js

@@ -170,14 +170,15 @@ export class DashboardGrid extends React.Component {
   }
 
   onLayoutChange = (layout) => {
-    const { onPanelsUpdated } = this.props;
+    const { onPanelsUpdated, panels } = this.props;
     const updatedPanels = layout.reduce((updatedPanelsAcc, panelLayout) => {
       updatedPanelsAcc[panelLayout.i] = {
+        ...panels[panelLayout.i],
         panelIndex: panelLayout.i,
         gridData: _.pick(panelLayout, ['x', 'y', 'w', 'h', 'i'])
       };
       return updatedPanelsAcc;
-    }, {});
+    }, []);
     onPanelsUpdated(updatedPanels);
   };
 

src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts

@@ -21,40 +21,69 @@ import { getPanel, getPanelType } from '../../selectors';
 import { store } from '../../store';
 import { updatePanel, updatePanels } from '../actions';
 
-test('UpdatePanel updates a panel', () => {
-  const panelData = {
-    embeddableConfig: {},
-    gridData: {
-      h: 0,
-      id: '0',
-      w: 0,
-      x: 0,
-      y: 0,
-    },
-    id: '123',
-    panelIndex: '1',
-    type: 'mySpecialType',
-    version: '123',
-  };
-  store.dispatch(updatePanels({ '1': panelData }));
-  const newPanelData = {
-    ...panelData,
-    gridData: {
-      h: 1,
-      id: '1',
-      w: 10,
-      x: 1,
-      y: 5,
-    },
-  };
-  store.dispatch(updatePanel(newPanelData));
+const originalPanelData = {
+  embeddableConfig: {},
+  gridData: {
+    h: 0,
+    id: '0',
+    w: 0,
+    x: 0,
+    y: 0,
+  },
+  id: '123',
+  panelIndex: '1',
+  type: 'mySpecialType',
+  version: '123',
+};
 
-  const panel = getPanel(store.getState(), '1');
-  expect(panel.gridData.x).toBe(1);
-  expect(panel.gridData.y).toBe(5);
-  expect(panel.gridData.w).toBe(10);
-  expect(panel.gridData.h).toBe(1);
-  expect(panel.gridData.id).toBe('1');
+beforeEach(() => {
+  // init store
+  store.dispatch(updatePanels({ '1': originalPanelData }));
+});
+
+describe('UpdatePanel', () => {
+  test('updates a panel', () => {
+    const newPanelData = {
+      ...originalPanelData,
+      gridData: {
+        h: 1,
+        id: '1',
+        w: 10,
+        x: 1,
+        y: 5,
+      },
+    };
+    store.dispatch(updatePanel(newPanelData));
+
+    const panel = getPanel(store.getState(), '1');
+    expect(panel.gridData.x).toBe(1);
+    expect(panel.gridData.y).toBe(5);
+    expect(panel.gridData.w).toBe(10);
+    expect(panel.gridData.h).toBe(1);
+    expect(panel.gridData.id).toBe('1');
+  });
+
+  test('should allow updating an array that contains fewer values', () => {
+    const panelData = {
+      ...originalPanelData,
+      embeddableConfig: {
+        columns: ['field1', 'field2', 'field3'],
+      },
+    };
+    store.dispatch(updatePanels({ '1': panelData }));
+    const newPanelData = {
+      embeddableConfig: {
+        columns: ['field2', 'field3'],
+      },
+      panelIndex: '1',
+    };
+    store.dispatch(updatePanel(newPanelData));
+
+    const panel = getPanel(store.getState(), '1');
+    expect(panel.embeddableConfig.columns.length).toBe(2);
+    expect(panel.embeddableConfig.columns[0]).toBe('field2');
+    expect(panel.embeddableConfig.columns[1]).toBe('field3');
+  });
 });
 
 test('getPanelType', () => {

src/core_plugins/kibana/public/dashboard/reducers/panels.ts

@@ -22,16 +22,6 @@ import { Reducer } from 'redux';
 import { PanelActions, PanelActionTypeKeys, SetPanelTitleActionPayload } from '../actions';
 import { PanelId, PanelsMap, PanelState } from '../selectors';
 
-/**
- * @param panel - New panel data (can be partial data) to merge with possibly existing panel data in
- * the panels mapping.
- * @param panels
- * @return a new PanelState which has the merged data.
- */
-function mergePanelData(panel: PanelState, panels: PanelsMap): PanelState {
-  return _.defaultsDeep(panel, panels[panel.panelIndex]);
-}
-
 const deletePanel = (panels: PanelsMap, panelId: PanelId): PanelsMap => {
   const panelsCopy = { ...panels };
   delete panelsCopy[panelId];
@@ -40,13 +30,13 @@ const deletePanel = (panels: PanelsMap, panelId: PanelId): PanelsMap => {
 
 const updatePanel = (panels: PanelsMap, panelState: PanelState): PanelsMap => ({
   ...panels,
-  [panelState.panelIndex]: mergePanelData(panelState, panels),
+  [panelState.panelIndex]: panelState,
 });
 
 const updatePanels = (panels: PanelsMap, updatedPanels: PanelsMap): PanelsMap => {
   const panelsCopy = { ...panels };
   Object.values(updatedPanels).forEach(panel => {
-    panelsCopy[panel.panelIndex] = mergePanelData(panel, panels);
+    panelsCopy[panel.panelIndex] = panel;
   });
   return panelsCopy;
 };