COMPASS-1323: Backport COMPASS-1312: Speed up docs tab for array party dataset (#1118) (#1125)

* ✅ Add enzyme test to cover expandAll children

* Make enzyme tests work with the CRUD jQuery dropdown

Feels a little hacky.

* 🎨 Allow EditableDocument state.expandAll to be initally set from props

* ⏩ COMPASS-1312: Speed up docs tab for array party dataset

So Compass doesn't render hundreds of fields for 20 documents,
just the one document that user cares about.

Yields a far better performance trade-off of around 2 seconds until
Documents tab loads and 2 seconds to click and expand all fields,
instead of 20 seconds to load the Documents tab.

Tested on the array_party data set, see COMPASS-1235.

* ✅ Add enzyme test for edit expand 🐛

* 🎨 Switch to component.setState()

* 🐛 Fix expanding individual arrows in editing mode

* 🎨✅ Test for the expanded flag independent of edit mode

Which editing mode does not matter here.

* 🐛 Fix EditableElement expanded state regression for all modes

i.e. both view and edit mode.

Author: pzrq

src/internal-packages/crud/lib/component/editable-document.jsx

@@ -64,7 +64,7 @@ class EditableDocument extends React.Component {
    */
   constructor(props) {
     super(props);
-    this.doc = this.loadDocument(props.doc);
+    this.doc = EditableDocument.loadDocument(props.doc);
     debug('props.doc', this.doc);
 
     this.state = {
@@ -110,7 +110,7 @@ class EditableDocument extends React.Component {
    *
    * @returns {HadronDocument} The hadron document.
    */
-  loadDocument(doc) {
+  static loadDocument(doc) {
     return new HadronDocument(doc);
   }
 
@@ -271,7 +271,7 @@ class EditableDocument extends React.Component {
    * @param {Object} doc - The updated document.
    */
   handleUpdateSuccess(doc) {
-    this.doc = this.loadDocument(doc);
+    this.doc = EditableDocument.loadDocument(doc);
     this.subscribeToDocumentEvents();
     setTimeout(() => {
       this.setState({ editing: false });

src/internal-packages/crud/lib/component/editable-element.jsx

@@ -233,6 +233,10 @@ class EditableElement extends React.Component {
    */
   renderChildren() {
     const components = [];
+    if (!this.state.expanded && !this.props.expandAll) {
+      // COMPASS-1312 Lazily render children when user clicks on expand
+      return components;
+    }
     let index = 0;
     for (const element of this.element.elements) {
       components.push((

test/enzyme/_setup.js

@@ -9,6 +9,7 @@ const exposedProperties = ['window', 'navigator', 'document'];
 
 global.document = jsdom('');
 global.window = document.defaultView;
+global.window.jQuery = require('jquery');
 Object.keys(document.defaultView).forEach((property) => {
   if (typeof global[property] === 'undefined') {
     exposedProperties.push(property);

test/enzyme/crud.editable-document-component.test.js

@@ -0,0 +1,70 @@
+/* eslint no-unused-vars: 0, no-unused-expressions: 0 */
+const app = require('hadron-app');
+const chai = require('chai');
+const chaiEnzyme = require('chai-enzyme');
+const expect = chai.expect;
+const React = require('react');
+const { mount } = require('enzyme');
+const AppRegistry = require('hadron-app-registry');
+
+const EditableDocument = require('../../src/internal-packages/crud/lib/component/editable-document');
+const EditableElement = require('../../src/internal-packages/crud/lib/component/editable-element');
+
+// use chai-enzyme assertions, see https://github.com/producthunt/chai-enzyme
+chai.use(chaiEnzyme());
+
+describe('<EditableDocument />', function() {
+  let appRegistry = app.appRegistry;
+  let appInstance = app.instance;
+  beforeEach(() => {
+    // Mock the AppRegistry with a new one so tests don't complain about
+    // appRegistry.getComponent (i.e. appRegistry being undefined)
+    app.appRegistry = new AppRegistry();
+    app.instance = {build: {version: '3.2.0'}};
+  });
+  afterEach(() => {
+    // Restore properties on the global app, so they don't affect other tests
+    app.appRegistry = appRegistry;
+    app.instance = appInstance;
+  });
+
+  const doc = {a: {b: {c: {d: 1}}}};
+  it('if expandAll is true, renders children', () => {
+    const component = mount(<EditableDocument doc={doc} />);
+    component.setState({
+      expandAll: true
+    });
+    const children = component.find(EditableElement);
+    expect(children).to.be.of.length(4);
+  });
+  context('COMPASS_1306, if expandAll is false', () => {
+    it('if expandAll is false, does not render children', () => {
+      const component = mount(
+        <EditableDocument doc={doc} />
+      );
+      component.setState({
+        expandAll: false
+      });
+      const children = component.find(EditableElement);
+      expect(children).to.be.of.length(1);
+    });
+    it('if expandAll is false but expand true, renders another child', () => {
+      // Work around https://github.com/airbnb/enzyme/issues/361
+      // by mounting the EditableElement rather than the EditableDocument,
+      // note this requires the HadronDocument constructor
+      const document = EditableDocument.loadDocument(doc);
+      for (const element of document.elements) {
+        const component = mount(
+          <EditableElement element={element} />
+        );
+        let children = component.find(EditableElement);
+        expect(children).to.be.of.length(1);
+        component.setState({
+          expanded: true
+        });
+        children = component.find(EditableElement);
+        expect(children).to.be.of.length(2);
+      }
+    });
+  });
+});