[7.8] Fix pagination bugs in CCR and Remote Clusters (#65931)

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js

@@ -61,6 +61,50 @@ describe('<AutoFollowPatternList />', () => {
     });
   });
 
+  describe('when there are multiple pages of auto-follow patterns', () => {
+    let find;
+    let component;
+    let table;
+    let actions;
+    let form;
+
+    const autoFollowPatterns = [
+      getAutoFollowPatternMock({ name: 'unique', followPattern: '{{leader_index}}' }),
+    ];
+
+    for (let i = 0; i < 29; i++) {
+      autoFollowPatterns.push(
+        getAutoFollowPatternMock({ name: `${i}`, followPattern: '{{leader_index}}' })
+      );
+    }
+
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadAutoFollowPatternsResponse({ patterns: autoFollowPatterns });
+
+      // Mount the component
+      ({ find, component, table, actions, form } = setup());
+
+      await nextTick(); // Make sure that the http request is fulfilled
+      component.update();
+    });
+
+    test('pagination works', () => {
+      actions.clickPaginationNextButton();
+      const { tableCellsValues } = table.getMetaData('autoFollowPatternListTable');
+
+      // Pagination defaults to 20 auto-follow patterns per page. We loaded 30 auto-follow patterns,
+      // so the second page should have 10.
+      expect(tableCellsValues.length).toBe(10);
+    });
+
+    // Skipped until we can figure out how to get this test to work.
+    test.skip('search works', () => {
+      form.setInputValue(find('autoFollowPatternSearch'), 'unique');
+      const { tableCellsValues } = table.getMetaData('autoFollowPatternListTable');
+      expect(tableCellsValues.length).toBe(1);
+    });
+  });
+
   describe('when there are auto-follow patterns', () => {
     let find;
     let exists;

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js

@@ -4,6 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/**
+ * The below import is required to avoid a console error warn from brace package
+ * console.warn ../node_modules/brace/index.js:3999
+      Could not load worker ReferenceError: Worker is not defined
+          at createWorker (/<path-to-repo>/node_modules/brace/index.js:17992:5)
+ */
+import * as stubWebWorker from '../../../../../test_utils/stub_web_worker'; // eslint-disable-line no-unused-vars
+
 import { getFollowerIndexMock } from './fixtures/follower_index';
 import './mocks';
 import { setupEnvironment, pageHelpers, nextTick, getRandomString } from './helpers';
@@ -59,6 +67,54 @@ describe('<FollowerIndicesList />', () => {
     });
   });
 
