[Discover][DocViewer] Fix toggle columns from doc viewer table tab (e…

…lastic#95748)

src/plugins/discover/public/application/components/doc_viewer/doc_viewer_tab.test.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DocViewerTab } from './doc_viewer_tab';
+import { ElasticSearchHit } from '../../doc_views/doc_views_types';
+
+describe('DocViewerTab', () => {
+  test('changing columns triggers an update', () => {
+    const props = {
+      title: 'test',
+      component: jest.fn(),
+      id: 1,
+      render: jest.fn(),
+      renderProps: {
+        hit: {} as ElasticSearchHit,
+        columns: ['test'],
+      },
+    };
+
+    const wrapper = shallow(<DocViewerTab {...props} />);
+
+    const nextProps = {
+      ...props,
+      renderProps: {
+        hit: {} as ElasticSearchHit,
+        columns: ['test2'],
+      },
+    };
+
+    const shouldUpdate = (wrapper!.instance() as DocViewerTab).shouldComponentUpdate(nextProps, {
+      hasError: false,
+      error: '',
+    });
+    expect(shouldUpdate).toBe(true);
+  });
+});

src/plugins/discover/public/application/components/doc_viewer/doc_viewer_tab.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { isEqual } from 'lodash';
 import { I18nProvider } from '@kbn/i18n/react';
 import { DocViewRenderTab } from './doc_viewer_render_tab';
 import { DocViewerError } from './doc_viewer_render_error';
@@ -46,6 +47,7 @@ export class DocViewerTab extends React.Component<Props, State> {
     return (
       nextProps.renderProps.hit._id !== this.props.renderProps.hit._id ||
       nextProps.id !== this.props.id ||
+      !isEqual(nextProps.renderProps.columns, this.props.renderProps.columns) ||
       nextState.hasError
     );
   }