Fix pagination bugs in CCR and Remote Clusters

[cjcenizal]

A user reported that the pagination on these apps wasn't working. This is due to elastic/eui#3445. My solution was to calculate the filtered items and cache them on state, instead of deriving them in the render method.

However, this caused a new bug: when you delete an item the table doesn't update, because the original list of items no longer acts as an input to the render method. This required the introduction of a getDerivedStateFromProps method to update the filtered items cache when the list of items changes.

All in all, a fairly complex solution due to the way we implemented EuiInMemoryTable -- and git blame reveals that I was the one who implemented the responsible lines of code! 😅

How to test

You can edit the code to populate the tables to test the pagination behavior, though this doesn't let you delete items. To test that deleting items updates the table, just configure a remote cluster pointed at 127.0.0.1:9300 and you can create follower indices and auto-follow patterns that use it.

// remote_cluster_list.container.js

const clusters = [];
for( var i = 0; i < 30; i++) {
  clusters.push({ name: `${i}`, seeds: [] });
}

const mapStateToProps = state => {
  return {
    clusters,//: getClustersList(state),
    isDetailPanelOpen: isDetailPanelOpen(state),
    isLoading: isLoading(state),
    isCopyingCluster: isEditingCluster(state),
    isRemovingCluster: isRemovingCluster(state),
    clusterLoadError: clusterLoadError(state),
  };
};

// follower_indices_list.container.js

const followerIndices = [];
for( var i = 0; i < 30; i++) {
  followerIndices.push({ name: `${i}`, remoteCluster: 'a', leaderIndex: 'a' });
}

const mapStateToProps = state => ({
  followerIndices,//: getListFollowerIndices(state),
  followerIndexId: getSelectedFollowerIndexId('detail')(state),
  apiStatus: getApiStatus(scope)(state),
  apiError: getApiError(scope)(state),
  isAuthorized: isApiAuthorized(scope)(state),
});

// auto_follow_patterns_list.container.js

const autoFollowPatterns = [];
for( var i = 0; i < 30; i++) {
  autoFollowPatterns.push({ name: `${i}`, remoteCluster: 'a', leaderIndexPatterns: [], followIndexPatternPrefix: 'a', followIndexPatternSuffix: 'a' });
}

const mapStateToProps = state => ({
  autoFollowPatterns,//: getListAutoFollowPatterns(state),
  autoFollowPatternId: getSelectedAutoFollowPatternId('detail')(state),
  apiStatus: getApiStatus(scope)(state),
  apiError: getApiError(scope)(state),
  isAuthorized: isApiAuthorized(scope)(state),
});

Release note

The table pagination buttons in Cross-Cluster Replication and Remote Clusters weren't working, and now they do.

[cjcenizal]

@sebelga There are two other search tests like this one in the other tests files, and they are all failing based on the tableCellsValues.length remaining unchanged at 20. It looks like the input is being found and the change event is simulated, but it's not bubbling back up to the list component (which is responsible for handling it and updating the array of filtered items). Any ideas on what could be causing this?

[sebelga]

Have your tried adding component.update() after form.setInputValue()?

[sebelga]

Is there a reason why you decided to use component.find('input[type="search"]') instead of using a data-test-subj?

[cjcenizal]

Have your tried adding component.update() after form.setInputValue()?

Yup, no change.

Is there a reason why you decided to use component.find('input[type="search"]') instead of using a data-test-subj?

Fixed! I didn't realize this was possible until you suggested it and I looked at the EUI search bar config.

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[cjcenizal]

@sebelga Would you mind reviewing this? I skipped the failing search bar tests. I don't think we need to block this fix on getting those working.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 4d107cd

History

• 💔 Build #46753 failed edbd9c1
• 💔 Build #46751 failed 02c7b2f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[alisonelizabeth]

Nice job tracking down this bug @cjcenizal! LGTM. Tested pagination behavior with mocked responses for CCR and Remote clusters. I also tested the delete behavior with real data for remote clusters only.

[sebelga]

From my notes and finding, we should not add nextTick() in our tests anymore but use jest.useFakeTimers()

[sebelga]

I would probably do this

act(() => {
  form.setInputValue(find('followerIndexSearch'), 'unique');
});
component.update();
...