+  describe('when there are multiple pages of follower indices', () => {
+    let find;
+    let component;
+    let table;
+    let actions;
+    let form;
+
+    const followerIndices = [
+      {
+        name: 'unique',
+        seeds: [],
+      },
+    ];
+
+    for (let i = 0; i < 29; i++) {
+      followerIndices.push({
+        name: `name${i}`,
+        seeds: [],
+      });
+    }
+
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadFollowerIndicesResponse({ indices: followerIndices });
+
+      // Mount the component
+      ({ find, component, table, actions, form } = setup());
+
+      await nextTick(); // Make sure that the http request is fulfilled
+      component.update();
+    });
+
+    test('pagination works', () => {
+      actions.clickPaginationNextButton();
+      const { tableCellsValues } = table.getMetaData('followerIndexListTable');
+
+      // Pagination defaults to 20 follower indices per page. We loaded 30 follower indices,
+      // so the second page should have 10.
+      expect(tableCellsValues.length).toBe(10);
+    });
+
+    // Skipped until we can figure out how to get this test to work.
+    test.skip('search works', () => {
+      form.setInputValue(find('followerIndexSearch'), 'unique');
+      const { tableCellsValues } = table.getMetaData('followerIndexListTable');
+      expect(tableCellsValues.length).toBe(1);
+    });
+  });
+
   describe('when there are follower indices', () => {
     let find;
     let exists;

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/helpers/auto_follow_pattern_list.helpers.js

@@ -84,6 +84,10 @@ export const setup = props => {
     autoFollowPatternLink.simulate('click');
   };
 
+  const clickPaginationNextButton = () => {
+    testBed.find('autoFollowPatternListTable.pagination-button-next').simulate('click');
+  };
+
   return {
     ...testBed,
     actions: {
@@ -94,6 +98,7 @@ export const setup = props => {
       clickAutoFollowPatternAt,
       getPatternsActionMenuItemText,
       clickPatternsActionMenuItem,
+      clickPaginationNextButton,
     },
   };
 };

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/helpers/follower_index_list.helpers.js

@@ -64,6 +64,10 @@ export const setup = props => {
     followerIndexLink.simulate('click');
   };
 
+  const clickPaginationNextButton = () => {
+    testBed.find('followerIndexListTable.pagination-button-next').simulate('click');
+  };
+
   return {
     ...testBed,
     actions: {
@@ -72,6 +76,7 @@ export const setup = props => {
       clickContextMenuButtonAt,
       openTableRowContextMenuAt,
       clickFollowerIndexAt,
+      clickPaginationNextButton,
     },
   };
 };

x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js

@@ -23,6 +23,30 @@ import {
 import { routing } from '../../../../../services/routing';
 import { trackUiMetric } from '../../../../../services/track_ui_metric';
 
+const getFilteredPatterns = (autoFollowPatterns, queryText) => {
+  if (queryText) {
+    const normalizedSearchText = queryText.toLowerCase();
+
+    return autoFollowPatterns.filter(autoFollowPattern => {
+      const {
+        name,
+        remoteCluster,
+        followIndexPatternPrefix,
+        followIndexPatternSuffix,
+      } = autoFollowPattern;
+
+      const inName = name.toLowerCase().includes(normalizedSearchText);
+      const inRemoteCluster = remoteCluster.toLowerCase().includes(normalizedSearchText);
+      const inPrefix = followIndexPatternPrefix.toLowerCase().includes(normalizedSearchText);
+      const inSuffix = followIndexPatternSuffix.toLowerCase().includes(normalizedSearchText);
+
+      return inName || inRemoteCluster || inPrefix || inSuffix;
+    });
+  }
+
+  return autoFollowPatterns;
+};
+
 export class AutoFollowPatternTable extends PureComponent {
   static propTypes = {
     autoFollowPatterns: PropTypes.array,
@@ -31,41 +55,42 @@ export class AutoFollowPatternTable extends PureComponent {
     resumeAutoFollowPattern: PropTypes.func.isRequired,
   };
 
-  state = {
-    selectedItems: [],
-  };
+  static getDerivedStateFromProps(props, state) {
+    const { autoFollowPatterns } = props;
+    const { prevAutoFollowPatterns, queryText } = state;
 
-  onSearch = ({ query }) => {
-    const { text } = query;
-    const normalizedSearchText = text.toLowerCase();
-    this.setState({
-      queryText: normalizedSearchText,
-    });
-  };
+    // If an auto-follow pattern gets deleted, we need to recreate the cached filtered auto-follow patterns.
+    if (prevAutoFollowPatterns !== autoFollowPatterns) {
+      return {
+        prevAutoFollowPatterns: autoFollowPatterns,
+        filteredAutoFollowPatterns: getFilteredPatterns(autoFollowPatterns, queryText),
+      };
+    }
 
-  getFilteredPatterns = () => {
-    const { autoFollowPatterns } = this.props;
-    const { queryText } = this.state;
+    return null;
+  }
 
-    if (queryText) {
-      return autoFollowPatterns.filter(autoFollowPattern => {
-        const {
-          name,
-          remoteCluster,
-          followIndexPatternPrefix,
-          followIndexPatternSuffix,
-        } = autoFollowPattern;
+  constructor(props) {
+    super(props);
 
-        const inName = name.toLowerCase().includes(queryText);
-        const inRemoteCluster = remoteCluster.toLowerCase().includes(queryText);
-        const inPrefix = followIndexPatternPrefix.toLowerCase().includes(queryText);
-        const inSuffix = followIndexPatternSuffix.toLowerCase().includes(queryText);
+    this.state = {
+      prevAutoFollowPatterns: props.autoFollowPatterns,
+      selectedItems: [],
+      filteredAutoFollowPatterns: props.autoFollowPatterns,
+      queryText: '',
+    };
+  }
 
-        return inName || inRemoteCluster || inPrefix || inSuffix;
-      });
-    }
+  onSearch = ({ query }) => {
+    const { autoFollowPatterns } = this.props;
+    const { text } = query;
 
-    return autoFollowPatterns.slice(0);
+    // We cache the filtered indices instead of calculating them inside render() because
+    // of https://github.com/elastic/eui/issues/3445.
+    this.setState({
+      queryText: text,
+      filteredAutoFollowPatterns: getFilteredPatterns(autoFollowPatterns, text),
+    });
   };
 
   getTableColumns() {
@@ -144,7 +169,7 @@ export class AutoFollowPatternTable extends PureComponent {
             defaultMessage: 'Leader patterns',
           }
         ),
-        render: leaderPatterns => leaderPatterns.join(', '),
+        render: leaderIndexPatterns => leaderIndexPatterns.join(', '),
       },
       {
         field: 'followIndexPatternPrefix',
@@ -278,7 +303,7 @@ export class AutoFollowPatternTable extends PureComponent {
   };
 
   render() {
-    const { selectedItems } = this.state;
+    const { selectedItems, filteredAutoFollowPatterns } = this.state;
 
     const sorting = {
       sort: {
@@ -297,27 +322,28 @@ export class AutoFollowPatternTable extends PureComponent {
         this.setState({ selectedItems: selectedItems.map(({ name }) => name) }),
     };
 
-    const items = this.getFilteredPatterns();
-
     const search = {
       toolsLeft: selectedItems.length ? (
         <AutoFollowPatternActionMenu
           arrowDirection="down"
-          patterns={this.state.selectedItems.map(name => items.find(item => item.name === name))}
+          patterns={this.state.selectedItems.map(name =>
+            filteredAutoFollowPatterns.find(item => item.name === name)
+          )}
         />
       ) : (
         undefined
       ),
       onChange: this.onSearch,
       box: {
         incremental: true,
+        'data-test-subj': 'autoFollowPatternSearch',
       },
     };
 
     return (
       <Fragment>
         <EuiInMemoryTable
-          items={items}
+          items={filteredAutoFollowPatterns}
           itemId="name"
           columns={this.getTableColumns()}
           search={search}

x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/follower_indices_table/follower_indices_table.container.js

@@ -16,7 +16,7 @@ const scope = SECTIONS.FOLLOWER_INDEX;
 const mapStateToProps = state => ({
   apiStatusDelete: getApiStatus(`${scope}-delete`)(state),
 });
-//
+
 const mapDispatchToProps = dispatch => ({
   selectFollowerIndex: name => dispatch(selectDetailFollowerIndex(name)),
 });