Fix broken pagination in Remote Clusters table.

x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/remote_clusters_list.helpers.js

@@ -69,6 +69,10 @@ export const setup = props => {
  remoteClusterLink.simulate('click');
  };
 
+ const clickPaginationNextButton = () => {
+ testBed.find('remoteClusterListTable.pagination-button-next').simulate('click');
+ };
+
  return {
  ...testBed,
  actions: {
@@ -77,6 +81,7 @@ export const setup = props => {
  clickRowActionButtonAt,
  clickConfirmModalDeleteRemoteCluster,
  clickRemoteClusterAt,
+ clickPaginationNextButton,
  },
  };
 };

x-pack/plugins/remote_clusters/__jest__/client_integration/remote_clusters_list.test.js

@@ -69,6 +69,52 @@ describe('<RemoteClusterList />', () => {
  });
  });
 
+ describe('when there are multiple pages of remote clusters', () => {
+ let table;
+ let actions;
+ let waitFor;
+ let form;
+ let component;
+
+ const remoteClusters = [
+ {
+ name: 'unique',
+ seeds: [],
+ },
+ ];
+
+ for (let i = 0; i < 29; i++) {
+ remoteClusters.push({
+ name: `name${i}`,
+ seeds: [],
+ });
+ }
+
+ beforeEach(async () => {
+ httpRequestsMockHelpers.setLoadRemoteClustersResponse(remoteClusters);
+
+ await act(async () => {
+ ({ component, table, actions, waitFor, form } = setup());
+ await waitFor('remoteClusterListTable');
+ });
+ });
+
+ test('pagination works', () => {
+ actions.clickPaginationNextButton();
+ const { tableCellsValues } = table.getMetaData('remoteClusterListTable');
+
+ // Pagination defaults to 20 remote clusters per page. We loaded 30 remote clusters,
+ // so the second page should have 10.
+ expect(tableCellsValues.length).toBe(10);
+ });
+
+ test('search works', () => {
+ form.setInputValue(component.find('input[type="search"]'), 'unique');
+ const { tableCellsValues } = table.getMetaData('remoteClusterListTable');
+ expect(tableCellsValues.length).toBe(1);
+ });
+ });
+
  describe('when there are remote clusters', () => {
  let find;
  let exists;

x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js

@@ -25,6 +25,24 @@ import { PROXY_MODE } from '../../../../../common/constants';
 import { getRouterLinkProps, trackUiMetric, METRIC_TYPE } from '../../../services';
 import { ConnectionStatus, RemoveClusterButtonProvider } from '../components';
 
+const getFilteredClusters = (clusters, queryText) => {
+ if (queryText) {
+ const normalizedSearchText = queryText.toLowerCase();
+
+ return clusters.filter(cluster => {
+ const { name, seeds } = cluster;
+ const normalizedName = name.toLowerCase();
+ if (normalizedName.toLowerCase().includes(normalizedSearchText)) {
+ return true;
+ }
+
+ return seeds.some(seed => seed.includes(normalizedSearchText));
+ });
+ } else {
+ return clusters;
+ }
+};
+
 export class RemoteClusterTable extends Component {
  static propTypes = {
  clusters: PropTypes.array,
@@ -35,46 +53,47 @@ export class RemoteClusterTable extends Component {
  clusters: [],
  };
 
+ static getDerivedStateFromProps(props, state) {
+ const { clusters } = props;
+ const { prevClusters, queryText } = state;
+
+ // If a remote cluster gets deleted, we need to recreate the cached filtered clusters.
+ if (prevClusters !== clusters) {
+ return {
+ prevClusters: clusters,
+ filteredClusters: getFilteredClusters(clusters, queryText),
+ };
+ }
+
+ return null;
+ }
+
  constructor(props) {
  super(props);
 
  this.state = {
- queryText: undefined,
+ prevClusters: props.clusters,
  selectedItems: [],
+ filteredClusters: props.clusters,
+ queryText: '',
  };
  }
 
  onSearch = ({ query }) => {
+ const { clusters } = this.props;
  const { text } = query;
- const normalizedSearchText = text.toLowerCase();
+
+ // We cache the filtered indices instead of calculating them inside render() because
+ // of https://github.com/elastic/eui/issues/3445.
  this.setState({
- queryText: normalizedSearchText,
+ queryText: text,
+ filteredClusters: getFilteredClusters(clusters, text),
  });
  };
 
- getFilteredClusters = () => {
- const { clusters } = this.props;
- const { queryText } = this.state;
-
- if (queryText) {
- return clusters.filter(cluster => {
- const { name, seeds } = cluster;
- const normalizedName = name.toLowerCase();
- if (normalizedName.toLowerCase().includes(queryText)) {
- return true;
- }
-
- return seeds.some(seed => seed.includes(queryText));
- });
- } else {
- return clusters.slice(0);
- }
- };
-
  render() {
  const { openDetailPanel } = this.props;
-
- const { selectedItems } = this.state;
+ const { selectedItems, filteredClusters } = this.state;
 
  const columns = [
  {
@@ -327,8 +346,6 @@ export class RemoteClusterTable extends Component {
  selectable: ({ isConfiguredByNode }) => !isConfiguredByNode,
  };
 
- const filteredClusters = this.getFilteredClusters();
-
  return (
  <EuiInMemoryTable
  items={filteredClusters}